Advanced Guides
Panduan Teknis Hosting Aplikasi Web di Back4App

26min
Membuat dan menghosting aplikasi web full-stack
Pendahuluan
Meluncurkan aplikasi full-stack bisa menjadi hal yang menakutkan. Anda harus memikirkan tentang hosting frontend Anda, mengonfigurasi/memprovisikan server, dan menghubungkan semuanya. Anda mungkin tidak menyadarinya, tetapi Back4App menyediakan infrastruktur yang optimal untuk semua hal di atas.
Anda dapat dengan mudah menyajikan HTML frontend Anda (termasuk kerangka kerja frontend seperti React dan Vue) dengan Web Hosting Back4App. Cloud Code membuat backend yang sangat baik yang diluncurkan dengan cepat. Dalam panduan ini, kita akan membangun aplikasi web yang lengkap, meskipun sederhana, di Back4App.
Ini adalah tutorial tamu yang ditulis oleh John Considine, pengembang utama di K-Optional.
Tujuan
Meluncurkan aplikasi web full-stack di Back4App
Prasyarat
Untuk menyelesaikan tutorial ini, Anda perlu:

Untuk akrab dengan command-line
﻿Git dan NPM harus diinstal
Memiliki Akun Back4App, dengan alat CLI yang diinstal dan dikonfigurasi, lihat di sini untuk bantuan﻿
Buat proyek baru di dasbor Back4App Anda - lihat di sini untuk bantuan.
Tutorial ini harus diatur ke Versi Parse Server 3.1.x. Lihat langsung di bawah untuk detail lebih lanjut
Proyek ini akan menggunakan versi 3.1 Parse Server yang baru dirilis. Ini berarti Anda perlu memastikan proyek Back4App Anda diatur ke rilis ini - tidak akan berfungsi sebaliknya. Di dasbor proyek Anda, pergi ke Pengaturan Server » Kelola Parse Server (pengaturan) dan pilih 3.1.1 (mungkin dalam Beta).
Untuk informasi lebih lanjut tentang migrasi ke Parse Server 3.1.x, lihat panduan ini.
Lihat panduan ini jika Anda tidak memahami sintaks kode cloud untuk proyek ini.
Latar Belakang Proyek
Kami akan meluncurkan aplikasi pertukaran tiket yang sederhana. Aplikasi ini memungkinkan pengguna untuk mendaftar, masuk, dan memposting tiket yang mereka jual untuk berbagai acara - yang dapat dibuat oleh admin menggunakan Dashboard. Pengguna lain dapat menghubungi mereka melalui email atau nomor telepon mereka, tergantung pada apa yang dipilih oleh pengiklan untuk ditampilkan.
Saya telah meluncurkan aplikasi di sini, menggunakan kode yang sama yang kita eksplorasi dalam panduan ini. Anda bebas untuk membuat akun, memposting tiket, dan melihat seperti apa tampilan aplikasi.
Tujuan dari tutorial ini adalah untuk menunjukkan bagaimana cara meluncurkan aplikasi dengan efisien. Oleh karena itu, daripada membahas setiap baris kode, kita akan mulai dengan basis kode yang hampir selesai dan fokus pada kemudahan penyebaran. Hanya ada satu tempat di mana Anda perlu mengedit kode:
Pada langkah 1 Anda perlu menambahkan pengaturan proyek Anda (ID Aplikasi, Kunci JavaScript, dan URL server).
Namun, Anda dipersilakan untuk mengedit dan memperluas aplikasi ini dengan cara apa pun yang Anda suka.
Struktur Proyek
Sebelum Anda mulai menyiapkan kode, penting untuk memahami struktur file dari proyek ini. Saya akan menggunakan ini sebagai referensi sepanjang panduan ini. Berikut adalah tampilan direktori Anda ketika semuanya selesai:
1   proyek
2   │   .parse.local
3   │   .parse.project
4   │   .gitignore
5   │   README.md
6   └───publik
7   │   │   index.html
8   │   │   login.html
9   │   │   signup.html
10  │   └───css
11  │       │   signin.css
12  │       │   bootstrap.min.css
13  │   └───js
14  │       │   main.js
15  │       │   parse.js
16  │       │   signin.js
17  │       │   signup.js
18  │
19  └───cloud
20      │   main.js
Hal utama yang dapat diambil dari pengaturan ini adalah:
Kode frontend berada di dalam publik. Frontend adalah bagian dari aplikasi yang akan berinteraksi dengan pengguna akhir Anda.
Kode backend berada di dalam cloud. Backend melakukan pekerjaan di balik layar dalam sebuah aplikasi. Ini termasuk menyimpan data ke database dan mengirimkan data.
Frontend memberi tahu backend apa yang harus dilakukan dengan mengirimkan permintaan HTTP. Dalam kasus kami, ini berarti menjalankan fungsi cloud
Harap juga perhatikan kesederhanaan pengaturan ini. Tiga file HTML mewakili tiga halaman dalam aplikasi ini. Seluruh backend kami adalah satu file!
Pada Langkah 2 kita akan melihat sekilas kode frontend- yaitu, direktori publik. Pada Langkah 3 kita beralih ke backend.
1 - Menyiapkan file
Seperti yang disebutkan dalam prasyarat, Anda harus memiliki proyek baru di Back4App yang dibuat DAN alat CLI Anda dikonfigurasi﻿
Sebelum mengunjungi salah satu kode, Anda harus mengunduhnya dan siap. Pada langkah ini, kami melakukan hal itu. Harap dicatat bahwa Anda akan menjalankan beberapa perintah di baris perintah Anda. Saya akan memberikan masing-masing untuk Anda salin dan jalankan. Jika Anda merasa bingung selama langkah ini, jangan khawatir; ini hanya proses yang diperlukan untuk menghubungkan aplikasi Back4App ke proyek yang saya miliki di Git. Tidak penting untuk mengetahui apa yang terjadi.
Pada langkah ini kami:
Inisialisasi direktori lokal dengan proyek Back4App Anda menggunakan CLI
Tarik file proyek contoh ke dalam direktori ini menggunakan .git
Inisialisasi dengan Back4App
Di baris perintah Anda jalankan
1 b4a baru
Anda akan diminta:
1   Apakah Anda ingin membuat aplikasi baru, atau menambahkan Cloud Code ke aplikasi yang ada?
2   Ketik "(n)ew" atau "(e)xisting:"
Pilih “e” untuk yang sudah ada. Kemudian pilih aplikasi yang Anda buat dari daftar.
Selanjutnya, Anda akan diminta untuk memberi nama direktori tempat kode akan diinstal. Anda bisa langsung tekan ‘enter’ jika tidak memiliki preferensi. Untuk proyek ini, saya akan mengasumsikan direktori tersebut bernama “ticketlister”. Akhirnya, ketika ditanya:
1   Nama Direktori:
2   Anda bisa mengatur proyek kosong atau mengunduh Cloud Code yang saat ini diterapkan
3   Silakan ketik "(b)lank" jika Anda ingin mengatur proyek kosong, jika tidak tekan ENTER
Cukup tekan enter (jangan tekan kosong). Ketika perintah ini kembali, Anda bisa cd ke direktori baru. Anda harus melihat dua direktori, satu bernama “cloud” dan yang lainnya bernama “public”.
Seluruh output Anda harus terlihat seperti ini:
1   $ b4a baru
2   Apakah Anda ingin membuat aplikasi baru, atau menambahkan Cloud Code ke aplikasi yang ada?
3   Ketik "(n)ew" atau "(e)xisting": e
4   1: ticketlister
5   Pilih Aplikasi untuk ditambahkan ke konfigurasi: 11
6   Silakan masukkan nama folder tempat kami dapat mengunduh yang terbaru diterapkan
7   Cloud Code untuk aplikasi Anda "ticketlister"
8
9   Nama Direktori: 
10  Anda bisa mengatur proyek kosong atau mengunduh Cloud Code yang saat ini diterapkan
11  Silakan ketik "(b)lank" jika Anda ingin mengatur proyek kosong, jika tidak tekan ENTER: 
12  Berhasil mengonfigurasi email untuk proyek saat ini ke: "[email protected]"
13  Cloud Code Anda telah dibuat di /tmp/ticketlister.
14
15  Ini termasuk fungsi cloud "Hello world", jadi setelah Anda menerapkan,
16  Anda bisa menguji bahwa itu berfungsi, dengan perintah curl yang dicetak.
17
18  Selanjutnya, Anda mungkin ingin menerapkan kode ini dengan:
19
20	  cd /tmp/ticketlister
21	  b4a deploy
22
23  Setelah diterapkan Anda bisa menguji bahwa itu berfungsi dengan menjalankan:
24  curl -X POST \
25   -H "X-Parse-Application-Id: Ivy4QAJQuAjDhpqQ2D3MCR4jlrCvDcVVH6yom1kk" \
26   -H "X-Parse-REST-API-Key: yLgPHNEnt0jnzWy9BYt6ZCWHqmsWRyvCfsmqrvuS" \
27   -H "Content-Type: application/json" \
28   -d "{}" \
29   https://parseapi.back4app.com/functions/hello
30
31  $ cd ticketlister 
32  $ ls
33  cloud  public
Menyinkronkan aplikasi dengan file proyek
Selain folder cloud dan publik, akan ada dua file di direktori Anda:
.parse.local
.parse.project
Ini menyimpan data yang berkaitan dengan proyek Back4App. Segala sesuatu yang lain harus ditimpa dengan file proyek yang ada dari repo. Berikut adalah cara termudah untuk melakukan ini:
1   cd ticketlister
2   git init
3   git remote add origin https://github.com/back4app/back4app-ticketlister
4   git fetch origin
5   git checkout --force -b  master --track origin/master
Jika semuanya berjalan dengan baik, Anda sekarang harus memiliki file-file berikut:
$ ls -R
README.md         cloud             index.js          package-lock.json package.json      public

./cloud:
main.js

./public:
css         index.html  js          login.html  signup.html

./public/css:
bootstrap.min.css signin.css

./public/js:
main.js   parse.js  signin.js signup.js
Jangan khawatir- itu adalah bagian yang sulit! Sekarang kita bisa fokus pada proyek.
2 - Frontend
Sebagai pengingat, kode frontend untuk aplikasi ini berada di direktori public. Untuk menjaga agar semuanya relatif sederhana, saya memilih untuk tidak menggunakan kerangka kerja frontend seperti React, Angular, atau Vue. Dengan cara ini, tidak ada ketergantungan eksternal atau build.
Proyek ini menggunakan HTML5 Web Components. Ini didukung secara native di browser. Mereka membantu mengenkapsulasi fungsionalitas dari berbagai bagian antarmuka pengguna. Mereka memungkinkan pengembang untuk mendeklarasikan elemen HTML baru (pikirkan ‘<p>’). Jika tidak, mereka hanya menggunakan JavaScript biasa.
Di dalam public/js direktori, ada 4 file JavaScript:
$ ls public/js
# main.js   parse.js  signin.js signup.js
main.js adalah kode yang dimuat oleh halaman utama, index.html. Halaman ini adalah tempat pengguna mencantumkan tiket dll.
signup.js adalah kode yang dimuat oleh halaman pendaftaran, signup.html
signin.js adalah kode yang dimuat oleh halaman masuk, login.html
parse.js adalah file sederhana yang digunakan oleh semua halaman. Ini membuat koneksi ke backend. Ini adalah satu-satunya file yang perlu Anda edit dan proyek tidak akan berfungsi kecuali Anda melakukannya!
Menambahkan kredensial Back4App Anda
Pertama, Anda perlu mengambil Application ID dan JavaScript Key dari proyek Back4App Anda. Setelah masuk ke Back4App, pilih proyek Anda. Kemudian klik App Settings di sisi kiri, dan pilih Security & Keys.
﻿
Anda harus melihat beberapa kunci yang ditampilkan. Ambil Application ID dan JavaScript Key dan simpan dengan baik.
Akhirnya, buka public/js/parse.js dan tempatkan masing-masing string di tempat yang tepat. Ingat untuk memastikan serverURL adalah https://parseapi.back4app.com.
JS
1   // PART 1: Put your APP ID, JS Key, and SERVER URL
2   Parse.initialize(
3     '', // YOUR APP ID
4     '' // YOUR Javascript  KEY
5   );
6   // YOUR SERVER URL
7   Parse.serverURL = 'https://parseapi.back4app.com';
1   // PART 1: Put your APP ID, JS Key, and SERVER URL
2   Parse.initialize(
3     '', // YOUR APP ID
4     '' // YOUR Javascript  KEY
5   );
6   // YOUR SERVER URL
7   Parse.serverURL = 'https://parseapi.back4app.com';
﻿
Aplikasi sekarang dapat berkomunikasi dengan server!
 Sebuah penyelaman dangkal ke dalam kode.
Meskipun semua kode dalam proyek ini berada di luar cakupan panduan ini, saya mendorong Anda untuk menjelajahi setiap file. Tidak ada yang terlalu kompleks, dan saya ingin mengambil satu menit cepat untuk memberikan pandangan dari ketinggian 1.000 kaki.
Proyek ini menggunakan HTML5 Web Components untuk mengenkapsulasi setiap bagian logis dari antarmuka.
Markup penting dalam file HTML berada di dalam HTML <template> tag. Inilah cara kita menggambarkan tata letak
“Fungsionalitas” aplikasi terjadi di file JavaScript. Di sinilah aplikasi menjelaskan apa yang harus dilakukan ketika formulir dikirim, atau tombol diklik, dll.
Sebagai contoh, ambil komponen login. Markup (public/login.html) terlihat seperti ini:
HTML
1   <template id="signin-template">
2     <style>
3       @import 'css/signin.css';
4       @import 'css/bootstrap.min.css';
5     </style>
6     <div class="signin-wrapper text-center">
7       <form class="auth-form">
8         <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
9         <label for="inputEmail" class="sr-only">Email address</label>
10        <input
11          type="email"
12          id="inputEmail"
13          class="form-control"
14          placeholder="Email address"
15          required=""
16          autofocus=""
17        />
18        <label for="inputPassword" class="sr-only">Password</label>
19        <input
20          type="password"
21          id="inputPassword"
22          class="form-control"
23          placeholder="Password"
24          required=""
25        />
26        <button class="btn btn-lg btn-primary btn-block" type="submit">
27          Sign in
28        </button>
29        <div class="text-center"><a href="/signup.html"> Sign Up</a></div>
30      </form>
31    </div>
32  </template>
33  <!-- This tag below simply tells the browser to render the component we declared above -->
34  <login-form></login-form>
1   <template id="signin-template">
2     <style>
3       @import 'css/signin.css';
4       @import 'css/bootstrap.min.css';
5     </style>
6     <div class="signin-wrapper text-center">
7       <form class="auth-form">
8         <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
9         <label for="inputEmail" class="sr-only">Email address</label>
10        <input
11          type="email"
12          id="inputEmail"
13          class="form-control"
14          placeholder="Email address"
15          required=""
16          autofocus=""
17        />
18        <label for="inputPassword" class="sr-only">Password</label>
19        <input
20          type="password"
21          id="inputPassword"
22          class="form-control"
23          placeholder="Password"
24          required=""
25        />
26        <button class="btn btn-lg btn-primary btn-block" type="submit">
27          Sign in
28        </button>
29        <div class="text-center"><a href="/signup.html"> Sign Up</a></div>
30      </form>
31    </div>
32  </template>
33  <!-- This tag below simply tells the browser to render the component we declared above -->
34  <login-form></login-form>
﻿
Dan fungsionalitas muncul di file JavaScript (public/signin.js)
JS
1   // Code above ^
2       // When the code is ready, listen for the form to be submitted. When it is,
3       //  call the 'onSubmit' method
4       connectedCallback() {
5         const form = this.shadowRoot.querySelector('form');
6         form.addEventListener('submit', this.onSubmit.bind(this), false);
7       }
8     // Obtain the email and password from the markup inputs
9       onSubmit(e) {
10        e.preventDefault();
11        //   Get inputs
12        const email = this.shadowRoot.querySelector('#inputEmail').value;
13        const password = this.shadowRoot.querySelector('#inputPassword').value;
14        this.login(email, password);
15      }
16    // Send a request to the backend, attempting to login. If the login
17    //  is successful, go to the index.html page. Otherwise, give the user
18    // an alert explaining what went wrong
19      login(email, password) {
20        // Add login method here
21        Parse.User.logIn(email, password)
22          .then(user => {
23            window.location.href = 'index.html';
24          })
25          .catch(e => {
26            alert(e.message);
27          });
28      }
29      // More code below
30
1   // Code above ^
2       // When the code is ready, listen for the form to be submitted. When it is,
3       //  call the 'onSubmit' method
4       connectedCallback() {
5         const form = this.shadowRoot.querySelector('form');
6         form.addEventListener('submit', this.onSubmit.bind(this), false);
7       }
8     // Obtain the email and password from the markup inputs
9       onSubmit(e) {
10        e.preventDefault();
11        //   Get inputs
12        const email = this.shadowRoot.querySelector('#inputEmail').value;
13        const password = this.shadowRoot.querySelector('#inputPassword').value;
14        this.login(email, password);
15      }
16    // Send a request to the backend, attempting to login. If the login
17    //  is successful, go to the index.html page. Otherwise, give the user
18    // an alert explaining what went wrong
19      login(email, password) {
20        // Add login method here
21        Parse.User.logIn(email, password)
22          .then(user => {
23            window.location.href = 'index.html';
24          })
25          .catch(e => {
26            alert(e.message);
27          });
28      }
29      // More code below
30
﻿
Seluruh aplikasi mengambil struktur umum ini. Perhatikan saat front end berbicara dengan backend seperti ini: (public/js/main.js).
Pada langkah berikutnya, kita akan melihat bagaimana fungsi-fungsi ini dideklarasikan.
3 - Backend
Seluruh backend akan berada di cloud/main.js, file fungsi Cloud Code. Ini terdiri dari jumlah kode yang sangat sederhana, membuktikan seberapa banyak yang bisa kita capai dengan sangat sedikit menggunakan Back4App.
Bagian dari aplikasi (membuat acara yang dapat dicantumkan tiket di bawahnya) akan menggunakan dasbor Back4App. Fungsionalitas luar biasa ini datang dengan proyek kami, jadi tidak perlu menciptakan kembali roda!
Sekali lagi, memeriksa setiap baris kode di luar cakupan kami. Namun, kita akan mengambil pandangan luas lainnya tentang bagaimana kode ini bekerja.
﻿
Anda mendeklarasikan Cloud Functions di dalam cloud/main.js file. Fungsi-fungsi ini dapat dipanggil dari front end (lihat Langkah 2). Untuk informasi lebih lanjut tentang Cloud Functions, lihat dokumentasi.
Selanjutnya, Cloud Functions ini dijalankan di Parse Server. panduan ini membahas beberapa sintaks yang digunakan, jadi mungkin berguna untuk melihatnya.
Lebih spesifik, fungsi yang kami definisikan adalah:
‘user:signup’ - Kode untuk menangani alur pendaftaran pengguna
‘tickets:list’ - Kode untuk mengambil semua tiket yang terdaftar
‘tickets:create’ - Kode untuk membuat tiket baru
‘events:list’ - Kode untuk mencantumkan semua acara
Dan satu catatan kode terakhir: Saya menambahkan metode sederhana di bagian atas file:
JS
1   const requireAuth = user => {
2     if (!user) throw new Error('User must be authenticated!');
3   };
1   const requireAuth = user => {
2     if (!user) throw new Error('User must be authenticated!');
3   };
﻿
Beberapa Fungsi Cloud memerlukan pengguna untuk masuk. Dengan memanggil fungsi ini dengan properti pengguna dari permintaan, kami memastikan bahwa tidak ada yang dapat membuat permintaan yang tidak sah.
Saya sangat mendorong Anda untuk melihat sekilas sisa fungsi untuk melihat bagaimana cara kerjanya. Sekarang Anda tahu apa yang mereka lakukan, kita bisa melakukan deploy!
4 - Melakukan Deploy
Kami telah merapikan semua kode, dan sekarang aplikasi dapat dideploy ke Back4App. Perintah berikut akan mengunggah semua file publik dan cloud:
b4a deploy
Hosting situs web lokal
Untuk mendapatkan domain publik untuk melihat aplikasi web yang Anda unggah, Anda perlu mengaktifkan Web Hosting dari dasbor Back4App Anda.
Pertama, buka “Pengaturan Server” di sisi kiri dasbor:
﻿
Selanjutnya, klik tautan “Pengaturan” di bawah “Web Hosting dan Live Query”
﻿
Dan akhirnya, centang “Aktifkan Hosting Back4App”. Anda perlu memilih subdomain yang unik; saya sudah mengklaim ticketlister untuk proyek ini jadi pilihlah sesuatu yang berbeda. Secara opsional, Anda dapat mengonfigurasi domain yang Anda miliki untuk “mengarah” ke domain back4app ini. Saya melakukan ini untuk http://ticketlister.koptional.com dan pengaturan saya terlihat seperti ini: 
﻿
Harap perhatikan teks di bawah “Custom Domain”, jika Anda berencana untuk meluncurkan situs web Anda.
Jika Anda menyelesaikan langkah ini dengan benar, Anda dapat pergi ke domain Anda dan menggunakan aplikasi tersebut. Jika Anda tidak memiliki domain kustom, cukup buka http://<YOUR_SUBDOMAIN>.back4app.io, di mana YOUR_SUBDOMAIN adalah nama yang baru saja Anda pilih.
5 - Penggunaan dan Dasbor
Untuk mulai mencantumkan tiket, Anda harus membuat acara dari dasbor admin di Back4App.
Pergi ke browser data, dan buat kelas ‘Event’. Tambahkan kolom ‘name’ (sebuah string), dan ‘when’ (sebuah tanggal). Kemudian Anda dapat menambahkan acara secara langsung. Ingat untuk mengisi semua kolom. Itu harus terlihat seperti ini:
﻿
﻿
﻿
Sekarang, di aplikasi web Anda, Anda dapat masuk dan mencantumkan tiket dengan acara tersebut.
﻿
Fungsi admin ini yang disertakan dengan Parse / Back4App adalah jalan pintas lain yang mengurangi beban kerja Anda.
Kesimpulan
Membuat aplikasi web dengan backend adalah sesuatu yang sering memakan waktu berminggu-minggu dan berbulan-bulan. Kami memanfaatkan infrastruktur kuat Back4App dan Parse SDK untuk meluncurkan satu dengan lebih cepat. Menggunakan pendekatan ini untuk aplikasi apa pun memungkinkan Anda membangun hal-hal luar biasa tanpa membuang waktu.
Diperbarui 27 Jan 2025
Apakah halaman ini membantu Anda?
SEBELUMNYA
Cara Tingkatkan Kode Cloud dengan Parse Server 3.1
BERIKUTNYA
Integrasi Pengujian Parse Cloud Code untuk Developer