জাভাস্ক্রিপ্ট দিয়ে বানিয়ে নিন ডেক্সটপ এপ - TrickNow24.Com
TipNow24.Com
আমাদের সাইটে ভিজিট করার জন্য আপনাকে ধন্যবাদ। প্রতিটা টিউনে লাইক এবং আপনার মন্তব্য দেয়ার চেষ্টা করবেন।
Post Creator Info
Contributor
Online

This author may not interusted to share anything with others
Home » Uncategorized » জাভাস্ক্রিপ্ট দিয়ে বানিয়ে নিন ডেক্সটপ এপ
জাভাস্ক্রিপ্ট দিয়ে বানিয়ে নিন ডেক্সটপ এপ

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

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

node -v

এবং

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

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

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

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

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

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

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

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

npm init

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

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

npm i -D electron

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

npm i --save browser-window

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

“start”: “electron .”

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

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

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

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

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

const {app} = require(electron),
{BrowserWindow} = require(electron);
view rawapp.js hosted with ❤ by GitHub
app.js ফাইলের ভিতরে

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

app.on(ready, () => {
//Create a new Browser Window
//Load the content
});
view rawapp.js hosted with ❤ by GitHub
app.js ফাইলের ভিতরে

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

//Create a new Browser Window
const mainWindow = new BrowserWindow({
width: 800,
height: 600
});
view rawapp.js hosted with ❤ by GitHub
app.js ফাইলের ভিতরে

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

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

npm start

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

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

//Load the content
mainWindow.loadURL(`file://${__dirname}/public/index.html`);
view rawapp.js hosted with ❤ by GitHub
app.js ফাইলের ভিতরে

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

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

<html>
<head>
<title>A Demp Electron Apptitle>
head>
<body>
<p>It is working!p>
body>
html>
view rawindex.html hosted with ❤ by GitHub
public/index.html ফাইলের ভিতরে

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

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

const {app} = require(electron),
{BrowserWindow} = require(electron);
app.on(ready, () => {
//Your main code will be here
const mainWindow = new BrowserWindow({
width: 800,
height: 600
});
//Load the content
mainWindow.loadURL(`file://${__dirname}/public/index.html`);
});
view rawapp.js hosted with ❤ by GitHub
app.js এর ফাইনাল ভার্শন

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

var app = require(electron).app,
BrowserWindow = require(electron).BrowserWindow;
app.on(ready, function() {
//Your main code will be here
var mainWindow = new BrowserWindow({
width: 800,
height: 600
});
//Load the content
mainWindow.loadURL(file:// + __dirname + /public/index.html);
});
view rawapp-es5.js hosted with ❤ by GitHub
app-es5.js এর ফাইনাল ভার্শন

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

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

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

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

//Load the content
mainWindow.loadURL(https://with.zonayed.me);
view rawapp.js hosted with ❤ by GitHub
app.js ফাইলের ভিতরে
URL লোড করলে

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

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

npm i -g electron-packager

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

electron-packager .

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

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

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

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

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

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

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

উইন্ডোজঃ

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

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

লিনাক্সঃ

Read More


Post Date: August 13, 2019 Total: 199 Views

2 responses to “জাভাস্ক্রিপ্ট দিয়ে বানিয়ে নিন ডেক্সটপ এপ”

  1. MD Shohel Rana Administrator
    says:

    স্বাগতম পোষ্টি আমাদের সাইটে করার জন্য।
    Tipsnow24 এর সাথেই থাকুন…
    [ধন্যবাদ]

Leave a Reply on TrickNow24.Com

You must be to post comment.

HIDE TrickNow24.Com - Info Center
Copyright © 2018 All rights reserved.