Izdelava mobilne aplikacije: 1. del

Na začetku si bomo pripravili okolje za izdelavo spletne aplikacije.

Potrebujemo naslednje programe:

- Notepad++ (program, s katerim bomo pisali in urejali kodo),

- Strežnik (ki mora podpirati PHP in MySQL),

- FileZilla (program FTP, s katerim bomo prenašali datoteke na strežnik).

Jaz bom za gostovanje spletne aplikacije uporabil gostovanje na WawHost.com. Za registracijo in naročilo brezplačnega gostovanja sledite tej povezavi.

Če se boste odločili za gostovanje na drugem strežniku, morate biti pozorni, da podpira PHP in omogoča podatkovne baze MySQL.

Ko imamo okolje pripravljeno, se lahko lotimo izdelave spletne aplikacije.

Najprej bomo ustvarili novo mapo, kjer bomo hranili našo aplikacijo na računalniku. Jaz sem mapo ustvaril na namizju in jo poimenoval izdelava-mobilne-aplikacije-1-del.

Sedaj odpremo Notepad++, v katerem ustvarimo novo datoteko, jo poimenujemo index.html in shranimo v našo mapo.

Začnimo s pisanjem kode!

Vsaka HTML-stran je sestavljena iz:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

V glavo strani (head) nato vstavimo naslov (title), viewport meta zaznamek in povezavo do jQuery Mobile knjižnic.

<head>

<title>Mobilna aplikacija</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>

<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js></script>

</head>

V znački body bomo sedaj definirali prvo stran, na katero bo prišel uporabnik, ko bo odprl našo aplikacijo.

<body>

<div data-role="page" id="index">

<div data-role="header">

<h1>Prva stran</h1>

</div>

<div data-role="content">

<p>Pozdravljen svet</p>

</div>

<h4>Noga strani</h4>

</div>

</div>

</body>

Sedaj si aplikacijo že lahko ogledate.

Shranite spremembe v index.html in odprite dokument v svojem priljubljenem brskalniku (jaz uporabljam Google Chrome).

JQuery Mobile podpira večstransko strukturo (multi-page template structure), kar nam omogoča, da dodamo več strani v isti dokument.

Pod </div> bomo dodali še eno stran:

<div data-role="page" id="contact">

<div data-role="header">

<h1>Kontakt</h1>

</div>

<div data-role="content">

<p>Dosegljiv sem na email@email.com</p>

</div>

<div data-role="footer">

<h4>Noga strani</h4>

</div>

</div>

Sedaj bomo dodali še navigacijo v header-ju vsake strani (glej sliko), da bomo lahko preklapljali med tema dvema stranema.

<div data-role="navbar">

<ul>

<li><a href="#index" class="ui-btn-active ui-state-persist">Prva stran</a></li>

</ul>

</div>

Enako storimo za drugo stran, ki ima page id="contact", vendar tokrat class="ui-btn-active ui-state-persist" navedemo v <a href="#contact">.

V header-ju obeh strani bomo navedli še data-id="topnav" data-position="fixed", kar bo poskrbelo, da se med odpiranjem strani header ne bo animiral.

V footer-ja obeh strani pa dodamo data-id="botnav" data-position="fixed".

S tem smo zaključili 1. del lekcije izdelave mobilne aplikacije. Če ima kdo kakšno vprašanje, lahko vpraša na forumu.

V 2. delu si lahko ogledate, kako aplikacijo spremiti v oblikoi, ki bo primerna za mobilni telefon:

Priporočamo

Izdelava mobilne aplikacije: 2. del

Lotili se bomo izdelave spletne aplikacije v HTML, CSS, jQuery Mobile inPHP, ki jo bomo nato pretvorili v pravo Android mobilno aplikacijo, ki jo bomo lahko tudi namestili na svoj pametni telefon.

Celotna koda aplikacije je dosegljiva na naslovu: http://www.wawhost.com/izdelava-mobilne-aplikacije-1-del


Zmaga.com na Facebooku \| Pošljite nam e-pošto \| Informacije o Zmaga.com