ক্রসপ্লাটফর্মে ডেক্সটপ এপ্লিকেশন বানান সহজেই। (পর্ব ১)

Eat-Code-Sleep-Loop. Photo Courtesy: Pixabay

Warning: This tutorial is not for beginners.

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

Stop. কোনোকিছু শুরু করার আগে তার ইতিহাস জেনে নেয়াটা খুব জরুরী। কারন বলা তো যায় না, কখন কে আবার আপনাকে জিজ্ঞাসা করে বসতে পারে, কম্পিউটার তো চালান। বলেন তো এই কম্পিউটার কে প্রথম বাংলাদেশে আনে। তাই চলুন আগে একটু ফ্ল্যাশব্যাকে গিয়ে মুল ঘটনা জেনে আসি।

ElectronJS কি? কিভাবে এলো? কবে এলো?

ElectronJS বানানো হয় ২০১২ সালে। Cheng Zhao নামের এক ভদ্রলোক বিখ্যাত কম্পানী ইন্টেল এ ইন্টার্নশীপ করার সময়কালে এটা তৈরি করেন। বর্তমানে ElectronJS কে অনেকে “Atom Shell” নামেও চেনে। এটি মুলত ব্যাকেন্ডে Nodejs এবং ফ্রন্টেন্ডে Chromium ব্যবহার করে।

ElectronJS এর ব্যবহার অনেক বড় বড় কম্পানী করে আসছে। যেমন সবার পরিচিত কোড এডিটর গিটহাবের তৈরি Atom, মাইক্রোসফ্টের তৈরি Visual Studio Code, বিখ্যাত মিউজিক স্ট্রিমিং সার্ভিস Tidal এর ডেক্সটপ এপ্লিকেশন, Chris Granger ও Robert Attorri তৈরি Light Table IDE, VoIP এর জন্য বানানো Discord chat service এবং আমাদের সবার প্রিয় মিউজিক স্ট্রিমিং সার্ভিস Spotify বানানো এই ElectronJS দিয়ে।

এছাড়াও আর কোন কোন এপ্লিকেশন ইলেক্ট্রন ব্যবহার করছে তা জানতে Applications using Electron ঘুরে আসতে পারেন।

ইতিহাস অনেক জানা হলো। চলুন এবার জেনে আসি ElectronJS শিখতে হলে আপনাকে কি কি জানা থাকতে হবে।

পুর্ব-প্রস্তুতিঃ

যেকোনো ল্যাঙ্গুয়েজ এর কোনো ফ্রেমওয়ার্ক বা প্লাগিন নিয়ে কাজ করতে গেলে সবার আগে ওই ফ্রেমওয়ার্ক বা প্লাগিনের কোর ল্যাঙ্গুয়েজ ভালো করে জানা জরুরী।

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

যা যা লাগবেঃ

প্রথমেই আপনার কম্পিউটারে নোডজেএস এবং NPM ইনিস্টল করা থাকতে হবে। ইনিস্টল করা আছে কিনা চেক করতে টার্মিনাল/cmd ওপেন করে node -v && npm -v টাইপ করুন। আপনার কম্পিউটারে nodejs এবং npm এর ভার্সন কত ইনিস্টল করা আছে দেখা যাবে। আর যদি না থাকে তবে আপনি https://nodejs.org/ থেকে nodejs ডাউনলোড করে ইনিস্টল করলেই হয়ে যাবে।

কাজের সুবিধার্থে আমি ElectronJS কে লোকাল ও গ্লোবাল দুইজায়গায় ই ইনিস্টল করে নিচ্ছি।

For Global: npm i -D electron@latest

নোটঃ জানালা ব্যবহারকারীরা গ্লোবাল ইনিস্টলেশন এর সময় cmd এডমিনিস্ট্রেশন এক্সেস দিয়ে ওপেন করবেন আর লিনাক্স এবং ম্যাক ব্যবহার কারীরা কমান্ডের শুরুতে sudo ব্যবহার করলেই হবে।

ইতিহাসের সাথে সাথে অনেক কিছুই জানা হয়ে গেলো। এবার চলেন আমরা আসল কাজে ফেরত যাই।

Step 1: Initialize NPM

শুরুতেই আমাদের একটা প্রোজেক্ট ফোল্ডার বানাতে হবে। ফোল্ডার বানানোর পরে সেই ডিরেক্টরীতে গিয়ে npm initialize করতে হবে। তার জন্য নিচের কমান্ড টি টার্মিনালে টাইপ করে এন্টার চাপুন।

npm init -y

নরমালি npm initialize করতে আমরা npm init ব্যবহার করি। কিন্তু যেহেতু টেস্ট প্রোজেক্ট তাই npm এর প্রিবিউল্ড ইনিশিয়ালাইজ স্ক্রীপ্ট ব্যবহার করছি।

Step 2: Install Dependencies

যেহেতু আমরা শুধু ইলেক্ট্রন দিয়ে একটি হ্যালোওয়ার্ল্ড এপ্লিকেশন বানাবো তাই আমাদের ডেভ-ডিপেন্ডেন্সি হিসেবে শুধু Electronjs হলেই আপাতত চলবে। তার জন্য টারমিনালে নিচের কমান্ডটি কপিপেস্ট করুন

npm i electron --save-dev

Step 3: Add Start Script

এবার আমাদের ইলেক্ট্রন এপ্লিকেশন চালু করার জন্য package.json ফাইলে স্টার্ট স্ক্রীপ্ট এড করতে হবে। তো তার জন্য নিচের স্ক্রীনশটের মত করে "start": "electron .", "main": "electron.js", লেখাটুকু কপিপেস্ট করে নিন।

package.json

Step 4: Coding

সেটাপ করা শেষ। এবার আমাদের কোডিং করতে হবে। আমি এখানে আমাদের মেইন হিসেবে electron.js নামের ফাইল সেট করেছি। তাই আমি নতুন একটা ফাইল বানাবো যার নাম হবে electron.js। টার্মিনালে নিচের কমান্ডটুকু কপিপেস্ট করুন।

touch electron.js

Add dependencies:

এখন আমাদের electron.js ফাইলে ডিপেন্ডেন্সি গুলো এড করে নিতে হবে।

আপনি চাইলেও কপিপেস্ট করতে পারবেন না। 😜

এখানে আমাদের electronjs এর app এবং browserWindow নামের দুইটা ডিপেন্ডেন্সি লাগবে। আর নোডজেএস এর বিল্টইন ডিপেন্ডেন্সি হিসেবে আমাদের লাগবে path & url

এখন মুল ফাংশন লেখার পালা।

main function

এখানে আমরা শুরুতেই একটা win নামের ভ্যারিয়েবল নিয়ে নিয়েছি। তারপর আমাদের এপ যখন অন হবে তখন আমরা সেই win এর ভিতর নতুন একটা ব্রাউজার উইন্ডো ডিক্লিয়ার করে দিচ্ছি। ব্রাউজার উইন্ডো ফাংশন অবজেক্ট কে প্যারামিটার হিসেবে নেয়। তো আমরা তার ভিতরে আমাদের নতুন উইন্ডোর width & height ডিফাইন করে দিলাম। তারপরের লাইনে উইন্ডো যখন লোড হবে তখন আমাদের ফ্রন্টেন্ড ফাইল হিসেবে index.html ফাইল ডিফাইন করে দিয়েছি। এখানে আমরা চাইলেই ‘./index.html’ দিতে পারতাম কিন্তু ইলেক্ট্রন যেহেতু ডেক্সটপ এপ্লিকেশন হিসেবে ওপেন হচ্ছে তাই ./ কে ও আমাদের রুট ডিরেক্টরী হিসেবে ধরে নেবে। যেমন আমার রুট ডিরেক্টরি হলো /viki/home তাই আমাদের পাথনেম আমাদের কারেন্ট ডিরেক্টরীনেমের সাথে index.html ফাইল এর লোকেশন জয়েন করে দিতে হবে। আর যেহেতু ফাইল পাস করবো তাই প্রোটোকল হবে ফাইল। এবং সবশেষের ফাংশনটা হলো, আমরা যখন এপ ক্লোজ করবো তখন আমাদের win নামের ভ্যারিয়েবল টা নাল করে দেয়ার জন্য।

আমাদের কাজ প্রায় শেষ। আর দুইটা জিনিশ করতে হবে।

এখন আমাদের আরেকটা ফাংশন লিখতে হবে ম্যাক এর জন্য। কারন ম্যাকে command+w প্রেস করলে রানিং এপের সব উইন্ডো ফোর্স ক্লোজ হয়ে যায়।

ম্যাকের জন্য লেখা ফাংশন

এখন সর্বশেষ কাজটা বাকি আমাদের। সেটা হলো আমাদের ফ্রন্টএন্ড তৈরি করা।

নতুন একটা index.html ফাইল তৈরি করবো। এবং তার ভিতরে আমরা নিচের কোডগুলো লিখে ফেলি

index.html file

সব শেষ। এবার আমাদের এপ রান করানোর পালা।

ওয়ার্ক টার্মিনাল ওপেন করে নিচের কমান্ড টি দিন।

npm start

ব্যাস। তাহলেই আমাদের বানানো ডেক্সটপ এপ্লিকেশন এর ডেভ ভার্সন চালু হয়ে যাবে। এখন আপনি চাইলেই index.html এ আপনার পছন্দমত কোড করে ফ্রন্টএন্ড কে ডেকোরেট করতে পারেন। চাইলে css ও এড করতে পারেন।

এটা আপনাদের সাথে বানানো আমার ডেক্সটপ Hello World এপ্লিকেশন 😃

অনেক হলো, আজ আর না। সকালে আমার ক্লাশ আছে। তাই কিভাবে এক্সিকিউটেবল ফাইল বানাতে হবে তা আগামী পর্বে লিখবো। সবাইকে আজকের মত ধন্যবাদ।

আল্লাহ হাফেজ। 😃

প্রোগ্রামিং পাতা

সহজ বাংলায় প্রোগ্রামিং জ্ঞান ছড়িয়ে দেয়ার প্রত্যয়ে

Jobayer Ahmed Mickey

Written by

Front-end Developer | UI/UX Designer | Amateur Blogger | Speed Cubist

প্রোগ্রামিং পাতা

সহজ বাংলায় প্রোগ্রামিং জ্ঞান ছড়িয়ে দেয়ার প্রত্যয়ে

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade