Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Cross-platformowe
aplikacje mobilne
tworzone w oparciu o framework:
Sencha Touch 2
Marcin Zajkowski @ Mobilization^2, 2012...
Kim jestem? Czym się zajmuję?
•
•
•
•
•
•

Absolwent Informatyki PB (Lipiec 2012)
~3 lata doświadczenia jako programista ....
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

• Rh...
PhoneGap features
Zalety PhoneGap’a
•
•
•
•
•
•

„Nitobi has been required by Adobe”
OpenSource (Javascript) i za darmo
Dostęp do natywnych ...
Wieloplatformowe aplikacje mobilne
• Oparte na standardach webowych (dobrze znanych wszystkim
programistom – prawie )
• N...
Proces tworzenia cross-platformowej aplikacji
HTML5 = HTML
+ CSS3 + JS

Wybrany
framework (np.
Sencha Touch)

Wieloplatfor...
Frameworki wspomagające i przyśpieszające pracę
• Sencha Touch (http://www.sencha.com)
–
–
–
–

Wg. mojej opinii wiodący f...
Pozostałe frameworki
•
•
•
•
•
•
•
•

iUI (http://code.google.com/p/iui/)
jQTouch (http://jqtouch.com/)
Wink (http://www.w...
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 ma...
Narzędzia developerskie
• Dowolny edytor HTML, JS lub konkretne IDE w przypadku sprecyzowanego
targetu aplikacji (np. Ecli...
ST2 – Struktura aplikacji cz.1
ST2 – Struktura aplikacji cz.2
DEMO #1
Pierwsza 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 #2
KitchenSink
Personalizacja/stylizacja aplikacji cz.1
• CSS3
• SASS & Compass

Zmienne z dok. ST2

• @import 'sencha-touch/default/all'...
Personalizacja/stylizacja aplikacji cz.2
• UI dla poszczególnych kontrolek (np. Toolbar’a)
– @include sencha-button-ui('or...
„Build’owanie” aplikacji
• Microloader
– Debug
– Production
– Testing

• Native packaging
• Mechanizmy oparte na JSB3 / JS...
Podsumowanie
• Standardy webowe bazą aplikacji
• WORA (Write Once, Run Anywhere), WODA (Write Once, Deploy
Anywhere)
• Bra...
Dziękuję za uwagę!

Pytania?
Mail: marcin@sicc.pl || WWW: http://www.sicc.pl
Upcoming SlideShare
Loading in …5
×

Cross-platformowe aplikacje mobilne tworzone w oparciu o framework Sencha Touch 2 @ Mobilization^2, Łódź

1,139 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Cross-platformowe aplikacje mobilne tworzone w oparciu o framework Sencha Touch 2 @ Mobilization^2, Łódź

  1. 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. 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. 3. Responsywne VS Dedykowane / Wieloplatformowe
  4. 4. Chcę mobilną aplikację – jaka platforma?!
  5. 5. www.PhoneGap.com
  6. 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. 7. PhoneGap features
  8. 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. 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. 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. 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. 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. 13. Sencha Touch 2 – film promocyjny http://www.youtube.com/watch?v=6UZMsPXYKr8
  14. 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. 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. 16. ST2 – Struktura aplikacji cz.1
  17. 17. ST2 – Struktura aplikacji cz.2
  18. 18. DEMO #1 Pierwsza aplikacja w ST2
  19. 19. Plik app.js
  20. 20. Plik app.json 1. 2. 3.
  21. 21. Przykładowy kontroler
  22. 22. Przykładowy widok
  23. 23. Przykładowy model
  24. 24. Przykładowy magazyn danych (Store)
  25. 25. DEMO #2 KitchenSink
  26. 26. Personalizacja/stylizacja aplikacji cz.1 • CSS3 • SASS & Compass Zmienne z dok. ST2 • @import 'sencha-touch/default/all'; + stosowane kontrolki
  27. 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. 28. „Build’owanie” aplikacji • Microloader – Debug – Production – Testing • Native packaging • Mechanizmy oparte na JSB3 / JSON • IDE/Platform depended
  29. 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. 30. Dziękuję za uwagę! Pytania? Mail: marcin@sicc.pl || WWW: http://www.sicc.pl

×