PhoneGap - Konfiguracja środowiska

W tym rozdziale dowiemy się, jak skonfigurować podstawowe środowisko, aby bez wysiłku tworzyć aplikacje. Chociaż PhoneGap obsługuje tworzenie aplikacji offline przy użyciu interfejsu wiersza poleceń Cordova i mechanizmu repozytorium Github, skupimy się na procedurze minimalnego wysiłku.

Zakładamy, że jesteś dobrze zaznajomiony z technologiami internetowymi i masz gotową aplikację internetową do wysłania jako aplikacja. Ponieważ PhoneGap obsługuje tylko HTML, CSS i JavaScript, konieczne jest, aby aplikacja była tworzona tylko przy użyciu tych technologii.

Z punktu widzenia programisty aplikacja powinna zawierać następujące elementy w swoim pakiecie -

Pliki konfiguracyjne
Ikony aplikacji
Informacje lub treści (utworzone przy użyciu technologii internetowych)

Konfiguracja

Nasza aplikacja internetowa będzie potrzebować tylko jednego pliku konfiguracyjnego, który powinien być odpowiedni do skonfigurowania wszystkich niezbędnych ustawień. Nazywa się config.xml. Ten plik zawiera wszystkie niezbędne informacje wymagane do skompilowania aplikacji.

Zobaczmy config.xml jako nasz przykład -

<?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>

Cała zawartość konfiguracji jest opakowana w znacznik <widget>. Krótki ich opis jest następujący -

<widget id = ”app_id”>

id to zarezerwowany identyfikator aplikacji w różnych sklepach z aplikacjami. Jest w stylu odwrotnej nazwy domeny, tj. Com.tutorialspoint.onlineviewer itp.

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

To jest numer wersji aplikacji w formacie xyz, gdzie (x, y, z) to dodatnie liczby całkowite, tj. 1.0.0, reprezentuje wersję systemu major.minor.patch.

<name> App Name</name>

To jest nazwa aplikacji, która będzie wyświetlana pod ikoną aplikacji na ekranie telefonu komórkowego. Twoja aplikacja może być przeszukiwana przy użyciu tej nazwy.

<description> My First Web App </description>

To jest krótki opis tego, o czym jest aplikacja i czym jest.

<author> Author_Name </author>

To pole zawiera nazwę twórcy lub programisty, zwykle ustawioną na nazwę organizacji, która uruchamia tę aplikację.

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

Znacznik preferencji służy do ustawiania różnych opcji, takich jak FullScreen, BackgroundColor i Orientation dla aplikacji. Te opcje są w parze nazwa i wartość. Na przykład: name = "FullScreen" value = "true" itd. Ponieważ nie wymagamy żadnego z tych zaawansowanych ustawień, po prostu ustawiliśmy uprawnienia na brak.

<icon>

Pozwala nam dodawać ikony do naszych aplikacji. Można to zakodować na różne sposoby, ale ponieważ uczymy się wszystkiego na skróty, oto on. Plik.srcokreśla ścieżkę obrazu ikony. Plikgap:platformokreśla, dla której platformy systemu operacyjnego ta ikona ma być używana. Plikgap:qualifierto gęstość używana przez urządzenia z systemem Android. Urządzenia iOS używająwidth & height parametry.

Ikony

Istnieją urządzenia o różnych rozmiarach, które mają ten sam mobilny system operacyjny, więc aby dotrzeć do odbiorców jednej platformy, musisz również dostarczyć ikony wszystkich typów telefonów komórkowych. Ważne jest, abyśmy przygotowali ikony o dokładnych kształtach i rozmiarach, zgodnie z wymaganiami konkretnego mobilnego systemu operacyjnego.

Tutaj używamy folderów res/icon/ios i res/icon/android/drawable-xxxx..

Aby szybko wykonać tę pracę, możesz utworzyć logo o rozmiarze 1024x1024 i zalogować się na makeappicon.com. Ta strona internetowa pomoże Ci natychmiast stworzyć logo wszystkich rozmiarów zarówno dla platformy Android, jak i iOS.