====== 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: sudo apt-get install nodejs npm nodejs-legacy
- Następnie, korzystając z linii komend, wygenerować przykładową aplikację: sencha -sdk <ścieżka_do_sdk_senchy> generate app
- 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 sencha fs web -p 8888 start -map
- 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: sudo npm install -g cordova
- Przygotuj plik konfiguracyjny do budowy natywnej aplikacji sencha cordova init re.geist.sencha.hello HelloWorld
- Obejrzyj plik ''app.json'' i zmodyfikuj poniższy fragment, tak aby możliwe było zbudowanie natywnej aplikacji tylko dla Androida:"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"
}
}
}
},
- Zbuduj aplikcję natywną poleceniem sencha build app
- 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'' items [
...
{
title: 'News',
iconCls: 'info',
xtype: 'nestedlist',
title: 'News',
}
- Dodaj Store o nazwie ''NewsStore'' do katalogu /app/store: 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'}
],
}
});
- Dodaj Store do ''app.js'':...
name: 'HelloWorld',
requires: [
'Ext.MessageBox'
],
stores:[
'HelloWorld.store.NewsStore'
],
...
- 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:
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'),"See more: Geist"].join(""));
}
- 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:
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'
}
}
}
});
- 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 cordova plugin add cordova-plugin-whitelist
- 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:phonegap.username=user@domain
phonegap.password=p@ssw0rd
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.