Pokazywanie postów oznaczonych etykietą PhoneGap. Pokaż wszystkie posty
Pokazywanie postów oznaczonych etykietą PhoneGap. Pokaż wszystkie posty

niedziela, 17 czerwca 2012

PhoneGap - odc. 2

W odc.2 dla PhoneGap - przegląd dostarczanego API oraz kwestie zdalnego buildu.

 

PhoneGap API

API

  • Akcelerometr
  • Camera (robienie zdjęć lub pobieranie ich z albumu)
  • Capture (audio, obraz, video)
  • Kompas
  • Connection (navigator.network)
  • Contacts
  • Device (niektóre informacje)
  • Zdarzenia (np. pause, resume, backbutton, searchbutton, …)
  • File (lokalny system plików)
  • Geolokalizacja (na bazie specyfikacji W3C)
  • Media (nagrywanie i odtwarzanie, w kierunku specyfikacji W3C dla media capture)
  • Notyfikacje
  • Storage (na bazie specyfikacji W3C  - W3C Web Storage i W3C Web SQL Database (sic!))

Device

//w obsłudze zdarzenia deviceready; device: name, phonegap, platform, uuid, version

$(‘#devicename’).html(device.name); 

Akcelerometr

var wId = navigator.accelerometer.watchAcceleration(onSuccess, onError, {frequency: 1000} );

function onSuccess(a) {

$(‘#aX’).html(a.x);  //współrzędna x

…

}

Odpowiednie zezwolenie w manifeście aplikacji

Camera

navigator.camera.getPicture(onSuccess, onError, { quality: 50,  destinationType:  Camera.DestinationType.FILE_URI });

function onSuccess(fileUri) {

$(‘#imageUri’).html(fileUri);

}

Geolokalizacja

navigator.geolocation(onSuccess, onError, { frequency: 1000 });

function onSuccess(p) {

$(‘#lat’).html(p.coords.latitude);

…

}

Notyfikacje

navigator.notification.alert(“Euro 2012!”, onSuccess, “Click”, “Ok”);

Storage

var db = window.openDatabase(“Database”, “1.0”, “MKS demo”, 200000);

db.transaction(populateDB, errorCB, successCB);

function populateDB(tx) {

tx.executeSql(‘INSERT INTO DEMO (id, data) VALUES (1, “First row”)’);

…

}

Pluginy PhoneGap

Możliwość opakowywania natywnego kodu

PhoneGap Build

aplikacja dla danej platformy –> PhoneGap Build w chmurze (developer za darmo, większe podmioty - opłaty co miesiąc) –> aplikacje na różne platformy

Folder www z projektu pakujemy do .zip i wysyłamy do chmury

Konfigurowanie buildu z poziomu strony lub poprzez plik config.xml (opis aplikacji wg. W3C widget specification)

Opcja Debug

sobota, 16 czerwca 2012

PhoneGap - odc. 1

Jeśli chcemy tworzyć oprogramowanie na wiele różnych platform, jest to trudne. Potrzebujemy znać dobrze każdą z nich, związane z nią języki, API. Każda ma jakieś swoje unikalne właściwości, zachowania, user experience. Powstaje jednak pytanie czy w przypadkach prostszych aplikacji na więcej niż dwie platformy, gdzie look & feel jest mniej ważny, nie potrzebujemy skomplikowanego UI czy zaawansowanych możliwości API danej platformy, wydajność nie jest najbardziej kluczowa, jednak lepszym rozwiązaniem nie byłaby jakaś uniwersalna technologia, w której możnaby raz napisać aplikację z myślą o różnych środowiskach. W dzisiejszych czasach takim wspólnym mianownikiem staje się HTML5 i JavaScript. W najbliższej serii postów chciałbym trochę przyjrzeć się frameworkowi PhoneGap, który właśnie próbuje sprostać temu wyzwaniu. BTW inna sprawa że Windows 8, a także z pewnością także Windows Phone 8 za pomocą WinRT też stwarzają/stworzą możliwość pisania natywnych aplikacji w HTML5, przy jednoczesnym łatwym reużytkowaniu kodu w innych językach i wygodnym wysokopoziomowym API o możliwościach C# (a czasami nawet nieco większymi), przy czym jest to rozwiązanie w ramach jednej platformy. Jeśli przy PhoneGap narzuci mi się jakieś porównania do WinRT czy WinJS, to z pewnością podzielę się swoimi spostrzeżeniami.

Dziś pierwsza część o PhoneGap - wprowadzenie i zagadnienia z UI.

 

Wprowadzenie

Platformy

  • Windows Phone
  • iOS
  • Android
  • Blackberry
  • Symbian
  • Bada
  • WebOS

2 elementy

  • aplikacja HTML
  • dostęp do hardware’u urządzeń i ich API
    • akcelerometr
    • kompas
    • geolokalizacja
    • natywny storage
    • kamera
    • połączenia sieciowe
    • zdarzenia
    • media - odtwarzanie i nagrywanie
    • kontakty
    • natywny system plików
    • notyfikacje
    • …

Opcje developmentu

  • PhoneGap Build
    • budowanie na jednej platformie
    • przeniesienie na PhoneGap Build
    • testowanie na innych platformach
    • debugowanie z PhoneGap Build
  • Budowanie lokalne
    • budowanie na jednej lub więcej platform
    • budowanie lokalne
    • deploying i testowanie lokalne

Dla każdej z platform organizacja środowiska wygląda inaczej. W przypadku Windows Phone operujemy odpowiednimi szablonami w Visual Studio.

Projekt aplikacji Silverlight z

  • GapLib
  • Plugins
  • www // elementy przenośne
    • index.html
    • master.css
    • phonegap-x.x.x.js
  • GapSourceDictionary.xaml
  • MainPage.xaml
  • ManifestProcessor.js
  • …

index.html

  • HTML5
  • viewport
  • …

Odpowiednie capabilities

Referencja WP7GapClassLib

MainPage.xaml: <my:PGView …/>

Możliwość oglądania strony HTML w zwykłej desktopowej przeglądarce, ale wtedy nie będzie wołane zdarzenie deviceready.

Trzeba je emulować za pomocą stopgap.

 

Mobilne UI

Popularne frameworki

Możemy np. dołączyć jQuery i jQuery Mobile do projektu aplikacji w PhoneGap.

jQuery Mobile

<div id=”home” data-role=”page”>

<div data-role=”header”>

        …

</div>

<div data-role=”content”>

        …

       <a href=”#newpage” data-role=”button”></a> //link do następnej strony w postaci przycisku

       <ul data-role=”listview” data-theme=”g” data-filter=”true”> //lista z filtrowaniem

               <li><a href=””>1</a></li>

               <li><a href=””>2</a></li>

               <li><a href=””>3</a></li>

               <li><a href=””>4</a></li>

       </ul>

</div>

<div data-role=”footer” data-position=”fixed”> //na dole

        …

        <a href=”#dialogpage” data-rel=”dialog” data-icon=”plus”>Add</a> //otwarcie strony jako okna dialogowego

</div>

</div>

<div id=”newpage” data-role=”page”>

<div data-role=”header”>

     <a href=”#home” data-icon=”delete”>Cancel</a> //toolbar

      …

</div>

<div data-role=”content”>

     <label for=”name”>Name: </label>

     <input type=”text” name=”name” id=”name” value=”” />

</div>

<div data-role=”footer” data-position=”fixed”> //na dole

…

</div>

</div>

<div id=”dialogpage” data-role=”page”>

<div data-role=”content”>

</div>

</div>

$(‘#newpage’).live(‘pageshow’, function() {

var name = window.localstorage.getItem(“name”);

…

});

 

Ciekawostka

https://github.com/davejohnson/phonegap-windows - przystosowanie PhoneGap do wykonywania w postaci desktopowej aplikacji!