Mengelola Hosting Aplikasi Node.js dengan Back4App

hosting aplikasi web node js anda di server back4app pendahuluan tutorial ini menjelaskan bagaimana anda dapat mengatur subdomain dan dengan mudah menghosting halaman statis setelah menyelesaikan panduan langkah demi langkah ini, anda akan dapat menggunakan aplikasi node js untuk mendaftar dan masuk pengguna prasyarat untuk menyelesaikan tutorial ini, anda akan membutuhkan jika anda ingin menguji aplikasi ini secara lokal, anda perlu menginstal node js di lingkungan lokal anda anda dapat mengikuti sebuah aplikasi yang dibuat dengan back4app lihat back4app command line yang dikonfigurasi dengan proyek ikuti pertama tama, mari kita bicarakan tentang aplikasi sederhana baru kita! kami akan menjelaskan contoh tentang penggunaan web hosting dengan node js! mari kita bayangkan bahwa kita perlu membangun sistem masuk, daftar, dan permintaan kata sandi dari pengguna yang termasuk dalam dasbor back4app anda kita akan dapat menggunakan bootstrap, file statis (css dan gambar) dan menggunakan express dalam proyek lihat aplikasi langsung di sini nodeapplication back4app io anda dapat mengkloning aplikasi lengkap ini di template kode aplikasi di platform back4app di sini pertama, selesaikan pengaturan menggunakan antarmuka baris perintah ( lihat prasyarat https //www back4app com/docs/js framework/node web server#content prerequisites ), untuk memahami bagaimana itu akan bekerja dengan struktur akhir dari file file 1 aktifkan nama subdomain anda di back4app aktifkan fitur web hosting anda, silakan ikuti langkah langkah yang tersedia dalam panduan di bawah ini mengaktifkan web hosting dan live query anda 2 buat dan unggah file sebelum memulai langkah ini, kami sarankan anda menggunakan command line tool ( lihat prasyarat https //www back4app com/docs/js framework/node web server#content prerequisites ) untuk mengunggah file anda dengan mudah! pertama, buat file yang disebut app js app js dan package json package json di dalam direktori cloud! instal modul di back4app di dalam folder cloud (di terminal anda), anda perlu menulis sekarang, masukkan modul npm ‘body parser’ di dalam file package json 1 { 2 "dependencies" { 3 "body parser" " " 4 } 5 } pemecahan masalah tidak perlu menjalankan npm install npm install di dalam folder cloud karena server back4app akan menginstalnya secara otomatis app js 1 // memerlukan modul 2 var bodyparser = require("body parser"); 3 4 // mengatur direktori tampilan 5 app set('views', dirname + '/views'); 6 app set('view engine', 'ejs'); 7 8 // mengatur body parser untuk aplikasi anda 9 app use(bodyparser json()); 10 app use(bodyparser urlencoded({extended true})); 11 12 // memerlukan file routes js 13 14 require(' /routes'); 3 buat tampilan untuk aplikasi anda kami akan menyediakan file template ejs untuk membuat template aplikasi, anda dapat mengubahnya kapan saja di pihak anda ) kembali ke terminal di dalam direktori cloud, perlu untuk membuat folder views dan file ejs berikut head ejs head ejs kami akan menggunakannya untuk menambahkan konten ke bagian head dari struktur html index ejs index ejs kami akan menggunakannya untuk mendaftar dan masuk pengguna reset password ejs reset password ejs kami akan menggunakannya untuk permintaan reset kata sandi pengguna petunjuk kami akan membangun tampilan menggunakan bootstrap, klik di sini untuk membaca lebih lanjut tentangnya anda dapat menambahkan konten ke tampilan anda masing masing anda dapat menggunakan template di bawah ini tanpa kesulitan head ejs 1 \<title>back4app node js application\</title> 2 \<meta charset="utf 8"> 3 \<meta name="viewport" content="width=device width, initial scale=1"> 4 \<link rel="shortcut icon" type="image/png" href="/favicon png"/> 5 \<! bootstrap css > 6 \<link rel="stylesheet" href="https //maxcdn bootstrapcdn com/bootstrap/3 3 7/css/bootstrap min css" integrity="sha384 bvyiisifek1dgmjrakycuhahrg32omucww7on3rydg4va+pmstsz/k68vbdejh4u" crossorigin="anonymous"> 7 8 \<! jquery > 9 \<script src="https //cdnjs cloudflare com/ajax/libs/jquery/3 3 1/jquery min js">\</script> 10 11 \<! bootstrap js > 12 \<script src="https //maxcdn bootstrapcdn com/bootstrap/3 3 7/js/bootstrap min js" integrity="sha384 tc5iqib027qvyjsmfhjomalkfuwvxzxupncja7l2mcwnipg9mgcd8wgnicpd7txa" crossorigin="anonymous">\</script> 13 14 \<! stylesheet pages > 15 \<link rel="stylesheet" type="text/css" href="/css/style css"> index ejs 1 \<!doctype html> 2 \<html> 3 \<head> 4 <% include head ejs %> 5 \</head> 6 \<body> 7 \<section id="header"> 8 \<div class="container"> 9 \<div class="row"> 10 \<div class="col sm 6"> 11 \<div class="box settings box register"> 12 \<div class="wrap login100"> 13 \<form class="validate form" method="post" action="/users/register"> 14 \<h2 class="title screen"> 15 register a new account 16 \</h2> 17 \<div class="form group"> 18 \<input type="text" name="usernameregister" placeholder="username" class="form control" value="<%= infouser usernameregister %>"> 19 \</div> 20 \<div class="form group"> 21 \<input type="text" name="emailregister" placeholder="email" class="form control" value="<%= infouser emailregister %>"> 22 \</div> 23 \<div class="form group"> 24 \<input type="password" name="passwordregister" placeholder="password" class="form control" value="<%= infouser passwordregister %>"> 25 \</div> 26 <% if (registermessage != 'undefined' ? registermessage '' ) { %> 27 \<div class="alert alert <%= typestatus %>" role="alert"> 28 \<p><%= registermessage %>\</p> 29 \</div> 30 <% } %> 31 \<div class="form group"> 32 \<button class="btn login btn"> 33 register 34 \</button> 35 \</div> 36 \</form> 37 \</div> 38 \</div> 39 \</div> 40 \<div class="col sm 6"> 41 \<div class="box settings box login"> 42 \<div class="wrap login100"> 43 \<form class="validate form" method="post" action="/users/login"> 44 \<h2 class="title screen"> 45 access your account 46 \</h2> 47 \<div class="form group"> 48 \<input type="text" name="usernamelogin" placeholder="username" class="form control" value="<%= infouser usernamelogin %>"> 49 \</div> 50 51 \<div class="form group"> 52 \<input type="password" name="passwordlogin" placeholder="password" class="form control" value="<%= infouser passwordlogin %>"> 53 \</div> 54 <% if (loginmessage != 'undefined' ? loginmessage '' ) { %> 55 \<div class="alert alert <%= typestatus %>" role="alert"> 56 \<p><%= loginmessage %>\</p> 57 \</div> 58 <% } %> 59 \<div class="form group"> 60 \<button class="btn login btn"> 61 login 62 \</button> 63 \</div> 64 65 \<div class="text forgot"> 66 \<a href="/users/forgot password"> 67 forgot password? click here to retrive your access! 68 \</a> 69 \</div> 70 \</form> 71 \</div> 72 \</div> 73 \</div> 74 \</div> 75 \</div> 76 \</section> 77 \</body> 78 \</html> reset password ejs 1 \<!doctype html> 2 \<html> 3 \<head> 4 <% include head ejs %> 5 \</head> 6 \<body> 7 \<section id="header"> 8 \<div class="container"> 9 \<div class="row"> 10 \<div class="col sm offset 3 col sm 6" align="center"> 11 \<div class="box settings box password"> 12 \<div class="wrap login100"> 13 \<form class="validate form" method="post" action="/users/forgot password"> 14 \<h2 class="title screen"> 15 retrieve your access 16 \</h2> 17 \<p>insert your email address\</p> 18 \<div class="form group"> 19 \<input type="text" name="email" placeholder="email" class="form control" value="<%= infouser email %>"> 20 \</div> 21 <% if (resetpass != 'undefined' ? resetpass '' ) { %> 22 \<div class="alert alert <%= typestatus %>" role="alert"> 23 \<p><%= resetpass %>\</p> 24 \</div> 25 <% } %> 26 \<div class="form group"> 27 \<button class="btn login btn"> 28 reset password 29 \</button> 30 \</div> 31 \</form> 32 \</div> 33 \</div> 34 \</div> 35 \</div> 36 \</div> 37 \</section> 38 \</body> 39 \</html> 4 buat rute untuk merender tampilan sekarang, kita perlu mengonfigurasi rute untuk merender tampilan yang telah dibuat sebelumnya rute akan dibangun menggunakan express https //expressjs com/ 1 // index 2 app get('/', (req, res) => { 3 res render('index', {loginmessage '', registermessage '', typestatus '', infouser ''}); 4 }); 5 // request password 6 app get('/users/forgot password', (req, res) => { 7 res render('reset password', { resetpass '', typestatus '', infouser ''}); 8 }); petunjuk seperti yang anda lihat, kami mengonfigurasi variabel sebagai parameter, yang akan digunakan untuk menampilkan peringatan di halaman 5 buat rute untuk menyimpan informasi ke database anda kami akan menggunakan panduan javascript parse server https //docs parseplatform org/js/guide/ sebagai referensi untuk mengembangkan fungsi kami untuk registrasi, masuk, dan permintaan kata sandi 1 // request the log in passing the email and password 2 app post('/users/login', async(req, res) => { 3 let infouser = req body; 4 5 try{ 6 let user = await parse user login(infouser usernamelogin, infouser passwordlogin) 7 res render('index', { loginmessage "user logged!", registermessage '', typestatus "success", infouser infouser }); 8 } catch (error){ 9 res render('index', { loginmessage error message, registermessage '', typestatus "danger", infouser infouser}); 10 } 11 }); 12 13 // register the user passing the username, password and email 14 app post('/users/register', async(req, res) => { 15 let infouser = req body; 16 let user = new parse user(); 17 18 user set("username", infouser usernameregister); 19 user set("password", infouser passwordregister); 20 user set("email", infouser emailregister); 21 22 try{ 23 await user signup(); 24 res render('index', { loginmessage '', registermessage "user created!", typestatus "success", infouser infouser}); 25 } catch (error) { 26 res render('index', { loginmessage '', registermessage error message, typestatus "danger", infouser infouser}); 27 } 28 }); 29 30 // request the password reset passing the email 31 app post('/users/forgot password', function(req, res) { 32 let infouser = req body; 33 try{ 34 await parse user requestpasswordreset(infouser email); 35 res render('reset password', { resetpass "check your email!", typestatus "success", infouser infouser}); 36 } catch (e){ 37 res render('reset password', { resetpass error message, typestatus "danger", infouser infouser}); 38 } 39 }); 6 hampir selesai! berkas statis di folder publik belum selesai! di folder publik, anda dapat menyisipkan berkas statis seperti css dan gambar untuk diperlukan di tampilan ) ketika anda menambahkan berkas ke css dan gambar, anda dapat menyediakan stylesheet yang berbeda untuk situs web yang anda buat! 7 selesai! hingga saat ini, anda telah belajar dengan baik bagaimana cara membuat aplikasi node js menggunakan kode cloud klik pada tautan ini untuk mengakses proyek lengkap di back4app kapan saja dengan langkah langkah yang dijelaskan di atas, anda akan dapat bekerja dengan web hosting saat menggunakan aplikasi node js!