Share
Viele Webentwickler scheuen sich vor der Entwicklung mobiler Apps, da sie der Meinung sind, dass es zu lange dauern würde, um sich mit der Entwicklung mobiler Anwendungen vertraut zu machen. Nun, sie sind nicht völlig falsch, denn wenn Sie lernen, native Apps für eine mobile Plattform zu entwickeln, müssen Sie sich nicht nur mit einer neuen Programmiersprache vertraut machen, sondern auch mit Konzepten und Mustern, die oft plattformspezifisch sind.
Wenn Sie einer dieser Entwickler sind, sollten Sie stattdessen Hybrid-Apps erstellen, da Sie mit Sprachen arbeiten könnten, mit denen Sie bereits vertraut sind: HTML5, CSS und JavaScript. Außerdem können Sie beliebte Frameworks wie Twitter Bootstrap oder jQuery Mobile verwenden, um Ihre Apps zu erstellen.
Nun, da ich Ihre Aufmerksamkeit habe, tauchen wir in Telerik AppBuilder ein, einer leistungsstarken Cloud-basierten Entwicklungsumgebung, die es unglaublich einfach macht, Hybrid-Apps zu erstellen. In diesem Tutorial werden wir uns ansehen, was AppBuilder zu bieten hat, und dabei eine einfache, hybride App erstellen.
Einer der überzeugendsten Gründe für die Verwendung von AppBuilder ist der In-Browser-Client, eine vollwertige IDE (Integrated Development Environment), die im Browser ausgeführt wird. Sie können Hybrid-Apps von jedem Computer oder mobilen Gerät aus erstellen, testen und sogar veröffentlichen, ohne etwas lokal installieren zu müssen.
Die Entwicklung von iOS-Apps mit Computern unter Windows oder Linux ist ein weiterer Grund, warum Sie AppBuilder verwenden möchten. Die iOS-Gerätesimulatoren können auch von jedem Betriebssystem aus verwendet werden.
Da AppBuilder Teil der Telerik-Plattform ist, können Sie mit Ihrer App auf Funktionen wie Analysen, Push-Benachrichtigungen, Benutzerauthentifizierung und Cloud-Datenspeicher zugreifen.
Um diesem Tutorial zu folgen, benötigen Sie lediglich einen Telerik-Account. Wenn Sie noch keine haben, können Sie sich kostenlos anmelden und sofort eine 30-Tage-Testversion starten.
In diesem Lernprogramm arbeiten wir hauptsächlich mit dem In-Browser-Client von AppBuilder. Öffnen Sie in Ihrem Browser eine neue Registerkarte und melden Sie sich bei der Telerik-Plattform an. Sobald Sie angemeldet sind, wird eine Seite mit allen Ihren Apps angezeigt.
Klicken Sie auf, um eine neue App zu erstellen App erstellen Taste. Sie werden nun aufgefordert, verschiedene Details zur App anzugeben.
Wählen Sie zunächst den Typ der App, die Sie erstellen möchten. Vorerst auswählen Cordova Hybrid Wir erstellen unsere App mit Apache Cordova, einem beliebten Entwicklungs-Framework für Hybrid-Apps.
Als nächstes geben Sie der App einen aussagekräftigen Namen und eine Beschreibung, indem Sie die App Name und Beschreibung Felder. Ich werde es benutzen Meine erste App als der Name.
Zum Schluss klicken Sie auf App erstellen Schaltfläche, um eine vollständig konfigurierte Hybrid-App zu generieren, die standardmäßig das Kendo UI-Framework verwendet.
Sobald die App erstellt wurde, werden Sie zum angezeigt Ansichten Bedienung. Mit diesem Dienst können Sie alle Ansichten Ihrer Hybrid-App erstellen, ohne HTML-Code schreiben zu müssen.
In diesem Tutorial erstellen wir eine sehr einfache App, die Kilogramm in Pfund umrechnen kann. Es hat zwei Ansichten:
Lassen Sie uns zuerst das erstellen Über Aussicht. Wählen Sie dazu das Home-Ansicht und klicken Sie auf Ansichtstyp ändern. Sie erhalten nun mehrere Ansichtsvorlagen. Drücke den Über Vorlage.
Stellen Sie im nächsten Bildschirm das ein Titel zu Über und klicken Sie auf die Vorlage Überschrift, um den Inhalt der Ansicht zu konfigurieren. Normalerweise enthält ein Bildschirm mit Informationen den Namen, die Version und die Beschreibung der App. Füllen Sie diese Felder daher entsprechend aus. Die Vorlage enthält auch soziale Schaltflächen. Wir werden sie heute nicht verwenden, also deaktivieren Sie das Kontrollkästchen Kontaktiere uns, Facebook-Schaltfläche, und Twitter-Schaltfläche Felder.
Sobald Sie auf die Schaltfläche klicken Sich bewerben Wenn Sie auf die Schaltfläche klicken, können Sie die soeben erstellte Ansicht sehen.
Lass uns jetzt die erstellen Konverter Ansicht durch Klicken auf Ansicht hinzufügen Taste. Sie werden aufgefordert, erneut eine Vorlage auszuwählen. Wählen Sie dieses Mal das Bilden Vorlage, da diese Ansicht zwei Eingabefelder hat:
Stellen Sie im nächsten Bildschirm das ein Titel Feld zu Konverter und das Name Feld zu Konverter. Um die beiden Eingabefelder hinzuzufügen, klicken Sie zuerst auf Formularfelder Überschrift und dann auf die Formularfelder hinzufügen Taste. Sie werden nun aufgefordert, den Typ des Formularfelds auszuwählen.
Da das Gewicht in Kilogramm eine Zahl sein soll, wählen Sie Zahleneingabe aus der Liste der Optionen. Nennen Sie es kg und geben Sie ihm ein entsprechendes Etikett.
Erstellen Sie auf ähnliche Weise eine Textfeld und nennen Sie es Ergebnis. Stellen Sie sicher, dass Sie ihm auch ein passendes Etikett geben.
Nachdem die Formularfelder fertig sind, klicken Sie auf die Schaltfläche Tasten Überschrift. Standardmäßig verfügt die Formularvorlage über eine Bestätigungsschaltfläche und eine Abbruchschaltfläche. Wir brauchen die Schaltfläche "Abbrechen" nicht, also deaktivieren Sie das Kontrollkästchen Schaltfläche "Abbrechen" Feld.
Klicken Sich bewerben um die Änderungen zu speichern. Die Ansicht sollte jetzt so aussehen:
Damit Benutzer zwischen den beiden von uns erstellten Ansichten navigieren können, hat der Views-Service unserer App bereits ein Navigationslayout hinzugefügt. Um es zu konfigurieren, wechseln Sie zum Navigationslayout Sektion.
Sie werden sehen, dass die App aktuell eine Tab-Menü als Navigationslayout. Ich lasse es so, aber Sie können mit den anderen verfügbaren Optionen experimentieren.
Standardmäßig verwendet unsere App die Über Ansicht als erste Ansicht. Benutzen Konverter Klicken Sie als Startansicht auf die Schaltfläche Anwendung wird gestartet Überschrift und den Wert von Anfangsansicht zu Konverter. Vergiss nicht zu klicken Sich bewerben um die Änderungen zu speichern.
Das Navigationslayout Ihrer App sollte jetzt so aussehen:
Nun, da die Benutzeroberfläche unserer App fertig ist, schreiben wir etwas JavaScript-Code, um die eigentliche Konvertierung von Kilogramm in Pfund vorzunehmen.
Klicken Sie links auf Code um den Code-Editor zu öffnen. Dies zeigt die Struktur des Hybridprojekts. Sie werden sehen, dass es für jede von uns erstellte Ansicht ein Verzeichnis gibt, das die genannten Dateien enthält view.html und index.js. Während view.html enthält den HTML-Code, der das Layout der Ansicht definiert, index.js enthält den JavaScript-Code, der verschiedene UI-Ereignisse verarbeiten kann.
Öffne das Konverter Ansicht index.js Datei. Sie werden feststellen, dass AppBuilder bereits ein erstellt hat kendo.observable Objekt aufgerufen converterModel um das von uns erstellte Formular zu verwalten. Es hat ein Felder Attribut, das die Namen der von uns erstellten Formularelemente enthält. Es hat auch eine einreichen Funktion, die aufgerufen wird, wenn der Benutzer die. drückt Bestätigen Taste. Wie Sie vielleicht schon vermutet haben, sollte der gesamte Code in den Code eingefügt werden einreichen Funktion.
Der Code für die Umrechnung von Kilogramm in Pfund ist fast trivial. Alles was Sie tun müssen, ist den Wert von zu erhalten fields.kgs, multiplizieren Sie es mit 2.2046 und aktualisieren Sie den Wert von Felder.Ergebnis. Die Attribute von erhalten und einstellen converterModel, Sie müssen es verwenden erhalten und einstellen Methoden. Fügen Sie dem folgenden Code hinzu index.js Datei:
"javascript // START_CUSTOM_CODE_converterModel // Benutzerdefinierten Code hier hinzufügen. Weitere Informationen zu benutzerdefiniertem Code finden Sie unter http://docs.telerik.com/platform/screenbuilder/troblem/how-to-keep-custom-code-changes
var model = app.converter.converterModel; model.set ("submit", function () var lbs = model.get ("fields.kgs") * 2.2046; // Holen Sie sich fields.kgs und multiplizieren Sie mit 2.2046 model.set ("fields.result", lbs + "Lbs"); // set fields.result);
// END_CUSTOM_CODE_converterModel "
Beachten Sie, dass Sie Ihren benutzerdefinierten Code zwischen dem automatisch generierten Code schreiben sollten START_CUSTOM_CODE und END_CUSTOM_CODE Bemerkungen. Wenn Sie dies nicht tun, geht Ihr Code verloren, wenn Sie mithilfe des Views-Service weitere Änderungen in Ihren Ansichten vornehmen.
Unsere App ist fertig. Um dies zu testen, können wir einen der zahlreichen Gerätesimulatoren verwenden, die AppBuilder enthält. Starten Sie zunächst den iPhone-Simulator, indem Sie drücken Strg + F6. Überprüfen Sie nach dem Start der App, ob die Konvertierungslogik funktioniert, indem Sie eine Zahl in das erste Textfeld eingeben und die Taste drücken Bestätigen Taste.
Sie können die Ausrichtung des Gerätesimulators ändern, um zu sehen, wie er im Querformat aussieht. Klicken Sie dazu auf eine der Drehen Knöpfe oben.
Mit AppBuilder können Sie Ihre App auch auf verschiedenen iOS-Versionen testen. Sie können die Version des Betriebssystems ändern, indem Sie auf klicken Ausführung Dropdown an der Spitze.
Nachdem Sie nun gesehen haben, wie die App auf einem iPhone aussieht und sich verhält, starten Sie sie auf einem anderen Gerätesimulator. Klicken Sie auf die Dropdown-Liste mit der Liste der Geräte und wählen Sie Android Telefon.
Sie werden feststellen, dass die App auch auf dem Android-Simulator einwandfrei funktioniert. Es sieht jedoch nicht ganz nach einer Android-App aus. Das liegt daran, dass unsere App derzeit eine Haut namens eben. Um ihm ein Materialdesign-Aussehen zu verleihen, öffnen Sie sich app.js und ändern Sie den Wert von Haut zu Material.
Die App sollte jetzt so aussehen:
Die Gerätesimulatoren sind während der Entwicklung sehr nützlich. Es ist jedoch immer eine gute Idee, die Leistung der App auf einem echten Telefon oder Tablet zu ermitteln. Wenn Sie die Begleit-App von AppBuilder verwenden, ist das Ausführen der App auf Ihrem Gerät genauso einfach wie im Simulator.
Nachdem Sie die Begleit-App auf einem physischen Gerät installiert haben, öffnen Sie den Code-Editor und drücken Sie Strg + B um den Buildprozess zu starten. Sie werden aufgefordert, die Plattform auszuwählen, auf der Sie die App ausführen möchten. Stellen Sie sicher, dass die von Ihnen gewählte Plattform mit der des Geräts übereinstimmt, auf dem Sie die Begleit-App installiert haben. Als nächstes wählen Sie die AppBuilder Begleit-App Option und drücken Sie die Nächster Taste.
Wenn der Build erfolgreich abgeschlossen wurde, sollte der folgende Bildschirm angezeigt werden:
Sie können jetzt die AppBuilder Companion App auf Ihrem Gerät öffnen und den QR-Code scannen, um Ihre App auszuführen.
Wenn Sie lieber lokal von der Befehlszeile aus arbeiten, können Sie die Befehlszeilenschnittstelle (CLI) von AppBuilder verwenden, die fast alle Funktionen des In-Browser-Clients ausführen kann. Da es sich bei der CLI um ein Node.js-Paket handelt, können Sie es einfach mit npm (Node Package Manager) installieren..
bash sudo npm install -g appbuilder
Die meisten Funktionen der CLI sind nur verfügbar, nachdem Sie sich bei Ihrem Telerik-Konto angemeldet haben. Verwenden Sie daher den folgenden Befehl, um sich anzumelden, bevor Sie etwas anderes tun:
bash appbuilder login
Sobald Sie angemeldet sind, können Sie die -h Option um zu sehen, was die Appbuilder Befehl kann für Sie tun.
bash appbuilder -h
Um Ihnen den Einstieg zu erleichtern, können Sie den gesamten Code der App, die wir im In-Browser-Client erstellt haben, herunterladen:
bash Appbuilder Cloud-Export "Meine erste App"
In diesem Lernprogramm haben Sie gelernt, wie Sie mit Telerik AppBuilder eine einfache, hybride App erstellen können. Sie haben auch gelernt, wie Sie AppBuilders Begleit-App und Gerätesimulatoren verwenden, um die App zu testen. Obwohl wir uns heute auf den In-Browser-Client konzentriert haben, bietet AppBuilder für Entwickler, die eine herkömmliche IDE bevorzugen, einen eigenständigen Windows-Client und eine Visual Studio-Erweiterung.
Starten Sie noch heute eine kostenlose Testversion. Weitere Informationen zu AppBuilder finden Sie in der umfassenden Dokumentation.
Accentsconagua