wtorek, 10 marca 2015

Apache Cordova, mobilnego świata druga połowa - odc. 1: na dobry początek

Nie jestem bezkrytycznym entuzjastą mobilnych aplikacji Web. Jeśli chodzi o wydajność, user experience, interfejs użytkownika natywne aplikacje (C#/C++, Java, Objective-C/Swift) wciąż jawią mi się jako lepsze. Lepsza też  wydaje się płatna platforma Xamarin pozwalająca w C#/XAML osiągnąć nieraz w bardziej przyjazny sposób 100% funkcjonalności natywnych platform, w tym natywne UI (można używać bezpośrednio natywnych plików UI lub cross-platformowych Xamarin.Forms redenderujących natywnie).

Dobra, teraz pora na oddanie głosu swojej drugiej połowie. Pewien wyłom stanowią tu aplikacje HTML5/WinJS natywnie wspierane przez Microsoft w przeciwieństwie do innych platform. Urządzenia mają coraz lepsze procesory, coraz więcej pamięci RAM i trwałej. Dziś smartfony to komputery PC z nieco wcześniejszych lat. Poza tym czy zawsze najlepsze jest najlepsze dla konkretnego przypadku?  Jeśli mamy na przykład na pokładzie ekipę piszącą w bardzo popularnym dziś HTML5 i mamy już napisane aplikacje webowe, to czy chcemy poznawać C#, Javę, Objective-C/Swift? Ja bym na przykład  i tak chciał, ale ludzie są różni. Poza tym jeśli najważniejszym priorytetem jest czas i cena, to z pewnością najszybciej jest przerobić SPA z przeglądarki na aplikację hybrydową. Redukują się też znacznie późniejsze koszty utrzymania, jedna aplikacja zamiast trzech, a może prawie czterech (jeśli wliczyć aplikację w przeglądarce). Najbardziej popularną platformą do aplikacji tego rodzaju jest Apache Cordova. Natywne wtyczki zwane plug-inami są bazą do opracowywania przyszłych standardów Web. Tym darmowym rozwiązaniem Open Source zachwycił się też Microsoft. Obecnie Visual Studio 2013 i 2015 są zaopatrywane w rozwojowe wersji narzędzi dla projektów Apache Cordova. Mało tego ten sposób będzie jednym z oficjalnych sposobów tworzenia aplikacji na Windows 10 (oprócz natywnych). Poza czy nie jest piękne, że mamy coś, co odpalimy niemal wszędzie?

Działam sobie używając najnowszego Visual Studio 2015 CTP 6. Udało mi się uruchomić aplikacje na emulatorze Android (Ripple i tym z Visual Studio), iOS (na Mac OSX) i Windows Phone 8. Debugowanie działa mi pięknie na Android i iOS. Czemu nie wspominam o Windows 8.x/Windows Phone 8.1?  Aplikacje Windows Store też się pięknie debugują, ale ich wgrywanie na Windows 10 (gdzie mam VS 2015) zakończyło się u mnie niepowodzeniami. Potrzebuję zainstalować sobie omawiane Visual Studio na Windows 8.1.

Aby nie powtarzać, polecam nagrania z Channel 9:

Dużą część z nich prowadzi Kirupa Chinnathambi. To znana postać, która aktywnie rozwijała i promowała Blenda. Dziś zajmuje się narzędziami Visual Studio dla Apache Cordova.

Poniżej trochę moich notatek.

 

W przypadku Android nie ma problemów z uruchamianiem emulatorów przez Visual Studio (mamy także wygodne debugowanie)

W przypadku iOS potrzebujemy:

  • na OSX:
    • zainstalować narzędzia:  sudo npm install –g vs-mda-remote –user=$USER
    • wygenerować certyfikat:  vs-mda-remote generateClientCert  (wyświetlone zostaną informacje o hoście, porcie oraz PIN)
    • uruchomić agenta:  vs-mda-remote
  • w Visual Studio:
    • przejść do  Tools –> Options –> Tools for Apache Cordova –> Remote Agent Configuration
    • ustawić zdalne przetwarzanie na iOS na True, uzupełnić host (adres IP: w OSX na pasku systemowym ikona sieci –> Open Network Preferences), port, PIN

Aplikację na iOS też możemy wygodnie debugować aplikację z poziomu Visual Studio.

Aby nie było za różowo dodam, że przed instalacją vs-mda-remote musiałem zainstalować node.js z npm na OS X, a samo vs-mda-remote sypało mi błędami takimi jak w zgłoszeniu http://stackoverflow.com/questions/28598504/getting-error-running-vs-mda-remote.  Dopiero lektura tego wątku rozwiązała moje problemy.

Aplikacja na iOS z początku jakby nie chciała się debugować w Visual Studio, ale po pewnej chwili zaczęła.

Windows 8/8.1, Windows Phone 8.1:  debugowanie

Pluginy

  • iOS / Android /WP:  natywny kod + JS
  • Windows Store:  JS  (współpracuje z WinRT)

config.xml –> edytor konfiguracji –> Plugins:  Device.Motion

użycie akcelerometru:

function onDeviceReady() {

       …

       var watchID = navigator.accelerometer.watchAcceleration(onSuccess, onError,

         { frequency: 100 });

}

var x1 = 0;

function onSuccess(acceleration) {

          x1 = acceleration.x;

          …

}

function onError(reason) {

          …

}

messagebox:

navigator.notification.alert(‘Wiadomosc’, null, ‘Tytul’, ‘Ok’);

geolokalizacja:

navigator.geolocation.getCurrentPosition(function(position) {

         //position.coords.latitude

         …

});

Instalacja i obsługa z linii komend:

npm i cordova –g

cordova create <projekt>

cordova platform add android / windows8 / …

cordova emulate android

cordova run windows8

cordova plugin add org.apache.cordova.dialogs

 

P.S To na razie tyle “na dobry początek”. Ciąg dalszy nastąpi.

Brak komentarzy: