CSS/HTML/JS larda Androidga dastur tuzamiz (PhoneGap, Cordova)

Salom. Ayrim sabablarga ko'ra NodeJS, Cordova, JQueryMobile haqida o'rganishga majbur bo'ldim. Ochig'i bular haqida eshitmangaman lekin hali ishlab ko'rmagandim. Shu tufayli oxirgi ikki kunda o'rganganlarimni sizlarga ham baham ko'rmoqchiman. Boshida qiyin deb o'ylagandim lekin qarasam juda ososn ekan. Shu tufayli manimcha sizlarga ham oson bo'ladi.

Kerakli ssilkalar:
NodeJs: nodejs.org/
Apache Cordova: cordova.apache.org/
JQueryMobile: jquerymobile.com/

Birinchi narvatda nodejs ni saytiga kirib o'zimizga nodejsni o'rnatib olamiz. Bu haqida saytda ham yozilgan.

NodeJS mani tushunishimcha JS yordamida dastur tuzish. Chunki ayrim misollarida ko'rinib turibdiki osongina Apachega o'xshagan dasturni tuzish mumkin. Kelin oldin shulardan birini ko'rsak.
var http = require('http');
http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Salom Dunyo\n');
}).listen(1337, '127.0.0.1');
console.log('Server running at http://127.0.0.1:1337/');

Bu yerda deyarli hech qandah kod yozilmagan. Lekin browseringizni ochib 127.0.0.1:1337 ga kirsangiz «Salom Dunyo» denga so'zni ko'rasiz. Demak bu HTTP server vasifasini bajaryapti. Umuman olganda NodeJS haqida ko'proq ma'lumotlarni:
nodejs.org/api/
ru.wikipedia.org/wiki/Nodejs
habrahabr.ru/hub/nodejs/
lardan o'qisangiz bo'ladi. Chunki bizni maqola asosan Cordova ga mo'ljallanadi. Cordovani o'rnatishdan oldin ant.apache.org/bindownload.cgi ga kirib buni ham o'rnatish kerak.

Agar kompyuteringizga nodejs ni o'rnatgan bo'lsangiz, Start > Run > CMD ga kirib
npm --version

deb tering, agar hech nima chiqmasa yoki bundan komanda mavjud emas desa c:\Program Files\nodejs\ ga kirib ko'ring. Agar shu papkaning ichida npm.cmd mavjud bo'lsa, «c:\Program Files\nodejs\» ni PATH (Env) ga qo'shib qo'ying (http://www.oszone.net/6157, hashcode.ru/questions/153628/windows-как-добавить-в-переменную-окружения-path-путь).

Shularni qiling va CMD ni o'chirib, boshdan CMD ga kiring. Agar shundayam hech nima chiqmasa kompyuteringizni o'chirib yoqing. Agar bundayam hech nima chiqmasa pastga komentariyaga yozing, nima ish qilganingizni.

Agar NPM ishlab turgan bo'lsa
npm install -g cordova

ozgina kutib tursangiz cordovani kompyuteringizni o'rnatib beradi. O'rnatilgandan keyin
cordova --version

versiyasi chiqishi kerak, komentariyaga yozing.

Shu yergacha biz cordovani o'rnatdik, endi keling cordova o'zi nima? Shu haqida.

WikiPedia ning yozishicha, Cordova (PhoneGap) mobil dasturlash tilini bilmasdan turib HTML/CSS/JS lar yordamida telefonlarga dastur tuzishni ta'minlaydigan framework. Keling buni tekshiramiz. Haqiqatda ham HTML/CSS larda telefonlarga dastur tuzsa bo'ladimi?

Buning uchun projects nomli papka yarating (agar bo'lsa cd **/projects). Keyin shu joyda turib CMD da
D:\projects\>cordova create helloworld com.opennetuz.helloworld HelloWorld


Bunda:
1-parametr: proyektning papkasi
2-parametr: proyekt id si (umuman Java dagi packetlar)
3-parametr: proyekt nomi

Agar comandani tergan bo'lsangiz
Creating a new cordova project with name "HelloWorld" and id "com.opennetuz.helloworld" at location "D:\projects\helloworld"

ko'rinishidagi tekst chiqishi kerak. Endi yaratilgan proyektimizning papkalarini ko'rsak
hooks
merges
platforms
plugins
www
config.xml


Bundan www papkasiga kirib index.html ni browserda ochsangiz



shunga o'xshagan natijani ko'rasiz. Keyingi qadam Android APK larni yasash. CMD da
cd helloworld
cordova platform add android

Shu ikkalasini tersangiz platforms papkasida android nomli yana bir papka hosil bo'lishi lozim. Keyin HTML/CSS/JS (www da turgan) dan APK yasash uchun bizga AndroidSDK kerak bo'ladi, agar bo'lmasa developer.android.com/sdk/index.html dan olsangiz bo'ladi. TasIx ga qo'ysam ssilkani qo'shib qo'yaman.

SDK mavjud bo'lsa
**\AndroidSDK\platform-tools
**\AndroidSDK\tools

shu ikkala papkani PATH ga qo'shib qo'yish kerak. Papkalarda " " (probel) bo'lmasligi lozim. Qayerdadir o'qigandim agar probel bo'lsa qandaydir xatolik beradi deb. Balki ishlashi ham mumkin. Man tekshirmadim.

Va oxirgi qadam
cordova build

Agar kompilyatsiyada hech qanday xatolik bermasa, platforms/android/ant-build/ da HelloWorld-debug.apk nomli APK lar mavjud bularni telefoningizga o'rnatsangiz tepedagi rasmdagi natijani ko'rasiz. Agar to'g'ridan to'g'ri telefonga o'rnatmoqchi bo'lsangiz
cordova run android

deb tering.

Ko'rib turganingizdan CSS/HTML/JS lar yordamida Androidga programma tuzdik. AJAX yordamida siz hohlagancha tarmoqqa bog'lanib ishlashingiz mumkin. Mani tushunishimcha cordova telefondagi yana bir browser faqat ishlash prinsipi boshqacharoq.

Endi JQueryMobile haqida. Bu JQuery ning telefonlar uchun bo'lgan varianti emas. JQuery ning o'zi ham telefonlarda ishlaydi. Bu TOUCH bilan ishlashga mo'ljallangan saytlarni yaratishga zarur bo'lgan konstruktor desak to'g'ri bo'ladi.

Oddiy misol keltirsam:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=medium-dpi, user-scalable=0" />
        <link rel="stylesheet" type="text/css" href="css/jquery.mobile.min.css" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <title>Hello World</title>
    </head>
    <body>
        <div data-role="page" id="homepage">
			<div data-role="header">
				<h1 id="twi_acc">Home page</h1>
				<a href="#settings" data-icon="gear" class="ui-btn-right">Options</a>
			</div>
			<div data-role="content">
				<ul data-role="listview" data-inset="true" data-theme="a">
					<li><a href="#homepage">Home page</a></li>
					<li><a href="#info" data-transition="pop">Info</a></li>
					<li><a href="sitemap.html" data-transition="none">Sitemap</a></li>
				</ul>
			</div>
			<div data-role="footer"></div>
		</div>
		
		<div data-role="page" id="info">
			<div data-role="header">
				<h1 id="twi_acc">Info</h1>
				<a href="#homepage" data-icon="back" class="ui-btn-left">Back</a>
			</div>
			<div data-role="content">
				info
			</div>
			<div data-role="footer"></div>
		</div>
		
		<script type="text/javascript" src="cordova.js"></script>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.mobile.min.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
		<script type="text/javascript">
            app.initialize();
        </script>
    </body>
</html>


Buning natijasini: http://opennet.uz/examples/1/cordova/ ko'rish mumkin.

Ko'rganingizday bizlar oddiy HTML yozdik qolganini JQueryMobile o'zi hal qildi. Bu haqida to'liq
habrahabr.ru/post/109739/
api.jquerymobile.com/
jquerymobile.com/demos/
lardan olishingiz mumkin.

Agar shu JQueryMobile ni cordova proyektga qo'shib ishlatsangiz quyidagicha natijani olasiz



Keyin manda JQueryMobile 1.4 ni ishlatganimda telefonda nimagadir CSS da ishlamadi. (Corodva bilan).

Qo'shimcha: PhoneGap — cordova asosida yasalga va shunga o'xshagan dastur. Ya'ni webkit — cordova bo'lsa, Chrome — bu PhoneGap.

Agar savollar bo'lsa marhamat.

Нет комментариев