|
|
pl:dydaktyka:aml:lab7_2016 [2016/12/01 09:48] esimon [Stworzenie bazowego projektu] |
pl:dydaktyka:aml:lab7_2016 [2019/06/27 15:50] |
====== Aplikacje hybrydowe ====== | |
| |
====== Wstęp -- WebView ====== | |
| |
====== Sencha Touch ====== | |
===== Powtórka ===== | |
| |
| |
- Zapoznaj się z [[http://docs.sencha.com/touch/2.3.0/touch-build/examples/kitchensink/index.html/|kuchennym zlewem]]¹ [[http://www.sencha.com/products/touch/|Senchy]]. | |
- Zauważ, że aplikacja nie działa na IceWeasel (Firefox/Thunderbird/Seamonkey/Waterfox/dowolne [żywioł]+[zwierzę]). Wyciągnij wniosek na temat rynku przeglądarek w środowiskach mobilnych. | |
- Otwórz aplikację na różnych urządzeniach/w różnych przeglądarkach bazujących na WebKit; czy dostrzegasz różnice w interfejsie? | |
- Przejrzyj dostępne komponenty i porównaj kod potrzebny do ich implementacji (przycisk 'Source') z natywnym kodem Javy. | |
* Jakie są przewagi kodu Senchy? | |
* Jeżeli jakieś znalazłeś, zastanów się, czemu rynek jest niezmienne zdominowany przez aplikacje natywne. | |
* Przejrzyj alternatywne rozwiązania międzyplatformowe [[http://docs.xamarin.com/guides/cross-platform/getting_started/introduction_to_mobile_development/|Xamarin]], [[http://www.robovm.org/index.html|RoboVM]]. [[http://phonegap.com/about/|phonegap]], [[http://pl.wikipedia.org/wiki/C_%28j%C4%99zyk_programowania%29|C]]/[[http://pl.wikipedia.org/wiki/C++|C++]]². Czy któreś z nich wydaje się być pozbawione wad Senchy? | |
| |
¹ //Kitchen Sink, used in Software development to denote a permanent, ever growing test and demo environment which showcases all the functionalities of a software product// [[http://en.wikipedia.org/wiki/Kitchen_sink|en.wikipedia.org]] | |
| |
² [[http://stackoverflow.com/questions/2455372/windows-phone-7-and-native-c-cli|blame MS]] | |
| |
===== Ćwiczenia ===== | |
==== Stworzenie bazowego projektu ==== | |
| |
- Pobrać i zainstalować Seancha Touch 2 i Cmd | |
* [[http://www.sencha.com/products/touch/download/sencha-touch-2.3.1/3015|Download]] | |
* <code>sudo apt-get install nodejs npm nodejs-legacy</code> | |
- Następnie, korzystając z linii komend, wygenerować przykładową aplikację: <code>sencha -sdk <ścieżka_do_sdk_senchy> generate app <nazwa_aplikacji> <katalog_aplikacji></code> | |
- Przejrzyj wygenerowaną zawartość i porównaj z [[http://docs.sencha.com/cmd/guides/touch/cmd_app.html#touch-_-cmd_app_-_understanding_your_application_s_structure|opisem zawartości aplikacji]] | |
| |
==== Uruchomienie aplikacji ==== | |
- Podgląd na desktopie | |
- Uruchom serwer Senchy <code>sencha fs web -p 8888 start -map <path/to/your/application/folder></code> | |
- Uruchom w przeglądarce http://localhost:8888 | |
- Zmodyfkuj zawartość Pliku ''app/view/Main.js'' w elemencie ''html'' tak aby aplikacja wyświetlała '''Hello World''' | |
- Usuń kartę '''Get Started''' i zamiast niej wstaw kartę '''News'' | |
- Zmień ikonę karty News na info {{:pl:dydaktyka:aml:info-icon.png?50|}} | |
- Uruchomienie w emulatorze | |
- Upewnij się że pluginy ''cordova'' i ''phonegap'' sa zainstalowane: <code>sudo npm install -g cordova</code> | |
- Przygotuj plik konfiguracyjny do budowy natywnej aplikacji <code>sencha cordova init re.geist.sencha.hello HelloWorld</code> | |
- Obejrzyj plik ''app.json'' i zmodyfikuj poniższy fragment, tak aby możliwe było zbudowanie natywnej aplikacji tylko dla Androida:<code json>"builds": { | |
"web": {"default": true}, | |
"native": { | |
"packager": "cordova", | |
"cordova" : { | |
"config": { | |
// Uncomment the line below and add the platforms you wish to build for | |
//"platforms": "ios android", | |
| |
"id": "re.geist.sencha.hello", | |
"name": "HelloWorld" | |
} | |
} | |
} | |
}, | |
</code> | |
- Zbuduj aplikcję natywną poleceniem <code>sencha build app <nazwa-build-z-app.json></code> | |
- Uruchomienie na urządzeniu fizycznym | |
| |
==== Rozbudowa projektu bazowego ==== | |
| |
| |