PhoneGap - Umgebungseinrichtung

In diesem Kapitel erfahren Sie, wie Sie die Basisumgebung einrichten, um Apps mühelos zu erstellen. Obwohl PhoneGap die Offline-Erstellung von Apps mithilfe der Cordova-Befehlszeilenschnittstelle und des Github-Repository- Mechanismus unterstützt, konzentrieren wir uns auf das Verfahren mit minimalem Aufwand.

Wir gehen davon aus, dass Sie mit Webtechnologien vertraut sind und Ihre Webanwendung bereit haben, als App ausgeliefert zu werden. Da PhoneGap nur HTML, CSS und JavaScript unterstützt, muss die Anwendung nur mit diesen Technologien erstellt werden.

Aus Entwicklersicht sollte eine App die folgenden Elemente in ihrem Paket enthalten haben:

Konfigurationsdateien
Symbole für App
Informationen oder Inhalte (mithilfe von Webtechnologien erstellt)

Aufbau

Unsere Web-App benötigt nur eine Konfigurationsdatei, die ausreichen sollte, um alle erforderlichen Einstellungen zu konfigurieren. Sein Name ist config.xml. Diese Datei enthält alle erforderlichen Informationen zum Kompilieren der App.

Sehen wir uns config.xml für unser Beispiel an -

<?xml version = "1.0" encoding = "UTF-8"?>

<widget xmlns = "http://www.w3.org/ns/widgets" 
   xmlns:gap = "http://phonegap.com/ns/1.0" id = "com.tutorialspoint.onlineviewer" version = "1.0">
   
   <name>Tutorials Point</name>
   
   <description>
      Tutorials Point Online Viewer
   </description>
   
   <author href = "http://tutorialspoint.com" email = "[email protected]">
      Tutorials Point
   </author>
   
   <preference name = "permissions" value = "none"/>
   
   <icon src = "res/icon/android/drawable-ldpi/tp_icon.png" 
      gap:platform = "android" gap:qualifier = "ldpi" />
		
   <icon src = "res/icon/android/drawable-mdpi/tp_icon.png" 
      gap:platform = "android" gap:qualifier = "mdpi" />
		
   <icon src = "res/icon/android/drawable-hdpi/tp_icon.png" 
      gap:platform = "android" gap:qualifier = "hdpi" />
		
   <icon src = "res/icon/android/drawable-xhdpi/tp_icon.png" 
      gap:platform = "android" gap:qualifier = "xhdpi" />
		
   <icon src = "res/icon/android/drawable-xxhdpi/tp_icon.png" 
      gap:platform = "android" gap:qualifier = "xxhdpi" />
   
   <icon src = "res/icon/ios/Icon-72.png" gap:platform = "ios" gap:qualifier = ""/>
   <icon src = "res/icon/ios/icon-57.png" gap:platform = "ios" width = "57" height = "57" />
   <icon src = "res/icon/ios/icon-72.png" gap:platform = "ios" width = "72" height = "72" />
   <icon src = "res/icon/ios/icon-57-2x.png" gap:platform = "ios" width = "114" height = "114" />
   <icon src = "res/icon/ios/icon-72-2x.png" gap:platform = "ios" width = "144" height = "144" />
   
</widget>

Alle Konfigurationsinhalte werden in das <widget> -Tag eingeschlossen. Eine kurze Beschreibung dieser ist wie folgt:

<widget id = ”app_id”>

id ist Ihre reservierte App-ID in verschiedenen App Stores. Es ist im Stil eines umgekehrten Domainnamens, dh com.tutorialspoint.onlineviewer usw.

<widget version = "x.y.z">

Dies ist die Versionsnummer der App im xyz-Format, wobei (x, y, z) positive ganze Zahlen sind, dh 1.0.0, und das Versionssystem major.minor.patch darstellt.

<name> App Name</name>

Dies ist der Name der App, der unter dem App-Symbol auf dem mobilen Bildschirm angezeigt wird. Ihre App kann unter diesem Namen durchsucht werden.

<description> My First Web App </description>

Dies ist eine kurze Beschreibung dessen, worum es in der App geht und worum es geht.

<author> Author_Name </author>

Dieses Feld enthält den Namen des Erstellers oder Programmierers, der im Allgemeinen auf den Namen der Organisation festgelegt ist, die diese App startet.

<preferences name = "permissions" value = "none">

Das Tag "Einstellungen" wird verwendet, um verschiedene Optionen wie "Vollbild", "Hintergrundfarbe" und "Ausrichtung für App" festzulegen. Diese Optionen sind in Name und Wert gepaart. Beispiel: name = "FullScreen" value = "true" usw. Da wir keine dieser erweiterten Einstellungen benötigen, setzen wir einfach keine Berechtigungen.

<icon>

Ermöglicht das Hinzufügen von Symbolen zu unseren Apps. Es kann auf verschiedene Arten codiert werden, aber da wir von allem eine Abkürzung lernen, ist es hier. Das.srcbestimmt den Pfad des Symbolbildes. Dasgap:platformlegt fest, für welche Betriebssystemplattform dieses Symbol verwendet werden soll. Dasgap:qualifierist die Dichte, die von Android-Geräten verwendet wird. Die iOS-Geräte verwendenwidth & height Parameter.

Symbole

Es gibt Geräte unterschiedlicher Größe mit demselben mobilen Betriebssystem. Um also eine Zielgruppe einer Plattform anzusprechen, müssen Sie auch Symbole aller Mobiltelefontypen bereitstellen. Es ist wichtig, dass wir Symbole mit exakten Formen und Größen vorbereiten, die für ein bestimmtes mobiles Betriebssystem erforderlich sind.

Hier verwenden wir die Ordner res/icon/ios und res/icon/android/drawable-xxxx..

Um diese Arbeit schnell zu erledigen, können Sie ein Logo der Größe 1024 x 1024 erstellen und sich bei makeappicon.com anmelden. Diese Website hilft Ihnen dabei, sofort Logos aller Größen für Android- und iOS-Plattformen zu erstellen.