Android Studio muhitida tarmoqli dasturlash. Google Map bilan ishlash

Bajardi	Guruh	Ball
Yoqubov Nurillo	650-19

Android Studio muhitida tarmoqli dasturlash. Google Map bilan ishlash
Reja:

1. 
   AsyncTask
   
2. 
   Retrofit
   
3. 
   Volley
   
4. 
   Google Xaritalar uchun API kalitini olish
   
5. 
   Google Maps Flutter plaginini o'rnatish
   
6. 
   Asosiy ekranga xaritalar qo'shish
   
7. 
   Xarita belgilariga ma'lumot qo'shish
   
8. 
   Xulosa
   

AsyncTask
AsyncTask klassi ko'p vaqt talab qiladigan operatsiyalarni fon oqimiga o'tkazish uchun oddiy va qulay mexanizmni taqdim etadi. Bu sizga voqea ishlovchilarini grafik ip bilan sinxronlashtirishning qulayligini beradi, bu sizning interfeys elementlaringizni vazifaning bajarilishi to'g'risida xabar berish yoki vazifa tugagandan so'ng natijalarni ko'rsatish uchun yangilashga imkon beradi.
AsyncTask interfeysi ipidan to'g'ri va oson foydalanishni ta'minlashga mo'ljallangan. Biroq, eng keng tarqalgan foydalanish interfeysi interfeysga qo'shilish uchun ishlatilgan va bu kontekstni qochqinlarni, o'tkazib yuborilgan qo'ng'iroqlarni yoki konfiguratsiyani o'zgartirishda buzilishlarni keltirib chiqaradi. Shuningdek, u platformaning turli xil versiyalarida nomuvofiq harakatlarga ega, istisnolarni yutib yuboradi doInBackground va Executor to'g'ridan-to'g'ridan foydalanish uchun juda foydali emas.
AsyncTask atrofdagi yordamchi sinf sifatida yaratilgan Threadva Handler umumiy ish zarrachalarini tashkil etmaydi. AsyncTasks-dan qisqa muddatli operatsiyalar uchun foydalanish kerak (ko'pi bilan bir necha soniya.) Agar siz uzoq vaqt davomida ish zarralarini ushlab turishingiz kerak bo'lsa , va , java.util.concurrentkabi paketlar tomonidan taqdim etilgan turli xil API-lardan foydalanish tavsiya etiladi .
Shuni yodda tutingki, AsyncTask birdaniga echim emas. U qisqa muddatli operatsiyalar uchun ishlatilishi kerak - kichik rasmlarni yuklash, fayllar bilan ishlash, ma'lumotlar bazasi operatsiyalari va boshqalar.
Asinxron vazifa fon chizig'ida ishlaydigan va natijasi foydalanuvchi interfeysi satrida e'lon qilingan hisoblash orqali aniqlanadi. Vaqt mos kelmaydigan vazifa 3 umumiy turdagi, deb nomlangan bilan belgilanadi Params, Progressva Result, va 4 qadamlar chaqirdi onPreExecute, doInBackground, onProgressUpdateva onPostExecute.
Kodi:
public class fetchData extends AsyncTask {
String data ="";
String dataParsed = "";
String singleParsed ="";
@Override
protected Void doInBackground(Void... voids) {
try {
URL url = new URL("http://www.json-generator.com/api/json/get/coLPywhGqa?indent=2");
HttpURLConnection httpURLConnection = (HttpURLConnection) url.openConnection();
InputStream inputStream = httpURLConnection.getInputStream();
BufferedReader bufferedReader = new BufferedReader(new InputStreamReader(inputStream));
String line = "";
while(line != null){
line = bufferedReader.readLine();
data = data + line;
}

JSONArray JA = new JSONArray(data);

for(int i =0 ;i < JA.length(); i++){
JSONObject JO = (JSONObject) JA.get(i);
singleParsed = "Name:" + JO.get("name") + "\n"+
"Password:" + JO.get("password") + "\n"+
"Contact:" + JO.get("contact") + "\n"+
"Country:" + JO.get("country") + "\n";

dataParsed = dataParsed + singleParsed +"\n" ;

}

} catch (MalformedURLException e) {

e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
} catch (JSONException e) {
e.printStackTrace();
}

return null;

}

@Override

protected void onPostExecute(Void aVoid) {
super.onPostExecute(aVoid);

MainActivity.data.setText(this.dataParsed);

}
}
AsyncTask ning umumiy turlari
Asenkron vazifa tomonidan ishlatiladigan uchta tur quyidagilar:
1 Params, bajarilgandan so'ng vazifaga yuborilgan parametrlarning turi.
2 Progress, fonni hisoblash paytida e'lon qilingan progress birliklarining turi.
3 Result, fonni hisoblash natijasining turi.
Siz to'g'ridan-to'g'ri AsyncTask klassi bilan ishlay olmaysiz (mavhum sinf), undan meros olishingiz kerak (kengaytiriladi). Amalga oshirishda parametrlar sifatida execute () uslubiga o'tkaziladigan ob'ektlar, taraqqiyot to'g'risida signal berish uchun ishlatiladigan o'zgaruvchilar va natija saqlanadigan o'zgaruvchilar uchun sinflar berilishi kerak. Bunday yozuv formati quyidagicha:
AsyncTask <[Input_Parameter Type], [Progress_Report Type], [Result Type]>
Agar sizga parametrlarni qabul qilish, jarayon haqida ma'lumotni yangilash yoki yakuniy natijani chop etish kerak bo'lmasa, uchta holatda ham Void turini ko'rsating. Parametrlarda faqat umumiy turlardan foydalanish mumkin, ya'ni. int o'rniga Integer-dan foydalaning va hokazo.
Shunga ko'ra, variantlar juda boshqacha bo'lishi mumkin. Mana ulardan bir nechtasi
AsyncTask
AsyncTask
AsyncTask
AsyncTask
Yodda saqlash uchun siz diagrammani ko'rishingiz mumkin.
AsyncTask-da siz avval o'zlashtirishingiz kerak bo'lgan bir necha asosiy usullar mavjud. DoInBackground () usuli talab qilinadi, qolganlari sizning arizangiz mantig'iga asoslanib ishlatiladi.
doInBackground () - bu yangi ish zarrachasida ishlaydigan asosiy usul. UI-ga kirish imkoniyati yo'q. Aynan shu usulda og'ir vazifalar uchun kod joylashgan bo'lishi kerak. Sinfingizni amalga oshirishda aniqlangan parametrlarning to'plamini oladi. Ushbu usul orqa fonda ishlaydi, shuning uchun interfeys elementlari bilan o'zaro bog'liqlik bo'lmasligi kerak. PubProgress () usuli yordamida noqulay kodni bu erga joylashtiring, bu onProgressUpdate () ishlov beruvchiga interfeysga o'zgartirish kiritishga imkon beradi. Fon vazifasi tugagandan so'ng, ushbu usul onPostExecute () ishlov beruvchisi uchun yakuniy natijani qaytaradi va u foydalanuvchi interfeysiga xabar beradi.
onPreExecute () - doInBackground () dan oldin bajarilgan. UI-ga kirish imkoniyati mavjud
onPostExecute () - doInBackground () dan keyin bajarilgan (agar AsyncTask bekor qilingan bo'lsa, uni chaqirish mumkin emas). UI-ga kirish imkoniyati mavjud. Orqa fon vazifangiz tugashi bilanoq foydalanuvchi interfeysini yangilash uchun foydalaning. Ushbu ishlov beruvchi, chaqirilganda, GUI ipi bilan sinxronlashtiriladi, shuning uchun uning ichida interfeys elementlarini xavfsiz o'zgartirishingiz mumkin.
onProgressUpdate (). UI-ga kirish imkoniyati mavjud. Foydalanuvchi interfeysidagi vaqtinchalik yangilanishlarni nashr etish uchun ushbu ishlov beruvchini bekor qiling. Qo'ng'iroq qilinganda, u GUI ipi bilan sinxronlanadi, shuning uchun undagi interfeys elementlarini xavfsiz o'zgartirishingiz mumkin.
PublishProgress () - qidiruv natijalarni ko'rsatish uchun doInBackground () da chaqirilishi mumkin onProgressUpdate ()
bekor qilish () - vazifani bekor qilish
onCancelled () - UI-ga kirish imkoniyati mavjud. Vazifa bekor qilindi. Haddan tashqari yuklangan ikkita versiya mavjud.
UI-ga kirish / kirish imkoni yo'qligi nimani anglatishi haqida qisqacha. Sizning barcha tugmachalaringiz, matn yorliqlaringiz, ImageView (ekranda aks ettirilgan barcha narsalar) foydalanuvchi interfeysining (UI) bir qismidir. Sizning vazifangiz doInBackground () usulida har qanday element chaqirilishining oldini olishdir. Masalan, TextView-ga setText () usuli orqali matnni o'rnatolmaysiz yoki EditText-da shrift rangini o'zgartira olmaysiz. Misollarda siz bunday narsalarni qanday qilishni ko'rasiz.
Izoh: Garchi studiya tegishli usullar uchun super.onPreExecute () va super.onPostExecute () qatorlarini yaratsa ham, ularni o'chirib tashlashingiz mumkin. Superklassning manba kodida usullar hech narsa qilmaydi (bu shunchaki stub), shuning uchun ular Internetdagi ko'plab misollarda chiqarib tashlangan. Bu sizni qo'rqitishiga yo'l qo'ymang.
Uchrashuv uchun oddiy misol. Mushuk tomga ko'tarildi
Keltirilgan usullardan foydalanib oddiy misol yozamiz. Aytaylik, biz tomga mushuklarga chiqish jarayonini tasvirlamoqchimiz. Ularning tomga qanday chiqishlari har doim sir bo'lib kelgan, ammo bu juda qiyin ish, bu alohida ipda ishlatish uchun qulay.
Uyga ko'tarilgan so'zini onPreExecute () usulida aks ettiramiz, doInBackground () usulida og'ir kodni taqlid qilamiz, onPostExecute () usulida Climbed so'zini ko'rsatamiz.
AsyncTask bilan ishlash uchun siz avlodlar sinfini yaratishingiz va unda kerakli usullarni o'zingiz amalga oshirishingizni yozishingiz kerak. Ushbu darsda biz uchta usulni ko'rib chiqamiz:
doInBackground - yangi mavzuda bajariladi, bu erda biz barcha og'ir vazifalarni hal qilamiz. Chunki ip asosiy emas - UI-ga kirish imkoni yo'q.
onPreExecute - doInBackground-dan oldin bajarilgan, interfeysga kirish huquqiga ega
onPostExecute - doInBackground-dan keyin bajarilgan (agar AsyncTask bekor qilingan bo'lsa, yonmaydi - bu haqda keyingi darslarda batafsil ma'lumot), foydalanuvchi interfeysiga kirish huquqiga ega.

Retrofit
Retrofit — bu Square tomonidan ishlab chiqilgan Android, Java va Kotlin uchun tarmoq o'rnatish vazifasida xizmat qiladigan mashhur kutubxonalardan biri hisoblanadi. Ushbu kutubxonaning mashhurlik sabablaridan biri bu retrofitning kompilyatsiya paytida turlarni tekshirib, agar siz o'zgaruvchiga noto'g'ri turni belgilashga harakat qilgan bo'lsangiz, xatolik haqida sizni dastur ishga tushishidan oldin ogohlantirish imkoniga ega ekanligi. Bundan tashqari, REST API-ni mukammal darajada qo'llab-quvvatlaydi, tarmoqdagi so'rovlar va natijalarni osonlikcha tekshira olish imkoniga ham ega.

Kutubxona autentifikatsiya qilish va API bilan o'zaro ishlash va OkHttp bilan tarmoq so'rovlarini yuborish uchun kuchli asosni taqdim etadi. Ushbu kutubxona JSON yoki XML ma'lumotlarini ham API-dan yuklab olishni qolgan kutubxonalarga nisbatan oson amalga oshiradi.
Retrofitni dasturga qo'shish
implementation 'com.squareup.retrofit2:retrofit:2.9.0'
implementation "com.squareup.okhttp3:okhttp:4.9.0"
Konvertor qo'shish
implementation 'com.squareup.retrofit2:converter-gson:2.9.0'
Konvertorni qo'shish bizga JSON ma'lumotlarini (serverdan olingan) java yoki kotlin (model) obyektlarga (POJO) aylantirib beradi.
Bizda buning uchun bir nechta usullar mavjud. Jumladan: GsonConverterFactory, JacksonConverterFactory va SimpleXmlConverterFactory.
Kutubxonani qo'shib olganimizdan so'ng JSON holatiga ko'ra interface yaratib olamiz
JSON:
{
"status":"success",
"data":[
{
"id":"1",
"employee_name":"Tiger Nixon",
"employee_salary":"320800",
"employee_age":"61",
"profile_image":""
},
{
"id":"2",
"employee_name":"Garrett Winters",
"employee_salary":"170750",
"employee_age":"63",
"profile_image":""
}
]
}
Bizga qaytadigan JSON holatiga ko'ra, biz model ma'lumotlarini va holatini tayyorlab olishimiz kerak. Shunday qilib, biz EmployeeData ma'lumotlarini qaytaradigan getData() metodi bilan birgalikda interface yaratamiz. Bu GET so'rovidir, ya'ni biz ma'lumotni olib kelmoqchimiz. Shuning uchun biz unga @GET annotatsiyasini qo'ydik.
public interface ApiCaller {

//Ma'lumot olib kelish uchun asosiy URL

String BASE_URL = "https://dummy.restapiexample.com/api/v1/";

//Endpoint

@GET("employees")
Call getData();
}
Model (POJO) class:
public class EmployeeData {
private Data[] data;

private String status;

public Data[] getData() {
return data;
}

public void setData(Data[] data) {

this.data = data;
}

public String getStatus() {

return status;
}

public void setStatus(String status) {

this.status = status;
}
}
Data class:
public class Data {

private String id;

@SerializedName("employee_name")
private String employeeName;

@SerializedName("employee_salary")

private String employeeSalary;

@SerializedName("employee_salary")

private String employeAge;
@SerializedName("profileImage")
private String profileImage;

public String getId() {

return id;
}

public void setId(String id) {

this.id = id;
}

public String getEmployeeName() {

return employeeName;
}

public void setEmployeeName(String employeeName) {

this.employeeName = employeeName;
}

public String getEmployeeSalary() {

return employeeSalary;
}

public void setEmployeeSalary(String employeeSalary) {

this.employeeSalary = employeeSalary;
}

public String getEmployeAge() {

return employeAge;
}

public void setEmployeAge(String employeAge) {

this.employeAge = employeAge;
}

public String getProfileImage() {

return profileImage;
}

public void setProfileImage(String profileImage) {

this.profileImage = profileImage;
}
}
Endi esa Retrofit obyektini URL va konvertor yordamida yaratamiz:
Retrofit retrofit = new Retrofit.Builder()
.baseUrl(ApiCaller.BASE_URL)
.addConverterFactory(GsonConverterFactory.create())
.build();
So'rov yuborishni boshlasak bo'ladi
Retrofit obyekti yaratilgandan so'ng, API interfeysi retrofit obyekti yordamida yaratiladi va ushbu API yordamida biz tarmoqga so'rovimizni navbatga qo'yamiz. Bu so'rov serverga asinxron ravishda yuboriladi va muvaffaqiyat/muvaffaqiyatsizlik javobi bilan xabar beradi.
OnResponse( ) va onFailure ( ) metodlari yordamida biz kelgan ma'lumotni olish imkoniga egamiz va unutmaslik kerak ushbu ikki metod ham asosiy oqimda (Main thread) ishlaydi.
ApiCaller apiCaller = retrofit.create(ApiCaller.class);
Call employeeData = apiCaller.getData();
employeeData.enqueue(new Callback() {
@Override
public void onResponse(Call call,
Response response) {
Log.d(TAG, "onResponse: "+response.body());
}

@Override

public void onFailure(Call call,
Throwable t) {
Log.e(TAG, "onFailure: "+t.getMessage());
}
});
Call va Callback nima deb o'ylab qolgan bo'lsangiz, Call bizga tarmoqga so'rov yuborishda enqueue() metodi chaqirilgan vaqtida uni navbatga qo'yib beradi. Callback esa interface bo'lib bizga natija qaytishini kuzatib turadi.


Android Volley kutubxonasi - bu Android Server kutubxonasi bo'lib, dastur ishlab chiqaruvchilarga biron bir API Server-ga so'rovlarni boshqarishning tezligi va tezkor ishlashi uchun imkon beradi. Ushbu kutubxona bunga kutubxonaning taqdim etadigan ikkita asosiy konstruktsiyasi, ya'ni RequestQueueva va RequestObject. Ushbu ikkita konstruktsiya birgalikda har qanday backend API serveriga HTTP so'rovi yuborishi mumkin bo'lgan dasturni muvaffaqiyatli yaratishga imkon beradi.
Volley - bu Android ilovalari uchun tarmoqni osonlashtiradigan va eng muhimi, tezroq bajaradigan HTTP kutubxonasi. Volley GitHub-da mavjud .
Volley quyidagi afzalliklarni taqdim etadi:
Tarmoq so'rovlarini avtomatik ravishda rejalashtirish.
Bir vaqtning o'zida bir nechta tarmoq ulanishlari.
Shaffof disk va xotira javobining standart HTTP kesh muvofiqligi bilan keshlash .
So'rovlarning ustuvorligini qo'llab-quvvatlash.
Bekor qilish so'rovi API. Siz bitta so'rovni bekor qilishingiz yoki bekor qilish uchun bloklar yoki so'rovlar doirasini o'rnatishingiz mumkin.
Moslashtirish qulayligi, masalan, qayta urinish va orqaga qaytish uchun.
Tarmoqdan asenkron ravishda olingan ma'lumotlar bilan interfeysni to'g'ri to'ldirishni osonlashtiradigan kuchli buyurtma.
Nosozliklarni tuzatish va izlash vositalari.
Volley foydalanuvchi interfeysini to'ldirish uchun ishlatiladigan RPC tipidagi operatsiyalardan ustun turadi, masalan, tuzilgan ma'lumotlar sifatida qidiruv natijalarining sahifasini olish. U har qanday protokol bilan osonlikcha birlashadi va xom satrlarni, rasmlarni va JSON-ni qo'llab-quvvatlaydi. Sizga kerak bo'lgan funktsiyalar uchun ichki ko'makni taqdim etish orqali Volley sizni qozon kodini yozishdan xalos qiladi va sizning ilovangizga xos mantiqqa e'tiboringizni qaratishga imkon beradi.
Volley katta yuklab olish yoki oqim operatsiyalari uchun mos emas, chunki Volley tahlil paytida barcha javoblarni xotirada saqlaydi. Katta hajmdagi yuklab olish operatsiyalari uchun alternativadan foydalanishni o'ylab ko'ring DownloadManager.
Volley-ning asosiy kutubxonasi GitHub-da ishlab chiqilgan bo'lib , unda asosiy so'rovlar yuborish quvuri va shuningdek, Volley "asboblar qutisi" da mavjud bo'lgan keng tarqalgan qo'llaniladigan dasturlar to'plami mavjud. Volley-ni loyihangizga qo'shishning eng oson usuli bu sizning ilovangizning build.gradle fayliga quyidagi bog'liqlikni qo'shishdir:
Google map

Xaritalarni ko'rsatish ko'plab mobil ilovalarning asosiy funksiyasi - Google Maps, Yelp, Foursquare, Uber, Snapchat, UberEats va boshqalar - barcha mashhur ilovalarda ma'lum xarita xususiyatlari mavjud. Keling, interaktiv va doimgi foydalanuvchi tajribasini yaratish uchun Flutter ilovalarida xaritalarni qanday qo'llashimizni ko'rib chiqaylik. Flutter ekotizimi gullab-yashnamoqda va yaqin kelajakda mobil ilovalarni ishlab chiqishning eng ko’p o'rnatilgan platformalaridan biri sifatida katta iz qoldiradi. Jamiyat jadal rivojlanmoqda va allaqachon ko'plab kuchli kutubxonalar mavjud. Ushbu qo‘llanmada biz Flutter ilovalarimizda xaritalarni ko‘rsatish uchun googler_maps_flutter to‘plamidan foydalanamiz. Xaritalar Yelp yoki UberEats, xarid qilish ilovalari, geolocation ilovalari kabi navigatsiya va yetkazib berish bilan shug‘ullanuvchi ilovalarda qo‘llaniladi. Biz undan manzillarni ko‘rsatish, joylarni kuzatish, real vaqtda navigatsiya va hokazolarni ko‘rsatish uchun foydalanishimiz mumkin. Google Developer Console’dan Google Maps API’dan foydalanish uchun Android Google map SDK bilan jihozlangan Google API kalitini Flutter loyihamizga integratsiya qilishdir. Keyin, biz ilova ekranida xaritani ko'rsatish uchun aytib o'tilgan paketdan foydalanamiz. Shuningdek, biz markerlar va ularni moslashtirish bilan ishlaymiz.

Birinchidan, biz yangi Flutter loyihasini yaratishimiz kerak. Buning uchun Flutter SDK va boshqa Flutter ilovasini ishlab chiqish bilan bog'liq talablar to'g'ri o'rnatilganligiga ishonch hosil qilamiz. Agar hamma narsa to'g'ri sozlangan bo'lsa, loyihani yaratish uchun biz kerakli mahalliy katalogda quyidagi buyruqni bajarishimiz mumkin: flutter create googleMapExample
Loyihani o'rnatgandan so'ng, biz loyiha katalogiga o'tishimiz va loyihani mavjud emulyatorda yoki haqiqiy qurilmada ishga tushirish uchun terminalda quyidagi buyruqni bajarishimiz mumkin:
flutter run Muvaffaqiyatli qurgandan so'ng, biz emulyator ekranida quyidagi natijani olamiz:

Endi biz standart shablonni o'z loyiha tuzilmamiz shabloniga almashtirishimiz kerak. Birinchidan, ./lib papkasida ./screens nomli papka yaratishimiz kerak . Keyin, ./lib/screens papkasida biz Home.dart deb nomlangan yangi fayl yaratishimiz kerak . Home.dart ichida biz Scaffoldasosiy Ilovalar paneli va bo'sh korpusli vidjetni qaytaradigan oddiy Stateful vidjet sinfini amalga oshirmoqchimiz Container. Home.dart uchun kod quyidagi kod parchasida ko'rsatilgan:
import 'package:flutter/material.dart'; import 'package:flutter/widgets.dart'; class HomePage extends StatefulWidget { @override _HomePageState createState() => _HomePageState(); } class _HomePageState extends State { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Maps"), centerTitle: true, ), body: Container( child: Center( child: Text("Maps"), ), ), ); } }
Endi biz main.dart faylidagi standart shablonni almashtirishimiz va quyidagi kod parchasida ko'rsatilganidek, vidjet variantida HomePageekranni chaqirishimiz kerak:homeMaterialApp
import 'package:flutter/material.dart'; import 'package:mapExample/screens/Home.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', debugShowCheckedModeBanner: false, theme: ThemeData( primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity, ), home: HomePage(), ); } }
Shunday qilib, biz quyidagi skrinshotda ko'rsatilgandek ekranni olamiz:



Google Xaritalar uchun API kalitini olish
Endi ilovamizdagi xaritaga kirish uchun bizga Google Maps uchun API kaliti kerak. API kalitini olish jarayoni oson. Biz davom etishimiz va https://cloud.google.com/maps-platform manzilida Google Developer Console tizimiga kirishimiz kerak .
Ishlab chiquvchi konsolida, agar bizda mavjud bo'lmasa, loyiha yaratishimiz kerak, bu bizni quyidagi ekranga olib boradi:

Yuqoridagi skrinshotda biz loyihamizning Hisob ma'lumotlari ko'rinishidamiz. Hisob ma'lumotlarida biz API kalitini yaratishimiz va uni Android Google Maps SDK bo'lgan maxsus xizmat uchun cheklashimiz mumkin.
“+ ISHLAB CHIQARISH maʼlumotlarini yaratish” tugmasini bosganimizda, biz quyidagi skrinshotda koʻrsatilganidek, variantlarni olamiz:

Variantlardan biz "API kaliti" ni bosishimiz kerak, bu bizni quyidagi dialog oynasiga olib boradi:

Muloqot oynasi API kaliti yaratilganligini bildiradi . Bu bizda hozir API kaliti borligini anglatadi, lekin API kaliti tomonidan taqdim etiladigan xizmatlar hali yoqilmagan.
Shunday qilib, biz API kalitini quyidagi kod parchasida ko'rsatilganidek, hech qanday xizmatsiz olamiz:

Bizning API kalitimiz hech qanday xizmatlar bilan cheklanmaganligi sababli, biz unga ba'zi cheklovlarni qo'llashimiz kerak. Ammo bundan oldin biz “ Google Maps Android API v2 ” xizmati yoqilganligiga ishonch hosil qilishimiz kerak .
Keyin, quyidagi skrinshotda ko'rsatilganidek, API kaliti1 ichida navigatsiya qilish orqali biz API kalitini Android uchun Maps SDK uchun cheklashimiz mumkin:


Biz talab qiladigan xizmatni tanlagandan so'ng, konfiguratsiyalarni API kalitiga saqlash uchun "SAVE" tugmasini bosishimiz kerak.
Keyin, biz quyidagi skrinshotda ko'rsatilganidek, Android uchun Google Maps SDK yoqilgan API kalitini olamiz:

Endi bizning API kalitimiz yoqilgan va foydalanishga tayyor.
Flutter ilovamizga API kalitini qo'shish
Flutter loyihasiga Android Maps API kalitini qo‘shish uchun avval AndroidManifest.xml fayliga o‘tishimiz kerak.
AndroidManifest.xml faylimizga application elementning bolasi sifatida quyidagi kodni qo'shishimiz kerak :
android:valueBu erda biz yuqoridagi bosqichlarda yaratilgan API kaliti bilan qiymatni almashtirishimiz kerak .
Google Maps Flutter plaginini o'rnatish
Endi biz google_maps_flutter deb nomlangan paketdan foydalanamiz. Ushbu plagin GoogleMap xaritani ekranda ko'rsatish uchun Flutter loyihamizda foydalanish uchun vidjetni taqdim etadi. Vidjetda ko'rsatilgan xaritani buzish va shunga mos ravishda sozlash imkonini beruvchi ko'plab xususiyatlar mavjud.
Endi ushbu plaginni oʻrnatish uchun quyidagi kod parchasida koʻrsatilganidek, plaginni pubspec.yaml faylimizga qoʻshishimiz kerak:
dependencies: google_maps_flutter: ^1.2.0
Asosiy ekranga xaritalar qo'shish
GoogleMapEndi biz xaritani ekranda ko'rsatish uchun vidjetni asosiy ekranimizga qo'shmoqchimiz . Buning uchun biz GoogleMapControllerxaritaning yuklanish holatini boshqaruvchini ishga tushirishimiz kerak. Keyin, biz CameraPositionxaritaning qaysi joyida ko'rsatilishini aniqlaydigan narsani aniqlashimiz kerak. CameraPositionSinfda biz targetkenglik va uzunlik qiymatini belgilashimiz mumkin. zoomKamerani xaritaga qanchalik kattalashtirish kerakligini aniqlaydigan qiymatni ham belgilashimiz mumkin .
Keyin, GoogleMapquyidagi kod parchasida ko'rsatilganidek, barcha kerakli xususiyatlarga ega vidjetdan foydalanishimiz kerak:
class _HomePageState extends State { Completer _controller = Completer(); static final CameraPosition _initialCameraPosition = CameraPosition( target: LatLng(37.42796133580664, -122.085749655962), zoom: 15, ); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Maps"), centerTitle: true, ), body: GoogleMap( mapType: MapType.normal, initialCameraPosition: _initialCameraPosition, onMapCreated: (GoogleMapController controller) { _controller.complete(controller); }, ), ); } }
Bu erda, vidjetdagi mapTypevariantdan foydalanib GoogleMap, biz qaysi turdagi xaritani ko'rsatishni tanlashimiz mumkin. Bu sun'iy yo'ldosh tasviri, yo'l xaritasi yoki oddiy xarita bo'lishi mumkin. Hodisa onMapCreatedxarita ekranga joylashtirilganidan keyin yaratiladi. Bunday holda, biz keyinroq qiladigan xarita belgilarini qo'shishni tanlashimiz mumkin.
Olingan xarita quyidagi skrinshotda ko'rsatilgan:

Xarita belgilarini qo'shish
Endi biz xaritamizga marker qo'shmoqchimiz. Markerlar bizga xaritada ma'lum bir joyni ko'rsatishga yordam beradi. Markerlarni o'rnatish uchun biz markerlarni ushlab turadigan holatni ishga tushirishimiz kerak. Keyin, biz onMapCreatedhodisada ishga tushiriladigan funktsiyani yaratmoqchimiz. Xarita yaratilgandan so'ng biz markerlarni ekranga qo'shamiz. Markerlarni qo'shish uchun biz Markera markerIdva positionqiymatni (kenglik va uzunlik) oladigan vidjetga kirishimiz mumkin. Markerlarni ishga tushirish quyidagi kod parchasida keltirilgan:
Set _markers = {}; void _onMapCreated (GoogleMapController controller) { setState(() { _markers.add( Marker( markerId: MarkerId("id-1"), position: LatLng(37.42796133580664, -122.085749655962) ) ); }); }
Endi biz vidjetda markersxususiyatni o'rnatishimiz va quyidagi kod parchasida ko'rsatilganidek , hodisaga funktsiyani GoogleMapbelgilashimiz kerak:_onMapCreatedonMapCreated
body: GoogleMap( mapType: MapType.normal, initialCameraPosition: _initialCameraPosition, onMapCreated: _onMapCreated, markers: _markers, ),
Shunday qilib, biz quyidagi skrinshotda ko'rsatilganidek, xaritada markerni olamiz:

Xarita belgilariga ma'lumot qo'shish

Shuningdek, markerlarimizni o'z ehtiyojlarimiz asosida sozlashimiz mumkin. Unga ma'lumot ham qo'shishimiz mumkin. Xaritadagi markerni bosganimizdan so'ng ma'lumotlar ko'rsatiladi. Marker ma'lumotlarini qo'shish uchun biz vidjetga infoWindowxususiyat qo'shishimiz kerak Marker. Keyin, InfoWindowquyidagi kod parchasida ko'rsatilganidek, markerga qo'shimcha ma'lumot qo'shish uchun vidjetdan foydalanishimiz kerak:
void _onMapCreated (GoogleMapController controller) { setState(() { _markers.add( Marker( markerId: MarkerId("id-1"), position: LatLng(37.42796133580664, -122.085749655962), infoWindow: InfoWindow( title: "GooglePlex" ) ) ); }); }
Endi markerni bosganimizdan so'ng, quyidagi skrinshotda ko'rsatilgandek ma'lumotlarni ko'ramiz:

Faqat bu emas, biz markerga maxsus piktogramma va boshqa elementlarni qo'shishimiz mumkin, bu ham juda oson.
Nihoyat, biz Google Developer Console va google_maps_flutter paketidagi Google Maps SDK API kaliti yordamida Google Xaritalarni Flutter xarita loyihamizga muvaffaqiyatli integratsiya qildik .

Xulosa
Ushbu labaratoriya topshirig’ining asosiy maqsadi Flutter muhitida Google Maps integratsiyasini o'rganishdir. Google Xaritalar - bu Google tomonidan taqdim etilgan kuchli geo-navigatsiya xizmati bo'lib, bugungi kunda deyarli har qanday texnologiyaga qo'shilishi mumkin. Bunday holda, biz Google Maps-ni Flutter loyihamizga integratsiya qilish uchun Android Google Maps SDK-da cheklangan Google API-dan foydalandik.Keyin, mobil ilovaning foydalanuvchi interfeysida haqiqiy xaritani ko'rsatish uchun biz google_maps_flutter bo'lgan eng so'nggi paketdan foydalandik. Konfiguratsiyalar oson va sodda edi. Xarita oddiy GoogleMap vidjet va ba'zi asosiy konfiguratsiyalar yordamida o'rnatildi. Oxir-oqibat, biz xaritaga ba'zi markerlarni qo'shishga muvaffaq bo'ldik. Bu vidjet bilan boshqa ko‘p narsalarni qilish mumkin.