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

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 Dunyon');
}).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 Filesnodejs ga kirib ko’ring. Agar shu papkaning ichida npm.cmd mavjud bo’lsa, «c:Program Filesnodejs» 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:projectshelloworld"

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

1587fb

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

**AndroidSDKplatform-tools
**AndroidSDKtools

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:



    
        
        
        
        
        
        
        Hello World
    
    
        
		
		

Info

Back
info

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

83361e

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.

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