Aplikacje mobilne w HTML5, Phonegap, jQueryMobile

post_img

Poszukiwanie sposobu na łatwe i szybkie wytwarzanie aplikacji mobilnych to nieustająca zabawa. Mnogość technologii, platform oraz frameworków wspomagających ten proces jest spora. Tym razem postanowiłem wziąć na tapetę HTML5. Pisanie w technologii JavaScript, HTML5, CSS3 wydaje się prostsze niż Objective-C, a już na pewno łatwiej tu o programistę z doświadczeniem. Czy ta technologia jest faktycznie użyteczna w świecie smartfonów i tabletów? Postaram się odpowiedzieć na to pytanie oraz opisać pomocnicze narzędzia.

HTML5

HTML5, jak dobrze wiadomo, jest następną wersją popularnego języka hyper text markup language (HTML). Pomyślano ją tak, aby ułatwiała pisanie nie tylko stron internetowych, ale również aplikacji pracujących nawet w trybie offline. Doszła możliwość rysowania nowych obiektów 2D canvas, obsługa plików wideo i audio oraz wiele innych. Nie będę zagłębiał się w wątek nowości HTML5, dla ciekawych poniżej znajduje się stosowny link do źródeł.
Bardziej interesuje mnie, jak zrobić w HTML5 aplikację. Aby działała poprawnie na urządzeniu mobilnym, wymagana jest przeglądarka wspierająca tę technologię. Obecnie całkiem dobrze radzi sobie z tym Opera, która jednak nie jest domyślną przeglądarką w smartfonach. Spośród dostarczonych przez daną platformę, wsparcie dla HTML5 wygląda już nieco gorzej w przypadku Androida, a sporo gorzej w przypadku Blackberry czy Windows Phone. Zapewne z czasem sytuacja ta będzie się poprawiać. Jeśli ktoś chciałby sprawdzić, na ile dobrze wspiera HTML5 jego własna przeglądarka, polecam ten test. Mój Galaxy S2 i9100 z Androidem 2.3.3 uzyskał wynik 128 na 160 punktów. Skoro przeglądarki różnią się znacząco od siebie w implementacji specyfikacji HTML5, łatwo sobie wyobrazić, jakie problemy spotkają nas przy kodowaniu. Odmienne zachowanie aplikacji w zależności od przeglądarki jest kłopotliwe w testowaniu i programowaniu, a więc kosztowne. A może da się jakoś raz napisać aplikację w HTML5, aby tak samo działała na różnych telefonach?

Phonegap i jQuery

Phongap – tak właśnie nazywa się framework ułatwiający nam okiełznanie HTML5 i skłonienie tej technologii do poprawnego działania na różnych telefonach. Pozwala na pisanie jednej aplikacji i wydanie jej w postaci oddzielnych paczek dedykowanych dla odpowiedniej platformy. Dostęp do API urządzenia odbywa się przez funkcje javascriptowe dostępne w pliku phonegap-1.1.0.js. Instrukcja jak napisać „Hello World!” i skonfigurować środowisko znajduje się tutaj http://phonegap.com/start#android. Podałem linka do Androida, gdyż w nim postanowiłem napisać prostą aplikację, aby zobaczyć, jak to wszystko wygląda w tak zwanym praniu. Aplikacja miała za zadanie automatycznie logować nas do sieci wewnętrznej wifi, gdy włączy się połączenie. Dodatkowo wyświetlać obecny status połączenia z siecią i na osobnej stronie umożliwić konfigurację, która byłaby na stałe zapamiętana w telefonie. Pisanie w samym HTML i JS czegoś więcej niż „Hello World!” jest dość żmudne. Zwłaszcza jeśli chcemy zapewnić estetyczny wygląd formularzy, układ strony itd. Ponieważ dobry programista to „leniwy” programista, postanowiłem poszukać gotowych bibliotek wspomagających pracę z JS na mobilne urządzenia. Skorzystałem z jQueryMobile, gdyż jQuery jest popularny i zawiera wiele przydatnych funkcji JS. Aby dodać go do naszego projektu, należy ściągnąć pliki z http://jquerymobile.com/download/ i zapisać w katalogu assets/www. Skoro mamy już wszystko, co nam potrzebne, zaczynamy!

Trochę kodu

Tworzymy stronkę index.html i w sekcji head dołączamy potrzebne pliki. W tym momencie najlepiej jest utworzyć plik lib.js na potrzeby własnych funkcji javascriptowych.

1
2
<script src="phonegap-1.1.0.js" type="text/javascript"></script> <script src="jquery-1.6.4.min.js"></script>
<script src="jquery.mobile-1.0rc2.js"></script> <script src="lib.js" type="text/javascript"></script>

Potrzebny będzie nam jeszcze dostęp do API Androida, aby wykryć połączenie z wifi oraz zapisanie lokalnie na telefonie ustawień aplikacji. Na zmiany połączenia z siecią możemy reagować poprzez funkcję nasłuchiwania odpowiednich zdarzeń.

1
2
document.addEventListener("offline", pgOffOnline, false);
document.addEventListener("online", pgOnOnline, false);

pgOffOnline i pgOnOnline to nazwy moich funkcji wywoływanych w momencie wystąpienia zdarzenia. Zapisanie danych w telefonie możliwe jest dzięki

1
localStorage.setItem(klucz, wartość);

Pozostało jeszcze napisać formularze w HTML i połączyć wszystko w jedną całość. Kod index.html i lib.js poniżej na stronie, a cała aplikacja, którą można zaimportować do Eclipse na dole w dziale linki.

index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<script src="phonegap-1.1.0.js" type="text/javascript"></script> <script src="jquery-1.6.4.min.js"></script>
<script src="jquery.mobile-1.0rc2.js"></script> <script src="lib.js" type="text/javascript"></script>

<script type="text/javascript">
    document.addEventListener("deviceready", onDeviceReady, false);
    function onDeviceReady() {
        document.addEventListener("offline", pgOffOnline, false);
        document.addEventListener("online", pgOnOnline, false);
        checkConnection();
    }
</script>
<div id="home">
<div>
<h1>Atena Wifi Connector</h1>
</div>
<div>

Twoje obecne polaczenie to :

<a href="#settings">Ustawienia</a>

</div>
</div>
<div id="settings">
<div>
<h1>Ustawienia</h1>
<div class="ui-body ui-body-b">
<fieldset> <legend>Zaloguj autmatycznie:</legend><input id="start" class="custom" name="start" type="checkbox" /> <label for="start">Tak</label></fieldset>
<div><label for="login">Login:</label> <input id="login" name="login" type="text" />
<label for="pass">Haslo:</label> <input id="pass" name="pass" type="password" /></div>
<button onclick="saveSettings();">Zapisz</button><button onclick="cancelSettings();">Anuluj</button>

</div>
</div>
<script type="text/javascript">
        $('#login').attr("value",getProperty(LOGIN_KEY,LOGIN_DEFAULT));
        $('#pass').attr("value",getProperty(PASSWORD_KEY,PASSWORD_DEFAULT));
        if(getProperty(STARTUPAPP_KEY,STARTUPAPP_DEFAULT)){
            $('#start').attr("checked","checked");
        }

</script>

</div>
lib.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
const PASSWORD_KEY = "password";
const LOGIN_KEY = "login";
const STARTUPAPP_KEY = "STARTUPAPP";

const PASSWORD_DEFAULT = "xx";
const LOGIN_DEFAULT = "xxx";
const STARTUPAPP_DEFAULT = true;

function connect2Wifi(){
var url = "https://1.1.1.1/login.html";
var login = getProperty(LOGIN_KEY,LOGIN_DEFAULT);
var pass  = getProperty(PASSWORD_KEY,PASSWORD_DEFAULT);
$.ajax({
type: 'post',
url: url,
data: {'buttonClicked':'4','err_flag':'0','err_msg':'0','info_flag':'0','info_msg':'','username':login,'password':pass},
success: function(data){
},
});

}

function checkConnection() {

var networkState = navigator.network.connection.type;

var states = {};
states[Connection.UNKNOWN] = 'Unknown connection';
states[Connection.ETHERNET] = 'Ethernet connection';
states[Connection.WIFI] = 'WiFi connection';
states[Connection.CELL_2G] = 'Cell 2G connection';
states[Connection.CELL_3G] = 'Cell 3G connection';
states[Connection.CELL_4G] = 'Cell 4G connection';
states[Connection.NONE] = 'No network connection';

setConnectionStatus(states[networkState]);

if(getProperty(STARTUPAPP_KEY,STARTUPAPP_DEFAULT)){
if (networkState == Connection.WIFI) {
connect2Wifi();
}
}

}

function saveSettings(){
setProperty(LOGIN_KEY,$('#login').attr("value"));
setProperty(PASSWORD_KEY,$('#pass').attr("value"));
setProperty(STARTUPAPP_KEY,$('#start').attr("value"));
$.mobile.changePage( "#home", { transition: "slideup"} );
}

function cancelSettings(){
$.mobile.changePage( "#home", { transition: "slideup"} );
}

function setConnectionStatus(status){
document.getElementById('status').innerHTML = status

}
function pgOnOnline() {
checkConnection();
}
function pgOffOnline() {
checkConnection();
}

function getProperty(name,defaultvalue){
var val =localStorage.getItem(name);
if(jQuery.isEmptyObject(val)){
return defaultvalue;
}else{
return val;
}
}
function setProperty(name,value){
try {
localStorage.setItem(name, value);
} catch (e) {
if (e == QUOTA_EXCEEDED_ERR) {
alert('Brak miejsca na zapisanie danych.');
}
}
}

Podsumowanie

Podsumowując, połączenie HTML5, Phonegapa z jQueryMobile wywołuje wrażenie jak najbardziej pozytywne. Nie było większych problemów czy błędów, które bym napotkał, mimo że jQuery jest jeszcze w wersji rc1. Dokumentacja do Phonegap jak i jQuery jest na bardzo dobrym poziomie – nic, tylko zacząć kodować. Zdecydowanie polecam to rozwiązanie, jeśli chcemy napisać prostą aplikację na różne telefony. Opanowanie HTML5 z JS jest znacznie szybsze, niż nauczenie się Javy dla Androida, Objective-C na iPhona itd. Ponadto możliwości, jakie udostępnia nam HTML5 pozwalają na stworzenie także rozbudowanych i zaawansowanych aplikacji. Dodatkowo Phonegap dostarcza nam środowisko do kompilowania aplikacji na różne platformy. Tak więc wystarczy napisać sam plik index.html, wrzucić na serwer i pobrać naszą skompilowaną aplikację dla danej platformy https://build.phonegap.com/

Linki


Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

5 komentarzy do “Aplikacje mobilne w HTML5, Phonegap, jQueryMobile

  • szukasz

    Dobra, ale skąd zabrać ten phonegap-1.1.0.js? Na stronie phonegab chcą mi jakieś środowisko programistyczne wcisnąć.

  • Zbigniew Wysocki

    Obecnie phonegap jest już w nowszej wersji 1.5.x. Zgodnie z dokumentacją należy dodać plik cordova-1.x.x.js.

    Choć nie ma gwarancji czy ta aplikacja będzie działała pod nowszą wersja PG.

    Jeśli chcesz koniecznie skorzystać z 1.1.0, to wymagany plik js znajduje się w katalogu GapAPP/assets/www w paczce GapAPp.zip (ostatni link w sekcji linki)

  • askd

    Mam już gotową aplikację w HTML5, pisaną w jquery (ale nie mobilne, choć ta wersja, którą mam, idealnie działa na smartfonach) i chciałbym ją przenieść na np. iphona. Co w taki mrazie robić?

  • krzys1973

    Witam,
    Proszę o wyjaśnienie fragmentu kodu funkcji connect2Wifi(). Znajduje się tam deklaracja zmiennej var url = „https://1.1.1.1/login.html”;. Czy adres 1.1.1.1 jest tu wpisany jako przykładowy? Czy to standardowy adres do logowania się do sieci wifi i taki zapis będzie działał dla dowolnej sieci wifi? Czy do poprawnego działania winna zostać jeszcze zdefiniowana strona login.html? Proszę o odpowiedź. Km