Cross-platformowe aplikacje mobilne tworzone w oparciu o framework Sencha Touch 2 @ Mobilization^2,...
-
Upload
marcin-zajkowski -
Category
Technology
-
view
520 -
download
1
description
Transcript of Cross-platformowe aplikacje mobilne tworzone w oparciu o framework Sencha Touch 2 @ Mobilization^2,...
Marcin Zajkowski @ Mobilization^2, 2012 r.
Cross-platformowe
aplikacje mobilnetworzone w oparciu o framework:
Sencha Touch 2
kontakt: [email protected], @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