একটি কর্মক্ষমতা বাজেট সেট করতে Lighthouse Bot ব্যবহার করে৷

Milica Mihajlija

দ্রুতগতি অর্জনের জন্য আপনি কঠোর পরিশ্রম করেছেন, এখন লাইটহাউস বট (Lighthouse Bot) দিয়ে পারফরম্যান্স টেস্টিং স্বয়ংক্রিয় করে আপনার গতি বজায় রাখুন।

লাইটহাউস আপনার অ্যাপকে ৫টি বিভাগে গ্রেড দেয়, এবং সেগুলোর মধ্যে একটি হলো পারফরম্যান্স। যদিও আপনি প্রতিবার কোড এডিট করার পর ডেভটুলস বা লাইটহাউস সিএলআই দিয়ে পারফরম্যান্সের পরিবর্তনগুলো পর্যবেক্ষণ করার কথা মনে রাখার চেষ্টা করতে পারেন, কিন্তু আপনাকে তা করতেই হবে এমন কোনো বাধ্যবাধকতা নেই। বিভিন্ন টুল আপনার হয়ে এই ক্লান্তিকর কাজগুলো করে দিতে পারে। ট্র্যাভিস সিআই (Travis CI) একটি চমৎকার পরিষেবা, যা প্রতিবার নতুন কোড পুশ করার সাথে সাথে ক্লাউডে আপনার অ্যাপের জন্য স্বয়ংক্রিয়ভাবে টেস্টগুলো চালায়।

লাইটহাউস বট ট্র্যাভিস সিআই (Travis CI)-এর সাথে সংযুক্ত, এবং এর পারফরম্যান্স বাজেট ফিচারটি নিশ্চিত করে যে আপনি অজান্তেই ভুলবশত পারফরম্যান্সের অবনতি ঘটাবেন না। আপনি আপনার রিপোজিটরি এমনভাবে কনফিগার করতে পারেন যাতে লাইটহাউস স্কোর আপনার সেট করা থ্রেশহোল্ডের (যেমন < ৯৬/১০০) নিচে নেমে গেলে এটি পুল-রিকোয়েস্ট মার্জ করার অনুমতি না দেয়।

যদিও আপনি লোকালহোস্টে পারফরম্যান্স পরীক্ষা করতে পারেন, লাইভ সার্ভারে আপনার সাইট প্রায়শই ভিন্নভাবে কাজ করে। আরও বাস্তবসম্মত ধারণা পেতে, আপনার সাইটটি একটি স্টেজিং সার্ভারে ডেপ্লয় করাই শ্রেয়। আপনি যেকোনো হোস্টিং পরিষেবা ব্যবহার করতে পারেন; এই নির্দেশিকায় ফায়ারবেস হোস্টিং পরীক্ষা করে দেখা হবে।

১. সেটআপ

এই সহজ অ্যাপটি আপনাকে তিনটি সংখ্যা সাজাতে সাহায্য করে।

গিটহাব থেকে উদাহরণটি ক্লোন করুন এবং আপনার গিটহাব অ্যাকাউন্টে এটিকে একটি রিপোজিটরি হিসেবে যুক্ত করতে ভুলবেন না।

২. ফায়ারবেসে স্থাপন করুন

শুরু করার জন্য আপনার একটি Firebase অ্যাকাউন্ট লাগবে। সেটি তৈরি হয়ে গেলে, Firebase কনসোলে 'Add project'-এ ক্লিক করে একটি নতুন প্রজেক্ট তৈরি করুন :

ফায়ারবেসে স্থাপন করা

অ্যাপটি ডেপ্লয় করার জন্য আপনার Firebase CLI প্রয়োজন হবে। এটি আপনার সিস্টেমে আগে থেকেই ইনস্টল করা থাকলেও, এই কমান্ডটি ব্যবহার করে CLI-কে নিয়মিত সর্বশেষ সংস্করণে আপডেট করা একটি ভালো অভ্যাস:

npm install -g firebase-tools

Firebase CLI-কে অনুমোদন দিতে, চালান:

firebase login

এখন প্রকল্পটি শুরু করুন:

firebase init

সেটআপের সময় কনসোলটি আপনাকে একাধিক প্রশ্ন জিজ্ঞাসা করবে:

• ফিচার নির্বাচন করতে বলা হলে, 'হোস্টিং' বেছে নিন।
• ডিফল্ট ফায়ারবেস প্রজেক্টের জন্য, ফায়ারবেস কনসোলে আপনার তৈরি করা প্রজেক্টটি নির্বাচন করুন।
• আপনার পাবলিক ডিরেক্টরি হিসেবে 'public' টাইপ করুন।
• একক-পৃষ্ঠার অ্যাপ হিসেবে কনফিগার করতে "N" (না) টাইপ করুন।

এই প্রক্রিয়াটি আপনার প্রজেক্ট ডিরেক্টরির রুটে একটি firebase.json কনফিগারেশন ফাইল তৈরি করে।

অভিনন্দন, আপনি এখন মোতায়েন করার জন্য প্রস্তুত! চালান:

firebase deploy

মুহূর্তের মধ্যেই আপনার অ্যাপটি চালু হয়ে যাবে।

৩. ট্র্যাভিসকে সেট আপ করা

আপনাকে ট্র্যাভিসে একটি অ্যাকাউন্ট নিবন্ধন করতে হবে এবং তারপরে আপনার প্রোফাইলের সেটিংস বিভাগে গিটহাব অ্যাপস ইন্টিগ্রেশন সক্রিয় করতে হবে।

আপনার একটি অ্যাকাউন্ট থাকলে

আপনার প্রোফাইলের অধীনে সেটিংসে যান, সিঙ্ক অ্যাকাউন্ট বোতামটি চাপুন এবং নিশ্চিত করুন যে আপনার প্রোজেক্ট রিপোটি ট্র্যাভিসে তালিকাভুক্ত আছে।

কন্টিনিউয়াস ইন্টিগ্রেশন শুরু করতে আপনার দুটি জিনিস প্রয়োজন:

1. রুট ডিরেক্টরিতে একটি .travis.yml ফাইল থাকতে হবে
2. সাধারণ git push কমান্ড ব্যবহার করে বিল্ড শুরু করতে

lighthouse-bot-starter রিপোটিতে ইতিমধ্যেই একটি .travis.yml YAML ফাইল আছে:

language: node_js
node_js:
  - "8.1.3"
install:
  - npm install
before_script:
  - npm install -g firebase-tools
script:
  - webpack

YAML ফাইলটি ট্র্যাভিসকে সমস্ত ডিপেন্ডেন্সি ইনস্টল করতে এবং আপনার অ্যাপটি বিল্ড করতে নির্দেশ দেয়। এখন আপনার পালা উদাহরণ অ্যাপটি আপনার নিজের গিটহাব রিপোজিটরিতে পুশ করার । যদি আগে থেকে না করে থাকেন, তাহলে নিম্নলিখিত কমান্ডটি চালান:

git push origin main

আপনার প্রোজেক্টের ট্র্যাভিস ড্যাশবোর্ড দেখতে, ট্র্যাভিসের সেটিংস-এর অধীনে থাকা আপনার রিপো-তে ক্লিক করুন। সবকিছু ঠিক থাকলে, কয়েক মিনিটের মধ্যেই দেখবেন আপনার বিল্ডটি হলুদ থেকে সবুজ হয়ে গেছে। 🎉

৪. ট্র্যাভিস দিয়ে ফায়ারবেস ডেপ্লয়মেন্ট স্বয়ংক্রিয় করুন

ধাপ ২-এ, আপনি আপনার Firebase অ্যাকাউন্টে লগ ইন করেছেন এবং কমান্ড লাইন থেকে firebase deploy কমান্ডের মাধ্যমে অ্যাপটি ডিপ্লয় করেছেন। Travis-কে আপনার অ্যাপটি Firebase-এ ডিপ্লয় করার জন্য, আপনাকে এটিকে অনুমোদন করতে হবে। আপনি সেটা কীভাবে করবেন? একটি Firebase টোকেনের মাধ্যমে। 🗝️🔥

ফায়ারবেস অনুমোদন করুন

টোকেন তৈরি করতে এই কমান্ডটি চালান:

firebase login:ci

এটি ব্রাউজার উইন্ডোতে একটি নতুন ট্যাব খুলবে, যাতে ফায়ারবেস আপনাকে যাচাই করতে পারে। এরপর, কনসোলের দিকে ফিরে তাকান, এবং আপনি আপনার সদ্য তৈরি টোকেনটি দেখতে পাবেন। সেটি কপি করে ট্র্যাভিসে ফিরে যান।

আপনার প্রোজেক্টের ট্র্যাভিস ড্যাশবোর্ডে, আরও বিকল্প > সেটিংস > পরিবেশ ভেরিয়েবল- এ যান।

টোকেনটি ভ্যালু ফিল্ডে পেস্ট করুন, ভেরিয়েবলটির নাম FIREBASE_TOKEN দিন এবং এটি যুক্ত করুন।

আপনার ট্র্যাভিস সেটআপে ডেপ্লয়মেন্ট যোগ করুন

প্রতিটি সফল বিল্ডের পর অ্যাপটি ডিপ্লয় করার জন্য ট্র্যাভিসকে নির্দেশ দিতে আপনার নিম্নলিখিত লাইনগুলো প্রয়োজন। এগুলো .travis.yml ফাইলের শেষে যোগ করুন। 🔚

after_success:
  - firebase deploy --token $FIREBASE_TOKEN --non-interactive

এই পরিবর্তনটি গিটহাবে পুশ করুন এবং আপনার প্রথম স্বয়ংক্রিয় ডিপ্লয়মেন্টের জন্য অপেক্ষা করুন। আপনি যদি আপনার ট্র্যাভিস লগ দেখেন, তাহলে শীঘ্রই সেখানে ✔️ ডিপ্লয়মেন্ট সম্পন্ন! লেখাটি দেখতে পাবেন।

এখন থেকে আপনি যখনই আপনার অ্যাপে কোনো পরিবর্তন করবেন, সেগুলো স্বয়ংক্রিয়ভাবে ফায়ারবেসে যুক্ত হয়ে যাবে।

৫. লাইটহাউস বট সেট আপ করা

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

গিটহাবে, আপনার প্রোজেক্টের সেটিংসে যান এবং 'lighthousebot'-কে সহযোগী হিসেবে যুক্ত করুন (সেটিংস>সহযোগী):

এই অনুরোধগুলি অনুমোদন করা একটি ম্যানুয়াল প্রক্রিয়া, তাই এটি সবসময় তাৎক্ষণিকভাবে হয় না। টেস্টিং শুরু করার আগে, নিশ্চিত করুন যে লাইটহাউসবট তার সহযোগী স্ট্যাটাস অনুমোদন করেছে। এরই মধ্যে, আপনাকে ট্রাভিসে আপনার প্রোজেক্টের এনভায়রনমেন্ট ভেরিয়েবলে আরেকটি কী (key) যোগ করতে হবে। এখানে আপনার ইমেল দিন , এবং আপনি আপনার ইনবক্সে একটি লাইটহাউস বট কী পেয়ে যাবেন। 📬

ট্র্যাভিসে, এই কী-টি একটি এনভায়রনমেন্ট ভেরিয়েবল হিসেবে যোগ করুন এবং এর নাম দিন LIGHTHOUSE_API_KEY :

আপনার প্রকল্পে লাইটহাউস বট যোগ করুন

এরপরে, নিম্নলিখিত কমান্ডটি চালিয়ে আপনার প্রজেক্টে লাইটহাউস বট যোগ করুন:

npm i --save-dev https://github.com/ebidel/lighthousebot

এবং package.json এ এই অংশটি যোগ করুন:

"scripts": {
  "lh": "lighthousebot"
}

আপনার ট্র্যাভিস কনফিগারেশনে লাইটহাউস বট যোগ করুন

শেষ কৌশল হিসেবে, প্রতিটি পুল রিকোয়েস্টের পর অ্যাপটির পারফরম্যান্স পরীক্ষা করুন!

.travis.yml ফাইলের after_success-এর মধ্যে আরেকটি ধাপ যোগ করুন:

after_success:
  - firebase deploy --token $FIREBASE_TOKEN --non-interactive
  - npm run lh -- https://staging.example.com

এটি প্রদত্ত URL-টিতে একটি লাইটহাউস অডিট চালাবে, তাই https://staging.example.com জায়গায় আপনার অ্যাপের URL (অর্থাৎ your-app-123.firebaseapp.com) বসান।

আপনার মানদণ্ড উচ্চ রাখুন এবং সেটআপটি এমনভাবে পরিমার্জন করুন যাতে অ্যাপের এমন কোনো পরিবর্তন আপনি গ্রহণ না করেন যা পারফরম্যান্স স্কোরকে ৯৫-এর নিচে নামিয়ে আনে:

- npm run lh -- --perf=95 https://staging.example.com

ট্র্যাভিসে লাইটহাউস বট টেস্ট চালু করতে একটি পুল রিকোয়েস্ট করুন।

লাইটহাউস বট শুধুমাত্র পুল রিকোয়েস্টগুলোই পরীক্ষা করবে, তাই আপনি যদি এখন মেইন ব্রাঞ্চে পুশ করেন, তাহলে আপনার ট্র্যাভিস লগে শুধু "এই স্ক্রিপ্টটি শুধুমাত্র ট্র্যাভিস পিআর রিকোয়েস্টের ক্ষেত্রেই চালানো যাবে" এই বার্তাটি পাবেন।

লাইটহাউস বট পরীক্ষাটি চালু করতে:

1. একটি নতুন শাখা দেখুন
2. এটি গিটহাবে পুশ করুন
3. একটি পুল অনুরোধ করুন

পুল রিকোয়েস্ট পেজটিতে ধৈর্য ধরে থাকুন এবং লাইটহাউস বটের গানের জন্য অপেক্ষা করুন! 🎤

পারফরম্যান্স স্কোর চমৎকার, অ্যাপটি বাজেটের মধ্যেই আছে, এবং চেকটিও পাস করেছে!

আরও বাতিঘর বিকল্প

মনে আছে লাইটহাউস কীভাবে ৫টি ভিন্ন ক্যাটাগরি পরীক্ষা করে? আপনি লাইটহাউস বট ফ্ল্যাগ ব্যবহার করে সেগুলোর যেকোনোটির জন্য স্কোর প্রয়োগ করতে পারেন:

--perf  # performance
--pwa   # progressive web app score
--a11y  # accessibility score
--bp    # best practices score
--seo   # SEO score

উদাহরণ:

npm run lh -- --perf=93 --seo=100 https://staging.example.com

পারফরম্যান্স স্কোর ৯৩-এর নিচে অথবা এসইও স্কোর ১০০-এর নিচে নেমে গেলে পিআরটি ব্যর্থ হবে।

আপনি --no-comment অপশনটি ব্যবহার করে লাইটহাউস বটের মন্তব্যগুলো না পাওয়ার সিদ্ধান্তও নিতে পারেন।