App-Programmierung für iOS und Android mit ReactNative

Einmal JavaScript-Code schreiben und Apps mit nativen Elementen für iOS und Android erhalten. Mit Facebook’s ReactNative können Software-Entwickler, die Erfahrungen mit nativer App-Programmierung haben, zügig eine einfache App für die aktuellen Hauptplattformen entwickeln und in den Apple App-Store sowie GooglePlay Store bringen.

Was ist ReactNative?

Mit ReactNative lassen sich iOS- und Android-Apps programmieren, die native Elemente verwenden und sich somit nicht von nativ programmierten Apps unterscheiden. Der Code wird nur einmal geschrieben, das Ergebnis ist eine App für iOS-Geräte und eine App für Android-Geräte.

ReactNative ist somit in keiner Weise mit Cordova oder ähnlichen Javascript-Frameworks vergleichbar, da diese lediglich Websites in einem Container sind. Native iOS- oder Android-Elemente kommen eigentlich nicht vor.

Bei ReactNative ist das anders. Das Framework von Facebook benutzt JavaScript und React, um native Elemente miteinander zu verbinden. Geschrieben wird der Code in JSX, einer Erweiterung basierend auf JavaScript und direkt in JavaScript. Hierbei wird die JavaScript-Syntax nach der ECMAScript-6-Norm verwendet. ReactNative-Apps laufen auf Geräten ab iOS 8 und Android 4.1.

Render-Funktion des Frameworks ReactNative zur App-Programmierung
Render-Funktion ReactNative

Im Beispiel sieht man die Render-Funktion einer klassischen ReactNative-Component. Zurückgegeben wird eine gestylte „View“, die als Subview ein „Text“-Element beinhaltet. Das „Text“-Element enthält einen Text und die Variable „name“, die von außen gesetzt wird.

Wie auch „View“ hat „Text“ die Property „style“. Mit „style“ lassen sich UI-Elemente Gestalten und Positionen. Das Naming ist ähnlich zu CSS. Will man Elemente in Abhängigkeit zu anderen Elementen positionieren, benutzt man flex, flex-direction und Ähnliches.

Benutzt man wie im Beispiel den Tag „Text“, wird im Hintergrund eine UILabel (iOS) bzw. eine TextView (Android) genutzt. Der „View“-Tag wird zu UIView bzw. zu einer nativen (Android-)View. Viele dieser Elemente oder auch Components genannt, liefert ReactNative standardmäßig und können ohne zusätzliche Installationen benutzt werden. Oftmals findet man in der npm-Library Erweiterungen zu bestehenden Components oder auch ganz neue, praktische Components. Möchte man eine native Component in ReactNative, die noch nicht verfügbar ist oder bestehenden nativen Code nutzen, muss man zuerst ein natives Bridging-Modul erstellen. Hierfür wird aber erweitertes Wissen in nativer App-Entwicklung für die jeweilige Plattform vorausgesetzt.

Was sind die Voraussetzungen für die App-Programmierung ReactNative?

Will man „nur“ Apps programmieren und sich nicht um das Drumherum (Veröffentlichung, Testphasen, etc.) kümmern, sollte man ein solides Wissen rund um JavaScript und das grundlegende Verständnis für den Aufbau einer App (ViewController, Daten-Handling, etc.) mitbringen.

Außerdem sollte man wissen, wie man mit dem Terminal umgeht, da ein großer Anteil bei der Einrichtung eines Projekts über die Console getätigt wird.

Gehen die Anforderungen über das Programmieren hinaus, sind vor allem auf iOS-Seite Erfahrungen rund um Zertifikate, Provisioning-Profiles und iTunesConnect erforderlich, da es sonst an der Veröffentlichung der App scheitern wird. Mit Android geht es vergleichsweise einfach, da es hierbei mit einigen Terminal-Eingaben und einem Google-Account oftmals getan ist.

Wann macht ReactNative Sinn?

Eine pauschale Antwort auf diese Frage gibt es nicht.

Beherrscht man zum Beispiel die native App-Programmierung für Android und kennt sich mit iOS weniger aus, macht eine ReactNative-App vielleicht mehr Sinn, als sich Swift oder Objective-C beizubringen. Das selbe gilt natürlich auch andersrum. Ist diese App allerdings so umfangreich, dass man nur wenige Codezeilen gemeinsam verwenden kann und somit viel mit Bridging-Modulen arbeiten muss, ist die native Programmierung empfehlenswerter.

Starten sollte man aber auf jeden Fall mit einer „kleineren“ App, um ein Gespür dafür zu bekommen, wo die Grenzen von ReactNative sind. Je umfangreicher die App, desto mehr Probleme können auftreten. Gerade bei vielen Daten oder beim Thema Sicherheit muss man sich bewusst sein, dass ReactNative  – Stand Frühjahr 2017 – standardmäßig kein komfortables Datenhandling (Datenbank, Zugriff auf der Platte, etc.) und keinen Zugriff auf den iOS-Keychain mitliefert.

Wie starte ich am besten?

Die aktuell wichtigste Seite im Internet zum Thema ReactNative ist https://facebook.github.io/react-native/.

Wer noch keine Erfahrung mit ReactNative gemacht hat, sollte sich zuerst eines der vielen Tutorials im Internet anschauen und sich mit den Components, deren Life-Circle, State-Changes und Imports vertraut machen, bevor man mit dem eigentlichen Projekt beginnt. Es macht auch immer Sinn, kleinere Testprojekte anzulegen, um zum Beispiel ein neues Modul oder eine externe Library zu testen. Verzichten sollte man auch nicht auf ein Versionsverwaltungstool.

Da ReactNative ein relativ junges Framework ist, kann man davon ausgehen, dass noch viel passieren wird. Man sollte sich aber auch bewusst sein, dass hinter dieser Technologie Facebook steht.

_____

Quellen:

https://facebook.github.io/react-native/

http://blog.teamtreehouse.com/introduction-to-react-native

Update LeadHound Visitenkartenscanner auf Version 2.2

LeadHound Visitenkartenscanner erkennt Leads noch schneller

Mit LeadHound geht die Lead-Erfassung schneller. Soweit, so gut. Mit der Version 2.2 wurde die QR-Code-Erkennung in Echtzeit integriert. Noch während Sie die Kamera des iPads ausrichten, erkennt und analysiert die Visitenkartenscanner-Software die Visitenkarte. Befindet sich ein QR-Code aufgedruckt, wird der Nutzer darauf hingewiesen und gefragt, ob der Inhalt des QR-Codes weiterverwendet werden soll.

 QR-Code-Erkennung in Echtzeit mit dem LeadHound Visitenkartenscanner

Editierung wird überflüssig

Wurde der QR-Code verwendet, ist die nachträgliche Leadbearbeitung überflüssig. Die gesparte Zeit können Sie  dazu nutzen, weitere Kontakte zu knüpfen.

IMG_0211

Leads exportieren

Eine weitere Neuerung in Version 2.2 ist der Lead-Export. Zukünftig können Leads im Format *.xlsx exportiert werden. Nicht nur, dass der Export somit einschränkungsfrei mir Excel kompatibel ist, er kann auch per Mail an eine Wunsch-E-Mailadresse gesendet werden. Wem das noch nicht reicht, hat in der neuen Version die Möglichkeit, den Export in einem Cloud-Dienst seiner Wahl zu speichern. Notwendig ist für die Export-Teilen-Funktion nur ein Account bei iCloud, Dropox und Co. Die Cloud-Dienste können übrigens auch seit Version 2.1 beim Fragebogenimport genutzt werden.

IMG_0215

Alle Neuerungen in Version 2.2

– QR-Codes werden live erkannt
– Verbesserung der Lead-Bearbeitung (Löschen per Drag and Drop)
– Automatisches Ausfüllen der Anrede
– Erweiterung der Exportformate (Excel-Support)
– Exports können via Mail sowie an alle gängigen Cloud-Dienste gesendet werden
– Verbesserung der Texterkennung und Zuordnung
– Verbesserungen in der Stabilität und Performance

 

Download und weitere Informationen

Besuchen Sie www.leadhound.de

LeadHound Visitenkartenscanner spart Speicherplatz

Das Update unseres Visitenkartenscanners auf  Version 2.1.1 scheint zwar unscheinbar, hat es aber in sich.

mehr als 50% Speicherplatz sparen

Mit ca. 55 MB Speicherplatz auf der iPad-Festplatte und einer Download-Größe von ungefähr 27 MB wird LeadHound über 50% kleiner als noch in Version 2.1. Zu der Einsparung kam es durch eine Optimierung in unserem OCR-Framework. In Zukunft wir der LeadHound-Download also noch schneller gehen mit gleichzeitiger Speicherplatz-Schonung der Festplatte.

„Eine gute App zeichnet sich durch ihre Kompaktheit und Übersichtlichkeit aus – nicht nur im Design und der Nutzerführung.“
– unbekannter Autor –

Mehr Infos zu LeadHound unter www.leadhound.de.
Direkt zum AppStore geht es über diesen Link: LeadHound herunterladen.

 

größe neu
Auschnitt Tabelle iOS-Geräte mit Download- und Installationsgrößen für LeadHound Version 2.1.1

größe alt

Auschnitt Tabelle iOS-Geräte mit  Download- und Installationsgrößen für LeadHound Version 2.1