Inhaltsverzeichnis
In Kombination mit einem User-Interface-Framework wie jQuery Mobile oder Dojo Mobile ermöglicht dies eine Anwendung in nativer Form, aber entwickelt in HTML, CSS und Javascript. Dies bedeutet, dass wir eine Webanwendung in eine native Anwendung für Android umwandeln können, da Apache Cordova als eingebetteter Webserver auf unserem Mobilgerät fungiert.Diese API gibt uns die Möglichkeit, mobile Anwendungen zu erstellen, die lokal auf dem mobilen Gerät laufen und auf Webdesign und -entwicklung basieren, sodass wir mit Apache Cordova über Javascript auf die Funktionalitäten des mobilen Geräts wie Kamera, Daten, Verbindungen WLAN oder Netzwerke, Tastatur oder Ton, Geolokalisierung, unsere eigene eingebettete Datenbank und alle anderen verfügbaren Funktionen.
Es ist notwendig zu haben Android SDK, Android-Geräte-Manager Ja Java jre installiert und verweist die ausführbaren Dateien auch auf die Systemvariablen.
Um zu starten müssen wir installieren node.js, das ist ein Framework, mit dem Sie einen Server erstellen können, der Javascript als Client-Sprache verwendet und Cordova wird mit dem Paketmanager namens NPM installiert, der Teil von Node.js ist.
Die Installation erfolgt zunächst unter Linux, wir greifen im Root-Modus auf das Terminal zu und laden die Datei herunter node.js mit folgendem Befehl:
wget http://nodejs.org/dist/v0.10.34/node-v0.10.34-linux-x86.tar.gz
Entpacken und in ein anderes Verzeichnis kopieren
sudo tar -C / usr / local --strip-components 1 -xzf node-v0.10.34-linux-x86.tar.gz
Wir installieren die entsprechenden Pakete
ls -l / usr / local / bin / Knoten ls -l / usr / local / bin / npm
Dann fahren wir mit dem Apache Cordova-Installationsprogramm fort
sudo npm install -g cordova
Um zu überprüfen, ob es richtig installiert wurde, können wir in das Terminal schreiben Cordova -v und es wird die installierte Version von Apache Cordova zurückgeben.
Nach der Installation können wir mit Cordova Anwendungen erstellen. Um eine Anwendung zu erstellen, gehen wir in ein Projektverzeichnis, das wir haben, und schreiben dann vom Terminal aus die vorgeschlagenen Befehle:
Die Befehlsstruktur wird sein:
cordova Projektverzeichnis erstellen component.package.class
So wird unsere Anwendung zum Beispiel sein:
cordova erstellen misapp com.tutoriales.misapp MiApp01
Dadurch wird die Struktur des Projekts erstellt und alle erforderlichen und aktualisierten Pakete heruntergeladen, die wir in unserer Anwendung verwenden.
Cordova emulieren AndroidWir können sehen, wie das Verzeichnis erstellt wurde missapp, innerhalb der Struktur der Anwendung und dort finden wir die folgenden Inhalte.
Im Ordner Plattformen Es enthält die notwendigen Dateien, damit Cordova mit den verschiedenen Geräten interagieren kann. Hier werden wir die Plattformen hinzufügen, auf denen wir unsere Anwendung testen möchten.
Beispiel vom Terminal aus führen wir den folgenden Befehl aus, um die Android-Plattform zu verwenden
Cordova-Plattform Android hinzufügen
Das Ergebnis wird sein:
# / projects / misapp / www $ cordova platform add android Android-Projekt erstellen… Cordova-Projekt für die Android-Plattform erstellen: Pfad: Plattformen / android Paket: com.tutoriales.misapp Name: MiApp01 Android-Ziel: android-19 Vorlagendateien kopieren… Projekt Erfolgreich erstellt.
Dies konfiguriert einen gültigen Emulator für Androd-Version 19 was ist er API-Version 19 oder auch Android 4.4 (KITKAT), das heißt, wir können jedes Gerät emulieren, auf dem diese Version oder niedriger läuft. Einige unterstützte Plattformen sind Amazon Fire OS, Android, BlackBerry, Firefox OS, iOS, Windows Phone, In diesem Tutorial konzentrieren wir uns auf Android.
Im Adressbuch www Hier wird die Anwendung selbst entwickelt, dort werden die HTML-, CSS-, Bilder- und Javascript-Dateien sowie alle notwendigen Ressourcen für unsere Anwendung gehostet. Denken Sie daran, dass es sich um eine Webseite handelt, die nativ auf einem Server läuft und auch ein eingebetteter Webbrowser, der als native App auf Android ausgeführt wird.
Wenn wir unser Projekt innerhalb des Verzeichnisses erstellen www, es wird eine generische Projektstruktur erstellt definiert mit dem Code, der zum Ausführen einer einfachen Anwendung vom Typ "Hallo Welt„Wir haben also ein Beispiel oder eine Vorlage für eine ausführbare Anwendung, um vor der Programmierung zu testen, ob sie funktioniert. Um sie jedoch ausführen zu können, müssen wir zuerst die Plattform oder die Plattformen hinzufügen, z. B. wenn wir sie auf Android- und iOS-Geräten testen möchten verwenden Sie den folgenden Befehl:
Für Android
Cordova bauen AndroidFür iOS
Cordova baut iOS
Immer wenn wir den Befehl im Anwendungsverzeichnis ausführen, weiß es, dass dies die zu kompilierende Anwendung ist. Einmal in das Verzeichnis kompiliert Plattformen / Plattformen / Android / Ameisenbau / es wird Dateien für uns generieren.
CordovaApp-debug.apk
Dies ist die installierbare und ausführbare APK-Datei auf jedem Android-Gerät. Um es auszuführen, muss das Anwendungsverzeichnis über volle Zugriffsberechtigungen verfügen. Jetzt werden wir es zum ersten Mal mit dem Emulator ausführen, dafür schreiben wir in das Terminal.
Cordova emulieren Android
Jetzt können wir mit der Erstellung unserer Anwendung beginnen, indem wir die Datei index.html im Verzeichnis www bearbeiten. Der Code ist einfach, die Meta erkennt den Gerätetyp, die Viewports passen den Inhalt an die Auflösung und Bildschirmgröße des Geräts an.
Der Rest des Codes ist HTML5, die Datei cordoba.js enthält die Serverkonfiguration und die Datei index.js ist der Ort, an dem wir unsere Skripte programmieren, um der Anwendung Interaktivität zu verleihen.
Miapp01Verbinde mit dem Gerät
Gerät ist bereit
Nehmen wir zum Testen einige Änderungen mit Html5 und CSS3 vor und testen auch ein anderes Gerät. Erstellen wir ein Formular mit zwei Feldern innerhalb der App-EbeneName:
Email:
Wir suchen nach dem css-Ordner in der Datei index.css und fügen den folgenden Code hinzu, um die Schaltfläche zu formatieren .btn {background: # 3498db; Hintergrundbild: -webkit-linear-gradient (oben, # 3498db, # 2980b9); Hintergrundbild: -moz-linear-gradient (oben, # 3498db, # 2980b9); Hintergrundbild: -ms-linear-gradient (oben, # 3498db, # 2980b9); Hintergrundbild: -o-linear-gradient (oben, # 3498db, # 2980b9); background-image: linear-gradient (nach unten, # 3498db, # 2980b9); -webkit-border-radius: 28; -moz-Grenzradius: 28; Randradius: 28px; Schriftfamilie: Arial; Farbe: #ffffff; Schriftgröße: 20px; Füllung: 10px 20px 10px 20px; Textdekoration: keine; } .btn: schweben {Hintergrund: # 3cb0fd; Hintergrundbild: -webkit-linear-gradient (oben, # 3cb0fd, # 3498db); Hintergrundbild: -moz-linear-gradient (oben, # 3cb0fd, # 3498db); Hintergrundbild: -ms-linear-gradient (oben, # 3cb0fd, # 3498db); Hintergrundbild: -o-linear-gradient (oben, # 3cb0fd, # 3498db); background-image: linear-gradient (nach unten, # 3cb0fd, # 3498db); Textdekoration: keine; }
Wenn Sie die Änderungen vorgenommen haben, speichern wir die Dateien und führen sie erneut mit dem Befehl cordova emulate android aus, zuvor haben wir ein anderes Gerät im Android-Geräte-Manager konfiguriert.
VERGRÖSSERN
Bisher sehen wir, wie man eine Anwendung mit erstellt HTML5, CSS3 und Javascript oder Jquery mobil für verschiedene mobile Geräte, egal ob es sich um ein Android-fähiges Mobiltelefon oder einen Fernseher handelt. Ein sehr wichtiger Aspekt ist, dass das gesamte Design als anpassungsfähig oder reaktionsschnell gedacht werden sollte.Hat dir dieses Tutorial gefallen und geholfen?Sie können den Autor belohnen, indem Sie diesen Knopf drücken, um ihm einen positiven Punkt zu geben
