Aplikacje hybrydowe

Wstęp - WebView

  1. Stwórz aplikację android, która będzie skąłdała sie z jednej aktywności, zawierajacej tylko WebView.
  2. Umieść w swojej aplikacji poniższy zegar: http://alexanderbrevig.github.io/jsBinClock/
  3. 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

  1. Zapoznaj się z kuchennym zlewem¹ Senchy.
  2. 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.
  3. Otwórz aplikację na różnych urządzeniach/w różnych przeglądarkach bazujących na WebKit; czy dostrzegasz różnice w interfejsie?
  4. 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 Xamarin, RoboVM. phonegap, 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 en.wikipedia.org

² blame MS

Ćwiczenia

Stworzenie bazowego projektu

  1. Pobrać i zainstalować Seancha Touch 2 i Cmd: Download
  2. Zaintalować Node.js:
    sudo apt-get install nodejs npm nodejs-legacy
  3. Następnie, korzystając z linii komend, wygenerować przykładową aplikację:
    sencha -sdk <ścieżka_do_sdk_senchy> generate app <nazwa_aplikacji> <katalog_aplikacji>
  4. Przejrzyj wygenerowaną zawartość i porównaj z opisem zawartości aplikacji

Uruchomienie aplikacji

  1. Podgląd na desktopie
    1. Uruchom serwer Senchy
      sencha fs web -p 8888 start -map <path/to/your/application/folder>
    2. Uruchom w przeglądarce http://localhost:8888
    3. Zmodyfkuj zawartość Pliku app/view/Main.js w elemencie html tak aby aplikacja wyświetlała 'Hello World'
    4. Usuń kartę 'Get Started' i zamiast niej wstaw kartę 'News
    5. Zmień ikonę karty News na info
  2. Uruchomienie w emulatorze
    1. Upewnij się że pluginy cordova i phonegap sa zainstalowane:
      sudo npm install -g cordova
    2. Przygotuj plik konfiguracyjny do budowy natywnej aplikacji
      sencha cordova init re.geist.sencha.hello HelloWorld
    3. 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"
                      }
                  }
              }
          },
    4. Zbuduj aplikcję natywną poleceniem
      sencha build app <nazwa-build-z-app.json>
    5. Uruchom na emulatorze przy pomocy polecenia adb (jak to zrobić: no jak?)
  3. Uruchomienie na urządzeniu fizycznym
    1. Analogicznie jak powyżej, tylko z podłączonym urządzeniem fizycznym

Rozbudowa projektu bazowego

  1. Uzyskaj klucz api np. do serwisu newsowego: https://newsapi.org/ i zobacz jak wygląda odpowiedź na przykładowe zapytanie
  2. Dodaj widok nestedList do zakładki News
     items [
        ...
        {
           title: 'News',
           iconCls: 'info',
           xtype: 'nestedlist',
           title: 'News',
        }
  3. 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'}
                ],
            }
    });
  4. Dodaj Store do app.js:
    ...
    name: 'HelloWorld',
    
        requires: [
            'Ext.MessageBox'
        ],
    
        stores:[
            'HelloWorld.store.NewsStore'
        ],
        ...
  5. Dodaj HelloWorld.store.NewsStore do requires w Main.js
  6. 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'),"</b>See more: <a href=",post.get('url'),">Geist</a>"].join(""));
    }
  7. 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'
                    }
                }
            }
    });
  8. Zbuduj aplikację natywną z wykorzystaniem Cordovy
    1. Może okazać sie, że URL-e się nie ładują (zobacz do log-cata)
    2. Być może konieczne będzie zainstalowanie pluginu
      cordova plugin add cordova-plugin-whitelist
  9. Zbuduj aplikację natywną z wykorzystaniem Phonegapa.
    1. Załóż konto na https://build.phonegap.com
    2. 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.

pl/dydaktyka/aml/lab7_2016.txt · ostatnio zmienione: 2017/07/17 08:08 (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