Różnice

Różnice między wybraną wersją a wersją aktualną.

Odnośnik do tego porównania

Both sides previous revision Poprzednia wersja
Nowa wersja
Poprzednia wersja
pl:dydaktyka:aml:lab7_2016 [2016/12/01 09:09]
esimon [Stworzenie bazowego projektu]
pl:dydaktyka:aml:lab7_2016 [2019/06/27 15:50] (aktualna)
Linia 1: Linia 1:
 ====== 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? ​
Linia 22: Linia 24:
 ==== 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>​
   - 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]]
Linia 35: Linia 37:
     - Zmień ikonę karty News na info {{:​pl:​dydaktyka:​aml:​info-icon.png?​50|}}     - Zmień ikonę karty News na info {{:​pl:​dydaktyka:​aml:​info-icon.png?​50|}}
   - Uruchomienie w emulatorze   - Uruchomienie w emulatorze
-    - Przygotuj plik konfiguracyjny do budowy natywnej aplikacji <​code>​ </​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>​ 
 +    - 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.
 +
  
   ​   ​
pl/dydaktyka/aml/lab7_2016.1480579773.txt.gz · ostatnio zmienione: 2019/06/27 15:51 (edycja zewnętrzna)
www.chimeric.de Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0