Tworzenie natywnych aplikacji na urządzenia mobilne - PhoneGap Tomasz Margalski
Agenda Dlaczego PhoneGap i co to jest? Możliwości PhoneGap Jak pisać aplikacje z PhoneGap? Konfiguracja i przykład aplikacji dla systemu Windows Phone Konfiguracja i przykład aplikacji dla systemu Android PhoneGap Build Wady i zalety korzystania z PhoneGap Podsumowanie
Mobilne systemy operacyjne Android (Java, C++) ios (Objective-C) BlackBerry (Java ME) Symbian (C++) Windows Mobile(C++, C#) Windows Phone (C#)
Czym jest PhoneGap Frameworkiem do tworzenia aplikacji mobilnych z użyciem technologii webowych Tworzenie aplikacji opartych o HTML 5 Dostęp do natywnych funkcji urządzenia(np. kamera, akcelerometr, itd.)
Możliwości PhoneGap Nadaje się do pisania: prostych gier aplikacji użytkowych Nie nadaje się do pisania: widgetów aplikacji i gier które wymagają dużej mocy obliczeniowej
Dostęp do natywnych funkcji
Jak pisać aplikacje z PhoneGap? Dedykowane środowiska Eclipse Visual Studio Xcode PhoneGap Build Sublime Notepad++
Windows Phone - konfiguracja Potrzebne rzeczy Visual Studio (http://www.visualstudio.com/pl-pl/downloads) Windows Phone SDK (http://dev.windowsphone.com/en-us/downloadsdk) Paczka z PhoneGap (https://github.com/phonegap/phonegap/)
Windows Phone - konfiguracja Szablon projektu PhoneGap Wypakuj paczke z PhoneGap Otwórz folder phonegap-[wersja]\phonegap-[wersja]\lib\windowsphone\wp8\tooling\scripts Uruchom skrypt createtemplates.bat Skopiuj utworzony plik zip z folderu phonegap-[wersja]\phonegap- [wersja]\lib\windows-phone do folderu C:\Users\[user]\Documents\Visual Studio 2012\Templates\ProjectTemplates Po uruchomieniu Visual Studio, dostępny mamy nowy projekt
Windows Phone - przykład aplikacji <code/>
Android - konfiguracja Potrzebne rzeczy Android SDK (http://developer.android.com/sdk/index.html) Paczka z PhoneGap (https://github.com/phonegap/phonegap/)
Android - konfiguracja Szablon projektu cz. 1 Wypakuj paczkę z Android SDK Uruchom Eclipse z foleru adt-bundle-windows-[wersja]\adt-bundle-windows- [wersja]\eclipse Dodaj nowy projekt, File -> New -> Android Application Project Utwórz nowy folder assets, a w nim nowy folder www
Android - konfiguracja Szablon projektu cz. 2 Skopuj do folderu www plik cordova.js z paczki PhoneGap Utwórz nowy folder libs (jeśli nie istnieje) i skopiuj do niego plik cordova.jar
Android - konfiguracja Szablon projektu cz. 3 Dodaj plik cordova.jar do Build Path (menu kontekstowe elementu)
Android - konfiguracja Szablon projektu cz. 4 Dodaj nowy plik do folderu www o nazwie index.html ze standardową struktura html i dodaj referencje do cordova.js <html> <head> <title>phonegap</title> <script charset="utf-8" src="cordova.js" type="text/javascript"></script> </head> <h1> Test app </h1> </html>
Android - konfiguracja Szablon projektu cz. 5 Otwórz plik MainActivity.java i nadpisz klase MainAcitivity public class MainActivity extends DroidGap { @Override public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); super.loadurl("file:///android_asset/www/index.html"); } }
Android - konfiguracja Szablon projektu cz. 6 Skopuj do folderu res folder xml i jego zawartość z paczki PhoneGap
Android - konfiguracja Szablon projektu cz. 7 Na samym końcu dodajemy wybrane uprawnienia w AndroidManifest.xml <uses-permission android:name="android.permission.camera" /> <uses-permission android:name="android.permission.vibrate" /> <uses-permission android:name="android.permission.access_coarse_location" /> <uses-permission android:name="android.permission.access_fine_location" /> <uses-permission android:name="android.permission.access_location_extra_commands" /> <uses-permission android:name="android.permission.read_phone_state" /> <uses-permission android:name="android.permission.internet" /> <uses-permission android:name="android.permission.receive_sms" /> <uses-permission android:name="android.permission.record_audio" /> <uses-permission android:name="android.permission.modify_audio_settings" /> <uses-permission android:name="android.permission.read_contacts" /> <uses-permission android:name="android.permission.write_contacts" /> <uses-permission android:name="android.permission.write_external_storage" /> <uses-permission android:name="android.permission.access_network_state" /> <uses-permission android:name="android.permission.get_accounts" /> <uses-permission android:name="android.permission.broadcast_sticky" />
Android - przykład aplikacji <code/>
PhoneGap Build PhoneGap Build kompiluje i tworzy gotowa paczkę z aplikacją mobilną na różne platformy. Wystarczy spakować aplikacje html, dodać plik config.xml w którym zawarte są informacje o aplikacji.
PhoneGap Build Następnie nasza aplikacja kompilowana jest w chmurze, wystarczy chwilę poczekać na utworzenie aplikacji. Po poprawnej kompilacji zostaną utworzone pliki do pobrania na konkretne platformy
Wady i zalety PhoneGap Zalety HTML5 Wieloplatformowość Testowanie aplikacji bez potrzeby uruchamiania emulatora Wady Wydajność
Podsumowanie PhoneGap Framework pozwalający tworzyć wieloplatformowe aplikacje mobilne Przeglądarka aplikacji webowej z dostępem do natywnych funkcji urządzenia Idealny do tworzenia wszelkich aplikacji biznesowych Wspólne API dla wielu platform
Dziękuje Tomasz Margalski margalski@boo.pl @tmargalski