লেগো আইটি লোক বিন্নসেনের দ্বারা

ফ্যান্টমজেএস, প্রতিক্রিয়া এবং সার্ভারলেস ফ্রেমওয়ার্ক ব্যবহার করে কীভাবে একটি গিটহাব বট তৈরি করবেন

এই টিউটোরিয়ালে, আমরা একটি সাধারণ সার্ভারলেস বট তৈরি করব যা একটি নির্বাচিত সময়কালের জন্য গিটহাব সংগ্রহস্থলে কী অবদানকারীদের একটি চিত্র ফিরিয়ে দেবে। যাঁরা প্রতিক্রিয়া, জাভাস্ক্রিপ্ট, টাইপস্ক্রিপ্ট, নোড.জেএস, অ্যামাজন ওয়েব সার্ভিসেস (এডাব্লুএস) এবং সার্ভারহীন কাঠামোর সাথে অভিজ্ঞতা আছে তাদের সাথে এটি প্রাসঙ্গিক।

আপনি গিথুবে কোডটি পরীক্ষা করতে পারেন।

পরিষেবা এবং সরঞ্জাম যা আমরা ব্যবহার করি

আপনি কোডিং শুরু করার আগে, আমরা যে অ্যাডাব্লুএস পরিষেবাগুলি এবং সরঞ্জামগুলি ব্যবহার করি সেগুলি একবার দেখুন।

মূল সংগ্রহস্থল অবদানকারীদের টানতে, আমরা গিটহব স্ট্যাটিস্টিকস এপিআই, ডেটা প্রদর্শন করার জন্য অ্যামেজিং নিভো, আমাদের চার্টটি কীভাবে দেখায় এবং কীভাবে কাজ করে তা পর্যালোচনা করার জন্য স্টোরিবুক এবং ফ্যান্টমজেএস এইচটিএমএলকে কোনও চিত্রে রূপান্তর করতে এবং সার্ভারলেস কাঠামো ব্যবহার করব এডাব্লুএস

চল শুরু করি

আমি টাইপস্ক্রিপ্ট ব্যবহার করছি। আপনি যদি ES6 পছন্দ করেন তবে আপনার বাবেল কনফিগার করতে হবে।

প্রথমে আপনার সংগ্রহস্থলের মূলটিতে tsconfig.json তৈরি করতে হবে। সন্ধান করার জন্য কয়েকটি বিকল্পের মধ্যে রয়েছে:

"মডিউল": "সাধারণ", "টার্গেট": "এস 5", "লিবিব": ["এস 6", "এসেনেক্সট.সিএনসিটিটেবল"], "মডিউল" সমাধান ":" নোড "," জেএসএক্স ":" প্রতিক্রিয়া "

তারপরে আমরা গিটহাব থেকে পরিসংখ্যান অনুসন্ধানের জন্য একটি সহজ এপিআই তৈরি করি। আপনি গিটহাব রেপো থেকে ফাইলের কাঠামোর উপর নজর রাখতে পারেন বা আপনার নিজের ব্যবহার করতে পারেন। উদাহরণ স্বরূপ:

গিটহাব এপিআই অ্যাক্সেস করতে আপনার ব্যক্তিগত অ্যাক্সেস টোকেন তৈরি করতে হবে।

এই মডিউলটি কেবল সরবরাহিত টোকেন সহ অনুরোধটি প্রেরণ করে এবং তথ্য পুনরুদ্ধার করে।

গ্রাফগুলি দেখান

আমরা ডেভেলটি প্রদর্শনের জন্য নিভো এবং স্টোরিবুক ব্যবহার করি। একটি সাধারণ উপাদান এটি দেখতে পারে:

প্রথমে মূল ফোল্ডার থেকে নিম্নলিখিত কমান্ডটি চালিয়ে স্টোরিবুকস সেট আপ করুন:

এনএমপি আই-জি @ স্টোরিবুক / ক্লিপ গেটরিবুক

রুট সংগ্রহশালায় .storybook ফোল্ডারটি অনুলিপি করুন এবং যে কোনও বিদ্যমান ফাইল প্রতিস্থাপন করুন। এটিতে ওয়েবপ্যাক এবং স্টোরিবুক কনফিগারেশন রয়েছে। একটি স্টোরি ফোল্ডার তৈরি করুন এবং আপনার উপাদানটির জন্য একটি নমুনা কাহিনী অন্তর্ভুক্ত করুন:

এনপিএম রান স্টোরিবুক শুরু করুন এবং ব্রাউজারে লোকালহোস্ট খুলুন। আপনার নিম্নলিখিত ফলাফলটি দেখতে হবে:

বিকল্পগুলি এবং পরীক্ষার ডেটা দিয়ে খেলতে চেষ্টা করুন। গল্পের বইটি তাত্ক্ষণিকভাবে চেহারা পরিবর্তন করবে।

এইচটিএমএলকে পিএনজিতে রূপান্তর করুন

সাধারণত, ফেসবুক ম্যাসেঞ্জার এবং স্ল্যাকের মতো চ্যাট সিস্টেমে ব্যবহারকারীরা ডায়ালগটিতে এইচটিএমএল কার্ড সন্নিবেশ করতে পারে না। পরবর্তী পদক্ষেপটি এমন একটি সহায়ক তৈরি করা যা এইচটিএমএলকে পিএনজি চিত্রে রূপান্তর করবে।

জাসডম লাইব্রেরির সাথে একটি সাধারণ স্ক্রিপ্ট ব্যবহার করে আমরা ব্রাউজারের আচরণ নকল করতে এবং এইচটিএমএলকে নিম্নরূপে সিরিয়ালাইজ করতে পারি:

createDomForChart jsdom এর একটি নতুন উদাহরণ দেয় এবং চার্ট ফাংশনটি সহজেই ডম.সিরিয়ালাইজ () কল করে যখন উপাদানগুলি রেন্ডারিং শেষ হয়।

ফ্যান্টমজেএসের সাহায্যে আমরা এই সাধারণ স্ক্রিপ্টটি ব্যবহার করে ছবিগুলিতে মার্কআপগুলি রূপান্তর করতে পারি:

আমরা স্ক্রিনশট.জেএসটি এইচটিএমএল স্ট্রিং, প্রস্থ এবং উচ্চতার সাথে ফ্যান্টমজের এক্সিকিউটেবল পাথে পাস করি এবং রেন্ডার করা ইমেজ সহ বাফারটিকে আবার কল করি।

আপনি দেখতে পাবেন যে আমি দুটি ফ্যান্টমজেএস বাইনারি ব্যবহার করেছি (ওএস এক্স এবং লিনাক্সের জন্য)। আমাদের AWS পরিবেশে লিনাক্স সংস্করণটি দরকার। আপনি এগুলি ফ্যান্টমজেএসআর.অর্গ থেকে ডাউনলোড করতে পারেন বা সংগ্রহস্থল থেকে ফাইলগুলি ব্যবহার করতে পারেন।

এক সাথে সবকিছু বেঁধে রাখুন

এখন আমরা ল্যাম্বদা তৈরি করতে যাচ্ছি অনুরোধগুলি পরিচালনা করতে। আমি পিএনজি রেন্ডারিং লজিককে একটি পৃথক পরিষেবাতে রাখার পরামর্শ দিচ্ছি। যেহেতু ফ্যান্টমজেএস বাইনারি আকারের প্রায় 50MB, তাই এপিআইতে পরিবর্তনগুলি স্থাপনের গতি কমিয়ে দেবে। আপনি এই ল্যাম্বদা অন্যান্য উদ্দেশ্যেও ব্যবহার করতে পারেন।

আমরা রুট ফোল্ডারে ওয়েবপ্যাক.config.ts (উত্স কোডটি বান্ডিল করতে) এবং সার্ভারলেস.বেজ.জেএস (বেসিক সার্ভারলেস কনফিগারেশন সংজ্ঞায়িত করতে) তৈরি করে শুরু করব।

আপনি যদি সার্ভারহীন জাভাস্ক্রিপ্ট কনফিগারেশনের ক্ষেত্রে ব্যবহার সম্পর্কে আরও জানতে চান তবে আমার আগের নিবন্ধটি দেখুন।

আপনার নীচে স্থাপনার নাম এবং চিত্র বালতি পরিবর্তন করা দরকার:

ডিপ্লোয়মেন্টবকেট: {নাম: 'com.github-stats .... স্থাপন করে'}, পরিবেশ: U বুকেট: 'com.github-stats .... চিত্র', GITHUB_TOKEN: '$ {env: GITHUB_TOKEN}', স্ল্যাক্লাক্ল্যাঙ্কেন: '$ {env: SLACK_TOKEN}, স্টেজ:' $ {স্ব: প্রোভাইডার.স্টেজ} '},

এটি কারণ বালতির নাম অবশ্যই বিশ্বব্যাপী অনন্য হতে হবে।

এইচটিএমএলকে পিএনজি পরিষেবাতে রূপান্তর করুন

প্রথমে আসুন এমন একটি হ্যান্ডলার তৈরি করুন যা উত্পন্ন চিত্রটির URL টি প্রদান করে। হ্যান্ডলারের অনুরোধের বডিটি বৈধকরণ এবং প্রক্রিয়া করা উচিত:

... এবং যদি সবকিছু ঠিক থাকে তবে এটি চিত্রটি তৈরি করে এটি একটি এস 3 বালতিতে রাখা উচিত।

সোর্স ফাইলগুলি বান্ডিল করার জন্য ওয়েবপ্যাক.কনফিগ.টি ফাইল তৈরি করি। ফ্যান্টমজেএস বাইনারিগুলি বান্ডিল করতে আমরা অনুলিপি-ওয়েবপ্যাক-প্লাগইন এবং ওয়েবপ্যাক-অনুমতি-প্লাগইন ব্যবহার করব - এবং তাদের চালনার অনুমতি দেব। এটি করার জন্য, আমাদের sudo দিয়ে ডিপ্লয় কমান্ড চালাতে হবে, যেহেতু ওয়েবপ্যাকের ডিফল্টরূপে ফাইল সিস্টেমের অধিকার পরিবর্তন করার অনুমতি নেই।

সর্বশেষ পদক্ষেপটি হ্যান্ডলারের একটি এপিআই গেটওয়ের ইভেন্টের সাথে যুক্ত করতে সার্ভারলেস.জেএস ফাইলটি ব্যবহার করা হয়।

পরিসংখ্যান হ্যান্ডলারটির জন্য এখন আমাদের একই পদক্ষেপগুলি করা দরকার, তবে আমাদের ওয়েবপ্যাক.কনফিগ.এসটিতে কোনও পরিবর্তন করার দরকার নেই।

ল্যাম্বডাকে কল করার জন্য কেবলমাত্র পার্থক্যটি একটি অতিরিক্ত সুযোগ্য:

#RoleStatements: [... বেসকনফিগ.প্রোভাইডার.আইআমরোল স্টেটমেন্টস, ect প্রভাব: 'অনুমতি দিন', অ্যাকশন: ['ল্যাম্বদা: ইনভোক ফাংশন'], রিসোর্স: ['*']}]

স্ল্যাক বট সেট আপ করুন

চূড়ান্ত পদক্ষেপটি এমন একটি পরিষেবা তৈরি করা যা বটের জন্য বার্তা ইভেন্টগুলি পরিচালনা করবে। সরলতার জন্য, আমরা কেবল উল্লেখগুলি আবরণ করব। আসুন বেসিক ইভেন্ট হ্যান্ডলার সেট আপ করা যাক।

আমাদের স্ল্যাক থেকে একটি যাচাইয়ের ইভেন্টটি প্রক্রিয়া করতে হবে এবং 200 টি স্ট্যাটাস এবং কোয়েরি প্যারামিটারের সাথে প্রতিক্রিয়া জানাতে হবে:

কলব্যাক (নাল, {শরীর: JSON.stringify ({চ্যালেঞ্জ: (ভেরিফিকেশন হিসাবে স্ল্যাকএভেন্ট) .চ্যালেঞ্জ}), স্ট্যাটাস কোড: 200});

একটি স্ল্যাক ইভেন্টটি সঠিকভাবে পরিচালনা করতে, শেষ পয়েন্টটি 3000 মিলিসেকেন্ড (3 সেকেন্ড) এর মধ্যে উত্তর দিতে হবে। সুতরাং আমাদের তাত্ক্ষণিকভাবে প্রতিক্রিয়া জানাতে হবে এবং পোস্টম্যাসেজ এপিআই ব্যবহার করে অসম্পূর্ণভাবে একটি বার্তা প্রেরণ করা দরকার।

উপরের কোডে, আমরা একটি সংগ্রহস্থলের নাম বের করার জন্য বার্তাটির মূল অংশটি পার্স করেছি এবং একটি চিত্রের url পেতে একটি চিত্রের স্ট্যাটিস্টিক ল্যাম্বডাকে ডাকলাম এবং একটি বার্তা স্ল্যাককে প্রেরণ করুন। আপনি এখানে হ্যান্ডলারের পুরো কোডটি খুঁজে পেতে পারেন।

সার্ভারলেস.জেএস এবং ওয়েবপ্যাক কনফিগারেশনের কোডটি পরিসংখ্যান পরিষেবাটির মতো। সুতরাং যদি এটি সেট আপ করতে আপনার সমস্যা হয় তবে সম্পূর্ণ উত্স কোডটি দেখুন।

একটি স্ল্যাক অ্যাপ তৈরি করুন

এখন আসুন একটি নতুন স্ল্যাক অ্যাপ তৈরি করুন। স্ল্যাক এপিআইতে যান, একটি নতুন অ্যাকাউন্ট তৈরি করুন (যদি আপনি ইতিমধ্যে না থাকেন), একটি নতুন অ্যাপ্লিকেশন তৈরি করুন এবং "অঞ্চলগুলি" বিভাগে বট অঞ্চল যুক্ত করুন।

পাশের বারে ওআউথ এবং অনুমতি বিভাগে যান।

বট ব্যবহারকারীর অঞ্চল যুক্ত করুন।

তারপরে আপনি আপনার সংস্থায় অ্যাপটি ইনস্টল করতে এবং টোকেন অ্যাক্সেস করতে পারেন।

সেবা প্রদান

পূর্ববর্তী সংস্করণগুলি জাভাস্ক্রিপ্ট কনফিগারেশন ফাইলগুলিকে সমর্থন করে না কারণ আপনাকে অবশ্যই 1.26 এর চেয়ে বেশি সার্ভারলেস কাঠামো সংস্করণ ইনস্টল করতে হবে। আমি একাধিক পরিষেবা মোতায়েন করা আরও সহজ করার জন্য স্ল্যাক্স ইনস্টল করার পরামর্শ দিচ্ছি।

এনপিএম ইনস্টল -জি সার্ভারলেস এনএমপি ইনস্টল -জি কাজ করে না

গোটহাব এবং স্ল্যাক বট টোকেনগুলি অনুলিপি করুন এবং সেগুলি অনুসারে পরিবেশ পরিবর্তনশীল GITHUB_TOKEN এবং SLACK_TOKEN এ সেট করুন। টার্মিনালে নিম্নলিখিত কমান্ডটি চালান:

sudo GITHUB_TOKEN = SLACK_TOKEN = slx সব মোতায়েন

উপরে উল্লিখিত হিসাবে, আমাদের ফ্যান্টমজেএস বাইনারিগুলিতে অনুমতি নির্ধারণের জন্য সুডো দরকার su

ধৈর্য্য ধারন করুন! স্থাপনা কিছুটা সময় নিতে পারে। শেষে আপনার অনুরূপ আউটপুট দেখতে হবে:

মোতায়েন সফলভাবে সম্পন্ন হয়েছে
[অ্যাপ্লিকেশন / এইচটিএমএল-টু-পিএনজি] [সম্পন্ন]: পরিষেবা তথ্য পরিষেবা: এইচটিএমএল-থেকে-পিএনজি পর্যায়: দেব অঞ্চল: মার্কিন-পূর্ব -১ স্ট্যাক: এইচটিএমএল-থেকে-পিএনজি-দেব এপিআই কী: কিছুই নেই শেষ বিন্দু: কিছুই নয় : renderToPng: html-to-png-dev-reenderToPng সার্ভারলেস: পুরানো পরিষেবা সংস্করণগুলি সরানো হবে ... [অ্যাপ / স্ল্যাক] [সম্পন্ন]: পরিষেবা তথ্য পরিষেবা: গিট-স্ট্যাটাস-স্ল্যাক স্টেজ: দেব অঞ্চল: ইউএস-পূর্ব -১ স্ট্যাক : git-stats-slack-dev API কী: কিছুই নেই শেষ বিন্দু: POST - https://xxxxxxx.execute-api.us-east-1.amazonaws.com/dev/stats/slack/event-handler ফাংশন: ইভেন্ট হ্যান্ডলার: গিট-স্ট্যাটাস-স্ল্যাক-ডেভ-ইভেন্টহ্যান্ডলার সার্ভারলেস: পুরানো পরিষেবা সংস্করণগুলি সরানো হবে ... [অ্যাপ / পরিসংখ্যান] [সম্পন্ন]: পরিষেবা তথ্য পরিষেবা: গিট-স্ট্যাটাস পর্যায়: দেব অঞ্চল: মার্কিন-পূর্ব -১ স্ট্যাক: গিট-স্ট্যাটাস- দেব এপিআই কী: শেষ নেই -দেব-প্রাপ্তকন্ট্রিবিউটর স্ট্যাটাস ইমেজ সার্ভারলেস: আল্টে ডায়ান সেন্ট সংস্করণগুলি সরানো হবে ...

চূড়ান্ত পদক্ষেপটি ইভেন্টগুলি উল্লেখ করার জন্য আমাদের শেষ পয়েন্টটিতে সাবস্ক্রাইব করা।

স্ল্যাক এপিআই নেভিগেশনে "ইভেন্ট সাবস্ক্রিপশন" বিভাগটি নির্বাচন করুন।

তারপরে স্থাপনা কমান্ডের আউটপুটে পাওয়া ইভেন্ট হ্যান্ডলার url এ পেস্ট করুন।

সময়টা খানিকটা ঘুরেফিরে! এখানে রেন্ডার করা চিত্রগুলির কয়েকটি উদাহরণ রয়েছে:

সার্ভারলেস / সার্ভারলেস

ফেসবুক / প্রতিক্রিয়া

plouc / nivo

এটাই!

আশা করি আপনি এই নিবন্ধটি দরকারী খুঁজে পেয়েছেন। আপনি পরিষেবাটিতে দেখতে চাইলে মন্তব্যগুলিতে আমি অন্যান্য ধরণের পরিসংখ্যান দেখতে পছন্দ করব।

নিবন্ধটি পছন্দ হলে তালি দাও! আপনি যদি চ্যাট বা সংযোগ করতে চান তবে আপনি আমাকে টুইটার, গিটহাব এবং লিংকডিনে সন্ধান করতে পারেন।