|
3.2 Optikalıq talshıqlı kabelleriniń jatqarılıw usılları hám qásiyetleri boyınsha analitik tańlaw programmalıq quralların jaratıw.
Bul web qosımshanı jaratıwda javasciptti React kitapxanasınan paydalanadi. React - bul UI komponentleri tiykarında paydalanıwshı interfeyslerin jaratıw ushın biypul hám ashıq derekli JavaScript-dıń front-end kitapxanası. Reactti tańlaǵanımdı tiykarǵı sebebi jaratılıp atırǵan qosımsha dynamic sayt bolǵanlıǵı ushın ol jaǵdayda hár bir qádemde tańlawǵa qaray componentlar ózgeredi. Single Page Application lar ushın hám componentlarni basqarıw ushın eń qolay kitapxana React esaplanadı.
8-súwret npx create-react-app buyrıǵında payda bolǵan baslanǵısh jumısshı maydan
Jumisti jańa react project ashiw menen basladim. Buniń ushın npx create-react-app buyrug’i arqali jańa project ashamiz va o’zimiz uchin kerekli sublibrarylarni júklep alamiz.
Keyingi qádemde ózimiz ushın kerekli maǵlıwmatlardı toplaytuǵın jańa fayl ashamiz bul fayldı src papkasın ishinde ashıwımız kerek bul react qaǵıydalarına uyqas túsedi. Src papkasın ishinde data hám components atlı papkalar jaratamız. Data papkamizni ishinde cable.js javascript fayl ashamiz jáne onı ishine programmasımız ushın kerekli barlıq maǵlıwmatlardı jiynaymiz. Maǵlıwmatlardı toplaw processinde bul maǵlıwmatlardı málim struktura boyınsha toplawımız kerek. Sebebi toplaǵan maǵlıwmatlarimizni programmada basqarıw ańsatlaw boladı. Bul programmanı jaratıwda tiykarǵı strukturanı bul maǵlıwmatlardı qádemge bólewimiz kerek yaǵnıy barlıq maǵlıwmatlar ózinden aldınǵı hám keyingi maǵlıwmatqa baylanıslı boladı. Usınıń sebepinen hár bir maǵlıwmattı bólek objectga jiynaymiz. Objectlar hár birinde birdey propertylardan dúziledi. Mısalı birinshi qádemde Kabellerdi ulıwma túrlerin objectini jiynaymiz jáne onıń step, name, title hám list degen propertylardan dúziledi. Propertylarga at tańlawda tiykarlanıp sol propertydiń maqsetine muwapıq sózdi tańlaw kerek hám bunı anglichan tilinde jazıw programmistler tárepinen bestpractise hám cleancode dep ataladı.
3. 9 -súwret CabelTypes atlı object duzilisi.
Step -property si bul qaysı qádemde ekenligimizni anıqlaw ushın kerek.
Name- bolsa bul toplap atirǵan maǵlıwmatlarimiz objecttiń atı.
Title-toplap atirǵan maǵlıwmatimizning qaysı parameter boyınsha toplaǵanimizni ańlatadı.
List - Maǵlıwmatimizning gruppaları esaplanadı bulardıń objectlarning arrays formasında toplaymız. Bul maǵlıwmatlar waqıtında keyingi qádemde basqa maǵlıwmatlar toparı ushın parent maǵlıwmat esaplanadı. Listti hár bir elementi id, name hám parentId propertylardan dúziledi.
3.10-suwret List arrayining dúzilisi.
Id- tákirarlanbas (unique) gilt sóz bolıwı kerek. Id ni tańlawda hár bir maǵlıwmattı name larini qısqartirilmastan paydalandim.
Name- bul maǵlıwmatimiztiń atı.
parentId- bul maǵlıwmatimizni aldınǵı qádemde qaysı maǵlıwmatlar toparına tiyisli ekenin ańlatadı. Birinshi qádemde bul bos boladı.
3. 11-súwret Dáslepki qádem degi cabelTypes (kabel túrleri) haqqında maǵlıwmattıń ulıwma kórinisi.
Dáslepki qádemde kabel túrlerin eki gruppaǵa magistral hám lokal gruppalarǵa ajıratıp aldıq. Endi 2-qádemde magistral hám lokal túrlerin bólek gruppalarǵa ajıratıp shıǵamız. Hár bir gruppalardı shunaqa túrlerge ajıratıp ulıwma maǵlıwmatlar bazasın qáliplestirip shıqtım. Ulıwma qádemler sanı 7 hám 18 túrli objectlardan ibarat boldı.
3. 12-súwret Ulıwma strukturalanǵan maǵlıwmatlar dúzilisi.
Keyingi etetuǵın jumısımız barlıq objectlarni bir lists degen arrayga jıynap alamız jáne bul array ústinde ámeller atqaramız.
3.13-rasm Lists atli array dúzilisi.
Bul strukturalanǵan maǵlıwmatlardı saralap paydalanıwshı shıǵarıw jumısların baslaymız. Bul maǵlıwmatlardı málim algortimlar járdeminde sortlap componentga uzatıwshı test atlı funksiya jazamız. Bul funksiyaǵa parameter retinde (step, selectedItemId) yaǵnıy ámeldegi qádem hám saylanǵan maǵlıwmattıń Id si kirip keledi. Bul funksiya tiykarǵı jumısı lists arraysin aylanıp shıǵıp parametrden kirip kelgen qádemge hám saylanǵan maǵlıwmatqa uyqas maǵlıwmatlar objectini sortlap aladı.
3. 14-súwret Maǵlıwmatlardı saralap beretuǵın funksiyanı duzilisi
Bul sortlanǵan maǵlıwmatlardı paydalanıwshıǵa kórsetiw ushın komponentlerge ajıratıp shıǵamız hám bul komponentlerdi tártiplaep User interfaceda kórsetiw etemiz. Components degen papka ashıp onı ishinde tiykarǵı componentlarimizni formalantramiz. Biz programmanı header hám Checklist degen componentlarga ajıratıp alamız. Header mudam ózgermeytuǵın bolıp qaladı ol mudam paydalanıwshına bir hil maǵlıwmattı kórsetip turadı. Header componentini ishinde header. css hám header.js filelaridan dúziledi. Header.js de ulıwma maǵlıwmatlar header. css bul headerni stilleri yaǵniy dizayn bólegin jaratamız.
3. 15-súwret Header.js fayilini duzilisi
Cheklist componentimizda test funksiyasınan kelgen maǵlıwmatlardı tekserip shıraylı formada paydalanıwshına usınıs etemiz hám paydalanıwshı tańlaǵan maǵlıwmattı Id sini alamız. Bul id boyınsha maǵlıwmatlardı sortlap keyin qádemge avtomatikalıq ótiwin támiyinlew maqsetinde taǵı test funksiyamızǵa parametr retinde uzatamiz sol arqalı qádemler sanı tawsilǵansha componentlarni avtomatikalıq sheńbermiz.
3. 16 -súwret Cheklist componentini ulıwma kórinisi.
Paydalanıwshı tańlaǵan maǵlıwmatlar tiykarında juwmaqlawshı juwaptı shıǵarıwımız kerek onıń ushın juwaplar ushın bólek answers degen array ashıp oǵan barlıq juwaplardı toplap aldım. Bul array juwaplardıń objectlaridan shólkemlesken. Bul objectlarda shıǵarılıwı kerek bolǵan juwaplar ushın kerekli propertylardan shólkemlesken.
3. 17-súwret Juwaplar ushın ulıwma maǵlıwmatlar arrayining duzilisi.
Programmasımız derlik tayın endi bul programmasımizni barlıq qurulmalar (kompyuter, telefon, planshet hám basqalar ) biymálel isleta alıwı ushın media query jazamız. Bul media querylar isletip atırǵan qurulmamiz ekranıń kólemi qansha bolıwınan qatiy názer qolay paydalanıw imkaniyatın jaratadı.
Tayın bolǵan programmasımizni npm run build buyrıǵın teremiz hám build degen papka payda boladı. Bul papka developer kitapxanalarınan tazalap kólemin qısqartirip hostinǵa qoyıwǵa tayın etip beredi. Bul build papkasın hostinǵa jaylaymız. Házirgi kúnde bir qansha mut hosting kompaniyaları ámeldegi usılardan biri netlify. app saytı tayın bolǵan programmasımizni netlifyga jayladim.
https://bmi-select-fiber-optic-cabels. netlify. app/ bul link arqalı barlıq qurulmalar dúzgen programmasımızdan paydalanıwları múmkin.
Do'stlaringiz bilan baham: | 
