Panduan Teknis Hosting Aplikasi Web di Back4App

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 https //github com/considine , pengembang utama di k optional https //koptional com/ 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 http //ticketlister koptional com/ , 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 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 https //www back4app com/docs/advanced guides/web application hosting#prerequisites , anda harus memiliki proyek baru di back4app yang dibuat dan https //blog back4app com/2017/01/20/cli parse server/ 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 anda akan diminta 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 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 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 https //github com/back4app/back4app ticketlister berikut adalah cara termudah untuk melakukan ini jika semuanya berjalan dengan baik, anda sekarang harus memiliki file file berikut 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 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 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> 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 1 2 6 7 8 please sign in 9 email address 10 18 password 19 26 27 sign in 28 29 sign up 30 31 32 33 34 dan fungsionalitas muncul di file javascript ( public/signin 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 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 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 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 https //www back4app com/docs/advanced guides/my%20website 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