1. Cross-platformowe
aplikacje mobilne
tworzone w oparciu o framework:
Sencha Touch 2
Marcin Zajkowski @ Mobilization^2, 2012 r.
kontakt: m.zajkowski@sicc.pl, @zajkowskimarcin

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

3. Responsywne
VS
Dedykowane /
Wieloplatformowe

4. Chcę mobilną aplikację – jaka platforma?!

5. www.PhoneGap.com

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

7. PhoneGap features

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

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

10. Proces tworzenia cross-platformowej 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…
Logika i wygląd
aplikacji

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

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

13. Sencha Touch 2 – film promocyjny
http://www.youtube.com/watch?v=6UZMsPXYKr8

14. 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!
•
•
•
•
•

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

16. ST2 – Struktura aplikacji cz.1

17. ST2 – Struktura aplikacji cz.2

18. DEMO #1
Pierwsza aplikacja w ST2

19. Plik app.js

20. Plik app.json
1.
2.
3.

21. Przykładowy kontroler

22. Przykładowy widok

23. Przykładowy model

24. Przykładowy magazyn danych (Store)

25. DEMO #2
KitchenSink

26. Personalizacja/stylizacja aplikacji cz.1
• CSS3
• SASS & Compass
Zmienne z dok. ST2
• @import 'sencha-touch/default/all'; + stosowane kontrolki

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

28. „Build’owanie” aplikacji
• Microloader
– Debug
– Production
– Testing
• Native packaging
• Mechanizmy oparte na JSB3 / JSON
• IDE/Platform depended

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

30. Dziękuję za uwagę!
Pytania?
Mail: marcin@sicc.pl || WWW: http://www.sicc.pl