Phonegap to framework firmy Adobe, rodzaj wrappera umożliwiający pisanie aplikacji w HTML5 i CSS z wykorzystaniem JavaScript działających na telefonach komórkowych z dowolnym popularnym systemem operacyjnym (iOS, Android itp.). Dzięki temu aby programować na Androida nie trzeba uczyć się Javy, a na iOS C++.
Jest to o tyle przydatne, że liczba programistów HTML/CSS/JavaScript jest znacznie większa.

Oczywiście Phonegap ma też wady – jest wolniejszy od aplikacji natywnych i nie obsługuje niektórych zaawansowanych opcji systemowych. Jednak za jego używaniem oponują największe portale internetowe. Koszt pisania takich aplikacji jest znacznie niższy a aktualizacje łatwiejsze do przeprowadzenia. Gier komputerowych jednak nikt w Phonegapie nie pisze. Do aplikacji firmowych nadaje się idealnie.

Instrukcja instalacji w kilku prostych krokach znajduje się na na stronie producenta.
W skrócie

  1. Instalujemy aplikację na PC
  2. Instalujemy aplikację na urządzeniu mobilnym i tu pierwsza niespodzianka – stara wersja Androida (4.2 albo niższa) odmawia instalacji, ale wciąż można pobrać plik APK ręcznie i go zainstalować – działa
  3. Tworzymy nowy projekt w aplikacji PC, w katalogu z projektem jest podkatalog www, w którym powinien być kod źródłowy naszej strony (index.html)
  4. Uruchamiamy przyciskiem PLAY > projekt, w pasku statusu pojawi się adres serwera, na urządzeniu mobilnym wpisujemy w aplikacji ten właśnie adres
  5. Po skończeniu kodu kompilujemy ONLINE aplikację do pliku np. APK tworząc konto na stronie Adobe wybierając opcję „Free”, następnie pakując folder www z aplikacją do pliku ZIP i wysyłając na serwer po zalogowaniu

I już nasza aplikacja działa na urządzeniu mobilnym. Oczywiście na końcu utworzymy plik APK i nie będzie konieczne uruchamianie serwera przy każdym odpalaniu, tylko normalnie wgramy paczkę na telefon.

Przykładowy kod HTML z JavaScript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
 <head>
   <meta charset="utf-8">
   <title>Moja pierwsza APK</title>
 </head>
 <body>
   <h1>Pierwsza moja apka na Androida!</h1>
   <input type="button" onclick="klik()" value="Kliknij"> <!--przycisk do klikania-->
   <br>
   Kliknięć: <div id="wyjscie">0</div>     <!-- tu z kazdym kliknieciem pojawi sie nowa wartosc -->
   <script>
        var ilosc_klikniec = 0;
               
        function klik() {
                                document.getElementById("wyjscie").innerHTML = ++ilosc_klikniec;
        }
   </script>
 </body>
</html>

W pliku index.html piszemy natywny kod HTML5, można używać CSS i bibliotek. Najlepiej do telefonu użyć biblioteki Framework7, którą pobieramy i przykład w HTML wgrywamy do naszego katalogu www nadpisując index.html obecnie już dostępną natywnie przy tworzeniu nowego projektu (wystarczy wybrać rodzaj projektu Framework7). Taki HTML wygląda jak aplikacja na telefon, na dodatek ma wbudowaną bibliotekę Dom7, która jest identyczna z jQuery po stronie użytkownika i zawiera dodatkowe funkcje i optymalizację dla telefonów komórkowych.

Android, HTML + CSS, JavaScript