Tworzenie natywnych aplikacji na urządzenia mobilne - PhoneGap Tomasz Margalski

Wielkość: px

Rozpocząć pokaz od strony:

Download "Tworzenie natywnych aplikacji na urządzenia mobilne - PhoneGap Tomasz Margalski"

Miłosz Kubicki
9 lat temu
Przeglądów:

1 Tworzenie natywnych aplikacji na urządzenia mobilne - PhoneGap Tomasz Margalski

2 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

Konfiguracja i przykład aplikacji dla systemu Windows Phone

3 Mobilne systemy operacyjne Android (Java, C++) ios (Objective-C) BlackBerry (Java ME) Symbian (C++) Windows Mobile(C++, C#) Windows Phone (C#)

4 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.)

Tworzenie aplikacji opartych o HTML 5 Dostęp do

5 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

6 Dostęp do natywnych funkcji

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

8 Windows Phone - konfiguracja Potrzebne rzeczy Visual Studio ( Windows Phone SDK ( Paczka z PhoneGap (

com/pl-pl/downloads) Windows Phone SDK (http://dev.

$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.$

9 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

$bat Skopiuj utworzony plik zip z folderu phonegap-[wersja]\phonegap- [wersja]\lib\windows-phone do folderu$

10 Windows Phone - przykład aplikacji <code/>

Android - konfiguracja Potrzebne rzeczy Android SDK (http://developer.android.

11 Android - konfiguracja Potrzebne rzeczy Android SDK ( Paczka z PhoneGap (

$1 Wypakuj paczkę z Android SDK Uruchom Eclipse z foleru adt-bundle-windows-[wersja]\adt-bundle-windows- [wersja]\eclipse Dodaj nowy$

12 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

$adt-bundle-windows-[wersja]\adt-bundle-windows- [wersja]\eclipse$

13 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

14 Android - konfiguracja Szablon projektu cz. 3 Dodaj plik cordova.jar do Build Path (menu kontekstowe elementu)

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

html ze standardową struktura html i dodaj referencje do cordova.

16 Android - konfiguracja Szablon projektu cz. 5 Otwórz plik MainActivity.java i nadpisz klase MainAcitivity public class MainActivity extends DroidGap public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); super.loadurl("file:///android_asset/www/index.html"); } }

DroidGap { @Override public void oncreate(bundle savedinstancestate) { super.

17 Android - konfiguracja Szablon projektu cz. 6 Skopuj do folderu res folder xml i jego zawartość z paczki PhoneGap

18 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" />

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.

19 Android - przykład aplikacji <code/>

20 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.

21 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

22 Wady i zalety PhoneGap Zalety HTML5 Wieloplatformowość Testowanie aplikacji bez potrzeby uruchamiania emulatora Wady Wydajność

23 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

24 Dziękuje Tomasz

Podobne dokumenty

Tworzenie cross-platformowych aplikacji w Xamarin.Forms

Tworzenie cross-platformowych aplikacji w Xamarin.Forms Wprowadzenie Tomasz Gibulski Microsoft Certified Professional (MCP) Microsoft Certified Technology Specialist (MCTS) tomasz@gibulski.com www.gibulski.com