Cara Membuat Aplikasi ToDo List dengan React Native, Expo dan Back4App

React Native adalah salah satu framework yang paling populer digunakan dalam pengembangan mobile. Framework ini dibuat oleh Facebook berdasarkan Javascript. React Native dapat digunakan untuk membuat aplikasi untuk iOS atau Android dengan kemampuan platform native.

Expo adalah alat yang membantu Anda mempercepat waktu pengembangan dan pengujian.

Artikel ini menjelaskan bagaimana Anda dapat mengintegrasikan aplikasi React Native dengan Back4App. Setelah menyelesaikan tutorial langkah demi langkah ini, Anda akan membuat sebuah proyek untuk memanipulasi To-Do List.

Apakah ini pertama kalinya Anda menggunakan Back4App? Jika iya, Anda perlu melakukan Sign-Up.

Pemanasan

Mengkonfigurasi Expo

Menurut petunjuk React Native, Anda perlu menginstal Node 10+ dan Expo CLI menggunakan perintah berikut:

npm install -g expo-cli

Untuk lebih jelasnya: https://facebook.github.io/react-native/docs/getting-started.html

Mengunduh proyek pemula

Untuk mengunduh proyek template ToDoListApp, jalankan perintah berikut di terminal Anda:

wget "https://github.com/templates-back4app/react-native-todoapp/archive/template.zip" -O template.zip; unzip template.zip; rm template.zip && cd react-native-todoapp && npm install

Catatan: Ingatlah bahwa Anda perlu mengganti kunci aplikasi Back4App Anda. Buka file constans/Keys.js dan tempelkan ke kunci berikut.

Diagram Aplikasi Anda

Jika Anda mengikuti instruksi yang ditautkan di atas, Anda akan melihat diagram alir ini:

Memulai Aplikasi Daftar Tugas

Langkah 1 – Buat Halaman Login

Untuk memasukkan pengguna ke aplikasi kita, gunakan metode kami untuk memberi mereka akses ke akun mereka:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

onLogin = async() => {
  let  
     username =(this.state.username).trim(),
     password =(this.state.password).trim();

  if (username === "" || password === "" ) {
    this.setState(() => ({ nameError: `Isikolom dengan benar.` }));
   } else {
    try {
       await Parse.User.logIn(username.toString(), password.toString());
      // this.submitAndClear();
      this.props.navigation.navigate('HomeStack');       
     } catch (error) { 
      this.setState(() => ({ nameError: error.message }));
      return (error)
     }
   }
 }

Periksa kode lengkapnya di sini: https://github.com/templates-back4app/react-native-todoapp/blob/login-page/screens/LogInScreen.js

Langkah 2 – Halaman Pendaftaran

Setelah Anda menyelesaikan langkah sebelumnya, Anda harus meminta pengguna untuk mendaftar ke aplikasi kita. Kode berikut mengilustrasikan pendaftaran yang umum dilakukan:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

onSignUp = async() => {

  let  
     username = this.state.username,
     email = this.state.email,
     password = this.state.password;

  if (username.trim() === "" || username === tidak terdefinisi || email.trim() === "" || email === undefined || password.trim() === "" || kata sandi === tidak terdefinisi ) {
    this.setState(() => ({ nameError: `Isikolom dengan benar.`}));  
   } else {
    try {
       Parse.User.logOut();
      let user = new Parse.User();
       user.set("nama pengguna", nama pengguna);
       user.set("email", email);
       user.set("password", password);
      const hasil = await user.signUp();
      
       AsyncStorage.setItem('sessionToken', result.getSessionToken());
       AsyncStorage.setItem('username', result.getUsername());

      this.submitAndClear();

      this.navigateToPage('HomeStack');           
     } catch (error) {
       console.log(error)
        this.setState(() => ({ nameError: error.message }));
     }
   }
 }

Lihat kode lengkapnya di sini: https://github.com/templates-back4app/react-native-todoapp/blob/signup-page/screens/SignUpScreen.js

Langkah 3 – Menyiapkan Halaman Reset Kata Sandi

Bayangkan selama kita memiliki alur autentikasi, pengguna mungkin lupa kata sandi mereka. Parse Server memungkinkan pengaturan ulang kata sandi pengguna dengan aman. Konfigurasikan sebuah fungsi yang meminta alamat email pengguna:

1
2
3
4
5
6
7
8
9

resetPassword = () => {
   Parse.User.requestPasswordReset(this.state.email)
   .then(() => {
    this._alert('Sukses', 'Sebuah email telah dikirim ke alamat Anda.', 'Masuk', 'LogInStack');
    this.submitAndClear();
   }).catch((error) => {
    this._alert('Error', error.message, 'Log In', 'LogInStack');
   });
 }

Periksa kode lengkapnya di sini: https://github.com/templates-back4app/react-native-todoapp/blob/resetpassword-page/screens/RestorePasswordScreen.js

Langkah 4 – Halaman Daftar Tugas

Konfigurasikan Tata Letak dan fungsi untuk membuat, membaca, memperbarui, dan menghapus item dari daftar.

Langkah 4.1 – Membuat item

Gunakan fungsi simpan untuk menyimpan item di Parse Cloud. Hal ini memungkinkan untuk membuat objek baru di aplikasi Anda. Lihat Peramban Data di aplikasi Anda di Parse:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

createItem = () => {
  let item = this.state.item;

  if (item === "" || item === undefined){
    this.setState(() => ({ nameError: `Isifield dengan benar.` }));
   } else {
    const Todo = Parse.Object.extend("Todo");
    const todo = new Todo();

     todo.set("task", this.state.item);
     todo.set("userId", );
    
     todo.save().then(object => {
      this.readAllItems();
      this.setState({item:''})
     }).catch(error=> {alert(error)})
   }
 }

Langkah 4.2 – Membaca semua objek

Fungsi ini sering dipanggil karena digunakan untuk memulai layar, memperbarui, atau menghapus objek. Data dapat diambil dengan menggunakan kode berikut:

1
2
3
4
5
6
7
8

readAllItems = async() => {
  const idUser = await Parse.User.currentAsync();
  const query = new Parse.Query("Todo");
   query.exists("tugas");
   query.equalTo('userId', idUser);
  const resultQuery = await query.find();
  this.setState({hasil:resultQuery});
 }

Langkah 4.3 – Memperbarui item

Setelah sebuah objek dibuat, seharusnya ada cara untuk memperbaruinya di masa mendatang. Caranya mudah, Anda hanya perlu mengambil item tersebut dan memanggil metode penyimpanan dengan menggunakan kode ini:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

updateItem = () => {
 const query = new Parse.Query("Todo");
   query.get(this.state.idObject).then(object => {
     object.set("task", this.state.updateValueDialog);
     object.save().then(objUpdate => {
      this.setState({updateValueDialog:'', dialogVisible: false})
      this.readAllItems();
     });
   });
}

Langkah 4.4 – Menghapus item

Bekerja dengan daftar item mengharuskan pengguna untuk menghapus objek mereka sendiri.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

deleteIten = async() => {
  const query = new Parse.Query("Todo");
  const object = await query.get(this.state.idObject);
  try{
     object.destroy();
    this.getAllData();
   } catch (e){
     peringatan (e)
   }
 }

Periksa kode lengkapnya di sini: https://github.com/templates-back4app/react-native-todoapp/blob/home-page/screens/HomeScreen.js

Kata-kata terakhir

Itu saja untuk aplikasi daftar tugas! Sebagai catatan, Anda mungkin ingin mengubah tampilan layar Anda. Untuk alasan ini, disarankan untuk memeriksa repo lengkapnya dengan mengikuti tautan di bawah ini:

https://github.com/templates-back4app/react-native-todoapp

Jika Anda memerlukan bantuan atau ada fungsi yang tidak berfungsi, silakan hubungi tim kami melalui chat!