JS Framework
Mengelola Hosting Aplikasi Node.js dengan Back4App

13min
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), untuk memahami bagaimana itu akan bekerja dengan struktur akhir dari file-file:
├── NodeJSWebApp/
│  ├── cloud/
│  │   ├── app.js
│  │   ├── routes.js
│  │   ├── package.json
│  │   ├── views/
│  │   │   ├── head.ejs
│  │   │   ├── index.ejs
│  │   │   ├── reset_password.ejs
│  ├── public/
│  │   ├── images/
│  │   ├── css/
│  │   │   ├── style.css
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) untuk mengunggah file Anda dengan mudah!
Pertama, buat file yang disebut app.js dan package.json di dalam direktori cloud!
Di dalam folder cloud (di terminal Anda), Anda perlu menulis:
$ touch package.json
Sekarang, masukkan modul npm ‘body-parser’ di dalam file package.json:
JSON
1   {
2     "dependencies": {
3       "body-parser": "*"
4     }
5   }
1   {
2     "dependencies": {
3       "body-parser": "*"
4     }
5   }
﻿
Pemecahan Masalah: Tidak perlu menjalankan npm install di dalam folder cloud karena server Back4App akan menginstalnya secara otomatis
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');
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- Kami akan menggunakannya untuk menambahkan konten ke bagian head dari struktur HTML.
﻿index.ejs- Kami akan menggunakannya untuk Mendaftar dan Masuk pengguna.
﻿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
index.ejs
reset_password.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">
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">
﻿
4 - Buat rute untuk merender tampilan
Sekarang, kita perlu mengonfigurasi Rute untuk merender tampilan yang telah dibuat sebelumnya. Rute akan dibangun menggunakan Express.
Node.js
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   });
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 sebagai referensi untuk mengembangkan fungsi kami untuk Registrasi, Masuk, dan Permintaan Kata Sandi.
JS
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  });
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!
SEBELUMNYA
Cara Menggunakan Template Aplikasi Angular di Back4App
BERIKUTNYA
Proyek Ionic: Memulai dari Template Aplikasi Cepat