Wie setzt man eine React Native-Anwendung ein?

React Native hat sich zu einem führenden Framework für die Erstellung mobiler Anwendungen entwickelt, die sowohl auf iOS- als auch auf Android-Plattformen außergewöhnlich gut funktionieren und funktionieren. Doch wie jede Anwendung benötigen auch React Native-Apps eine performante Art und Weise, ihre Backend-Infrastruktur zu verwalten.

Durch die Kombination von React Native-Technologie und einer Backend-as-a-Service (BaaS)-Plattform wie Back4app können Sie schnell und einfach skalierbare React Native-Anwendungen erstellen und einsetzen.

In diesem Tutorial werden Sie den Prozess der Bereitstellung einer React Native App auf Back4app durchlaufen. Wir werden auch über React Native und die Vorteile der Verwendung von Back4app für die Verwaltung der Backend-Infrastruktur sprechen.

Vorteile von React Native für die Entwicklung mobiler Anwendungen

React Native bietet als Framework für die Entwicklung großartiger mobiler Anwendungen mehrere Vorteile.

Hier sind einige dieser Vorteile und Vorzüge:

Wahrhaft einheimische Erfahrung

Mit React Native können Sie plattformübergreifende mobile Anwendungen für iOS und Android mit einer einzigen Codebasis erstellen.

React Native kann dies erreichen und gleichzeitig eine wirklich native Leistung auf beiden Betriebssystemen bieten. Bei anderen plattformübergreifenden Frameworks wie Ionic wird versucht, ein natives Erlebnis auf dem laufenden Betriebssystem zu imitieren.

Ionic verwendet HTML, CSS und JavaScript, um Webanwendungen zu erstellen, die in einen mobilen nativen Container verpackt sind. Aus diesem Grund hat die mobile App keinen direkten Zugriff auf die Funktionen des nativen Geräts.

React Native bietet ein natives Erlebnis, indem es direkt auf native Komponenten und APIs zugreift, die von dem iOS- oder Android-Gerät bereitgestellt werden, auf dem die App ausgeführt wird.

Modulare Architektur

Die modulare Architektur von React Native ermöglicht es Ihnen, mobile Anwendungen mit hoher Flexibilität und Skalierbarkeit zu erstellen. Eine modulare Architektur bedeutet, dass Sie die App in kleine, wiederverwendbare Komponenten zerlegen können, was die Wartung und Änderung im Laufe der Zeit bei Bedarf erleichtert.

Außerdem erleichtert dieser modulare Ansatz die Zusammenarbeit mit anderen Entwicklern, da Sie jede Komponente unabhängig entwickeln und testen können.

Schnellere Entwicklungszyklen

Die Zeit, die für die Entwicklung einer mobilen App aufgewendet wird, hat ihren Preis, und der Einsatz von Tools, die diese Zeit optimieren können, ist ein entscheidender Faktor. React Native bietet viele Funktionen, die zu einem schnelleren Entwicklungszyklus führen.

Von den plattformübergreifenden Apps, die Ihnen die Erstellung unabhängiger Apps für Android und iOS ersparen, bis hin zum Hot Reloading, mit dem Sie die Änderungen, die Sie am Code vornehmen, sofort in der App wiederfinden. Das spart Zeit, denn Sie können schnell iterieren und neue Funktionen testen, ohne die App neu zu starten.

Einschränkungen von React Native für die Entwicklung mobiler Anwendungen

Obwohl React Native viele Vorteile für die mobile Entwicklung bietet, gibt es auch einige Einschränkungen, die berücksichtigt werden sollten.

Hier sind einige der wichtigsten Einschränkungen von React Native:

Große Bündelgrößen

Leider sind React Native-Anwendungen im Vergleich zu nativen Anwendungen nicht für ihre Leichtigkeit bekannt. Das liegt daran, dass React Native seine eigenen JavaScript-Laufzeitabhängigkeiten und Bibliotheken enthält, die für die Ausführung der App erforderlich sind.

Fragmentierung über verschiedene Plattformen hinweg

React Native ermöglicht es Ihnen zwar, Code einmal zu schreiben und ihn auf mehreren Plattformen einzusetzen, aber es kann dennoch Unterschiede im Verhalten und Aussehen der App auf verschiedenen Plattformen geben.

React Native ist kein perfektes Framework, und bestimmte native Funktionen und Komponenten neigen dazu, sich auf iOS und Android unterschiedlich zu verhalten und anders auszusehen. Ein gutes Beispiel dafür ist die Picker-Komponente in React Native, die auf Android ein anderes Design aufweist als auf iOS.

Es kann vorkommen, dass Sie plattformspezifischen Code schreiben müssen, um bestimmte UI-Komponenten zu handhaben oder um verschiedene Funktionen auf beiden Plattformen unabhängig voneinander zu implementieren.

Warum Cloud-basierte Backend-Services für die Bereitstellung von React Native-Apps verwenden?

Cloud-basierte Backend-Dienste bieten mehrere Vorteile gegenüber selbst gehosteten Optionen. Bei selbst gehosteten Backend-Diensten müssen Sie die Server oft manuell einrichten und verwalten. Außerdem sind sie möglicherweise nur begrenzt skalierbar und zuverlässig, da sie oft auf einem einzigen Server gehostet werden.

Andererseits bieten Cloud-basierte Backend-Services wie Back4App eine kostengünstigere und skalierbarere Option für Entwickler. Sie bieten eine höhere Zuverlässigkeit, da sie oft mehrere Server und Rechenzentren nutzen, um die Betriebszeit zu gewährleisten.

Andere Cloud-basierte Optionen sind Dienste wie Firebase und AWS Amplify, die ähnliche Funktionen und Vorteile für die Entwicklung von React Native-Apps bieten.

Wenn es um die Bereitstellung einer React Native-App geht, bieten Cloud-basierte Backend-Services wie Back4app eine einfachere und schnellere Möglichkeit, das Backend Ihrer App bereitzustellen und zu verwalten. Dies kann besonders für kleine Entwicklungsteams oder einzelne Entwickler wichtig sein, die nicht über viele Ressourcen oder technisches Fachwissen verfügen.

Bereitstellen einer React Native-Anwendung auf Back4app

In diesem Abschnitt werden Sie eine To-Do-App mit React Native und Back4app als Cloud-basiertes Backend erstellen.

Was ist Back4app?

Back4App ist eine Cloud-Plattform mit Anwendungs-Hosting-Funktionen. Es handelt sich um eine Backend-as-a-Service (Baas)-Plattform, die eine Möglichkeit bietet, skalierbare mobile und Web-Anwendungen schnell und einfach zu erstellen und bereitzustellen. Sie vermeiden die Komplexität des Aufbaus und der Wartung ihrer eigenen Backend-Infrastruktur

Mit Back4App steht eine Reihe von Ressourcen und Funktionen für die Erstellung und Bewertung von Web- und Mobilanwendungen zur Verfügung. Dazu gehören eine Befehlszeilenschnittstelle (CLI), Software Development Kits (SDKs), Optimierungsdienstprogramme, Analysen, Überwachungstools sowie Benutzerauthentifizierung und -autorisierung.

Projekt-Einführung

In diesem Tutorial werden Sie eine einfache React Native-Anwendung erstellen, die Sie auf der Back4app-Plattform bereitstellen werden. Die React Native-Anwendung wird in der Lage sein, grundlegende CRUD-Operationen (Erstellen, Lesen, Aktualisieren, Löschen) mit einer Reihe von Daten durchzuführen, die in der Cloud-Datenbank von Back4app gespeichert werden.

Sie werden die API von Back4app nutzen, um zwischen dem React Native Frontend und dem von Back4app verwalteten Backend zu kommunizieren.

Um diesem Tutorial zu folgen, sind einige Voraussetzungen erforderlich:

• Vertrautheit mit JavaScript und React Native
• React Native und Expo CLI auf Ihrem Computer installiert
• Grundlegendes Verständnis von REST-APIs und CRUD-Vorgängen

In diesem Projekt lernen Sie, wie Sie Back4app als Backend-Lösung für die React Native-Entwicklung einsetzen können,

Einrichten der Bereitstellungsumgebung

Um Ihre React Native-App auf dem Back4app-Server bereitstellen zu können, müssen Sie zunächst ein Back4app-Konto einrichten. Mit diesem Konto können Sie eine neue App erstellen, um Ihre React Native-App zu hosten.

Um sich für ein Back4app-Konto anzumelden, navigieren Sie zur Back4app-Website und klicken Sie auf die Schaltfläche ” Anmelden” in der oberen rechten Ecke der Website. Dies führt Sie zu einem Anmeldeformular, das Sie mit den notwendigen Details ausfüllen.

Wenn Sie bereits ein bestehendes Back4app-Konto haben, können Sie stattdessen auf die Schaltfläche Anmelden klicken und sich anmelden.

Sobald Sie Ihr Back4app-Konto erstellt haben, melden Sie sich an und navigieren Sie zur rechten oberen Ecke des Bildschirms, wo Sie die Schaltfläche NEUE APP finden.

Klicken Sie auf diese Schaltfläche, um zur Dienstseite zu navigieren:

Wählen Sie die Option “Backend as a Service” und füllen Sie das folgende Formular für den App-Namen aus, um eine neue App zum Hosten Ihrer React Native-App zu erstellen.

Sobald Sie auf die Schaltfläche ERSTELLEN geklickt haben, erstellt Back4app Ihre neue Anwendung und leitet Sie direkt zum Dashboard weiter.

Verbinden der React Native App

Um Ihre React Native-App mit Back4app zu verbinden, erstellen Sie zunächst den Boilerplate-Code für Ihre React Native-App mit Hilfe der expo cli.

Der Vorteil der Verwendung der Expo-Cli gegenüber der React Native-Cli für die Erstellung Ihrer App besteht darin, dass sie einen schnelleren Entwicklungszyklus ermöglicht, sodass Sie Ihre App schneller iterieren und testen können. Expo enthält eine Reihe von vorgefertigten UI-Komponenten, die leicht angepasst werden können, was die Erstellung einer ausgefeilten App erleichtert.

Führen Sie den folgenden Befehl im Terminal Ihres Computers aus, um die anfängliche Codebasis für Ihre Anwendung zu erstellen:

npx create-expo-app todo-app

Dieser Befehl generiert ein React Native-Projekt für Sie, mit dem Sie arbeiten können.

Denken Sie daran, dass Sie im vorherigen Abschnitt eine Gegenstück-App auf Back4app erstellt haben. Um diese App mit Ihrer React Native App zu verbinden, müssen Sie das Parse Javascript SDK in Ihrem Projekt installieren. Außerdem müssen Sie den Async Storage Handler installieren. Das Speichersystem Async Storage behält die Daten auch dann bei, wenn die App geschlossen oder das Gerät ausgeschaltet wird.

Installieren Sie diese Abhängigkeiten, indem Sie den folgenden Befehl ausführen:

npm install parse @react-native-async-storage/async-storage --save

Beachten Sie, dass Sie für die iOS-Build-Version eine Pod-Installation durchführen müssen, um den nativen RNAsyncStorage für Ihr Projekt zu synchronisieren.

Nach der Installation aller notwendigen Abhängigkeiten besteht der nächste Schritt darin, die Back4app-App-Schlüssel abzurufen.

Mit diesen Schlüsseln kann sich Ihre React Native App mit der auf Back4app erstellten App verbinden und sollte sicher aufbewahrt werden.

Rufen Sie das Dashboard Ihrer erstellten App auf und folgen Sie dem Pfad App-Einstellungen->Sicherheit & Schlüssel, um Ihre Anwendungs-ID und Ihren JavaScript-Schlüssel zu erhalten.

Sie werden diese Schlüssel verwenden, um das Parse SDK in Ihrer React Native-App zu initialisieren.

Überschreiben Sie in der Datei App.js den Inhalt mit dem folgenden Codeblock:

//Importing the dependencies
import Parse from "parse/react-native.js";
import AsyncStorage from '@react-native-async-storage/async-storage';

Hier haben Sie Parse SDK und den installierten AyncStorage-Handler importiert.

Initialisieren Sie nun das SDK mit den von Ihnen abgerufenen Anwendungsschlüsseln:

//Initializing the SDK. 
Parse.setAsyncStorage(AsyncStorage); 
Parse.initialize('YOUR_APPLICATION_ID_HERE','YOUR_JAVASCRIPT_KEY_HERE');
Parse.serverURL = '<https://parseapi.back4app.com/>';

Mit der Methode setAsyncStorage wird der AsyncStorage für Parse zum Zwischenspeichern von Daten festgelegt.

Damit können Sie Ihre React Native-Anwendung erfolgreich mit Back4app verbinden.

Erstellen und Bereitstellen Ihrer React Native App

Jetzt können Sie Ihre React Native-Anwendung erstellen und sie bei Back4app bereitstellen.

Ändern Sie den Code in Ihrer App.js-Datei so, dass er wie folgt aussieht:

import React, { useState, useEffect } from 'react';
import { StyleSheet, View, TextInput, FlatList, TouchableOpacity, Text } from 'react-native';
//Importing the dependencies
import Parse from "parse/react-native.js";
import AsyncStorage from '@react-native-async-storage/async-storage';

//Initializing the SDK. 
Parse.setAsyncStorage(AsyncStorage); 
Parse.initialize('YOUR_APPLICATION_ID_HERE','YOUR_JAVASCRIPT_KEY_HERE');
Parse.serverURL = '<https://parseapi.back4app.com/>';

export default function App() {
  const [todos, setTodos] = useState([]);
  const [newTodo, setNewTodo] = useState('');

};

Der obige Codeblock importiert zunächst den useState- und useEffect-Hook von React. Diese Hooks sind zwei der am häufigsten verwendeten Hooks in React Native sowie in React.

Der useState-Hook ermöglicht es einer funktionalen Komponente, einen Zustand zu haben, indem eine Variable und ihre Setter-Funktion deklariert werden. Er wird verwendet, um den Zustand innerhalb einer Komponente zu verwalten und zu aktualisieren. Der useState-Hook nimmt einen anfänglichen Zustandswert als Argument und gibt ein Array mit zwei Werten zurück. Die beiden zurückgegebenen Werte sind der aktuelle Zustandswert und die Funktion zur Aktualisierung des Zustands.

Zusammen mit dem useState-Haken wird der useEffect-Haken importiert. Der useEffect-Haken wird zur Verwaltung von Seiteneffekten verwendet. Der useEffect-Hook nimmt eine Callback-Funktion als Argument und führt sie nach jedem Rendering-Zyklus aus. Eine Abhängigkeit kann als zweites Argument übergeben werden, um zu bestimmen, wann der Effekt erneut ausgeführt werden soll.

Innerhalb Ihrer Anwendungskomponente verwenden Sie den useEffect-Hook, um Daten vom Server zu holen, wenn die Komponente zum ersten Mal eingebunden oder gerendert wird:

useEffect(() => {
    async function fetchTodos() {
      const Todo = Parse.Object.extend('Todo');
      const query = new Parse.Query(Todo);
      const results = await query.find();
      setTodos(results.map(result => result.toJSON()));
    }

    fetchTodos();
  }, []);

  

Innerhalb von useEffect wird eine asynchrone Funktion fetchTodos definiert. Die Funktion erstellt eine neue Instanz der Todo-Klasse, die eine Sammlung von Daten darstellt, die auf dem Back4app-Server gespeichert sind. Dann sucht sie mit Parse.Query nach einem Todo-Objekt, das auf dem Server gespeichert ist.

Die Methode query.find() wird verwendet, um die Daten des Parse-Objekts asynchron vom Server abzurufen und in einer Ergebnisvariablen zu speichern. In diesem Fall handelt es sich bei den Daten um eine Liste von To-Do-Elementen.

setTodos wird dann aufgerufen, um den Zustand der Komponente mit den neuen Daten zu aktualisieren, die vom Server abgerufen und inJSON abgebildet wurden.

Schließlich wird ein leeres Array [] als zweites Argument an den useEffect-Hook übergeben, um sicherzustellen, dass fetchTodos nur einmal aufgerufen wird, wenn die Komponente zum ersten Mal montiert oder gerendert wird.

Als Nächstes erstellen Sie Funktionen für das Hinzufügen und Löschen von Aufgaben innerhalb Ihrer Aufgaben-App:

async function handleAddTodo() {
    if (!newTodo) return;

    const Todo = Parse.Object.extend('Todo');
    const todo = new Todo();
    todo.set('text', newTodo);
    await todo.save();

    setTodos([...todos, todo.toJSON()]);
    setNewTodo('');
  }

  async function handleDeleteTodo(id) {
    const Todo = Parse.Object.extend('Todo');
    const todo = new Todo();
    todo.set('objectId', id);
    await todo.destroy();

    setTodos(todos.filter(todo => todo.objectId !== id));
  }

Im obigen Code-Block ist handleAddTodo eine asynchrone Funktion, die das Hinzufügen von Aufgaben in Ihrer App übernimmt. Sie prüft zunächst, ob ein neues Aufgaben-Element(newTodo) vorhanden ist. Ist dies nicht der Fall, kehrt sie einfach zurück. Gibt es jedoch ein neues To-Do-Element, erstellt sie ein neues Parse-Objekt namens Todo und setzt dessen Texteigenschaft auf den Text des neuen To-Do-Elements.

Er speichert sie mit der Methode save() auf dem Parse-Server. Anschließend wird der Status des ToDo-Arrays aktualisiert, indem das neue ToDo-Element am Ende des Arrays hinzugefügt und der Status newTodo auf eine leere Zeichenfolge zurückgesetzt wird.

Die zweite asynchrone Funktion handleDeleteTodo ist für das Löschen von Aufgaben zuständig. Sie nimmt einen id-Parameter entgegen, der die ID des zu löschenden ToDo-Elements darstellt. Sie erstellt ein neues Todo-Objekt und setzt dessen objectId-Eigenschaft auf den id-Parameter.

Anschließend wird das Objekt mit der Methode destroy() vom Parse-Server gelöscht. Schließlich wird der Status der Aufgaben aktualisiert, indem das gelöschte Aufgabenobjekt mit filter() aus dem Array herausgefiltert wird.

Die gesamte Standardgeschäftslogik für Ihre Anwendung ist nun fertig. Sie können nun mit der Implementierung der UI-Elemente beginnen.

Importieren Sie den folgenden Codeblock in Ihre App-Komponente:

return (
    <View style={styles.container}>
      <Text style={styles.heading}>Todo List</Text>
      <View style={styles.inputContainer}>
        <TextInput
          style={styles.input}
          placeholder="Add a new todo"
          value={newTodo}
          onChangeText={setNewTodo}
        />
        <TouchableOpacity style={styles.addButton} onPress={handleAddTodo}>
          <Text style={styles.addButtonText}>Add</Text>
        </TouchableOpacity>
      </View>
      <View style={styles.listContainer}>
        {todos.map(todo => (
          <View style={styles.listItem} key={todo.objectId}>
            <Text style={styles.listItemText}>{todo.text}</Text>
            <TouchableOpacity
              style={styles.deleteButton}
              onPress={() => handleDeleteTodo(todo.objectId)}
            >
              <Text style={styles.deleteButtonText}>Delete</Text>
            </TouchableOpacity>
          </View>
        ))}
      </View>
    </View>
  );
}

Die Rückgabekomponente gibt eine Ansicht mit JSX-Code zurück.

Die Komponenten TextInput und TouchableOpacity werden verwendet, um das Eingabeformular für das Hinzufügen neuer Aufgaben zu erstellen.

Wenn der Benutzer auf die Komponente TouchableOpacity klickt, wird der onPress-Eventhandler ausgelöst und die Funktion handleAddTodo aufgerufen. Die Funktion erstellt ein neues Parse-Objekt, das das ToDo-Element darstellt, speichert es auf dem Server und fügt es mit der Funktion setTodos zum ToDo-Status hinzu.

Die View-Komponente mit dem listContainer-Stil enthält eine Mapping-Funktion, die das todos-Array mit der map() -Methode durchläuft, um einzelne listItem-Komponenten für jedes todo zu erstellen.

Die Eigenschaft key wird auf die objectId jedes todos gesetzt, um Darstellungsfehler zu vermeiden. Wenn der Benutzer auf die Schaltfläche “Löschen” klickt, wird die Funktion handleDeleteTodo aufgerufen, die das entsprechende ToDo-Element vom Server und aus dem ToDo-Status entfernt.

Alle in der App-Komponente verwendeten Stile werden mit der Methode StyleSheet.create() im Objekt styles definiert:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    padding: 20,
  },
  heading: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  inputContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 20,
  },
  input: {
    flex: 1,
    backgroundColor: '#f2f2f2',
    paddingVertical: 10,
    paddingHorizontal: 20,
    borderRadius: 10,
    marginRight: 10,
  },
  addButton: {
    backgroundColor: '#2ecc71',
    paddingVertical: 10,
    paddingHorizontal: 20,
    borderRadius: 10,
  },
  addButtonText: {
    color: '#fff',
    fontWeight: 'bold',
    fontSize: 16,
  },
  listContainer: {
    flex: 1,
    width: '100%',
  },
  listItem: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    backgroundColor: '#f2f2f2',
    paddingVertical: 10,
    paddingHorizontal: 20,
    borderRadius: 10,
    marginBottom: 10,
  },
  listItemText: {
    flex: 1,
  },
  deleteButton: {
    backgroundColor: 'red',
  },

Hier sehen Sie das Ergebnis der Anwendung, die Sie gerade erstellt haben.

Das Hinzufügen eines neuen Aufgabeneintrags veranlasst die App, die Daten an Ihren Back4app-App-Server zu senden.

Sie können die Daten auf dem Dashboard Ihrer App auf Back4app einsehen.

Sie haben nun erfolgreich Ihre React Native-Anwendung auf Back4app bereitgestellt.

Schlussfolgerung

Wenn Ihre App auf den Back4app-Servern voll funktionsfähig ist und Daten von Ihrer React Native-App zu Back4app und zurück lesen, schreiben und speichern kann, können Sie sehen, wie Back4app eine bequeme und skalierbare Backend-Lösung bietet.

Back4app bietet darüber hinaus eine Reihe weiterer Funktionen, darunter Datensynchronisation in Echtzeit, Push-Benachrichtigungen und Benutzerauthentifizierung. Die Möglichkeiten, Ihre App mit einigen dieser zusätzlichen Funktionen zu erweitern, sind endlos.

FAQ