Ուղեցույց. ինչպես ստեղծել պարզ Telegram բոտ JS-ում ծրագրավորման սկսնակների համար

Ես սկսեցի ընկղմվել ՏՏ աշխարհում ընդամենը երեք շաբաթ առաջ: Լուրջ, երեք շաբաթ առաջ ես նույնիսկ չէի հասկանում HTML-ի շարահյուսությունը, և ծրագրավորման լեզուների իմ ծանոթությունն ավարտվեց 10 տարի առաջ Պասկալի վերաբերյալ դպրոցական ուսումնական ծրագրով: Այնուամենայնիվ, որոշեցի գնալ ՏՏ ճամբար, որտեղ լավ կլիներ, որ երեխաները բոտ պատրաստեին։ Ես որոշեցի, որ դժվար թե այդքան դժվար լինի։

Սա սկսեց մի երկար ճանապարհորդություն, որտեղ ես.

• տեղակայել է ամպային սերվեր Ubuntu-ով,
• գրանցված է GitHub-ում,
• սովորել է JavaScript-ի հիմնական շարահյուսությունը,
• կարդալ տոննա հոդվածներ անգլերեն և ռուսերեն,
• վերջապես ստեղծել է բոտ,
• Ես վերջապես գրեցի այս հոդվածը:

Վերջնական արդյունքն այսպիսի տեսք ուներ.

Ես անմիջապես կասեմ, որ սա հոդված է սկսնակների համար, պարզապես հասկանալու համար, թե ինչպես անել հիմնական բաները զրոյից:

Եվ նաև՝ առաջադեմ ծրագրավորողների համար, պարզապես նրանց մի փոքր ծիծաղեցնելու համար:

1. Ինչպե՞ս գրել կոդ JS-ում:

Ես հասկացա, որ արժե նախ գոնե լեզվի շարահյուսությունը հասկանալ։ Ընտրությունը ընկավ JavaScript-ի վրա, պարզապես այն պատճառով, որ ինձ համար հաջորդ քայլը ReactNative-ում հավելված ստեղծելն էր: Ես սկսեցի իհարկե Codecademy-ում և շատ հիացած էր: Առաջին 7 օրն անվճար է։ Իրական նախագծեր. խորհուրդ եմ տալիս. Այն ավարտելը տևեց մոտ 25 ժամ: Իրականում, ոչ բոլորն էին օգտակար։ Ահա թե ինչպիսին է դասընթացի կառուցվածքը և մանրամասն առաջին բլոկը:

2. Ինչպե՞ս գրանցել բոտ:

Սա ինձ շատ օգնեց սկզբում այս հոդվածը ոմն Արչակովի բլոգից։ Նա ծամում է հենց սկզբից։ Բայց գլխավորը, որ կա, բոտ գրանցելու հրահանգներն են։ Չեմ կարող ավելի լավ գրել, և քանի որ սա ամենահեշտ մասն է, ես պարզապես կգրեմ էությունը: Դուք պետք է ստեղծեք բոտ և ստանաք դրա API-ն: Սա արվում է մեկ այլ բոտի միջոցով՝ @BotFather: Գտեք նրան հեռագրում, գրեք նրան, հետևեք պարզ ճանապարհին և ստացեք (պահեք) API բանալի (սա թվերի և տառերի հավաքածու է): Այն ավելի ուշ եկավ:

3. Ինչպիսի՞ն է բոտի կոդը:

Հոդվածները երկար ուսումնասիրելուց հետո հասկացա, որ արժե օգտագործել ինչ-որ գրադարան (երրորդ կողմի կոդ մոդուլի ձևաչափով), որպեսզի չանհանգստանամ Telegram API-ն ուսումնասիրելու և զրոյից կոդի մեծ կտորներ ստեղծելու մասին: Ես գտա շրջանակը telegraf, որը պետք է ինչ-որ կերպ կապված լիներ ինչ-որ բանի հետ՝ օգտագործելով npm կամ մանվածք: Մոտավորապես այսպես հասկացա, թե ինչից է բաղկացած բոտի տեղակայումը: Ծիծաղեք այստեղ: Ես չեմ նեղանա. Բոտի հետագա ստեղծման ժամանակ ինձ ամենաշատը օգնեցին էջի ներքևի օրինակները.

3. Ինչպես ստեղծել ձեր սեփական ամպային սերվերը 100 ռուբլով

Շատ փնտրելուց հետո ես հասկացա, որ վերևի նկարում պատկերված «npm» հրամանը վերաբերում է հրամանի տողին: Հրամանի տողը ամենուր է, բայց այն իրականացնելու համար անհրաժեշտ է տեղադրել NodePackageManager-ը: Խնդիրն այն էր, որ ես ծրագրավորում էի PixelBook-ի վրա ChromeOS-ով: Այստեղ ես բաց կթողնեմ մի մեծ բլոկ այն մասին, թե ինչպես եմ սովորել Linux-ը. մեծամասնության համար այն դատարկ է և ավելորդ: Եթե ​​ունեք Windows կամ MacBook, դուք արդեն ունեք կոնսոլ:

Մի խոսքով, ես տեղադրել եմ Linux-ը Crostini-ի միջոցով:

Այնուամենայնիվ, ընթացքում ես հասկացա, որ բոտը անընդհատ աշխատելու համար (և ոչ միայն այն ժամանակ, երբ իմ համակարգիչը միացված է), ինձ անհրաժեշտ է ամպային սերվեր: Ես ընտրեցի vscale.io Ես ծախսեցի 100 ռուբլի և գնեցի ամենաէժան Ubuntu սերվերը (տես նկարը):

4. Ինչպես պատրաստել սերվեր բոտ գործարկելու համար

Դրանից հետո ես հասկացա, որ պետք է սերվերի վրա ինչ-որ թղթապանակ պատրաստեմ, որտեղ կդնեմ ֆայլը կոդի տեքստով։ Դա անելու համար կոնսոլում (գործարկվում է անմիջապես կայքում «Բաց կոնսոլ» կոճակի միջոցով), ես մուտքագրեցի.

mkdir bot

bot - սա դարձավ իմ թղթապանակի անունը: Դրանից հետո ես տեղադրեցի npm և Node.js, որոնք թույլ կտան ինձ գործարկել կոդը *.js լուծաչափով ֆայլերից:

sudo apt update
sudo apt install nodejs
sudo apt install npm

Ես բարձր խորհուրդ եմ տալիս այս փուլում կապ հաստատել սերվերի հետ ձեր վահանակի միջոցով: Այստեղ հրահանգավորում Սա թույլ կտա ձեզ աշխատել սերվերի հետ անմիջապես ձեր համակարգչի վահանակի միջոցով:

5. Ինչպես գրել կոդը ձեր առաջին բոտի համար:

Բայց հիմա դա ինձ համար պարզապես բացահայտում է: Ցանկացած ծրագիր ընդամենը տեքստի տող է: Նրանք կարող են տեղադրվել ցանկացած վայրում, պահպանվել ցանկալի ընդլայնմամբ, և վերջ: Դու գեղեցիկ ես. ես օգտագործել եմ Ատոմ, բայց իրականում դուք կարող եք պարզապես գրել ստանդարտ նոթատետրում: Հիմնական բանը ֆայլը հետագայում պահպանել ցանկալի ընդլայնման մեջ: Դա նման է Word-ում տեքստ գրելու և պահելու:

Ստեղծեցի նոր ֆայլ, որի մեջ տեղադրեցի telegraf էջի օրինակի կոդը և պահեցի այն index.js ֆայլում (ընդհանուր առմամբ պարտադիր չէ ֆայլը այդպես անվանել, բայց դա ընդունված է)։ Կարևոր է. BOT_TOKEN-ի փոխարեն տեղադրեք ձեր API բանալին երկրորդ պարբերությունից:

const Telegraf = require('telegraf')

const bot = new Telegraf(process.env.BOT_TOKEN)
bot.start((ctx) => ctx.reply('Welcome!'))
bot.help((ctx) => ctx.reply('Send me a sticker'))
bot.on('sticker', (ctx) => ctx.reply(''))
bot.hears('hi', (ctx) => ctx.reply('Hey there'))
bot.launch()

6. Ինչպես վերբեռնել կոդը սերվերի վրա github-ի միջոցով

Այժմ ես պետք է ինչ-որ կերպ վերբեռնեի այս կոդը սերվերի վրա և գործարկեի այն: Սա մարտահրավեր դարձավ ինձ համար։ Արդյունքում, երկար փորձություններից հետո ես հասկացա, որ ավելի հեշտ կլինի github-ում ստեղծել մի ֆայլ, որը թույլ է տալիս թարմացնել կոդը՝ օգտագործելով վահանակի հրամանը: Ես գրանցեցի հաշիվ GitHub և արեց նոր նախագիծ, որտեղ ես վերբեռնել եմ ֆայլը։ Դրանից հետո ես պետք է պարզեի, թե ինչպես կարգավորել ֆայլերի վերբեռնումը իմ հաշվից (բաց!) բոտի թղթապանակում գտնվող սերվերին (եթե հանկարծ թողել եք այն, պարզապես գրեք cd bot):

7. Ինչպես վերբեռնել ֆայլերը սերվեր github մաս 2-ի միջոցով

Ինձ պետք էր սերվերի վրա մի ծրագիր տեղադրել, որը ֆայլեր կներբեռներ git-ից: Ես տեղադրեցի git-ը սերվերի վրա՝ մուտքագրելով վահանակի մեջ

apt-get install git

Դրանից հետո ես պետք է կարգավորեի ֆայլի վերբեռնումը: Դա անելու համար ես մուտքագրեցի հրամանի տող

git clone git://github.com/b0tank/bot.git bot

Արդյունքում, նախագծից ամեն ինչ վերբեռնվեց սերվեր: Այս փուլում սխալն այն էր, որ ես, ըստ էության, երկրորդ թղթապանակը պատրաստեցի արդեն գոյություն ունեցող բոտի թղթապանակում: Ֆայլի հասցեն նման էր */bot/bot/index.js

Ես որոշեցի անտեսել այս խնդիրը:

Եվ Telegraf գրադարանը բեռնելու համար, որը մենք խնդրում ենք կոդերի առաջին տողում, մուտքագրեք հրամանը վահանակի մեջ:

npm install telegraf

8. Ինչպես գործարկել բոտ

Դա անելու համար ֆայլի հետ թղթապանակում գտնվելու ժամանակ (վահանակի միջոցով թղթապանակից թղթապանակ տեղափոխելու համար գործարկեք ձևաչափի հրամանը cd bot Համոզվելու համար, որ դուք գտնվում եք այնտեղ, որտեղ պետք է լինեք, կարող եք մուտքագրել հրաման, որը վահանակում կցուցադրի այնտեղ գտնվող բոլոր ֆայլերն ու թղթապանակները: ls -a

Սկսելու համար ես մտա վահանակ

node index.js

Եթե ​​սխալ չկա, ամեն ինչ լավ է, բոտն աշխատում է։ Փնտրեք նրան Telegram-ում: Եթե ​​կա սխալ, կիրառեք ձեր գիտելիքները 1-ին կետից:

9. Ինչպես գործարկել բոտը հետին պլանում

Բավական արագ դուք կհասկանաք, որ բոտն աշխատում է միայն այն ժամանակ, երբ դուք ինքներդ նստած եք վահանակում: Այս խնդիրը լուծելու համար ես օգտագործեցի հրամանը

screen

Դրանից հետո էկրան կհայտնվի որոշ տեքստով: Սա նշանակում է, որ ամեն ինչ լավ է: Դուք ամպային սերվերի վրա վիրտուալ սերվերի վրա եք: Ավելի լավ հասկանալու համար, թե ինչպես է ամեն ինչ աշխատում - ահա հոդվածը. Պարզապես գնացեք ձեր թղթապանակը և մուտքագրեք հրամանը բոտը գործարկելու համար

node index.js

10. Ինչպես է աշխատում բոտը և ինչպես ընդլայնել նրա ֆունկցիոնալությունը

Ի՞նչ կարող է անել մեր օրինակ բոտը: Նա կարող է

bot.start((ctx) => ctx.reply('Welcome!'))

ասեք «Բարի գալուստ»: մեկնարկի պահին (փորձեք փոխել տեքստը)

bot.help((ctx) => ctx.reply('Send me a sticker'))

ի պատասխան ստանդարտ / help հրամանի, ուղարկեք «Ուղարկեք ինձ կպչուն» հաղորդագրությունը

bot.on('sticker', (ctx) => ctx.reply(''))

ուղարկել հավանություն՝ ի պատասխան կպչուն

bot.hears('hi', (ctx) => ctx.reply('Hey there'))

պատասխանեք «Հեյ այնտեղ», եթե նրան «բարև» են գրում
bot.launch()

Եթե ​​դուք նայեք կոդը GitHub, ապա դուք արագ կհասկանաք, որ ես շատ չեմ հեռացել այս ֆունկցիոնալությունից: Այն, ինչ ակտիվորեն օգտագործվում է, գործառույթն է ctx.replyWithPhoto Այն թույլ է տալիս ուղարկել նշված լուսանկար կամ gif՝ ի պատասխան կոնկրետ տեքստի:

Կոդի զգալի մասը գրել են 11-13 տարեկան երեխաները, որոնց ես թույլ եմ տվել մուտք գործել բոտ։ Նրանք մտել են իրենց օգտատիրոջ գործը։ Կարծում եմ՝ հեշտ է ասել, թե որ հատվածն է պատրաստվել նրանց կողմից։

Օրինակ, «Jake» հաղորդագրությունը կստանա GIF Adventure Time մուլտֆիլմի հայտնի կերպարով:

Բոտը հետագայում զարգացնելու համար հարկավոր է միացնել ստեղնաշար, տես օրինակներ, օրինակ. ուստի

11. Ինչպես թարմացնել կոդը և վերագործարկել բոտը

Մի մոռացեք, որ կոդը պետք է թարմացնեք ոչ միայն github-ում, այլ նաև սերվերում։ Դա հեշտ է անել՝ դադարեցնել բոտը (սեղմեք ctrl+c),

- մուտքագրեք վահանակ, երբ գտնվում եք թիրախային թղթապանակում, git pull
— հրամանով նորից գործարկում ենք բոտը node index.js

END

Այս ֆայլում նկարագրված շատ բաներ շատ ակնհայտ կլինեն առաջադեմ ծրագրավորողների համար: Այնուամենայնիվ, երբ ես ինքս փորձեցի մեկ հարվածով ցատկել անդունդի վրայով դեպի բոտերի աշխարհ, ես իսկապես բաց թողեցի նման ուղեցույցը: Ուղեցույց, որը բաց չի թողնում այնպիսի բաներ, որոնք ակնհայտ և պարզ են ցանկացած ՏՏ մասնագետի համար:

Ապագայում ես նախատեսում եմ գրառում այն ​​մասին, թե ինչպես կատարել ձեր առաջին հավելվածը ReactNative-ում նույն ոճով, բաժանորդագրվեք:

Source: www.habr.com