Wie man eine ToDo-Listen-App mit React Native, Expo und Back4App erstellt

React Native ist eines der beliebtesten Frameworks für die mobile Entwicklung. Es wurde von Facebook auf Basis von Javascript entwickelt. Es kann verwendet werden, um Apps für iOS oder Android mit nativen Plattformfunktionen zu erstellen.

Expo ist ein Tool, das Ihnen hilft, die Entwicklungszeit und das Testen zu beschleunigen.

Dieser Artikel erklärt, wie Sie eine React Native App mit Back4App integrieren können. Nach diesem Schritt-für-Schritt-Tutorial haben Sie ein Projekt zur Bearbeitung einer To-Do-Liste erstellt.

Ist es Ihr erstes Mal, dass Sie Back4App verwenden? Wenn ja, dann müssen Sie sich anmelden.

Aufwärmen

Expokonfigurieren

Gemäß der React Native-Anleitung müssen Sie Node 10+ und Expo CLI mit dem folgenden Befehl installieren:

npm install -g expo-cli

Für weitere Details: https://facebook.github.io/react-native/docs/getting-started.html

Laden Sie das Starterprojekt herunter

Um das ToDoListApp-Vorlagenprojekt herunterzuladen, führen Sie die folgenden Befehle in Ihrem Terminal aus:

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

Hinweis: Denken Sie daran, dass Sie die Schlüssel Ihrer Back4App-App ersetzen müssen. Öffnen Sie die Datei constans/Keys.js und fügen Sie die folgenden Schlüssel ein.

Diagramm Ihrer App

Wenn Sie die oben verlinkten Anweisungen befolgt haben, sollten Sie dieses Flussdiagramm sehen:

Starten Sie die ToDo List App

Schritt 1 – Erstellen der Anmeldeseite

Um Benutzer bei unserer Anwendung anzumelden, verwenden Sie unsere Methode, um ihnen Zugriff auf ihr Konto zu geben:

 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 (benutzername === "" || passwort === "" ) {
    this.setState(() => ({ nameError: `FüllenSie die Felder korrekt aus.` }));
   } else {
    try {
       await Parse.User.logIn(username.toString(), password.toString());
      // this.submitAndClear();
      this.props.navigation.navigate('HomeStack');       
     } catch (Fehler) { 
      this.setState(() => ({ nameError: error.message }));
      return (error)
     }
   }
 }

Sehen Sie sich den vollständigen Code hier an: https://github.com/templates-back4app/react-native-todoapp/blob/login-page/screens/LogInScreen.js

Schritt 2 – Anmeldeseite

Nachdem Sie den vorherigen Schritt abgeschlossen haben, sollten Sie die Benutzer auffordern, sich bei unserer Anwendung anzumelden. Der folgende Code veranschaulicht eine typische Anmeldung:

 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 (benutzername.trim() === "" || username === undefined || email.trim() === "" || email === undefiniert || password.trim() === "" || passwort === undefiniert ) {
    this.setState(() => ({ nameError: `FüllenSie die Felder korrekt aus.`}));  
   } else {
    try {
       Parse.User.logOut();
      let user = new Parse.User();
       user.set("benutzername", benutzername);
       user.set("E-Mail", E-Mail);
       user.set("Passwort", Passwort);
      const result = await user.signUp();
      
       AsyncStorage.setItem('sessionToken', result.getSessionToken());
       AsyncStorage.setItem('username', result.getUsername());

      this.submitAndClear();

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

Prüfen Sie den vollständigen Code hier: https://github.com/templates-back4app/react-native-todoapp/blob/signup-page/screens/SignUpScreen.js

Schritt 3 – Seite zum Zurücksetzen des Passworts einrichten

Stellen Sie sich vor, dass die Benutzer ihr Passwort vergessen, solange wir einen Authentifizierungsfluss haben. Parse Server ermöglicht ein sicheres Zurücksetzen der Benutzerpasswörter. Konfigurieren Sie eine Funktion, die den Benutzer nach seiner E-Mail-Adresse fragt:

1
2
3
4
5
6
7
8
9

resetPassword = () => {
   Parse.User.requestPasswordReset(this.state.email)
   .then(() => {
    this._alert('Success', 'Eine E-Mail wurde an Ihre Adresse gesendet.', 'Log In', 'LogInStack');
    this.submitAndClear();
   }).catch((Fehler) => {
    this._alert('Error', error.message, 'Log In', 'LogInStack');
   });
 }

Sehen Sie sich den vollständigen Code hier an: https://github.com/templates-back4app/react-native-todoapp/blob/resetpassword-page/screens/RestorePasswordScreen.js

Schritt 4 – ToDo-Listenseite

Konfigurieren Sie das Layout und die Funktionen zum Erstellen, Lesen, Aktualisieren und Löschen eines Elements in einer Liste.

Schritt 4.1 – Ein Element erstellen

Verwenden Sie die Speicherfunktion, um ein Element in der Parse Cloud zu speichern. Damit ist es möglich, ein neues Objekt in Ihrer Anwendung zu erstellen. Sehen Sie sich den Data Browser in Ihrer App auf Parse an:

 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: `FüllenSie die Felder korrekt aus. ` }));
   } else {
    const Todo = Parse.Object.extend("Todo");
    const Todo = new Todo();

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

Schritt 4.2 – Lesen aller Objekte

Diese Funktion wird sehr oft aufgerufen, da sie zum Starten eines Bildschirms, zum Aktualisieren oder Löschen eines Objekts verwendet wird. Die Daten können mit folgendem Code abgerufen werden:

1
2
3
4
5
6
7
8

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

Schritt 4.3 – Ein Element aktualisieren

Nachdem ein Objekt erstellt wurde, sollte es eine Möglichkeit geben, es in Zukunft zu aktualisieren. Das ist ganz einfach: Sie müssen das Objekt nur abrufen und die Speichermethode mit diesem Code aufrufen:

 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("Aufgabe", this.state.updateValueDialog);
     object.save().then(objUpdate => {
      this.setState({updateValueDialog:'', dialogVisible: false})
      this.readAllItems();
     });
   });
}

Schritt 4.4 – Ein Element löschen

Wenn man mit einer Liste von Objekten arbeitet, muss man den Benutzern die Möglichkeit geben, ihre Objekte selbst zu löschen.

 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){
     alert(e)
   }
 }

Den vollständigen Code finden Sie hier: https://github.com/templates-back4app/react-native-todoapp/blob/home-page/screens/HomeScreen.js

Letzte Worte

Das war’s mit der ToDo-Listen-App! Beachten Sie, dass Sie vielleicht Ihre Bildschirme stilisieren möchten. Aus diesem Grund ist es empfehlenswert, das komplette Repo unter dem folgenden Link zu überprüfen:

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

Wenn Sie Hilfe benötigen oder eine Funktion nicht funktioniert, kontaktieren Sie bitte unser Team per Chat!