Różnice między wybraną wersją a wersją aktualną.
|
pl:dydaktyka:aml:lab7_2016 [2016/12/06 12:48] esimon [Rozbudowa projektu bazowego] |
pl:dydaktyka:aml:lab7_2016 [2019/06/27 15:50] |
||
|---|---|---|---|
| Linia 1: | Linia 1: | ||
| - | ====== Aplikacje hybrydowe ====== | ||
| - | ====== Wstęp - WebView ====== | ||
| - | - Stwórz aplikację android, która będzie skąłdała sie z jednej aktywności, zawierajacej tylko WebView. | ||
| - | - Umieść w swojej aplikacji poniższy zegar: http://alexanderbrevig.github.io/jsBinClock/ | ||
| - | - Odszukaj jaką grę w HTML5/Javascript i spróbują ją osadzić w całości w Webview. Jak poradzić sobie z CSS i innymi zewnętrznymi zasobami? | ||
| - | ====== Sencha Touch ====== | ||
| - | ===== Powtórka ===== | ||
| - | |||
| - | |||
| - | - Zapoznaj się z [[https://cdn.sencha.com/touch/sencha-touch-2.3.1a/built-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]] | ||
| - | - Zaintalować Node.js: <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> | ||
| - | - Uruchom na emulatorze przy pomocy polecenia adb (jak to zrobić: [[https://developer.android.com/studio/build/building-cmdline.html#RunningOnEmulator|no jak?]]) | ||
| - | - Uruchomienie na urządzeniu fizycznym | ||
| - | - Analogicznie jak powyżej, tylko z podłączonym urządzeniem fizycznym | ||
| - | |||
| - | ==== Rozbudowa projektu bazowego ==== | ||
| - | - Uzyskaj klucz api np. do serwisu newsowego: https://newsapi.org/ i zobacz jak wygląda odpowiedź na przykładowe zapytanie | ||
| - | - Dodaj widok ''nestedList'' do zakładki ''News'' <code> items [ | ||
| - | ... | ||
| - | { | ||
| - | title: 'News', | ||
| - | iconCls: 'info', | ||
| - | xtype: 'nestedlist', | ||
| - | title: 'News', | ||
| - | }</code> | ||
| - | - Dodaj Store o nazwie ''NewsStore'' do katalogu /app/store: <code>Ext.define('HelloWorld.store.NewsStore', { | ||
| - | extend: 'Ext.data.TreeStore', | ||
| - | requires: ['Ext.data.proxy.JsonP'], | ||
| - | id: 'NewsStore', | ||
| - | config:{ | ||
| - | autoLoad: true, | ||
| - | fields: ['author', 'title', 'description', 'url', { | ||
| - | name: 'leaf', | ||
| - | defaultValue: true | ||
| - | }], | ||
| - | root: { | ||
| - | leaf: false | ||
| - | }, | ||
| - | |||
| - | data: [ | ||
| - | {author: 'Szymon Bobek',title:'Wielkie dzieło',description:'Blabla bla blabla blabla',url:'geist.re'}, | ||
| - | {author: 'Krzysztof Kluza',title:'Wiekopomne dzieło',description:'Blabla blabl blabalbal blabla',url:'geist.re'} | ||
| - | ], | ||
| - | } | ||
| - | });</code> | ||
| - | - Dodaj Store do ''app.js'':<code>... | ||
| - | name: 'HelloWorld', | ||
| - | |||
| - | requires: [ | ||
| - | 'Ext.MessageBox' | ||
| - | ], | ||
| - | |||
| - | stores:[ | ||
| - | 'HelloWorld.store.NewsStore' | ||
| - | ], | ||
| - | ... | ||
| - | </code> | ||
| - | - Dodaj ''HelloWorld.store.NewsStore'' do ''requires'' w ''Main.js'' | ||
| - | - Dodaj obsługę tego Stora w zakładce news. Oraz dodaj opcję "wyżwietl wiecej po kliknięciu na tytuł". definicja zakładki powinna wyglądać tak:<code> | ||
| - | title: 'News', | ||
| - | iconCls: 'info', | ||
| - | xtype: 'nestedlist', | ||
| - | store: 'NewsStore', | ||
| - | title: 'News', | ||
| - | displayField: 'title', | ||
| - | |||
| - | detailCard: { | ||
| - | xtype: 'panel', | ||
| - | scrollable: true, | ||
| - | styleHtmlContent: true | ||
| - | }, | ||
| - | |||
| - | listeners: { | ||
| - | itemtap: function(nestedList, list, index, element, post) { | ||
| - | this.getDetailCard().setHtml( | ||
| - | [post.get('description'),"</b>See more: <a href=",post.get('url'),">Geist</a>"].join("")); | ||
| - | } | ||
| - | </code> | ||
| - | - Zamiast statycznych danych, umieszczonych w polu **data** w NewsStore, użyj Proxy umozliwiającego wybranie danych z newsapi. zmodyfikuj Store, by wyglądał jak poniżej:<code> | ||
| - | Ext.define('HelloWorld.store.NewsStore', { | ||
| - | extend: 'Ext.data.TreeStore', | ||
| - | requires: ['Ext.data.proxy.Ajax'], | ||
| - | id: 'NewsStore', | ||
| - | config:{ | ||
| - | autoLoad: true, | ||
| - | fields: ['author', 'title', 'description', 'url', { | ||
| - | name: 'leaf', | ||
| - | defaultValue: true | ||
| - | }], | ||
| - | |||
| - | root: { | ||
| - | leaf: false | ||
| - | }, | ||
| - | |||
| - | proxy: { | ||
| - | type: 'ajax', | ||
| - | url: 'https://newsapi.org/v1/articles?source=techcrunch&apiKey=abe648b1a17a46df9609bd7778ba7522', | ||
| - | reader: { | ||
| - | type: 'json', | ||
| - | rootProperty: 'articles' | ||
| - | } | ||
| - | } | ||
| - | } | ||
| - | }); | ||
| - | </code> | ||
| - | - Zbuduj aplikację natywną z wykorzystaniem Cordovy | ||
| - | - Zbuduj aplikację natywną z wykorzystaniem Phonegapa. | ||
| - | - Załóż konto na https://build.phonegap.com | ||
| - | - W katalogu root swojej aplikacji dodaj plik local.properties z zawartością jak poniżej:<code>phonegap.username=user@domain | ||
| - | phonegap.password=p@ssw0rd</code> UWAGA :!: W pliku ''app.json'' wygenerowanym przez senche pola nazywają sie ''phonegap.remote.user'' i ''phonegap.remote.password'' co jest mylace :!: Ma być jak w przykładzie powyżej. | ||
| - | |||
| - | |||
| - | | ||
