Membangun Layar Login pada Proyek Ionic dengan Back4App

cara menambahkan layar login ke proyek kerangka kerja ionic anda pendahuluan di bagian ini anda akan belajar cara membuat halaman, menerapkan pendaftaran, masuk, dan keluar dari aplikasi ionic anda inilah tampilannya prasyarat untuk menyelesaikan panduan cepat ini, anda memerlukan visual studio code https //code visualstudio com/download (atau ide web apa pun yang anda suka) ionic framework https //ionicframework com/getting started/ sebuah aplikasi yang dibuat di back4app ikuti tutorial aplikasi parse baru https //www back4app com/docs/get started/new parse app untuk belajar cara membuat aplikasi parse di back4app kapan saja, anda dapat mengakses proyek ionic lengkap yang dibangun dengan tutorial ini di repositori github https //github com/back4app/ionic email verification 1 instal sdk parse mengingat anda memiliki proyek ionic yang ada, hal pertama yang perlu anda lakukan adalah menginstal sdk parse anda dapat melakukannya dengan menjalankan $ npm install parse 2 siapkan kredensial aplikasi buka \<font color="#2166ae">app component ts\</font> , impor \<font color="#2166ae">parse\</font> dan inisialisasi koneksinya ke server back4app parse app component html 1 parse initialize("your app id", "your js key"); 2 parse serverurl = 'https //parseapi back4app com/'; jika anda tidak tahu cara menemukan kunci anda, lihat tutorial ionic pertama mulai dari template https //www back4app com/docs/js framework/ionic/ionic template#setup 3 buat halaman login sekarang, mari kita buat halaman login kita untungnya, ionic melakukan semuanya untuk kita yang perlu kita lakukan adalah menjalankan perintah berikut $ ionic generate page login dalam tampilan halaman ini, kita perlu menambahkan input untuk \<font color="#2166ae">username\</font> dan \<font color="#2166ae">password\</font> dan dua tombol, satu untuk mendaftar dan satu lagi untuk masuk login html 1 insert your credentials 2 3 4 username 5 6 7 8 9 password 10 11 12 13 14 15 sign up 16 17 18 19 sign in 20 21 mari kita implementasikan sekarang metode \<font color="#2166ae">signin()\</font> dan \<font color="#2166ae">signup()\</font> yang dirujuk dalam \<font color="#2166ae">login\</font> tampilan kita login ts 1 signup() { 2 parse user signup(this username, this password) then((resp) => { 3 console log('logged in successfully', resp); 4 5 // clears up the form 6 this username = ''; 7 this password = ''; 8 9 this toastctrl create({ 10 message 'account created successfully', 11 duration 2000 12 }) present(); 13 }, err => { 14 console log('error signing in', err); 15 16 this toastctrl create({ 17 message err message, 18 duration 2000 19 }) present(); 20 }); 21 } pelajari lebih lanjut tentang \<font color="#2166ae">signup()\</font> di dokumentasi parse https //parseplatform org/parse sdk js/api/v1 11 1/parse user html# signup login ts 1 signin() { 2 parse user login(this username, this password) then((resp) => { 3 console log('logged in successfully', resp); 4 5 // if you app has tabs, set root to tabspage 6 this navctrl setroot('homepage') 7 }, err => { 8 console log('error logging in', err); 9 10 this toastctrl create({ 11 message err message, 12 duration 2000 13 }) present(); 14 }); 15 } pelajari lebih lanjut tentang \<font color="#2166ae">parse user login()\</font> di dokumentasi parse https //parseplatform org/parse sdk js/api/v1 11 1/parse user html# signup inilah bagaimana seharusnya tampil 4 implementasi keluar mari kita pindah ke halaman utama kita (atau halaman yang akan diarahkan pengguna setelah masuk) dan implementasikan keluar pertama, silakan buka home html dan tambahkan tombol untuk melakukannya login html 1 you are logged in! 2 3 4 5 log out 6 7 sekarang, mari kita implementasikan \<font color="#2166ae">logout()\</font> metode dan juga tambahkan sebuah \<font color="#2166ae">toast\</font> komponen jika permintaan gagal home ts 1 logout() { 2 parse user logout() then((resp) => { 3 console log('logged out successfully', resp); 4 5 this navctrl setroot('loginpage'); 6 }, err => { 7 console log('error logging out', err); 8 9 this toastctrl create({ 10 message 'error logging out', 11 duration 2000 12 }) present(); 13 }) 14 } pelajari lebih lanjut tentang \<font color="#2166ae">parse user logout()\</font> di dokumentasi parse https //parseplatform org/parse sdk js/api/v1 11 1/parse user html# signup seharusnya terlihat seperti ini 5 atur halaman utama fitur penting dari \<font color="#2166ae">parse\</font> adalah bahwa ia mengingat apakah pengguna sudah masuk atau tidak di perangkat ini berarti bahwa bahkan jika pengguna menutup aplikasi, anda masih dapat memulihkan sesi mereka saat aplikasi dibuka dengan itu, kita dapat menentukan apakah halaman awal aplikasi kita akan menjadi \<font color="#2166ae">loginpage\</font> atau \<font color="#2166ae">homepage\</font> untuk melakukannya, kita hanya perlu memanggil \<font color="#2166ae">currentasync()\</font> ini akan mengembalikan pengguna yang masuk atau \<font color="#2166ae">null\</font> app component ts 1 parse user currentasync() then(user => { 2 console log('logged user', user); 3 4 this rootpage = user ? 'homepage' 'loginpage'; 5 }, err => { 6 console log('error getting logged user'); 7 8 this rootpage = 'loginpage'; 9 }) pelajari lebih lanjut tentang \<font color="#2166ae">parse user currentasync()\</font> di dokumentasi parse https //parseplatform org/parse sdk js/api/v1 11 1/parse user html# signup akhirnya, semuanya sudah diatur! pada titik ini, cukup jalankan \<font color="#2166ae">ionic serve\</font> dan anda akan memiliki fitur masuk, daftar, dan keluar yang juga mengingat pengguna yang masuk sampai dia keluar