Axborot texnologiyalari va kommunikatsiyalarini rivojlantirish vazirligi muhammad al-xorazmiy nomidagi

Mobil ilovani ishlash prinsipi va algoritmlari


3.1 Redux ishlashi haqida


Redux - bu dastur holatini boshqarish uchun ochiq manbali JavaScript kutubxonasi. U ko'pincha React yoki Angular kabi kutubxonalarda foydalanuvchi interfeyslarini yaratish uchun ishlatiladi. Facebook-ning Flux arxitekturasiga o'xshash (va ilhomlantirgan) Dan Abramov va Endryu Klark tomonidan yaratilgan.Redux - bu dastur holati uchun taxminiy konteyner sifatida yaratilgan oddiy, cheklangan API-ga ega kichik kutubxona. U funktsional dasturlash tushunchasi, kamaytiruvchi funktsiyaga o'xshash tarzda ishlaydi .Redux 2015 yilda Abramov birinchi Redux dasturini yozishni React Europe konferentsiyasida qizg'in qayta yuklashga tayyorgarlik ko'rishda boshladi. Abramov shunday dedi: "Men Flux tushunchasini isbotlashga harakat qildim, bu erda mantiqni o'zgartira olaman va bu menga vaqtga sayohat qilishimga imkon beradi va bu kodni o'zgartirish bo'yicha kelgusi harakatlarni qayta ko'rib chiqishga imkon beradi".
Abramovni Flux naqshining kamaytiruvchi funktsiyasi bilan o'xshashligi hayratga soldi. "Men Fluxni vaqt o'tishi bilan qisqartirish operatsiyasi deb o'ylar edim, sizning do'konlaringiz, ular ushbu harakatlarga javoban o'zlarining holatini to'playdilar. Men buni yanada davom ettirishni o'ylardim. Agar sizning Flux do'koningiz do'kon emas, balki reduktor funktsiyasi bo'lsa-chi?"
Abramov Endryu Klarkga (Flux dasturining muallifi Flummox) hamkori sifatida murojaat qildi. Boshqa narsalar qatori, u Klarkga Redux ekotizimini iloji boricha imkon yaratib, izchil API ishlab chiqishda yordam beradi, masalan, dasturiy ta'minot va do'kon kuchaytirgichlari kabi kengaytma nuqtalarini amalga oshiradi .
2019 yil fevral oyida useReducer 16.8 versiyasida React ilgagi sifatida taqdim etildi . Redux-ga mos keladigan API-ni taqdim etadi, bu esa ishlab chiquvchilarga Redux-ga o'xshash do'konlarni yaratish uchun imkon beradi, ular tarkibiy qismlarga mahalliy.
Pufakchali saralash
Bubble sort, ba'zida cho'kib ketuvchi tur deb ham ataladi, bu tartiblash uchun bir necha marta ro'yxat bo'ylab qadam qo'yadigan, har bir qo'shni buyumni taqqoslaydigan va noto'g'ri tartibda almashtiradigan oddiy tartiblash algoritmi. Ro'yxat orqali o'tish svoplar kerak bo'lmaguncha takrorlanadi, bu ro'yxat saralanganligini ko'rsatadi.
function bubbleSort(array) {
let swapped;
do {
swapped = false;
for (let i = 1; i < array.length; i++) {
if (array[i - 1] > array[i]) {
swap(array[i - 1], array[i]);
swapped = true;
}
}
} while (swapped);
}
Qo'shish saralashda takrorlanadi, har bir takrorlashda bitta kirish elementi sarflanadi va saralangan chiqish ro'yxati o'sadi. Har bir takrorlash, qo'shish saralashi kiritilgan ma'lumotlardan bitta elementni olib tashlaydi, saralangan ro'yxat ichida joylashgan joyini topadi va shu erga qo'shadi. Kirish elementlari qolmaguncha takrorlanadi.
function bubbleSort(array) {
let swapped;
do {
swapped = false;
for (let i = 1; i < array.length; i++) {
if (array[i - 1] > array[i]) {
swap(array[i - 1], array[i]);
swapped = true;
}
}
} while (swapped);
}


Ilovada "Bekor qilish" va "Qayta tiklash" funksiyalarini yaratish, odatda ishlab chiquvchidan ongli harakatlarni talab qiladi. Klassik MVC ramkalari bilan ishlash oson emas, chunki barcha tegishli modellarni klonlash orqali har bir o'tgan holatni kuzatib borishingiz kerak. Bunga qo'shimcha ravishda, siz bekor qilish to'plamini eslab qolishingiz kerak, chunki foydalanuvchi tomonidan kiritilgan o'zgarishlarni qaytarib bo'lmaydigan bo'lishi kerak.Bu shuni anglatadiki, MVC dasturida Bekor qilish va Qayta bajarishni amalga oshirish odatda buyruq kabi ma'lum bir ma'lumot mutatsion naqshidan foydalanish uchun sizning ilova qismlaringizni qayta yozishga majbur qiladi .Ammo Redux bilan tarixni bekor qilish imkonsiz. Buning uchta sababi bor:
Bir nechta modellar yo'q.Holat allaqachon o'zgarmasdir va mutatsiyalar allaqachon diskret harakatlar deb ta'riflangan, bu esa bekor qilish stack mental modeliga yaqin.
Reduktor (state, action) => stat eimzosi umumiy "reduktor kuchaytirgichlari" yoki "yuqori darajadagi reduktorlar" ni amalga oshirishni tabiiy holga keltiradi. Ular sizning reduktoringizni qabul qiladigan va uning imzosini saqlab, qo'shimcha funktsiyalar bilan yaxshilaydigan funktsiyalardir. Tarixni bekor qilish aynan shunday holat.
Ushbu retseptning birinchi qismida biz Undo va Redo-ni umumiy tarzda amalga oshirishga imkon beradigan asosiy tushunchalarni tushuntiramiz.
Ushbu retseptning ikkinchi qismida biz ushbu funksiyani ta'minlaydigan Redux Undo paketidan qanday foydalanishni ko'rsatamiz .
const initialState = {
past: [],
present: null, // (?) How do we initialize the present?
future: []
}


function undoable(state = initialState, action) {
const { past, present, future } = state


switch (action.type) {
case 'UNDO':
const previous = past[past.length - 1]
const newPast = past.slice(0, past.length - 1)
return {
past: newPast,
present: previous,
future: [present, ...future]
}
case 'REDO':
const next = future[0]
const newFuture = future.slice(1)
return {
past: [...past, present],
present: next,
future: newFuture
}
default:
// (?) How do we handle other actions?
return state
}
}
{
visibilityFilter: 'SHOW_ALL',
todos: {
past: [
[],
[{ text: 'Use Redux' }],
[{ text: 'Use Redux', complete: true }]
],
present: [
{ text: 'Use Redux', complete: true },
{ text: 'Implement Undo' }
],
future: [
[
{ text: 'Use Redux', complete: true },
{ text: 'Implement Undo', complete: true }
]
]
}
}


3.2 React native proyekt strukturasi


Ushbu bo'lim biz React Native-ni o'rganish uchun foydalanadigan namunaviy loyihaning asosiy qisimlarini o'rnatishni o'z ichiga oladi. Biz o'z loyihasini noldan boshlashi yoki tayyor, boy boyitilgan plitadan foydalanish o'rniga minimal qisimdan foydalanishi kerak deb hisoblaymiz. Buning sababi shundaki, ishlab chiquvchi jamoa o'z malumotlar bazasini o'rnatganida, ular dasturga nima kirayotganini aniq bilishadi. Ko'pgina malumotlar bazasida jamoa bilmagan xususiyatlar kutubxonalar mavjud va bu faqat kod tartibsizligiga keltirib chiqaradi.
Arxitektura
Ikkala iOS va Android-da o'xshash farqlarga ega bo'lgan o'xshash arxitektura mavjud.Agar biz katta rasmni ko'rib chiqsak, RN platformasining uchta qismi mavjud:
Mahalliy kod / modullar : iOS uchun mahalliy kodning aksariyati Objective C yoki Swift-da, Android-da esa Java yoki Kotlin-da yozilgan. Ammo bizning React Native dasturini yozish uchun hech qachon iOS yoki Android uchun mahalliy kod yozishimiz shart emas.
Javascript VM : barcha JavaScript kodlarimizni ishlaydigan JS virtual mashinasi. IOS / Android simulyatorlari va qurilmalarida React Native JavaScriptCore-dan foydalanadi, bu Safari-ni quvvatlaydigan JavaScript-ni qidiruvi. JavaScriptCore - dastlab WebKit uchun yaratilgan ochiq manba kodli JavaScript dvigatel. IOS bo'lsa, React Native iOS platformasi tomonidan taqdim etilgan JavaScriptCore-dan foydalanadi. U birinchi bo'lib OS X Mavericks bilan birgalikda iOS 7 da taqdim etilgan.
https://developer.apple.com/reference/javascriptcore .
Android uchun React Native JavaScriptCore dasturini dastur bilan birga to'playdi. Bu ilova hajmini oshiradi. Shuning uchun RN-ning Hello World dasturi Android uchun taxminan 3-4 megabaytni oladi.
Chrome disk raskadrovka rejimida bo'lsa, JavaScript kodi Chrome ichida ishlaydi (qurilmadagi JavaScriptCore o'rniga) va mahalliy kod bilan WebSocket orqali bog'lanadi. Bu erda V8 dvigatelidan foydalaniladi. Bu bizga tarmoqdagi so'rovlar, konsol jurnallari va boshqalar kabi Chrome disk raskadrovka vositalarida juda ko'p ma'lumotlarni ko'rish imkonini beradi.
Ko'pgina hollarda, dasturchi React Native dasturini Javascript-da to'liq yozishi mumkin. Ilovani ishga tushirish uchun CLI orqali quyidagi buyruqlardan biri beriladi - react-native run-iosyoki react-native run-android. Shu nuqtada, React Native CLI, JS kodini bitta to'plamga to'playdigan tugunni qadoqlash paketlashni yaratadi.main.bundle.jsfayl. Paketni Webpack-ga o'xshash deb hisoblash mumkin. Endi, har doim React Native dasturi ishga tushirilganda, birinchi narsa mahalliy kirish nuqtasi yuklanadi. Native thread JS kodini ishlaydigan JS VM oqimini tug'diradi. JS kodida dasturning barcha ish mantiqlari mavjud. Native thread endi JS dasturini ishga tushirish uchun RN Bridge orqali xabarlarni yuboradi. Endi Javascript-ning paydo bo'lishi RN ko'prigi orqali mahalliy ipga ko'rsatmalar berishni boshlaydi. Ko'rsatmalarga qanday ko'rinishlarni yuklash kerakligi, qo'shimcha ma'lumotlardan qanday ma'lumotlarni olish kerakligi va hk. Kiradi. Masalan, agar JS ip ko'rinishi va matn yaratilishini xohlasa, u so'rovni bitta xabarga to'playdi va uni yuboradi Ularni yaratish uchun mahalliy aloqa bo'ladi. Yuqoridagi kod esa asosiy bo'lib barcha sahifalar unga keladi.
Asosiy sarlavha hisoblanadi bunda ko'rishingiz mumkin jadval sifatida box yaratilgan uning ichida ism, jinsi va yoshi keltirilgan.Bu sahifa umuman olganda foydalanuvchilar haqida.Plus tugmasini bosib yangi foydalanuvchilarni qo'shish mumkin.




3.1 - rasm. Foydalanuvchilar ro`yxati

n

3.2 - rasm. Dasturga foydalanuvchi qoshish oynasi


Ushbu sahifada foydalanuvchilarni qo'shish uchun yaratilgan bo'lib, unda Ism, jinsi, yoshini kiritish uchun yacheykalar qilingan.Hammasini to'ldirib bo'lgach saqlash tugmasini bosib malumotlarni saqlash mumkin shunda u foydalanuvchilar bo'limiga qo'shiladi.

3.3 - rasm. Dorini foydalanuchiga rasmiylashtirish.
Ushbu sahifa o'rtada joylashgan bo'lib bu jadval deb nomlangan asosiy sahifa hisoblanib unda vaqtlarini, Ismini foydalanuvchilar nomlaridan irini tanlash yordamida shuningdek hafta kunlarini kiritib jadval yaratishimiz mumkin.
Ushbu keyingi qo'shish sahifamizda jadvallarni qo'shish uchun yaratilgan.
Bunda foydalanuvchilarni tanlash, dori nomini yozish, dori vaqtlarini kiritish mumkin.Dori vaqtlarini plus tugmasi yordamida ko'paytirishimiz mukin, 3 taga vaqt qo'yishimiz mumkin.Hafta davomida tugmasi yordamida hafta davomida takrorlanishini belgilashimiz mumkin bo'ladi.


3.5 - rasm. Foydalanuvchilarga dori darmonni biriktirish oynasi.

3.6 - rasm. Biriktirilgan dorilar