So erstellen Sie eine einfache Android-App in PhoneGap
Glücklicherweise gibt es eine einfache Verknüpfung zum Erstellen eines sogenannten Hybrid-Appim Gegensatz zur Schaffung eines native App. Eine Hybrid-App verwendet im Wesentlichen das in WebView integrierte Android, um Ihre App zu präsentieren. Es stehen Plug-Ins zur Verfügung, mit denen Ihre Hybrid-App auf die Kamera, den Messaging-Dienst und andere Aspekte des Android-Systems zugreifen kann. Eine Hybrid-App kann problemlos für mehrere Betriebssysteme erstellt werden, da diese zum Ausführen meist Java, HTML5 und CSS verwenden.
In diesem Handbuch erfahren Sie, wie Sie eine Hybrid-App mit der beliebten App-Erstellungsplattform PhoneGap erstellen. Wir verwandeln Ihre Website in eine installierbare APK-Datei (Android-Anwendung), die auf jedem Android-Telefon installiert werden kann. Wenn die App gestartet wird, wird Ihre Website einfach im nativen WebView-Browser von Android geöffnet, sie wird jedoch als Vollbild-App angezeigt – keine URL-Navigationsleiste oder andere Hinweise darauf, dass Ihre Website einfach in einem Browser angezeigt wird.
Bedarf
Ihre eigene Website (um diesem Handbuch zu folgen, können Sie einfach einen kostenlosen WordPress-Blog starten)
PhoneGap-Konto
Editor ++ (oder eine ähnliche Textbearbeitungssoftware, die Code erkennen kann)
Fotobearbeitungssoftware zum Erstellen von App-Symbolen (Photoshop, GIMP usw.)
Codierungsvorlagen
Dies sind Codevorlagen, die Sie für den Zweck dieses Handbuchs verwenden können. Sie stammen aus meiner eigenen App, die mit PhoneGap entwickelt wurde, aber ich habe ihnen meine persönlichen Daten entzogen. Das Einrichten dieser Elemente mit den richtigen Parametern von Grund auf hat mich viele Tage in Anspruch genommen. Daher stelle ich diese zur Vereinfachung zur Verfügung. Bitte!
Einstieg
Erstellen Sie einen Ordner auf Ihrem Desktop und nennen Sie ihn „www:” ohne die Anführungszeichen. Dies ist das Hauptverzeichnis des Projekts, in dem der PhoneGap-Builder erwartet, alle Dateien für Ihr Projekt zu finden. Jetzt erstellen wir ein Symbol für Ihre App.
Öffnen Sie Ihre Fotobearbeitungssoftware und erstellen Sie ein neues Bild im PNG-Format. Ihre Bildeinstellungen sollten folgendermaßen aussehen:
Und jetzt können Sie Ihr Symbol zeichnen, zum Beispiel mache ich nur einen kleinen Knopf:
Die Größe des Bildes hängt von Ihrem persönlichen Telefonbildschirm ab. Wenn Sie jedoch beabsichtigen, eine App für mehrere Geräte zu entwickeln, werden Sie natürlich mehrere Größen desselben Symbols erstellen. Hier ist eine Tabelle der verwendeten Bildgrößen:
36 × 36 (120 dpi / LDPI)
48 × 48 (160 dpi / MDPI)
72 × 72 (240 dpi / HDPI)
96 × 96 (320 dpi / XHDPI)
144 × 144 (480 dpi / XXHDPI)
192 × 192 (640 dpi / XXXHDPI)
Ich möchte nicht zu lange über Bildschirmgrößen und DPI sprechen, sondern nur wissen, dass DPI ziemlich genau mit der Bildschirmauflösung korreliert. Ein Telefon mit einer Bildschirmauflösung von 1080 × 1920 verwendet 480 dpi, dies ist jedoch nicht der Fall Notwendig korrelieren genau mit der Bildschirmgröße. Ein Telefon kann einen 5,2-Zoll- oder einen 6-Zoll-Bildschirm und eine Auflösung von 1080 × 1920 haben. In diesem Handbuch geht es jedoch nicht um Smartphonebildschirme. Fahren wir also fort.
Nachdem Sie Ihr Symbol erstellt haben, speichern Sie es unter icon.png und verschieben Sie es in Ihren Ordner www :. Dies wird die Standard Symbol für Ihre App. Wenn Sie Symbole in verschiedenen Größen erstellen möchten, die der Bildschirmauflösung des Benutzers entsprechen, speichern Sie das Symbol in verschiedenen Größen und Namen, z. B. Icon144.png, Icon192.png, Icon96.png usw. Dann würden Sie die bearbeiten Config.xml Datei, um auf jedes einzelne Symbol zu verweisen. Lass uns weitermachen.
Nachdem Sie nun ein Symbol für Ihre App haben, benötigen Sie ein Begrüßungsbild. Dies ist im Grunde ein Ladebildschirm, wie ein Hintergrundbild, das angezeigt wird, bevor Ihre App geladen wird. Splash-Bildgrößen funktionieren nach dem gleichen Prinzip wie Symbole, sind jedoch etwas größer. Hier ist die Tabelle:
- LDPI:
- Porträt: 200x320px
- Landschaft: 320x200px
- MDPI:
- Porträt: 320 x 480 Pixel
- Landschaft: 480 x 320 Pixel
- HDPI:
- Porträt: 480 x 800 Pixel
- Landschaft: 800 x 480 Pixel
- XHDPI:
- Porträt: 720px1280px
- Landschaft: 1280 x 720 Pixel
- XXHDPI:
- Porträt: 960px1600px
- Landschaft: 1600 x 960 Pixel
- XXXHDPI:
- Porträt: 1280px1920px
- Landschaft: 1920 x 1280 Pixel
Erstellen Sie also Ihr Begrüßungsbild in der Auflösung für Ihr Gerät und speichern Sie es unter Splash.png und verschieben Sie es dann in den Ordner Ihres Projekts. Großartig, Sie haben jetzt das Symbol und das Begrüßungsbild Ihrer App. Lassen Sie uns nun mit dem Einrichten Ihrer Konfigurations- und Indexdateien fortfahren.
Index.HTML und Config.XML erklärt
Mit der Datei config.xml werden die Build-Umgebung (Android, iPhone, Windows Phone), die Symbol- und Begrüßungsspeicherorte sowie die Apache Cordova-Plug-Ins festgelegt, die Sie in Ihrer App verwenden möchten.
Öffnen Sie die Vorlage, die ich in Notepad ++ bereitgestellt habe, und Sie sehen diese Zeilen oben:
Aktualisieren Sie diese Felder mit Ihren Informationen, lassen Sie jedoch die Einstellungsfelder in Ruhe. Der Rest der Konfigurationsdatei ist selbsterklärend, wenn Sie sich nur die Werte ansehen. Der Voreinstellungsname = “Vollbild” weist die App beispielsweise an, sich selbst als Vollbild-App zu starten. Lassen Sie alles in Ruhe, bis auf diesen letzten Wert am Ende der Datei:
Ändern Sie es in Ihre tatsächliche Website-URL. Auf diese Weise kann der App-Benutzer vollständig auf Ihrer Website und nur auf Ihrer Website navigieren. Er kann Ihre Website während der Verwendung Ihrer App nicht verlassen. Natürlich hat die App keine URL-Navigationsleiste, dies ist nicht einmal wirklich ein Problem, sondern stellt auch sicher, dass der Benutzer auf alle Seiten Ihrer Website zugreifen kann. Das * nach der Website-URL ist a Platzhalter, was im Codierungsjargon bedeutet, dass alles akzeptiert wird, was anstelle des Zeichens * eingegeben wird.
Wenn Sie den Benutzer nur auf bestimmte Seiten Ihrer Website beschränken möchten, fügen Sie natürlich separate Werte wie den folgenden hinzu:
Gehen wir weiter zum Index.html Datei, dies ist das A und O, damit die App tatsächlich funktioniert. Öffnen Sie es in Notepad ++ und wechseln Sie die Dokumentensprache zu HTML. Grundsätzlich teilt index.html dem Android-Browser mit, wie Ihre Website angezeigt werden soll. In der von mir bereitgestellten Vorlage gibt es Tags, mit denen Sie die URL-Navigationsleiste aus dem Browser entfernen, die Schaltfläche “Zurück” des Telefons zum Beenden der App zulassen und starten können Die App nach dem Begrüßungsbildschirm wird angezeigt. Die Zeile, die Sie ändern möchten, ist hier:
var url = ‘http://yourwebsite.com’
Erstellen der App in PhoneGap Build
Melden Sie sich also bei Ihrem GitHub-Konto an und navigieren Sie zur Hauptseite Ihres Repositorys. Klicken Sie unter dem Namen des Repositorys auf “Dateien hochladen” und ziehen Sie Ihren Projektordner in den Dateibaumbildschirm. Geben Sie nun unten eine Festschreibungsnachricht ein, z.mein erster App-Versuch “. Klicken Sie abschließend auf Änderungen übernehmen.
Nun geh zum PhoneGap Build Klicken Sie auf der Build-Seite auf die Schaltfläche “Neue App”. Daraufhin werden Sie aufgefordert, den Pfad zu Ihrem GitHub-Repository einzugeben. Klicken Sie dazu auf “Aus .git-Reposity ziehen”.
Klicken Sie nun auf der Haupt-Build-Seite auf “Code aktualisieren” und “Neueste ziehen”.
Klicken Sie abschließend auf “Erstellen”. Es kompiliert Ihre App in eine APK-Datei und bietet Ihnen dann die Möglichkeit, die APK-Datei herunterzuladen. Sie können diese APK-Datei jetzt auf Ihren Computer herunterladen, auf Ihr Telefon übertragen und von dort aus installieren. Alternativ können Sie mit Ihrem Telefon den QR-Code auf Ihrem Computerbildschirm scannen, um die APK-Datei automatisch auf Ihrem Android-Gerät zu installieren.
Das ist es! Um Ihnen einige wichtige Dinge zu erklären:
- Dies war eine extrem vereinfachte Anleitung, die Sie durch die Erstellung der grundlegendsten Hybrid-Apps führte. Die Leute verpacken ihre Websites im Allgemeinen nicht in einen nativen Browser und geben sie als Android-App im Google Play Store weiter. Jetzt, da Sie wissen, wie es geht, können Sie die PhoneGap-Dokumentation zum Anpassen Ihrer App lesen und ihr viel Flair hinzufügen, damit Sie hoffentlich eine wirklich nützliche App erstellen können.
- Zweitens verbietet Google Play diese Art der App-Erstellung, um Link-Schema-Apps nur zum Zweck des Umsatzes zu erstellen. Sie können also keine App namens “Earn Money Today!” Erstellen. Das öffnet eine Website voller Anzeigen und setzt auf Werbeeinnahmen. Sie werden aus dem Google Play Store verbannt.
