” fanidan 5-mustaqil ishi mavzu: Android uchun ilovalar yaratish. Mobil ilovalarni ishlab chiqish va yaratish: qayerdan boshlash kerak? Bajardi: Musayev I. B. Ki(At-servis)-S204-18-guruh talabasi Qabul qildi

Qo'llash doirasi
Nima uchun jQuery Mobile-dan foydalanishimiz kerakligini darhol tushuntiraman. Ushbu JS kutubxonasi bizga turli platformalar uchun mobil ilova interfeysining tayyor elementlarini (mahalliy interfeyslarga iloji boricha yaqinroq) taqdim etadi. Axir, bizga brauzer sahifasi emas, balki chiqishda mobil ilova kerak! Shunday qilib, oxirgisini yuklab oling jQuery versiyasi Mobil (jquerymobile.com/download) va bizga kerak bo'lgan birinchi dastur fayllarini ishchi papkaga o'tkazing:

• 
  tasvirlar / (jq-mobile arxividagi bir xil nomdagi papkadan barcha rasmlarni bu yerga torting);
  
• 
  index.css;
  
• 
  index.html;
  
• 
  index.js;
  
• 
  jquery.js;
  
• 
  jquery.mobile.min.css;
  
• 
  jquery.mobile.min.js.
  

Foydalanuvchi kelajakda mobil internetni sarflamasligi uchun resurslarni asosan mahalliy qilish kerak. Endi index.html faylida simli ramka yaratamiz. Quyidagi kod sahifaning yuqori qismini xarita, "Geo-Reminder" so'zlari va "Nuqtalar" tugmasi bilan tavsiflaydi.
Xarita sahifasi
Geo-eslatma
Ballar
Sahifaning data-dom-cache = "true" atributi uni xotiradan olib tashlashning oldini olish uchun talab qilinadi. "Nuqtalar" tugmasi uchun data-transition = "pop" dan foydalaning, shunda "Nuqtalar ro'yxati" sahifasi "Bubble" effekti bilan ochiladi. Ular qanday ishlashi haqida ko'proq jQuery sahifalari Mobil, siz yaxshi qo'llanmani o'qishingiz mumkin (bit.ly/vtXX3M). Analogiya bo'yicha, fikrlar ro'yxati bilan sahifa yarating:
Nuqtalar roʻyxati sahifasi
hamma narsani o'chirib tashlang
Ballar
Xarita
"Xarita" tugmasi uchun biz ma'lumotlarga o'tish = "pop" ni ham yozamiz, lekin ma'lumotlar yo'nalishi = "teskari" atributini qo'shamiz, shunda "Xarita" sahifasi "Fade" effekti bilan ochiladi. Xuddi shu atributlarni nuqta shabloniga yozamiz. Mana, bizning ramkamiz tayyor.
Ilova yaratish
Endi biz xaritani ko'rsatishimiz kerak, buning uchun biz millionlab turli saytlar tomonidan ishlatiladigan standart Google Maps API-ni olamiz:
Var latLng = yangi gm.LatLng (this.options.lat, this.options.lng); this.map = new gm.Map (element, (kattalashtirish: this.options.zoom, // Boshlang‘ich masshtabni tanlash: latLng, // Boshlang‘ich markazni mapTypeIdni o‘rnatish: gm.MapTypeId.ROADMAP, // Oddiy xarita disableDoubleClickZoom: rost, // Avtomatik masshtabni teginish orqali o'chirish / ikki marta bosish disableDefaultUI: true // Barcha interfeys elementlarini o'chirib qo'ying));
Bu yerda Gm — Google Xaritalar obyektiga ishora qiluvchi oʻzgaruvchi. Kodda ishga tushirish parametrlarini yaxshi izohladim. Keyingi qadam xaritada odam belgisini chizishdir:
This.person = new gm.Marker ((xarita: this.map, icon: new gm.MarkerImage (PERSON_SPRITE_URL, new gm.Size (48, 48))));
PERSON_SPRITE_URL sifatida Google panoramasidagi odamning sprite manzili ishlatiladi. Uning statik manzili maps.gstatic.com/mapfiles/cb/mod_cb_scout/cb_scout_sprite_api_003.png. Foydalanuvchi xaritaga bosish orqali nuqta qo'shadi, shuning uchun ularni chizish uchun biz bosish hodisasini tinglaymiz:
Gm.event.addListener (this.map, "klik", funktsiya (voqea) (self.requestMessage (funksiya (xato, xabar)) (// Agar (xato) qaytsa, foydalanuvchi kiritgan matnni qaytaradigan usul; // Usul faollar ro'yxatiga nuqta qo'shadi va // uni xaritada chizadi self.addPoint (event.latLng, self.options.radius, xabar); self.updatePointsList (); // Ballar ro'yxatini qayta chizish) );), noto'g'ri);
Men kodning katta qismini taqdim etaman - qolganini diskdan qidiring. Keyinchalik, dasturga foydalanuvchi belgisini xarita bo'ylab harakatlantirishni o'rgatishimiz kerak. Prototipda biz Geolocation API-dan foydalanamiz (ish stoli brauzerlarida ham qo'llaniladi):
Agar (navigator.geolocation) (// Brauzerning gpsSuccess (pos) geolokatsiya funksiyasini qoʻllab-quvvatlashini tekshiring (var lat, lng; if (pos.coords) (lat = pos.coords.latitude; lng = pos.coords.longitude;) else (lat = pos.latitude; lng = pos.longitude;) self.movePerson (yangi gm.LatLng (lat, lng)); // Foydalanuvchi piktogrammasini siljitish) // Joriy // foydalanuvchi oʻrnini soʻrash window.setInterval ( funktsiya () (// Joriy joylashuvni so'rang navigator.geolocation.getCurrentPosition (gpsSuccess, $ .noop, (enableHighAccuracy: true, maximumAge: 300000));), 3000);)
movePerson usuli foydalanuvchining istalgan hotspotda ekanligini tekshirish uchun getPointsInBounds () oddiy protsedurasidan foydalanadi. Oxirgi savol - ballar ro'yxatini qayerda saqlash kerak? HTML5 localStorage-dan foydalanish qobiliyatini taqdim etadi, shuning uchun uni e'tiborsiz qoldirmasligimiz kerak (men buni kodning ushbu bo'limlari bilan o'zingiz tushunishingizni qoldiraman, men buni yaxshi izohlaganman). Shunday qilib, brauzerda ishlaydigan dastur tayyor!