phonegap Školení #1

PhoneGapMartin Kaše

Agenda

Den 1.

• Úvod do platformy PhoneGap

• Instalace nástrojů a výběr prostředí

• PhoneGap app deploy

• První aplikace a Adobe build server

Den 2.

• Práce se senzory (GPS, gyroskop, akcelerometr, kompas)

• Práce s fotoaparátem a čárovými kódy

• API napojení na Foursquare

Úvod

• Open source řešení pro vývoj multiplatformních aplikací

• Vývoj v HTML5, CSS3, JavaScript

• Přístup k zdrojům telefonu

• Adobe build server

• Mobil i tablet (respozivita)

• PhoneGap vs. Cordova

Naše aplikace

• Postupné rozšiřování

• Všechny ukázky v jedné aplikaci

• Ukázky designu, vývoje a testování

• DEMO: http://goo.gl/8JJ2BH

Jak to funguje

Cena

Zdarma

• Neomezeně open source aplikací

• 1 private aplikace

• Maximální velikost aplikace 50mb

• Pouze veřejné pluginy

9.99/mo

• 25 private aplikací

• Maximální velikost aplikace 100mb

• Veškeré pluginy

Cena

Adobe Creative Cloud

• Neomezeně open source aplikací

• 25 private aplikací

• Maximální velikost aplikace 1gb

• Veškeré pluginy

Přístup ke zdrojům telefonu

Instalace nástrojů

• NodeJS -> www.nodejs.org

• Brackets -> www.brackets.io

• PhoneGap Desktop App (Beta) -> www.goo.gl/0KVFSB

• Registrace -> www.build.phonegap.com

Brackets

• www.brackets.io

• Code Editor

• Open Source

• Adobe

• Windows, Mac i Linux

• PhoneGap rozšíření

PhoneGap Desktop App

• www.goo.gl/0KVFSB

• Beta

• Windows a Mac

• Automatické sdílení a správa vašich aplikací

Instalace nástrojů

• CMD -> Administrátorská práva

• C:\> npm install -g phonegap

PhoneGap deploy

Wi-Fi app deploy

• http://app.phonegap.com/

• Aplikace, iOS, Android, WP

• Párování přes Wi-Fi

• Žádná kompilace

• AutoReload

• Nefunkční user pluginy

PhoneGap deploy

Package Deploy

• http://build.phonegap.com/

• Kompilační systém

• iOS – Developer account

• Android – Stačí zařízení

• WP– Developer unlock

• User pluginy

První aplikace

• Vygenerování aplikace

• PhoneGap create moje-aplikace

• Nastavení config.xml

• Přepsání HTML, nastavení JS a CSS.

• Otestování aplikace na mobilu

• Build server -> Deploy do mobilu

• Osobní řešení -> iOS, Android, WP

• iOS, WP -> Možnost odemčení zařízení.

Design

• Photoshop -> Vlastní řešení

• Justinmind -> Hotové řešení• iPhone, Android a Google Glass designové prvky

• Aplikace – Android, iPhone

• HTML Generátor

• Instalace -> http://www.justinmind.com

• Demo

Buildmeister

• PhoneGap Build instalátor a aktualizátor

• Úpravy, záznamy, generování buildu.

• iOS a Android

Emulátory

• Android• Android SDK Emulator

• http://developer.android.com/sdk/index.html

• BlueStacks• http://www.bluestacks.com/

• Genymotion• http://www.genymotion.com/

• Windows Phone• Windows Phone SDK

• http://dev.windows.com/en-us/develop/download-phone-sdk

Ikonky a Loading Screen

• Automatický

• Android


• iPhone

Ukládání proměnných

• PhoneGap API

GPS Senzor

• HTML5 API

• Latitude, longitude, přesnost pozice , nadmořská výška, přesnost nadmořské výšky, rychlost, časová známka přenosu

• DEMO

Foursquare API

• JSON

• www.developer.foursquare.com

• API Key

Gyroskop

• Náklon telefonu

• Zjištění zda je senzor v telefonu (starší Android zařízení)

Gyroskop

• DEMO

Akcelerometr

• Zrychlení v určitém směru

• DEMO

Akcelerometr

• Akcelerace, Rotace, Akcelerace s gravitací

• DEMO

Kompas

• PhoneGap API

• Směr ve stupních

• DEMO

Fotoaparát

• PhoneGap API

• DEMO

PhoneGap build Pluginy

• https://build.phonegap.com/plugins

• Nefunkční v PhoneGap Developer App

• Generování na straně serveru

• DEMO

Čárové kódy

• BarcodeScanner Plugin

• iOS a Android

• www.build.phonegap.com/plugins/261

Optimalizace

• Každý KB kódu se počítá

• Vyhněte se zbytečným knihovnám

• Více verzí grafiky dle rozlišení

• Používejte komprimované knihovny

• Jednoduší = přehlednější a rychlejší => lepší uživatelský zážitek

Optimalizace

phonegap Školení #1

Technology