Ձեր կայքը վերածեք Android հավելվածի՝ օգտագործելով կոնդենսատոր

Դասընթաց այն մասին, թե ինչպես փոխարկել կայքը կամ վեբ հավելվածը Android հավելվածի, որը կարող է տեղակայվել Android Play Store-ում:

Աթվուդի օրենքի համաձայն՝ «Ցանկացած հավելված, որը կարող է գրվել JavaScript-ով, ի վերջո գրվելու է JavaScript-ով»:

Այս հոդվածում մենք կսովորենք, թե ինչպես փոխարկել կայքը կամ վեբ հավելվածը Android հավելվածի, որը կարող է տեղակայվել Android Play Store-ում կամ տեղադրել շարժական սարքի վրա՝ օգտագործելով Ionic-ի գրադարանը, որը կոչվում է Capacitor: Ես կօգտագործեմ React-ը այս ցուցադրության համար, բայց դուք կարող եք օգտագործել ցանկացած այլ շրջանակ կամ նույնիսկ պարզ հին JavaScript:

Նախադրյալ

• Արտադրության կառուցման թղթապանակ: Շրջանակների մեծ մասն ունի build հրաման՝ ձեզ համար build թղթապանակ ստեղծելու համար: Եթե ​​օգտագործում եք վանիլային JavaScript, ավելացրեք ձեր բոլոր ակտիվներն ու ֆայլերը թղթապանակում:
• Android ստուդիա

Քայլ 1. Ստեղծեք React հավելված:

Մենք կսկսենք ստեղծելով React հավելված՝ օգտագործելով հետևյալ հրամանները. Դուք կարող եք բաց թողնել 1-ին և 2-րդ քայլերը, եթե արդեն ունեք գոյություն ունեցող նախագիծ և ստեղծել թղթապանակ:

npx create-react-app my-app 
cd my-app

Այժմ մեր React հավելվածը գործարկելու համար մենք օգտագործում ենք ստորև նշված հրամանը.

npm start

Մեր ցուցադրական հավելվածը կունենա այսպիսի տեսք.

Քայլ 2. Ստեղծեք Build թղթապանակ ձեր հավելվածի համար:

Build թղթապանակը շատ կարևոր է մեր React հավելվածը Android հավելվածի վերածելու համար: Մենք օգտագործում ենք հետևյալ հրամանը՝ մեր React հավելվածի համար build թղթապանակ ստեղծելու համար։ Եթե ​​դուք օգտագործում եք այլ շրջանակ, այն կարող է ունենալ տարբեր հրամաններ, ուստի խորհուրդ եմ տալիս կարդալ ձեր օգտագործած շրջանակի փաստաթղթերը: Եթե ​​դուք օգտագործում եք պարզ JavaScript, ստեղծեք թղթապանակ, որը պարունակում է ձեր բոլոր ֆայլերը և ակտիվները:

npm run build

Քայլ 3. Տեղադրեք կոնդենսատոր

Մեր android հավելվածը ստեղծելու համար նախ տեղադրենք կոնդենսատոր CLI-ն և դրա հիմնական գրադարանը:

npm install @capacitor/cli @capacitor/core 
npx cap init

Առաջին հարցը կլինի ձեր հավելվածի անունը մուտքագրելը, իսկ երկրորդը՝ com.yourAppName.android հավելվածի փաթեթի ID-ն մուտքագրելը:

Այժմ բացեք capacitor.config.ts ֆայլը webDir-ում և մուտքագրեք ձեր build թղթապանակի անունը, եթե այն տարբեր է:

Քայլ 4. Ստեղծեք ձեր Android հավելվածը

Android հավելված ստեղծելու համար համոզվեք, որ ճիշտ եք տեղադրել և կազմաձևել ձեր Android ստուդիան:

Ենթադրելով, որ վերը նշված ամեն ինչ կարգավորվել է, գործարկեք հետևյալ հրամանը.

npm install @capacitor/android 
npx cap add android

Առաջին հրամանով մենք ներբեռնելու ենք Capacitor Android գրադարանը մեր նախագծի մեջ, իսկ երկրորդ հրամանով մենք կստեղծենք Android կոդը:
Այժմ ժամանակն է բացել Android ստուդիան՝ օգտագործելով հետևյալ հրամանը.

npx cap open android

Որպես այլընտրանք, դուք կարող եք բացել Android Studio-ն և ներմուծել android գրացուցակը որպես Android Studio նախագիծ:
Ձեր հավելվածը բացելու համար որոշ ժամանակ կպահանջվի, բայց երբ այն պատրաստ լինի, այն պետք է նման լինի.

Սեղմելով «Play» կոճակը Android Studio-ում, այժմ կարող եք գործարկել ձեր Android հավելվածը:

Իմ կարտոֆիլի նոութբուքի էմուլյատորի էկրանը ինչ-ինչ պատճառներով ամբողջովին սև էր: Այնուամենայնիվ, եթե դուք ունեք նույն խնդիրը, ինչ ես, ստեղծեք APK և գործարկեք այն կամ Android սիմուլյատորի վրա, ինչպիսին է Noxplayer-ը Windows-ի համար, կամ իրական Android սարքի վրա:

Կտտացրեք Կառուցել ›› Կառուցել փաթեթ(ներ) / APK(ներ) ›› Կառուցել APK(ներ)` տեղադրվող վրիպազերծման APK ֆայլ ստեղծելու համար:

Հավելվածը Play Store-ին ներկայացնելու համար մենք պետք է ստեղծենք ստորագրված փաթեթ, սակայն այժմ մենք կստեղծենք վրիպազերծման հավելված՝ փորձարկման համար:
Այն կցուցադրի նմանատիպ հաղորդագրություն ներքևի աջ անկյունում, եթե հաջողությամբ ստեղծվի:

Կտտացրեք տեղորոշել թղթապանակը կամ նավարկեք դեպի android\app\build\outputs\apk: Այժմ դուք կարող եք գործարկել ձեր հավելվածը կամ ձեր Android հեռախոսով կամ Android սիմուլյատորով, ինչպիսին է Noxplayer-ը և այլն:

Ուռա՜ այն աշխատում է 🥳🥳🥳։

Բոնուսային բաժին. Ստեղծեք ձեր Android հավելվածի հարմարեցված էկրան

Հավելվածն ամբողջական չէր լինի առանց հարմարեցված էկրանի և պատկերակի: Եթե ​​մենք ցանկանում ենք ստեղծել շաղ տալ էկրան և հատուկ պատկերակ, մենք պետք է նախ տեղադրենք Capacitor plugin-ը:

npm install -g cordova-res

cordova-res-ն ակնկալում է Կորդովայի նման կառուցվածք. տեղադրեք մեկ պատկերակ և մեկ սփռված էկրանի ֆայլ ձեր նախագծի վերին մակարդակի resources թղթապանակում, այսպես.

resources/
├── android/
	└── icon-background.png
	└── icon-foreground.png
├── icon.png
└── splash.png

Ես օգտագործում եմ պատկերակ և սփլեշ այն նախագծից, որի վրա աշխատել եմ երկու ամիս: Իմ նոր նախագծով կրիպտոարժույթի նորեկ ներդրողները կկարողանան փորձել ներդրումներ կատարել կրիպտոարժույթներում առանց որևէ ռիսկի: Եթե ​​դուք հետաքրքրված եք ավելին իմանալով, բաժանորդագրվեք իմ տեղեկագրին՝ https://blog.webdrip.in/ կայքում թարմացումներ ստանալու համար։

Այնուհետև գործարկեք հետևյալը՝ ձեր հավելվածի համար տարբեր չափերի պատկերակներ և շողոքորթ էկրաններ ստեղծելու համար.

cordova-res android --skip-config --copy

Հրամանը պետք է ստեղծի երկու թղթապանակի պատկերակ և շաղ տալ: Ձեզ անհրաժեշտ չի լինի որևէ բան կարգավորել, քանի որ այս թղթապանակում ստեղծված բոլոր ակտիվները կպատճենվեն ձեր Android կոդի պանակում:

Այժմ մեր ցայտած էկրանը փորձարկելու համար նորից հետևեք քայլ 4-ին:

Հղում

1 › Կոնդենսատորի փաստաթղթեր

Հուսով եմ, որ այս գրառումը տեղեկատվական էր: 💪🏾 Հարցերի դեպքում գրեք կամ դիմեք ինձ: Հաջորդ բլոգում մենք կավելացնենք push ծանուցման հատկություն մեր Capacitor հավելվածին:

Եթե ​​ցանկանում եք աջակցել իմ աշխատանքին, կարող եք գնել ինձ սուրճ❤️❤️։

Լրացուցիչ նման պատկերացումների համար այցելեք իմ բլոգի կայքը blog.webdrip.in

Սկզբնապես հրապարակվել է https://dev.to-ում 2022 թվականի հունիսի 9-ին:

Ավելի շատ բովանդակություն PlainEnglish.io կայքում: Գրանցվեք մեր անվճար շաբաթական տեղեկագրին: Հետևեք մեզ Twitter և LinkedIn-ում: Դիտեք մեր Համայնքի տարաձայնությունները և միացեք մեր Տաղանդների կոլեկտիվին: