Wenn Sie hier sind, fragen Sie sich vielleicht“Wie können React Native und Expo mir helfen, meine nächste mobile Anwendung schneller zu erstellen?“.
Als Praktikanten bei Imaginary Cloud, uns wurde vorgeschlagen, eine Anwendung zu entwickeln, die für die Situation, mit der die Welt derzeit konfrontiert ist, die Coronavirus-Pandemie, irgendwie nützlich ist. Aufgrund dieser Situation müssen wir neue Verfahren zur Verwaltung der Gemeinschaftsbereiche im Unternehmen einführen. Da die Anzahl der Personen, die sich im gleichen Raum aufhalten können, je nach Größe begrenzt ist, müssen wir die Ausbreitung des Virus eindämmen, indem wir Personen zusammenfassen, die sich den gleichen Arbeitsbereich teilen.
Außerdem ist es unsere Absicht, mit dieser Anwendung das Bewusstsein zu schärfen, indem einige Warnmeldungen angezeigt werden, und die Verfügbarkeit eines Zimmers zu verfolgen, ohne es zu besuchen.
Aufgrund dieser Einschränkungen war es unser Ziel, dieses Problem zu lösen, indem wir eine App mit diesen React Native und Expo entwickelten. Wir waren mit keinem dieser Dinge vertraut, da Sie es vielleicht nicht sind. Machen Sie sich also keine Sorgen, mit etwas Lesen und Üben werden Sie verstehen, wie sie funktionieren und warum sie eine gute Wahl sind, wenn es um die Entwicklung mobiler Apps geht. Deshalb denken wir, dass es wichtig ist, unsere Reise und einige Lehren aus unserer Erfahrung mit euch zu teilen.
Dieser Beitrag könnte Ihnen helfen, Ihr nächstes Projekt auf die Beine zu stellen, und wir hoffen, dass er Ihnen Aufschluss über Ihre nächsten Schritte und die damit verbundenen Vorteile geben kann. In diesem Blogbeitrag werden wir über diese beiden Frameworks sprechen, wie sie zusammenhängen und warum Sie dadurch möglicherweise Zeit sparen, auch wenn Sie mit der Entwicklung von Mobilgeräten nicht vertraut sind. Aber lassen Sie uns mit den Grundlagen dieser Technologien beginnen.
React Native ist ein Open-Source-Framework zum Erstellen nativer Apps mit React erstellt von Facebook und veröffentlicht im Jahr 2015. Es ermöglicht Ihnen, native UI-Steuerelemente zu verwenden und vollen Zugriff auf die native Plattform zu haben, die bequem von einer JavaScript-Bibliothek aus bereitgestellt wird. React Native macht es einfach, gleichzeitig für Android und iOS zu entwickeln, da der Code plattformübergreifend gemeinsam genutzt werden kann.
Darüber hinaus kombiniert dieses Framework die Benutzererfahrung der nativen Plattformen mit dem Wissen des Entwicklers über das Erstellen mit React im Web und unterstützt so den gewünschten Ansatz von „Einmal lernen, überall schreiben“.
Expo ist ein Framework und eine Plattform für universelle React-Anwendungen. Es bietet eine Reihe von Tools und Diensten, die die Entwicklung und das Testen von React Native-Apps vereinfachen und die Möglichkeit bieten oder bieten, den Code einfach auf Ihrem Telefon auszuführen. Außerdem bietet Expo einen robusteren und entwicklerfreundlicheren Arbeitsablauf.
Die Einrichtung der Entwicklungsumgebung kann je nach Erfahrung, die Sie mit der mobilen Entwicklung haben, unterschiedlich sein, aber das ist kein Problem.
Wenn Sie mit der Entwicklung mobiler Apps noch nicht vertraut sind, der einfachste Einstieg ist mit Expo CLI.
Wenn Sie bereits mit der Entwicklung mobiler Apps vertraut sind, vielleicht möchten Sie React Native CLI verwenden.
Wir werden das Setup für neue Mobilentwickler behandeln, denn auch wenn Sie mit der mobilen Entwicklung vertraut sind, ist Expo ein wirklich nettes und leicht zu erlernendes Framework.
Es gibt zwei Tools, die Sie benötigen, um Apps mit Expo zu entwickeln: ein lokales Entwicklungsinstrument und ein mobiler Client zum Öffnen Ihrer App.
Als lokales Entwicklungsinstrument verwenden wir Expo CLI. Zusätzlich zur Befehlszeilenschnittstelle (CLI) verfügt es auch über eine webbasierte grafische Benutzeroberfläche (GUI), die in Ihrem Webbrowser angezeigt wird, wenn Sie Ihr Projekt starten.
Du wirst brauchen Node.js um Expo CLI zu installieren. Nach der Installation von Node.js können Sie nun Expo CLI installieren, indem Sie den folgenden Befehl ausführen: npm install -g expo-cli
Nachdem Sie nun alle Schritte befolgt haben, die wir bereits in diesem Blog behandelt haben, müssen Sie nur noch den folgenden Befehl ausführen, mit einem Projekt, das beispielsweise „MyProject“ heißt: expo init MyProject
Sie fragen sich bestimmt, warum Sie React Native verwenden sollten. Wir werden über einige Vorteile bei der Verwendung dieses Frameworks sprechen.
Laut Google Trends haben, wie wir der obigen Grafik entnehmen können, die Untersuchungen im Zusammenhang mit React Native zugenommen, was das wachsende Interesse und die Nachfrage nach dieser Technologie zeigt.
Darüber hinaus war React Native laut der Stack Overflow 2019-Umfrage das sechstbeliebteste Framework unter Entwicklern. Außerdem hat die Anzahl der Fragen zu Stack Overflow im Zusammenhang mit React Native seit seiner Veröffentlichung zugenommen.
Unserer Erfahrung nach macht Expo die Dinge wirklich einfach, wenn es um Laufen und Debuggen geht. Sie können Ihre App mühelos zum Testen ausführen oder einige Fehler überprüfen und sogar Ihre App debuggen. Dies ist sicherlich einer der Gründe, warum die Popularität der Expo zugenommen hat, wie wir der folgenden Tabelle entnehmen können.
Wenn Sie nach Abschluss der Einrichtung Ihre App ausführen möchten, um zu sehen, wie sich Ihr Fortschritt entwickelt, müssen Sie lediglich den folgenden Befehl ausführen: npm starten. Danach öffnet sich ein Fenster in Ihrem Webbrowser. Sie können es auf Simulatoren testen, sowohl für Android als auch für iOS, aber Sie können es auch auf Ihrem eigenen Gerät ausführen. Sie müssen lediglich die Expo-Client-App installieren und den QR-Code scannen, den Sie im Terminal oder in den Expo Dev Tools sehen. Beachten Sie, dass Expo nicht nur ein Framework ist, sondern auch eine Plattform, auf der Sie viele nützliche Dokumentationen, Tutorials und Beispiele aus der Community finden und sogar Beiträge auf GitHub leisten können.
Sie fragen sich vielleicht, ob es möglich ist, Ihr Projekt fortzusetzen, ohne Expo dafür zu verwenden. Ja, das ist es. Wenn Sie schlechte Erfahrungen mit der Entwicklung Ihrer App mit Explo CLI gemacht haben, können Sie sie einfach verlassen und zu einem reinen React Native-Projekt wechseln.
Was ist das mit dem React Native Bare-Projekt? Einfach gesagt, Ihr Projekt wird die Ordner/Verzeichnisse enthalten, die sich auf die Betriebssysteme (iOS und Android) beziehen, sodass Sie Ihre eigenen nativen Builds erstellen können. Wenn Sie beispielsweise wissen, dass Sie irgendwann Ihren eigenen nativen Code in das Projekt aufnehmen müssen, können Sie expo auswerfen, indem Sie den Befehl ausführen npm run eject auf der Konsole.
Wenn wir über den Prozess der Erstellung einer mobilen App nachdenken, können wir uns das als komplexen Prozess vorstellen. Aus diesem Grund versucht Expo, den gesamten Prozess zu vereinfachen und zu beschleunigen. In der offizielle Dokumentation, sie erklären detailliert alle Schritte, die Sie ausführen müssen, und geben Ihnen sogar die Möglichkeit, den Keystore und die für die Anwendung benötigten Anmeldeinformationen automatisch zu generieren.
Mit dem Keystore können Sie kryptografische Schlüssel in einem Container speichern, um das Extrahieren aus dem Gerät zu erschweren. Sobald sich die Schlüssel im Keystore befinden, können sie für kryptografische Operationen verwendet werden, wobei das Schlüsselmaterial nicht exportierbar bleibt. Darüber hinaus bietet es Möglichkeiten, einzuschränken, wann und wie Schlüssel verwendet werden können, z. B. die Beschränkung, dass Schlüssel nur in bestimmten kryptografischen Modi verwendet werden dürfen. Sie müssen sich also keine Gedanken über all diese Details machen, da Expo den Prozess der Signierung Ihrer App für iOS und Android automatisiert.
Wir hatten unseren ersten Kontakt mit diesen Frameworks, sobald wir unser Praktikum bei Imaginary Cloud begonnen haben. Hier haben wir begonnen, im Rahmen der Entwicklung einer mobilen Anwendung für ein internes Projekt mit React Native und Expo zu arbeiten.
Am Anfang war es schwierig zu verstehen, wie man mit diesen Technologien arbeitet, da wir gerade erst angefangen haben. Es war eine neue Welt für uns. Die verfügbare Dokumentation sowie die Hilfe unserer Kollegen waren jedoch sehr wichtige Aspekte bei der Entwicklung dieses Projekts. Es ist völlig normal, wenn zu einem frühen Zeitpunkt Zweifel oder Fragen zu diesen Frameworks bestehen. Während der Entwicklung werden diese Zweifel zerstreut, um Wissen und Erfahrung Platz zu machen. Die Verwendung einiger React Native-Bibliotheken sowie einiger vorgefertigter Komponenten sparte uns nicht nur etwas Zeit, sondern erleichterte uns auch die Arbeit.
Obwohl React Native uns dabei half, Code für Android und iOS wiederzuverwenden, mussten wir aufgrund der Unterschiede zwischen den Betriebssystemen bestimmte Details berücksichtigen. Zum Beispiel könnte die Eigenschaft „Zeilenhöhe“ einiger Schriftarten für beide Plattformen nicht dieselbe sein, da Benutzer sonst unterschiedliche Stile in der iOS-App und der Android-App bemerken würden.
Eines der schwierigsten Probleme, mit denen wir konfrontiert waren, war das Laden von Schriftarten in unsere App. Wir haben viele verschiedene Tutorials ausprobiert, viel gesucht und einige Zeit verloren, als wir versuchten, eine benutzerdefinierte Schriftart zu verwenden, aber das Endergebnis war die Mühe wert.
Eine weitere Schwierigkeit war die Verwendung vorgefertigter Komponenten. React Native reagiert empfindlich auf Pakete und deren Versionen, und es muss berücksichtigt werden, dass einige Dinge in React Native funktionieren, aber von Expo noch nicht unterstützt werden. Daher ist es notwendig, nach anderen Lösungen zu suchen.
Zum Beispiel haben wir einen vorgefertigten Picker Select verwendet, aber die neueste Version war nicht mit Expo kompatibel, genauer gesagt mit Android, also mussten wir ihn herunterstufen. Nicht alles ist einfach. Manchmal musst du einen anderen Weg finden, um deine Ziele zu erreichen. Wie Sie wahrscheinlich bemerkt haben, können React Native und Expo jedoch viele Dinge vereinfachen und Ihnen helfen, Zeit zu sparen.
Insgesamt war unsere Reise zur Arbeit an diesem Projekt sehr positiv. Da es unsere erste Erfahrung/Zeit war, mit React Native und Expo zu arbeiten, hatten wir am Anfang einige Schwierigkeiten, aber als wir anfingen, mehr über diese Technologien zu erfahren, wurde es einfacher und natürlicher.
Wir haben gelernt, dass es möglich ist, eine Anwendung einfach auf unserem eigenen Gerät auszuführen und die Änderungen am Code fast sofort zu sehen, was letztendlich den Komfort rechtfertigte, den wir bei der Verwendung von React Native mit Expo empfanden. Darüber hinaus hat uns die Vielfalt der angebotenen APIs geholfen, unsere Ziele weiter zu erreichen. Zum Beispiel war Expo-Notifications für uns nützlich, da es wichtige Funktionen im Bereich der Benachrichtigungen bot.
Zusammenfassend lässt sich sagen, dass unser Wissen zugenommen hat und es ein sehr bereicherndes Projekt zur Entwicklung einer mobilen Anwendung unter Verwendung dieser Frameworks war. Wir haben die Vorteile erkannt und es uns ermöglicht, unsere ursprünglichen Ziele zu erreichen.
Bei Imaginary Cloud wir arbeiten nicht nur mit React Native, sondern mit einem breiten Tech-Stack. Wenn Sie Hilfe beim Aufbau einer skalierbaren mobilen App benötigen, warten wir auf Sie! Schreiben Sie uns eine Nachricht hier!
Fanden Sie diesen Artikel hilfreich? Diese könnten dir auch gefallen!
Webentwickler. Leidenschaft für Serien und Musik. Fußball-Enthusiast. Ein Träumer, der hofft, eines Tages die Welt mit etwas zu markieren, das er entwickelt hat.
People who read this post, also found these interesting:
.webp)
.webp)
%20(2).webp)
