Marcin Zajkowski @ Mobilization^2, 2012 r.

Cross-platformowe

aplikacje mobilnetworzone w oparciu o framework:

Sencha Touch 2

kontakt: m.zajkowski@sicc.pl, @zajkowskimarcin

Kim jestem? Czym się zajmuję?

• Absolwent Informatyki PB (Lipiec 2012)

• ~3 lata doświadczenia jako programista .NET

• Microsoft Szkoła Nowych Technologii – Trener

• SICC.pl – współwłaściciel, programista

• MyślMobilnie.pl - ???

• Współlaureat głównej nagrody fundowanej przez BPN-T w

konkursie „Mój pomysł mój biznes 2012”

Responsywne

VS Dedykowane /

Wieloplatformowe

Chcę mobilną aplikację – jaka platforma?!

www.PhoneGap.com

Alternatywy

• Corona (iOS & Android)

– 199$ rocznie za jeden system operacyjny

– 349$ rocznie za pakiet obu systemów

• RhoMobile (iOS, Android, RIM, WM, WP7)

– Darmowy (licencja MIT)

– Rhodes (open-source, Ruby-based framework)

• MVC

• „true native apps”

• Appcelerator Titanium (iOS & Android)

• Inne…

PhoneGap features

Zalety PhoneGap’a

• „Nitobi has been required by Adobe”

• OpenSource (Javascript) i za darmo

• Dostęp do natywnych cech platform / smartfonów

• PhoneGap Build

• Masa gotowych pluginów

• COMMUNITY

Wieloplatformowe aplikacje mobilne

• Oparte na standardach webowych (dobrze znanych wszystkim

programistom – prawie )

• Niezalezne od oprogramowania i producenta sprzętu

• „Future is in your browser” (http://caniuse.com)

• WODA i WORA – napisane raz a dobrze (łatwiejszy serwis,

konserwacja, obsługa błędów)

Logika i wygląd aplikacji

HTML5 = HTML

+ CSS3 + JS

Wybrany

framework (np.

Sencha Touch)

WieloplatformowośćPhoneGap /

alternatywa

Narzędzie

developerskie /

PhoneGap Build

Wdrożenie / SprzedażWWW / Apple Store / Google Play /

Marketplace i inne…

Proces tworzenia cross-platformowej aplikacji

Frameworki wspomagające i przyśpieszające pracę

• Sencha Touch (http://www.sencha.com)

– Wg. mojej opinii wiodący framework w chwili obecnej

– ExtJS (rozbudowany JS, autorski)

– Mocne wsparcie = wysoka, stale rosnąca liczba userów

– OpenSource & Free (nawet do celów komercyjnych)

• jQuery Mobile (http://jquerymobile.com)

– Pełny framework tworzony przez ekipę od jQuery

– W mojej subiektywnej ocenie bardzo mało wydajny

• Rhodes (http://rhomobile.com)

– Oparty na Ruby’m

Pozostałe frameworki

• iUI (http://code.google.com/p/iui/)

• jQTouch (http://jqtouch.com/)

• Wink (http://www.winktoolkit.org)

• WebApp.Net (http://webapp-net.com/)

• DynamicX (http://www.dhtmlx.com/touch/)

• Zepto.js (http://zeptojs.com/)

• Jo (http://joapp.com)

• Wiele, wiele, wiele więcej…

Sencha Touch 2 – film promocyjny

http://www.youtube.com/watch?v=6UZMsPXYKr8

Sencha Touch 2

• ExtJS MVC

• HTML5

• Adaptatywny layout

• Nastawiony na performance

• Sencha Architect 2, Sencha SDK, SDK Tools i masa innych

narzędzi (zawrotne tempo..)

• Obszerna i przejrzysta dokumentacja, dema

• COMMUNITY!

Narzędzia developerskie

• Dowolny edytor HTML, JS lub konkretne IDE w przypadku sprecyzowanego

targetu aplikacji (np. Eclipse dla Androida, Xcode dla iOS’a, Cygwin dla

Symbiana itd.)

• SDK platformy

• Urządzenia bądź emulatory, ewentualnie przeglądarki

• Ew. pluginy (np. MDS dla Eclipsa, inna nazwa AppLaud)

– Integracja Sencha Touch, jQuery Mobile

– Tworzenie projektu jednym kliknięciem

• Brak konieczności zapamiętywania i odtwarzania skomplikowanej struktury katalogów

– Wsparcie dla kodowania w JS

– Opcja otworzenia konkretnych schematów aplikacji

ST2 – Struktura aplikacji cz.1

ST2 – Struktura aplikacji cz.2

DEMO #1Pierwsza aplikacja w ST2

Plik app.js

Plik app.json

1. 2. 3.

Przykładowy kontroler

Przykładowy widok

Przykładowy model

Przykładowy magazyn danych (Store)

DEMO #2KitchenSink

Personalizacja/stylizacja aplikacji cz.1

• CSS3

• SASS & Compass

• @import 'sencha-touch/default/all'; + stosowane kontrolki

Zmienne z dok. ST2

Personalizacja/stylizacja aplikacji cz.2

• UI dla poszczególnych kontrolek (np. Toolbar’a)

– @include sencha-button-ui('orange', #ff8000, 'glossy');

• > compass compile = kompilacja i wygenerowanie arkusza CSS

„Build’owanie” aplikacji

• Microloader

– Debug

– Production

– Testing

• Native packaging

• Mechanizmy oparte na JSB3 / JSON

• IDE/Platform depended

Podsumowanie

• Standardy webowe bazą aplikacji

• WORA (Write Once, Run Anywhere), WODA (Write Once, Deploy

Anywhere)

• Brak ograniczenia od platformy bądź producenta sprzętu

• Dostęp do funkcji sprzętowych z poziomu kodu JS

• Ciągły rozwój i dopasowanie się do biezących standardów

Dziękuję za uwagę!

Pytania?

Mail: marcin@sicc.pl || WWW: http://www.sicc.pl