Successfully reported this slideshow.

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

0

Share

1 of 30
1 of 30

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

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

×