আজকে আমরা কথা বলবো ওয়েব ডেভেলপারদের জন্য সেরা পাঁচটা এআই টুল নিয়ে এবং এই এআই টুলগুলো ব্যবহার করে কিভাবে একটি ফুললি ফাংশনাল ওয়েবসাইট তৈরি করা যায় সেটাও দেখবো এই ভিডিওতে। সো, লেটস টাইপ ইন্টারভিউ।
আপনারা যারা ভাবছেন যে এআই আপনাদের রিপ্লেস করে ফেলবে তাদের উদ্দেশ্যে বলে নিতে চাই যে কথাটি আংশিক সত্য এবং আংশিক মিথ্যা। এআই তখনই আপনাকে রিপ্লেস করতে পারবে যখন আপনি প্রপারলি আপনার কাজের মধ্যে এআই টুলগুলো ইউজ করবেন না।
মনে করেন, আপনি একটা ওয়েবসাইটের ফ্রন্টএন্ড ডিজাইন করছেন যেটা করতে আপনার তিনদিন সময় লাগবে। অন্যদিকে আরেকজন, যে কিনা এআই টুল ইউজ করে ওয়েবসাইটটা ৩ মিনিটের মধ্যে তৈরি করে ফেলেছে, তাহলে চাকরিটা কার থাকবে? অবশ্যই যে এআই টুলটা ব্যবহার করছে তার।
সো, এখানে যদি একটু ভেবে দেখেন, দেখবেন এআই আপনাকে রিপ্লেস করছে না, বরং যে সঠিকভাবে এআই টুলটা ইউজ করতে পারছে, সে আপনাকে রিপ্লেস করছে। এখন আমরা দেখব কিভাবে এই পাঁচটা এআই টুল ব্যবহার করে আপনার ওয়েব ডেভেলপমেন্ট জার্নি আরো ইজি, সেফ এবং ইফেক্টিভ হয়।
নাম্বার ওয়ানে যে অ্যাপসটা রয়েছে, তার নাম হচ্ছে ক্যাটসের। ক্যাটসের ইউজ করার জন্য আপনার প্রথমে catsr.com এ চলে যেতে হবে। সেখান থেকে আপনার অপারেটিং সিস্টেম যদি উইন্ডোজ হয়ে থাকে, তাহলে ডাউনলোড ফর উইন্ডোজে ক্লিক করে ডাউনলোড করে নিতে হবে।
তো ডাউনলোড হয়ে গেলে নরমালি এটাকে আমরা ইন্সটল করে নিবো। এখানে আমি একটা ডেস্কটপ আইকন ক্রিয়েট করে নিচ্ছি। সো, ইন্সটল হতে কিছুক্ষণ সময় লাগতে পারে, ততক্ষণ আমরা ওয়েট করি। ইন্সটল হয়ে গেলে আমরা যদি ক্যাটসের ওপেন করি, তাহলে এখানে আমাদের সাইনআপ করতে বলবে।
তো আমি এখানে নরমালি আমার ইমেইল দিয়ে সাইনআপ করে নিচ্ছি। তো সাইনআপ কমপ্লিট। এখন সাইনআপ হয়ে গেলে আমাদের এরকম একটা ড্যাশবোর্ড দেখাবে। এখান থেকে আমরা নরমালি একটা ফোল্ডার সিলেক্ট করে নিব, যেই ফোল্ডারে আমাদের ওয়েবসাইটের সব ফাইলগুলো স্টোরড থাকবে।
আমি এখানে নতুন একটা ফোল্ডার ক্রিয়েট করে নিচ্ছি, ফোল্ডারটার নাম দিয়ে দিচ্ছি ক্যাটসের ওয়েবসাইট এক্সাম্পল। সো, ফোল্ডারটি সিলেক্ট করা হয়ে গেলে এখন আমরা ওয়েবসাইটটা বানানো শুরু করতে পারি। আর প্রম্পটের জন্য আপনারা সরাসরি এখানে প্রম্পট দিতে পারেন।
কিন্তু আমি ৪ জিবি র্যাম জেনারেট করে নিচ্ছি ইউসিং কার্সার, উইচ ইজ ফুলি রেসপন্সিভ এআই মডেল। সো, এখন এটা বলার পরে চ্যাটিংটি আমাকে কার্সারের জন্য কোড জেনারেট করে দিলো। আমি জাস্ট এখান থেকে কোডটা কপি করবো এবং ক্যাটসারে গিয়ে পেস্ট করবো।
পেস্ট করে এন্টার দেওয়ার পরেই আমরা দেখতে পারবো যে ক্যাটসার ওয়েবসাইটটা বানানো শুরু করে দিয়েছে। এখানে index.html ফাইলটা অলরেডি ক্রিয়েট করছে। index.html ফাইলটা তৈরি করা হয়ে গেছে। এখন এটা সিএসএস ফাইল ক্রিয়েট করবে। সো, আমরা কিছুক্ষণ ওয়েট করি।
তৈরি করা শেষ। শেষমেশ আমাদের ওয়েবসাইটটা তৈরি হয়ে গেছে। এখন আমি এখান থেকে নরমালি ওয়েবসাইটটাকে ব্রাউজারে রান করে নিচ্ছি। সো, দেখতেই পাচ্ছেন, জাস্ট একটা প্রম্পটের মাধ্যমে ক্যাটসার আমাদের কত দারুণ একটা ওয়েবসাইট তৈরি করে দিল।
এখন আপনি চাইলে এটা আপনার নিজের ইচ্ছামত মডিফাই করতে পারেন। কোন ডিজাইন যদি আপনার পছন্দ না হয়, তাহলে আবার নতুন করে প্রম্পট দিয়ে আপনি ডিজাইনটা চেঞ্জ করতে পারেন, কালার চেঞ্জ করতে পারেন। ফর এক্সাম্পল, আমরা যদি এখানে কন্টাক্টে ক্লিক করি, তাহলে দেখবো এখানে কোন কন্টাক্ট ফর্ম তৈরি করা হয়নি।
সেজন্য আমরা ক্যাটসারে চলে যাব এবং ক্যাটসারকে বলে দিবো যে মেক এ কন্টাক্ট ফর্ম। দিয়ে দিলে ক্যাটসার এখন কি করবে? index.html ফাইলের মধ্যে একটা কন্টাক্ট ফর্ম তৈরি করবে এবং সেটাকে সিএসএস দ্বারা ডিজাইন করবে।
আর সবশেষে কন্টাক্ট ফর্মটা যেন ঠিক মত কাজ করে সেজন্য ব্যাকএন্ডের জাভাস্ক্রিপ্ট ফাইলটাও লিখে দিবে। সো, এখানে সবকিছু করা শেষ, কন্টাক্ট ফর্ম বানানো শেষ। এখন যদি ওয়েবসাইটটা নরমালি আমি ব্রাউজারে রান করি, তাহলে দেখবেন এখানে একটা কন্টাক্ট ফর্ম তৈরি করা হয়ে গেছে।
জাস্ট আপনি একটা কন্টাক্ট ফর্ম তৈরি করতে বললেন এবং সে সেটা তৈরি করে, ডিজাইন করে, ব্যাকএন্ড ফাংশনও এড করে সম্পূর্ণ রেডি করে আপনার হাতে দিয়ে দিল। নাম্বার ২ যে এআই টুলটা রয়েছে তার নাম হচ্ছে Replit।
Replit ইউজ করার জন্য প্রথমে replit.com এ চলে যাব। সেখান থেকে জিমেইল দিয়ে অথবা অন্য কোনো ভাবে লগইন করে নিব। লগইন করার পরে Replit আমাদের কাছে কিছু ডিটেইলস জানতে চাইতে পারে। সো, সেগুলো আপনি ফিলআপ করে দিবেন। কন্টিনিউতে প্রেস করলাম।
এখন এখানে কন্টিনিউ স্টার্টার সিলেক্ট করব কারণ আমরা ফ্রিতে ইউজ করব। সো, সব কমপ্লিট। এখন আমরা নতুন অ্যাপ তৈরি করার জন্য প্রস্তুত। এখানে আপনারা দেখতে পাচ্ছেন যে টেমপ্লেট সিলেক্ট করার অপশন আছে। সো, আমরা যেহেতু ওয়েবসাইট বানাবো, সেজন্য HTML, CSS এবং জাভাস্ক্রিপ্টের যেই টেমপ্লেটটা আছে সেটা সিলেক্ট করে নেব এবং এখানে নাম দিয়ে দিলাম।
এখন একটা ক্রিয়েট করে নেব। সব কাজ শেষ। এখন এখান থেকে শুধু প্রম্পট দেয়া থাকে। সো, আমি প্রম্পট দিয়ে দিচ্ছি। জাস্ট ইন্টারভিউ দিলাম। এখন Replit আমার জন্য ওয়েবসাইট বানানো শুরু করে দিয়েছে। সো, দেখতেই পাচ্ছেন, এখানে ফাইল ক্রিয়েট করছে।
সো, ওয়েবসাইটটা তৈরি করতে করতে আমরা ওয়েট করি। ওয়েবসাইটটা অলরেডি তৈরি হয়ে গেছে। এখন এটাকে যদি আমরা ব্রাউজারে রান করি, দেখেন ওয়েবসাইটটা কমপ্লিটলি রেডি। এখানে যে ফাংশনালিটিগুলো এড করেছে, এগুলো Replit নিজে নিজেই করেছে।
আমি জাস্ট প্রম্পট দিয়েছি যে আমাকে এডুকেশনাল একটা ওয়েবসাইট তৈরি করে দাও। এখানে আমরা দেখেন, একটা মানুষকে ফ্রেন্ড রিকোয়েস্ট দিতে পারছি, এখানে নতুন ডিসকাশন গ্রুপ তৈরি করতে পারছি এবং এটা পুরোপুরি কাজ করছে।
এখন এখানে এডিট প্রোফাইলে গিয়ে আমি এখানে আমার নাম চেঞ্জ করতে পারবো। মাত্র দুইটা প্রম্পট দিয়ে এই পুরো ওয়েবসাইটটা তৈরি করা হয়ে গেল। এখন আমি ল্যান্ডিং পেজে নতুন কিছু ফিচার এড করতে চাচ্ছি। সেজন্য আমি জাস্ট চ্যাটবক্সে গিয়ে বলে দিব যে add more features on landing page।
আমি কিন্তু স্পেসিফিকলি বলে দিইনি যে আমার কোন ধরনের ফিচারগুলো লাগবে। সো, Replit নিজের মত করেই তার ইচ্ছামত ফিচারগুলো এড করে দিবে ল্যান্ডিং পেজে। সো, দেখা যাক কোন ফিচারগুলো এড করে। সো, অ্যাড করা শেষ।
এখন যদি রিফ্রেশ করি, এখানে দুইটা তিনটা ফিচার অ্যাড করেছে Replit, পুরাটাই নিজের মেমোরি ইউজ করে। নাম্বার থ্রিতে যে এআই টুলটা আছে তার নাম হচ্ছে Framer। প্রথমে আমরা framer.com এ চলে যাব। সেখান থেকে start for free তে ক্লিক করব।
এরপর জিমেইল দিয়ে লগইন করে নেব। লগইন করার পর Framer আমাদের ব্যাপারে কিছু ডিটেইলস জানতে চাইবে। সেগুলো আপনি নরমালি ফিলআপ করে দিবেন। সব ডিটেইলসগুলো সাবমিট করা হয়ে গেলে আমরা Framer-কে একটা প্রম্পট দিয়ে দিবো ওয়েবসাইট বানানোর জন্য।
সো, প্রম্পট দেওয়ার পরে Framer আমাদের এরকম একটা ওয়েবসাইট তৈরি করে দিয়েছে। বাকি এই টুলগুলোর থেকে Framer-এর একটু পার্থক্য আছে। সেটা হচ্ছে Framer-এ আপনি ম্যানুয়ালি সকল টেক্সট, সকল ডিজাইন, কালারিং—এভরিথিং আপনি ম্যানুয়ালি চেঞ্জ করতে পারবেন।
৪ নাম্বারে যে এআই টুলটা রয়েছে তার নাম হচ্ছে Lovable। ইউজ করার জন্য আমরা প্রথমে lovable.dev তে গিয়ে লগইন করে নিব। লগইন করা শেষ হয়ে গেলে আমরা ব্লগিং-এর জন্য একটা ওয়েবসাইট ক্রিয়েট করবো। সো, সেজন্য আমরা Lovable-কে একটা প্রম্পট দিয়ে দিব।
আমি জাস্ট ফাইভ ওয়ার্ডের একটা প্রম্পট দিয়ে দিয়েছি। এখন জাস্ট ওয়েট করব যে Lovable আমার জন্য কেমন ওয়েবসাইট বানায়। জাস্ট কয়েক সেকেন্ড ওয়েট করার পরেই দেখতে পাচ্ছেন যে এখানে Lovable একটা ফুললি ব্লগিং ওয়েবসাইট তৈরি করে ফেলেছে।
সেখানে আপনার কোডগুলো চাইলে দেখতে পারেন বা নিজের মত করে মডিফাই করতে পারেন। ওয়েবসাইটটা যদি আমরা ব্রাউজারে গিয়ে ওপেন করি, তাহলে দেখতে পারবেন যে আসলে ওয়েবসাইটটা ব্লগিং-এর জন্য একটা পারফেক্ট ওয়েবসাইট।
নাম্বার ফাইভে যে এআই টুলটা রয়েছে তার নাম হচ্ছে GitHub Copilot। GitHub Copilot একটা রিসার্চ অনুযায়ী Copilot ইউজাররা ৫৫ থেকে ৫৬ পার্সেন্ট ফাস্টার তাদের কাজগুলো কমপ্লিট করে থাকে। GitHub আপনি আপনার GitHub অ্যাকাউন্ট থেকে ইউজ করতে পারেন অথবা Visual Studio Code-ও ইন্সটল করে নিতে পারেন।
আবার GitHub-এর ফাইলগুলো আপনি চাইলে ডাউনলোড করতে পারেন অথবা সেগুলো আপনি আপনার GitHub অ্যাকাউন্টে রিপোজিটরি হিসেবেও রেখে দিতে পারেন। আপনাদের কাজকে আরো প্রোডাক্টিভ করতে, আপনারা অবশ্যই এই টুলগুলো ইউজ করবেন।
আপনারা যদি এই টুলগুলোর ডিটেইলস ভিডিও চান, তাহলে অবশ্যই কমেন্ট বক্সে জানাবেন। আমি চেষ্টা করব সেই ভিডিওগুলো তৈরি করার। সো, ধন্যবাদ সবাইকে। দেখা হচ্ছে পরের ভিডিওতে।
