Both sides previous revision
Poprzednia wersja
Nowa wersja
|
Poprzednia wersja
|
pl:dydaktyka:aml:lab7_2016 [2016/12/01 09:42] esimon [Uruchomienie aplikacji] |
pl:dydaktyka:aml:lab7_2016 [2019/06/27 15:50] (aktualna) |
====== Aplikacje hybrydowe ====== | ====== Aplikacje hybrydowe ====== |
| |
====== Wstęp -- WebView ====== | ====== 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 ====== | ====== Sencha Touch ====== |
===== Powtórka ===== | ===== 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]]. | - 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. | - 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? | - Otwórz aplikację na różnych urządzeniach/w różnych przeglądarkach bazujących na WebKit; czy dostrzegasz różnice w interfejsie? |
==== Stworzenie bazowego projektu ==== | ==== Stworzenie bazowego projektu ==== |
| |
- Pobrać i zainstalować Seancha Touch 2 i Cmd | - Pobrać i zainstalować Seancha Touch 2 i Cmd: [[http://www.sencha.com/products/touch/download/sencha-touch-2.3.1/3015|Download]] |
* [[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> |
* <code>sudo apt-get install npm nodejs-legacy</code> | |
* //Because of a conflict with another package, the executable from the Ubuntu repositories is called nodejs instead of node. Keep this in mind as you are running software.// | |
- 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> | - 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]] | - 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]] |
- Upewnij się że pluginy ''cordova'' i ''phonegap'' sa zainstalowane: <code>sudo npm install -g cordova</code> | - 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> | - 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 | - Uruchomienie na urządzeniu fizycznym |
| - Analogicznie jak powyżej, tylko z podłączonym urządzeniem fizycznym |
| |
==== Rozbudowa projektu bazowego ==== | ==== 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 |
| - Może okazać sie, że URL-e się nie ładują (zobacz do log-cata) |
| - Być może konieczne będzie zainstalowanie pluginu <code>cordova plugin add cordova-plugin-whitelist</code> |
| - 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. |
| |
| |
| |