Kliknite tukaj, da si ogledate profil, kot ga vidijo drugi

Izdelava mobilne aplikacije: 1. del

Delite vsebino na Facebooku
Delite vsebino na Twitterju
  Lotili se bomo izdelave spletne aplikacije v HTML, CSS, jQuery Mobile ter PHP, ki jo bomo nato tudi pretvorili v pravo Android mobilno aplikacijo, katero bomo lahko tudi namestili na svoj pametni telefon. 
 
 
1
 
 
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).
 
 
2
 
 
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.
 
 
3
 
 
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.
 
 
4
 
 
Sedaj odpremo Notepad++, v katerem ustvarimo novo datoteko, jo poimenujemo index.html in shranimo v našo mapo.
 
 
 
 
 
5
 
 
Začnimo s pisanjem kode!

Vsaka HTML-stran je sestavljena iz:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
 
 
6
 
 
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>
 
 
7
 
 
V znački body bomo sedaj definirali prvo stran, na katero bo prišel uporabnik, ko bo odprl našo aplikacijo.

<body>
<!-- Start of first page -->
<div data-role="page" id="index">

<div data-role="header">
<h1>Prva stran</h1>
</div><!-- /header -->

<div data-role="content">
<p>Pozdravljen svet</p>
</div><!-- /content -->

<div data-role="footer">
<h4>Noga strani</h4>
</div><!-- /footer -->
</div><!-- page -->
</body>
 
 
8
 
 
Sedaj si aplikacijo že lahko ogledate.

Shranite spremembe v index.html in odprite dokument v svojem priljubljenem brskalniku (jaz uporabljam Google Chrome).
 
 
9
 
 
JQuery Mobile podpira večstransko strukturo (multi-page template structure), kar nam omogoča, da dodamo več strani v isti dokument.

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

<!-- Start of second page -->
<div data-role="page" id="contact">

<div data-role="header">
<h1>Kontakt</h1>
</div><!-- /header -->

<div data-role="content">
<p>Dosegljiv sem na email@email.com</p>
</div><!-- /content -->

<div data-role="footer">
<h4>Noga strani</h4>
</div><!-- /footer -->
</div><!-- /page -->
 
 
10
 
 
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><!-- /navbar -->

Enako storimo za drugo stran, ki ima page id="contact", vendar tokrat class="ui-btn-active ui-state-persist" navedemo v <a href="#contact">.
 
 
11
 
 
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".
 
 
12
 
 
S tem smo zaključili 1. del lekcije izdelave mobilne aplikacije. Če ima kdo kakšno vprašanje, lahko vpraša na forumu.

Celotna koda aplikacije je dosegljiva na naslovu: http://www.wawhost.com/izdelava-mobilne-aplikacije-1-del
 
 
Komentiraj
 
 
 
 
 
26.2.2013, 8:28
Res odlično dobro. Komaj čakam naslednje korake.
 
 
 
 
26.2.2013, 8:39
Hudo dobro...res vsa čast za takšno lekcijo!
 
 
 
 
26.2.2013, 15:08
wooow, komaj čakam 2. del,...

changed: samsungmon (26.2.2013, 15:09)
 
 
 
 
26.2.2013, 18:19
Hvala Prihaja kmalu..
 
 
 
 
26.2.2013, 20:53
Super!
 
 
 
 
27.2.2013, 17:47
Jaz tudi komaj čakam drugi del aplikacije.Mi kdo pove če daš ti aplikacijo za plačat se ti lahko na PaySafeCard denar nakazuje?
 
 
 
 
28.2.2013, 15:52
Tvojega vprašanja ne razumem popolnoma, ampak vem, če želiš prejemati nakazila na PaySafeCard, da moraš imeti podjetje in sklenjeno pogodbo z njimi.

changed: alesko007 (28.2.2013, 15:53)
 
 
 
 
28.2.2013, 21:36
No hvala za odgovor. Čeprav je moje vprašanje nerazumno vseeno...Hvala
 
 
 
 
2.3.2013, 13:15
je kak drug način da prejmaš denar od alikacije? kaka druga kartica? če nimaš pogodb itd..
 
 
 
 
5.3.2013, 19:25
Kdaj bo 2. Del komaj čakam prosim objavi ga.....
 
 
 
 
10.3.2013, 21:37
@aleksd Na Google Play, Apple App store, ... lahko daš svojo aplikacijo, kjer jo lahko drugi uporabniki kupujejo. Drugače pa lahko nakazila dobivaš na PayPal, MoneyBookers, BitCoin, ... Če si to spraševal?

2. del pride nekje konec tega tedna. Lekcijo sem do polovice že spisal, tako da morda bo še prej
 
 
 
 
22.3.2013, 20:55
kdaj bo?
 
 
 
 
23.3.2013, 2:07
Pa čim prej objavi 2.del ,ker sem prebral da je samo 2 meseca brezplačno.

 
 
 
 
6.6.2013, 6:53
Hm js mam pa težavo.In sicer tudi ko tvojo stran shranim kot index.html se mi v Chromu odpre tako, kot kaže slika spodaj.Kako naj to popravim?

 
 
 
 
6.6.2013, 12:26
Manjkajo ti jQuery knjižnice.

V headerju trenutno kodo zamenjaj z:
 
 
 
 
6.6.2013, 12:28
Meh noče prav objavit.. Evo tukaj si povleči nov index.html:

www.wawhost.com/izdelava-mobilne-aplikacije-1-del/index.zip
 
 
 
 
14.6.2013, 18:26
Pa lahko potem preko takilih aplikacij daš da ti preko spleta ali bluetootha sprejema/oddaja informacije?
 
 
 
 
15.6.2013, 3:44
Ne, takšnih funkcij ni na voljo.
 
 
 
 
15.6.2013, 12:05
Pol je brezveze...
 
 
 
 
16.7.2015, 20:22
Vse je prazno
 
Prijava in registracija
 
 
 
Zmaga.com ponuja brezplačno in razumljivo učenje računalniških programov, vas na enkraten način spozna z različnimi svetovnimi jeziki, s podrobno obrazloženimi recepti prikaže čare kulinarike in vam prežene strahove pred domačimi opravili.
 
 
Poleg tega lahko prebirate poučne članke, ki so namenjene širjenju naše splošne razgledanosti ter preverite svoje znanje z priljubljenim in enostavnim sistemom za preverjanje znanja. Če med vsebinami, ki se dodajajo vsak dan, ne najdete želenega znanja, je za vaša vprašanja na voljo dobro obiskan forum, kjer lahko tudi aktivno sodelujete. V primeru, da bi radi svoje praktično znanje delili z ostalimi, pa to lahko storite preko preprostega vmesnika za dodajanje vsebin. Zmagajte z znanjem z Zmaga.com!