How to Build a Backend for NativeScript?

pendahuluan dalam tutorial ini, anda akan belajar cara membangun backend untuk nativescript menggunakan back4app, sebuah platform sumber terbuka yang menyederhanakan pengembangan backend untuk aplikasi mobile kami akan membahas integrasi fitur fitur penting back4app—seperti manajemen database, fungsi cloud code, endpoint api rest dan graphql, otentikasi pengguna, dan kueri waktu nyata (kueri langsung)—untuk membuat backend yang aman dan dapat diskalakan untuk aplikasi nativescript anda anda juga akan menemukan bagaimana back4app secara drastis mengurangi waktu pengaturan dibandingkan dengan konfigurasi server dan database manual kami akan menjelajahi mekanisme keamanan lanjutan, penjadwalan tugas dengan pekerjaan cloud, dan menggunakan webhook untuk terhubung dengan layanan pihak ketiga pada akhir panduan ini, anda akan memiliki backend yang fleksibel yang memanfaatkan nativescript core, yang mendukung solusi mobile lintas platform nativescript dengan fondasi ini, anda akan siap untuk mengintegrasikan logika kustom anda sendiri atau api eksternal sesuai kebutuhan ini akan menjadi langkah besar menuju pengembangan aplikasi nativescript yang siap produksi prasyarat akun back4app dan proyek back4app baru memulai dengan back4app https //www back4app com/docs/get started/new parse app jika anda tidak memiliki akun, anda dapat membuatnya secara gratis ikuti panduan di atas untuk menyiapkan proyek anda lingkungan pengembangan nativescript dasar anda dapat menyiapkannya menggunakan nativescript cli atau alur kerja lain yang diinginkan panduan memulai nativescript https //docs nativescript org/environment setup node js (versi 14 atau lebih tinggi) terinstal anda akan memerlukan node js untuk menginstal paket npm dan menjalankan nativescript cli menginstal node js https //nodejs org/en/download/ keterampilan dalam javascript dan nativescript core dokumentasi resmi nativescript https //docs nativescript org/ jika anda baru mengenal nativescript, tinjau dokumen resmi atau tutorial pemula sebelum memulai pastikan anda memiliki semua prasyarat ini sebelum anda mulai memiliki proyek back4app anda yang disiapkan dan lingkungan nativescript lokal anda yang siap akan membantu anda mengikuti dengan lebih mudah langkah 1 – menyiapkan proyek back4app buat proyek baru langkah pertama dalam membangun backend nativescript anda di back4app adalah membuat proyek baru jika anda belum melakukannya, ikuti langkah langkah ini masuk ke akun back4app anda klik tombol “aplikasi baru” di dasbor back4app anda beri nama aplikasi anda (misalnya, “nativescript backend tutorial”) setelah membuat proyek, anda akan melihatnya terdaftar di dasbor back4app anda proyek ini akan menjadi dasar untuk semua konfigurasi backend yang dibahas dalam tutorial ini sambungkan sdk parse back4app menggunakan platform parse untuk menangani data anda, fungsionalitas waktu nyata, otentikasi pengguna, dan lainnya untuk menghubungkan aplikasi nativescript anda ke back4app, instal paket parse npm dan inisialisasi dengan kredensial yang anda dapatkan dari dasbor back4app anda ambil kunci parse anda di dasbor back4app anda, pergi ke bagian “pengaturan aplikasi” atau “keamanan & kunci” aplikasi anda cari id aplikasi , kunci javascript , dan url server parse (dalam format https //parseapi back4app com ) instal parse sdk npm install parse kemudian, inisialisasi parse dalam file konfigurasi atau file entri utama anda (misalnya, app js ) sebagai contoh, anda mungkin membuat file bernama parseconfig js dalam proyek berbasis nativescript src/parseconfig js import parse from 'parse'; // replace the placeholders with your back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; setiap kali anda perlu mengakses parse di aplikasi nativescript anda, cukup impor file ini dengan menyelesaikan langkah ini, anda telah membangun koneksi yang aman antara frontend nativescript anda dan backend back4app, menyederhanakan operasi data langkah 2 – menyiapkan database menyimpan dan mengambil data dengan proyek back4app anda siap dan parse sdk terintegrasi, anda dapat menyimpan dan mengambil data dari aplikasi nativescript anda berikut adalah contoh menggunakan kelas parse object untuk menyimpan dan mengambil daftar item // example create a task item import parse from ' /parseconfig'; async function createtaskitem(title, iscompleted) { const task = parse object extend('task'); const task = new task(); task set('title', title); task set('iscompleted', iscompleted); try { const savedtask = await task save(); console log('task saved successfully ', savedtask); return savedtask; } catch (error) { console error('error saving task ', error); } } // example query all task items async function fetchtasks() { const task = parse object extend('task'); const query = new parse query(task); try { const results = await query find(); console log('fetched task items ', results); return results; } catch (error) { console error('error fetching tasks ', error); } } anda juga dapat menggunakan rest api back4app jika anda lebih suka panggilan http langsung curl x post \\ h "x parse application id your application id" \\ h "x parse rest api key your rest api key" \\ h "content type application/json" \\ d '{"title" "buy supplies", "iscompleted" false}' \\ https //parseapi back4app com/classes/task atau gunakan graphql mutation { createtask(input { fields { title "clean the house" iscompleted false } }) { task { objectid title iscompleted } } } fleksibilitas ini membuatnya nyaman untuk membangun fitur backend untuk aplikasi nativescript anda melalui parse sdk, rest, atau endpoint api graphql desain skema dan tipe data secara default, parse dapat secara otomatis membuat skema secara langsung, atau anda dapat mendefinisikan kelas dan tipe data anda di dasbor back4app pergi ke bagian “database” di dasbor back4app anda buat kelas baru (misalnya, “task”) dan tambahkan kolom seperti title (string) dan iscompleted (boolean) back4app mendukung tipe data seperti string , number , boolean , object , date , file , pointer , array , relation , geopoint , dan polygon anda dapat membiarkan parse membuat kolom ini saat anda pertama kali menyimpan objek atau mendefinisikannya untuk kontrol lebih menggunakan ai agent back4app juga dapat membantu anda menghasilkan skema secara otomatis buka ai agent di dasbor aplikasi anda deskripsikan model data yang anda inginkan (misalnya, “silakan buat kelas tugas baru untuk aplikasi seluler dengan bidang iscompleted dan duedate ”) biarkan agen membuat skema secara otomatis data relasional jika anda menginginkan data relasional—seperti sebuah kategori objek yang menunjuk ke beberapa tugas —gunakan pointers atau relations di parse // linking a task to a category with a pointer async function createtaskforcategory(categoryobjectid, title) { const task = new parse object('task'); const categorypointer = new parse object('category'); categorypointer id = categoryobjectid; task set('title', title); task set('category', categorypointer); try { return await task save(); } catch (err) { console error('error creating task with category relationship ', err); } } // including the pointer data in a query const query = new parse query('task'); query include('category'); const taskswithcategory = await query find(); pendekatan ini membantu anda mengambil data lengkap untuk sebuah tugas dan kategori terkait dalam satu query query langsung untuk pembaruan waktu nyata, aktifkan live queries di bawah pengaturan server di dasbor back4app pengembang nativescript dapat berlangganan perubahan dalam kelas tertentu perbarui pengaturan parse anda untuk menyertakan url server live query src/parseconfig js import parse from 'parse'; // replace the placeholders with your back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; parse livequeryserverurl = 'wss\ //your subdomain here b4a io'; export default parse; dan kemudian berlangganan ke acara waktu nyata import parse from ' /parseconfig'; async function subscribetotasks(callback) { const query = new parse query('task'); const subscription = await query subscribe(); subscription on('create', (newtask) => { console log('new task created ', newtask); callback('create', newtask); }); subscription on('update', (updatedtask) => { console log('task updated ', updatedtask); callback('update', updatedtask); }); subscription on('delete', (deletedtask) => { console log('task deleted ', deletedtask); callback('delete', deletedtask); }); return subscription; } langganan ini secara otomatis memperbarui ui anda setiap kali sebuah task ditambahkan, dimodifikasi, atau dihapus—sempurna untuk aplikasi nativescript kolaboratif secara langsung langkah 3 – menerapkan keamanan dengan acl dan clp mekanisme keamanan back4app back4app menggabungkan access control lists (acls) dan class level permissions (clps) untuk melindungi data anda model keamanan ini memungkinkan anda mengontrol akses baca/tulis baik di tingkat kelas maupun objek access control lists (acls) sebuah acl menetapkan izin untuk setiap objek misalnya, untuk memberikan akses baca dan tulis hanya kepada pemilik async function createprivatetask(title, owneruser) { const task = parse object extend('task'); const task = new task(); task set('title', title); const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); task setacl(acl); try { return await task save(); } catch (err) { console error('error saving private task ', err); } } ini memastikan hanya pengguna yang ditentukan yang dapat memodifikasi atau membaca objek tersebut izin tingkat kelas (clp) clp menetapkan izin default untuk seluruh kelas buka database di back4app dan pilih kelas yang relevan akses izin tingkat kelas tab sesuaikan izin untuk publik, pengguna terautentikasi, atau peran tertentu sesuai kebutuhan menggabungkan acl dan clp menawarkan model keamanan yang kuat untuk aplikasi nativescript untuk informasi lebih lanjut, lihat pedoman keamanan aplikasi https //www back4app com/docs/security/parse security langkah 4 – menulis dan menerapkan fungsi cloud kode cloud memungkinkan anda menjalankan kode javascript kustom di sisi server, sehingga anda tidak perlu memelihara infrastruktur sendiri ini ideal untuk menambahkan logika lanjutan atau integrasi hanya di server dalam backend nativescript anda cara kerjanya anda biasanya menempatkan cloud code anda (fungsi javascript, pemicu, dan modul npm yang diperlukan) di dalam file main js kemudian anda menyebarkannya ke back4app, dan ia berjalan di lingkungan parse server tanpa konfigurasi server tambahan contoh struktur main js const axios = require('axios'); parse cloud define('fetchexternaldata', async (request) => { const url = request params url; if (!url) { throw new error('url parameter is required'); } const response = await axios get(url); return response data; }); parse cloud beforesave('task', (request) => { const task = request object; if (!task get('title')) { throw new error('task must have a title'); } }); anda dapat menginstal dan menggunakan paket npm seperti axios untuk permintaan http pendekatan ini memungkinkan berbagai integrasi, dari gerbang pembayaran hingga api eksternal, semua di balik keamanan aplikasi back4app anda kasus penggunaan umum logika bisnis perhitungan otomatis, transformasi data, atau pembaruan status validasi data memastikan bidang yang diperlukan ada sebelum menyimpan pemicu menjalankan kode saat data dibuat, diperbarui, atau dihapus integrasi menghubungkan dengan layanan eksternal untuk pembayaran, analitik, atau pesan penegakan keamanan memvalidasi data yang masuk atau peran pengguna sebelum melanjutkan sebarkan fungsi anda berikut adalah fungsi sederhana yang menghitung panjang teks main js parse cloud define('calculatetextlength', async (request) => { const { text } = request params; if (!text) { throw new error('no text provided'); } return { length text length }; }); menyebarkan melalui https //www back4app com/docs/local development/parse cli instal cli curl https //raw\ githubusercontent com/back4app/parse cli/back4app/installer sh | sudo /bin/bash untuk windows, unduh file b4a exe https //github com/back4app/parse cli/releases/download/release 3 3 1/b4a exe dari halaman rilis https //github com/back4app/parse cli/releases }]},{ konfigurasi kunci akun anda b4a configure accountkey sebarkan kode cloud anda b4a deploy menyebarkan melalui dashboard pergi ke cloud code > functions di dasbor anda tempelkan kode fungsi anda ke main js klik deploy memanggil fungsi anda dari aplikasi nativescript anda menggunakan parse sdk import parse from ' /parseconfig'; async function gettextlength(text) { try { const result = await parse cloud run('calculatetextlength', { text }); console log('text length ', result length); } catch (err) { console error('error calling cloud function ', err); } } anda juga dapat memanggilnya menggunakan rest atau graphql curl x post \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ h "content type application/json" \\ d '{"text" "hello back4app"}' \\ https //parseapi back4app com/functions/calculatetextlength mutation { calculatetextlength(input { text "hello graphql" }) { result } } ini memberi anda cara yang fleksibel untuk mengintegrasikan logika sisi server ke dalam aplikasi seluler berbasis nativescript anda langkah 5 – mengonfigurasi autentikasi pengguna autentikasi pengguna di back4app back4app menggunakan kelas parse user untuk menangani autentikasi, yang mencakup hashing kata sandi, token sesi, dan lainnya ini menghilangkan banyak kompleksitas yang terkait dengan pengelolaan akun pengguna mengatur autentikasi pengguna di aplikasi nativescript anda, anda dapat membuat pengguna baru import parse from ' /parseconfig'; async function signupuser(username, password, email) { const user = new parse user(); user set('username', username); user set('password', password); user set('email', email); try { await user signup(); console log('user signed up successfully!'); } catch (error) { console error('error signing up user ', error); } } async function loginuser(username, password) { try { const user = await parse user login(username, password); console log('user logged in ', user); } catch (error) { console error('error logging in user ', error); } } contoh rest mungkin terlihat seperti curl x get \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ g \\ \ data urlencode 'username=alice' \\ \ data urlencode 'password=secret123' \\ https //parseapi back4app com/login manajemen sesi setelah masuk, parse memberikan token sesi kepada pengguna untuk memeriksa pengguna yang saat ini masuk const currentuser = parse user current(); if (currentuser) { console log('logged in user ', currentuser getusername()); } else { console log('no user is logged in'); } keluar sangatlah sederhana await parse user logout(); integrasi login sosial parse juga terintegrasi dengan penyedia oauth seperti google atau facebook pengaturan bervariasi per penyedia, jadi lihat masuk dengan apple dan lainnya https //www back4app com/docs/platform/sign in with apple untuk detailnya misalnya, dengan facebook const facebooklogin = async () => { try { const user = await parse facebookutils login('email'); console log(user existed() ? 'user logged in' 'user signed up and logged in'); } catch (error) { console error('error logging in with facebook ', error); } }; verifikasi email dan reset kata sandi aktifkan fitur ini di dasbor back4app anda navigasikan ke pengaturan email di aplikasi back4app anda aktifkan verifikasi email dan reset kata sandi konfigurasikan template email dan alamat “dari” langkah 6 – menangani penyimpanan file mengunggah dan mengambil berkas back4app mendukung manajemen berkas melalui kelas parse file di nativescript, anda dapat mengunggah gambar atau dokumen dengan cara yang sama import parse from ' /parseconfig'; async function uploadimage(file) { const name = file name; const parsefile = new parse file(name, file); try { const savedfile = await parsefile save(); console log('file saved ', savedfile url()); return savedfile url(); } catch (err) { console error('error uploading file ', err); } } async function createphotoobject(file) { const photo = parse object extend('photo'); const photo = new photo(); const parsefile = new parse file(file name, file); photo set('imagefile', parsefile); return await photo save(); } anda dapat mengambil url berkas dari objek yang disimpan const imagefile = photo get('imagefile'); const imageurl = imagefile url(); // use imageurl in your nativescript ui components keamanan berkas parse server memungkinkan anda mengonfigurasi keamanan unggahan berkas { "fileupload" { "enableforpublic" true, "enableforanonymoususer" true, "enableforauthenticateduser" true } } ini memastikan anda dapat membatasi atau mengizinkan unggahan berkas berdasarkan preferensi keamanan anda langkah 7 – penjadwalan tugas dengan cloud jobs pekerjaan cloud pekerjaan cloud membantu anda mengotomatiskan tugas rutin, seperti menghapus catatan yang sudah tidak relevan atau mengirimkan notifikasi misalnya // main js parse cloud job('cleanupoldtasks', async (request) => { const task = parse object extend('task'); const query = new parse query(task); const now = new date(); const thirty days = 30 24 60 60 1000; const cutoff = new date(now thirty days); query lessthan('createdat', cutoff); try { const oldtasks = await query find({ usemasterkey true }); await parse object destroyall(oldtasks, { usemasterkey true }); return `deleted ${oldtasks length} old tasks `; } catch (err) { throw new error('cleanup error ' + err message); } }); terapkan pekerjaan ini melalui cli atau dasbor di dasbor back4app > pengaturan server > pekerjaan latar belakang , jadwalkan untuk dijalankan setiap hari atau pada interval yang anda pilih langkah 8 – mengintegrasikan webhook webhook memungkinkan anda mengirim permintaan http ke layanan eksternal ketika peristiwa tertentu terjadi di aplikasi anda—seperti catatan baru atau pendaftaran pengguna ini dapat digunakan untuk mengintegrasikan dengan slack, gerbang pembayaran, atau platform analitik pergi ke konfigurasi webhook di dasbor back4app anda dan pilih tambahkan webhook tambahkan url endpoint anda (misalnya, https //your service com/webhook ) konfigurasi pemicu untuk kelas atau peristiwa tertentu anda juga dapat mendefinisikan webhook dalam cloud code atau memanggil api eksternal langsung dalam pemicu seperti beforesave atau aftersave langkah 9 – menjelajahi panel admin back4app aplikasi back4app admin app adalah antarmuka yang berfokus pada model dan ramah pengguna untuk manajemen data ini membantu tim atau pengguna non teknis melakukan operasi crud, membuat dasbor kustom, dan mengelola tugas tingkat perusahaan tanpa menulis kode mengaktifkan aplikasi admin di dasbor aplikasi , klik lainnya > aplikasi admin aktifkan aplikasi admin buat pengguna admin pertama (username/kata sandi) pengaturan ini menambahkan peran b4aadminuser dan kelas terkait ( b4asetting , b4amenuitem , dll ) ke skema anda pilih subdomain, lalu masuk dengan kredensial admin baru anda portal ini memungkinkan manipulasi data dengan cepat tanpa meninggalkan antarmuka grafis—solusi yang hebat untuk berkolaborasi dengan anggota tim yang mungkin tidak akrab dengan pemrograman kesimpulan dengan mengikuti panduan ini, anda telah belajar cara membangun backend untuk nativescript menggunakan back4app dan membuat backend yang aman untuk aplikasi nativescript anda mengonfigurasi database dengan kelas, skema, dan hubungan menerapkan kueri waktu nyata untuk pembaruan langsung mengamankan data anda dengan acl dan clp memperluas fungsionalitas dengan cloud code mengatur otentikasi untuk pendaftaran pengguna, login, dan token sesi mengelola unggahan file dan pengambilan melalui parse file menjadwalkan cloud jobs untuk tugas otomatis dan berkala membuat webhooks untuk integrasi pihak ketiga menggunakan panel admin back4app untuk manajemen data tanpa kode langkah langkah ini membentuk dasar yang kuat untuk membangun aplikasi seluler sumber terbuka dan lintas platform dengan nativescript core lanjutkan menjelajahi fitur fitur lanjutan, masukkan lebih banyak titik akhir api, atau integrasikan logika kustom anda sendiri untuk menyesuaikan backend dengan kebutuhan tepat aplikasi anda langkah selanjutnya skalakan aplikasi nativescript anda dengan mengoptimalkan kinerja, caching, dan aturan keamanan jelajahi manajemen pengguna yang lebih canggih seperti izin berbasis peran periksa dokumentasi resmi back4app untuk panduan mendalam tentang keamanan, log, dan kinerja eksperimen dengan integrasi dunia nyata seperti pembayaran atau alat analitik selamat coding, dan nikmati alur kerja pengembangan yang efisien yang disediakan oleh back4app!