Flatiron School-ում ծրագրային ապահովման ճարտարագիտության իմ Bootcamp-ի առաջին փուլն ավարտվել է, և բարեբախտաբար, ես ողջ եմ մնացել: Շա՞տ եմ քնել: Ոչ, ոչ ճիշտ, բայց ես լավ արեցի կոդավորման մարտահրավերը և ստեղծեցի հիանալի վեբ հավելված իմ դասընկերների հետ: Ո՞ւմ է պետք քնել, այնուամենայնիվ:

Այս փուլը հիմնականում կենտրոնացած էր վանիլային JavaScript-ի վրա: Մենք իմացանք DOM Մանիպուլյացիայի, Իրադարձությունների ունկնդիրների և Fetch API-ի մասին: Այս նոր գտած գիտելիքներով ես և իմ զարմանալի դասընկերներ Հասանը, Ռոշելը, Ադամը և ես ստեղծեցինք մի գեղեցիկ վեբ հավելված, որը կոչվում է Qwallet:

Qwallet-ը QR կոդերի անձնական դրամապանակ և գեներատոր է: Ձեր էջում կարող եք պահել ձեր ստեղծած ցանկացած QR կոդ և ստեղծել նորերը: Հոգնե՞լ եք, որ ստիպված եք միշտ գտնել ձեր wifi գաղտնաբառը և տալ այն ընկերներին: Այժմ Qwallet-ի հետ պարզապես բացեք ձեր հավելվածը և ցույց տվեք նրանց ձեր wifi-ի QR կոդը: Voila! Այնքան պարզ և արագ: Բացի այդ, դուք կարող եք նաև պահել հղումներ դեպի կայքեր և pdf ֆայլեր:

Այժմ, երբ դուք գիտեք, թե ինչպես է գործում Qwallet-ը, եկեք խոսենք այն մասին, թե ինչպես կարողացանք կառուցել այն: Ես կփորձեմ ամեն ինչ պարզաբանել սա պարզ բառերով:

Ըստ էության, մենք պետք է գտնեինք արտաքին API, որը գեներացնում է QR կոդերը ձևաթղթում մուտքագրված URL-ով: QR Code Generator-ը կարողացավ մեզ օգնել այս մասում: Այժմ, երբ մենք գտանք Արտաքին API-ն, ինչպե՞ս կարող ենք ստանալ դրա URL-ը և հետ ստանալ QR կոդը: Սա մեզ համար ամենադժվար գործն էր։

Մենք պետք է պարզեինք, թե ինչպես.

1)Ուղարկեք URL կոդը, որը մենք մուտքագրում ենք մեր ձևի մեջ արտաքին API-ին

2) Նոր ստեղծված QR կոդը մեզ հետ ուղարկեք

3) Ցուցադրել մեր ստացած QR կոդը կայքում

4) Պահպանեք նոր QR կոդը մեր տեղական սերվերում

Մենք դրան հասանք՝ օգտագործելով Async ֆունկցիան և բեռնեցինք՝ օգտագործելով POST մեթոդը մեր ուղարկել Իրադարձության ձևի ներսում:

Ինչպես ցույց է տրված վերևում գտնվող մեր կոդում, մենք օգտագործել ենք լարային ինտերպոլացիա fetch GET հարցման համար՝ URL մուտքագրումն արտաքին API-ին ուղարկելու համար: Այժմ, երբ API-ն ունի մեր URL-ը, ինչպե՞ս ենք մենք ստանում QR կոդը: Սա մեզ մի փոքր շփոթեցրեց, բայց մենք կարողացանք դա պարզել: Ստորև ներկայացված կոդով նոր QR կոդը կլինի մեր պատկերի տարրի աղբյուրը և կպահվի մեր տեղական սերվերում: Պարզ բառերով ասած, ամեն անգամ, երբ դուք տեղեկատվություն եք վերցնում API-ից, դուք պետք է այդ տեղեկատվությունը ցուցադրեք կայքում ինչ-որ տեղ: Դուք պետք է կցեք այդ տեղեկատվությունը ցուցադրվող տարրին: Մենք օգտագործեցինք req.url-ը, քանի որ երբ ստուգման ժամանակ նայեցինք console.log-ին, դա QR Code օբյեկտի բանալին էր, որը մեզ հետ էր ուղարկվում:

Fetch POST մեթոդով նոր QR կոդը և լրացուցիչ մուտքագրված տեղեկատվությունը պահվում են մեր տեղական տվյալների բազայում, ինչը նշանակում է, որ այն այժմ պահվում և ցուցադրվում է ձեր դրամապանակում:

Վերևում ցուցադրված QR կոդը ստեղծվել է մեր կայքի միջոցով: Եթե ​​փորձեք օգտագործել, այն ձեզ կտանի Flatiron School-ի կայք: Flatiron School-ի ներքևում ցուցադրված տեղեկատվությունը ցուցադրվում է՝ մկնիկի օգնությամբ սավառնելով QR կոդի վրա: Մենք կարողացանք դա անել՝ օգտագործելով մկնիկի միացման միջոցառում:

Բայց ի՞նչ, եթե այլևս չես ուզում որոշակի QR կոդ: Մի անհանգստացեք, դուք կարող եք ջնջել այն՝ սեղմելով այդ գեղեցիկ աղբարկղի պատկերակը: Մեր ստեղծող դրամապանակի գործառույթի ներսում մենք ավելացրեցինք սեղմման իրադարձություն: Այդ իրադարձության ներսում մենք օգտագործեցինք Fetch DELETE մեթոդով: Սա ջնջում է էջի և մեր տեղական տվյալների բազայի տեղեկատվությունը:

Դա Qwallet-ի հիմնական գործառույթն է: Հուսով եմ, որ կարողացա այդ ամենը լավ բացատրել: Ինձ դուր եկավ, թե ինչպես ստացվեց կայքը, և ինձ համար հաճելի էր աշխատել դրա վրա իմ հիանալի թիմի՝ QR QT-ների հետ: Նրանց հետ աշխատելը կախարդական էր թվում: Մեծ շնորհակալություն նրանց:

Ես հիացած էի իմ խմբի բոլոր նախագծերով: Ես չեմ կարող սպասել, տեսնելու, թե ուրիշ ինչ կարող ենք կառուցել: Երկրորդ փուլ, բերեք այն:

Մոռացա նշել, որ եթե ցանկանում եք օգտագործել Qwallet, օգտագործեք ստորև ներկայացված QR կոդը: Հուսով եմ, որ դուք վայելում եք մեր հավելվածը: Խնդրում ենք տեղեկացնել մեզ ձեր մտքերը: :)