আমার সাথে

Personal Blog of Zonayed
ইলেকট্রন জাভাস্ক্রিপ্ট প্রোগ্রামিং ফ্রেমওয়ার্ক বাংলা

ক্রস প্ল্যাটফর্ম ডেস্কটপ অ্যাপ বানিয়ে ফেলুন ৫ মিনিটে — ফান প্রোজেক্ট

মার্চ 12, 2018

ইলেকট্রন জেএস

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

নোড আর এনপিএম ইন্সটল আছে কিনা চ্যাক করতে কমান্ড লাইন(সিএমডি বা আপনি যেটা ইউজ করেন) ওপেন করে নিচের কমান্ডগুলো টাইপ করুনঃ

node -v

এবং

npm -v
নোড এবং এনপিএম ভার্শন দেখাচ্ছে, আপনার ভার্শন ভিন্ন হতে পারে

এখানে ভার্শন দেখতে পাবেন। এছাড়া অন্য কোনো এরর দেখলে তাইলে আবার ইন্সটল করে নিন।

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

ইলেকট্রন দিয়ে তৈরী

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

আমি আজকে এখানে যে অ্যাপ বানাবো এটার কাজ হচ্ছে আপনার প্লেইন এইচটিএমএল, সিএসএস এ বানানো একটা ওয়েব টেমপ্লেট রান করবে। মানে আপনি চাইলে আপনার ওয়েবসাইট, আপনার বানানো কোনো ওয়েব অ্যাপ্লিকেশনও এই সিস্টেমে ডেক্সটপ অ্যাপ বানিয়ে ফেলতে পারবেন। আর সবশেষে প্যাকেজ করে উইন্ডোজ, ম্যাক বা লিনাক্সের জন্য রেডি করতে পারবেন।

তাইলে দেরী না করে শুরু করি চলেনঃ

যেখানে কাজ করবেন সে ডিরেক্টরিতে গিয়ে নতুনএকটা ডিরেক্টরি বানিয়ে আপনার কমান্ড লাইন ইন্টারফেস ওপেন করুন। আর নতুন প্রোজেক্ট ইনিশিয়েট করুনঃ

npm init

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

তারপর কমান্ড লাইন থেকে ইলেকট্রন এর প্যাকেজ ডেভ ডিপেন্ডেসি হিসাবে নামিয়ে ফেলুনঃ

npm i -D electron

তারপর ব্রাউজার উইন্ডো প্যাজকেজও ডিপেন্ডিসি হিসাবে নামিয়ে ফেলুন

npm i --save browser-window

ব্যাস, দরকার হলে প্যাকেজ ডট জেসন চ্যাক করে দেখেন সব ঠিক আছে কিনা। আর হ্যা প্যাকেজ ডট জেসনে এই সামান্য এডিট করতে হবে। প্যাকেজ ডট জেসন এর ভিতরে স্ক্রিপ্ট এ এই লাইন অ্যাড করুনঃ

“start”: “electron .”

কপি পেস্ট করবেন না, কারণ কপি পেস্ট করলে “ ” এগুলার মিনিং চ্যাঞ্জ হয়ে যায় যেটার কারণে এরর আসতে পারে।

পরে আরো স্ক্রিপ্ট থাকলে শেষে কমা দিতে ভুলবেন না কিন্তু!

অনেকটা এরকম দেখা যাবেঃ

স্টার্ট স্ক্রিপ্ট থাকতে হবে মাস্ট

ব্যাস এবার সব রেডী। এখন রুট ডিরেক্টরিতে অ্যাপ ডট জেএস(আমি যেহেতু অ্যাপ ডট জেএস দিয়েছি, আপনার ক্ষেত্রে আপনি যেটা দিয়েছেন) ফাইল ক্রিয়েট করুন। ওপেন করুন এবং ইন্সটল করা দুইটা প্যাকেজ রিকোয়ার করুন এভাবেঃ

app.js ফাইলের ভিতরে

ব্যাস এবার এই ফাংশন লিখুন যেটা সরাসরি ইলেকট্রন থেকে এসেছেঃ

app.js ফাইলের ভিতরে

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

app.js ফাইলের ভিতরে

এখন এই ফাংশন দেখার পরে মনে হয় অনেকটাই বুঝে ফেলছেন এখানে কি হচ্ছে! এখানে চিটিং হচ্ছে 😛 হ্যা! ইলেকট্রন ব্রাউজার ইউজ করতেছে, ব্রাউজার যেমন ক্রস প্ল্যাটফর্ম সাপোর্টেড তাই আপনার অ্যাপও সব প্ল্যাটফর্মেই কাজ করবে 😀 এই আর কি।

এই অবস্থায় আসলে আপনি চাইলে আপনার অ্যাপ রান করাতে পারবেন। ঐতো একটু আগে প্যাকেজ ডট জেসনে স্টার্ট স্ক্রিপ্ট রেখেছিলাম। তাই আপনার কমান্ড লাইনে যদি লিখেনঃ

npm start

তাইলে দেখবেন ব্লাঙ্ক একটা অ্যাপ ওপেন হচ্ছে 😉 এটাই আপনার অ্যাপ!

যাই হউক এবার আপনার এই উইন্ডো তে কি লোড করবেন সেটা এটার নিচে ডিফাইন করুন। লোকাল কোনো ফোল্ডার হলেঃ

app.js ফাইলের ভিতরে

আমি রুট ফোল্ডারের ভিতরে পাব্লিক নামে আরেকটা ফোল্ডারে ইন্ডেক্স ডট এইচটিএমএল ফাইল রেখেছি যেটা আমি এখানে লোড করতে চাইঃ

এখন ইন্ডেক্স ডট এইচটিএমএলে কিছু কন্টেন্ট রাখেন ডেমো হিসাবে। এখানে নরমাল একটা ওয়েব টেমপ্লেত/ওয়েবপেজের মতোই সব কাজ করবেঃ

public/index.html ফাইলের ভিতরে

কিন্তু মজার ব্যাপার হলো এখানে স্ক্রিপ্ট ইউজ করলে সেখানে নোড জেএসের ফাংশানিলিটিগুলোও অ্যাক্সেস করতে পারবেন।

যাই হউক সবশেষে আপনার অ্যাপ ডট জেএস এরকম হবেঃ

app.js এর ফাইনাল ভার্শন

আপনি যদি ইএস৬ এ স্বাচ্ছন্দ্যবোধ না করেন তাইলে ইএস৫ এ এরকম হবে কোডঃ

app-es5.js এর ফাইনাল ভার্শন

এবার অ্যাপ রান করে দেখেন একটুঃ

npm start
হ্যা হ্যা!!!

এবার বুঝে ফেলছেন কিভাবে কি করতে হবে 😀 মজার না জিনিসটা? হ্যা আসলেই অনেক মজার। আমি এতোটাই এক্সাইটেড হইছিলাম যে পরীক্ষা বাদ দিয়া ইলেকট্রন গুতাইতেছিলাম 😛

যাই হউক এবার যদি কোনো ওয়েবসাইট মানে ইউআরএল লোড করতে চান তাইলে এই ফাংশন ইউজ করতে হবেঃ

app.js ফাইলের ভিতরে
URL লোড করলে

আর এগুলা সবই এদের ডকুমেন্টেশনে দেওয়া আছে। আপনি ডকুমেন্টেশন দেখলেই বুঝে ফেলবেন সবকিছু।

এবার এটাকে এক্সেটিউবেল ফাইল বানাতে চাই। হ্যা এর জন্যেও প্যাকেজ আছে। জাস্ট এটা ইন্সটল করুনঃ

npm i -g electron-packager

তারপর এটা ইউজ করুন রুট ডিরেক্টরি থেকে সিম্পল ভাবেঃ

electron-packager .

ব্যাস দেখুন এবার আপনার ওয়ার্কিং ডিরেক্টরিতে আপনার এক্সিটিউবেল ফাইল 😀

আপনার .exe ফাইল এটার ভিতরে

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

ফুল প্রোজেক্ট গিটহাব থেকে দেখার জন্যেঃ

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

নোটঃ আপনি যদি উইন্ডোজের প্যাকেজ/ইন্সটলার বানাতে চান তাহলে অবশ্যই প্যাকেজ ম্যানেজার উইন্ডোজ থেকেই রান করতে হবে। সেইম ম্যাকের জন্যে হলে ম্যাকে রান করাতে হবে, লিনাক্সের জন্য হলে লিনাক্সে রান করাতে হবে।মেইন কথা যে ইনভারোমেন্টের জন্য প্যাকেজ বা ইন্সটলার বানাবেন সে ইনভারোমেন্টে ঐটার প্যাকেজ ইন্সটল করে রান করাতেহবে। বাট মেইন ডেভেলপমেন্ট যেকোনো প্ল্যাটফর্ম থেকে করলেই হবে।

আরো গুরুত্বপূর্ন লিঙ্কঃ

উইন্ডোজঃ

  • electron-winstaller — উইন্ডোজ ইন্সটলার ক্রিয়েট করতে
  • electron-windows-store — উইন্ডোজ স্টোরের জন্যে প্যাকেজ বানাতে চাইলে
  • electron-wix-msi — MSI ইন্সটলার বানাতে

ওএস(অ্যাপেল)ঃ

লিনাক্সঃ


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

Comments

comments