শক্তিশালী এক্সেল অ্যাড-ইন তৈরি করুন: ধাপে ধাপে JavaScript গাইড

কাস্টম অ্যাড-ইন এক্সেলের কার্যকারিতা প্রসারিত করার জন্য একটি শক্তিশালী টুল। আপনি আপনার অ্যাড-ইন তৈরি করতে পারেন রিপিটেটিভ টাস্ক অটোমেট করতে, কাস্টম ফাংশন তৈরি করতে, বা ব্যবহারকারীদের ইউনিক টুল প্রদান করতে। এই নিবন্ধে, আমরা উন্নত কার্যকারিতার জন্য কাস্টম অ্যাড-ইন তৈরি করব।

এই টিউটোরিয়াল আপনাকে গাইড করবে JavaScript এবং Office Add-ins ফ্রেমওয়ার্ক ব্যবহার করে একটি কাস্টম এক্সেল অ্যাড-ইন বিল্ড করার মাধ্যমে। ExchangeRates API ব্যবহার করে আমরা একটি কারেন্সি কনভার্টার অ্যাড-ইন বিল্ড করব।

ধাপ ১. আপনার ডেভেলপমেন্ট এনভায়রনমেন্ট সেট আপ করুন

পূর্বশর্তগুলো ইনস্টল এবং ডাউনলোড করুন:

• Install Node.js:
  • Node.js ডাউনলোড এবং ইনস্টল করুন।
• Install VS Code:
  • Visual Studio Code ডাউনলোড এবং ইনস্টল করুন।
• Install Office Add-in CLI:
  • PowerShell বা টার্মিনাল খুলুন এবং রান করুন:

npm install -g yo generator-office

• Install Excel:
  • নিশ্চিত করুন আপনার কাছে Excel 2016 বা তার পরবর্তী ভার্সন আছে (Office 365 রিকমেন্ডেড)।
  • আমরা MS Office 365 ব্যবহার করছি।

ধাপ ২: একটি নতুন অ্যাড-ইন প্রজেক্ট তৈরি করুন

• PowerShell বা Command Prompt খুলুন এবং Run as Administrator করুন।
• আপনার Office Add-in প্রজেক্ট তৈরি করতে নিচের কমান্ড রান করুন:

• এই কমান্ড Continue বা Exit প্রম্পট করবে।
• আপনার Office Add-in প্রজেক্টের সেটআপ প্রসিড করতে Continue সিলেক্ট করুন।
  • অ্যারো কি ব্যবহার করে Continue সিলেক্ট করুন এবং Enter চাপুন।

• এরপর, এটি আপনি কী টাইপের অ্যাড-ইন তৈরি করতে চান সেটি নিয়ে প্রশ্নের একটি সিরিজ প্রম্পট করবে।
  • Choose a project type:
    • Task pane add-in বেছে নিন (অ্যারো কি ব্যবহার করে এবং Enter চাপুন)।
  • Choose a script type:
    • আপনার পছন্দ অনুযায়ী JavaScript বা TypeScript বেছে নিন।
  • What do you want to name your add-in?
    • আপনার প্রজেক্টের জন্য একটি নাম টাইপ করুন (যেমন: CustomAddin)।
  • Which Office client application would you like to support?
    • Excel সিলেক্ট করুন।

• জেনারেটর কমপ্লিট হওয়ার জন্য অপেক্ষা করুন। জেনারেটর সমস্ত প্রয়োজনীয় ফাইলসহ একটি প্রজেক্ট ফোল্ডার সেট আপ করবে। প্রজেক্টে নিচের ফাইলগুলো থাকবে:

• • taskpane.html: টাস্ক প্যানের UI।
  • taskpane.js: আপনার টাস্ক প্যানের জন্য JavaScript কোড।
  • manifest.xml: আপনার অ্যাড-ইনকে Office-এ বর্ণনা করে।

ধাপ ৩: ভিজ্যুয়াল স্টুডিও কোডে প্রজেক্ট খুলুন

সেটআপ কমপ্লিট হলে, আপনি টার্মিনাল ব্যবহার করে প্রজেক্ট ফোল্ডার খুলতে পারেন বা সরাসরি VS Code-এ খুলতে পারেন। প্রজেক্ট তৈরি করার সময়, Yeoman করেন্ট ডিরেক্টরিতে একটি ফোল্ডার তৈরি করে যেখানে আপনি yo office কমান্ড রান করেছিলেন। ফোল্ডারের নাম হবে আপনি যেটি আগে আড-ইন প্রজেক্টের নাম দিয়েছিলেন (যেমন: CustomAddin)।

টার্মিনালে প্রজেক্ট ফোল্ডারে নেভিগেট করুন:

• আপনার PowerShell বা Command Prompt-এ, cd (change directory) কমান্ড ব্যবহার করে প্রজেক্ট ফোল্ডারে যান।
• প্রজেক্ট ফোল্ডারে যেতে নিচের কমান্ড ইনসার্ট করুন

Visual Studio Code-এ ফোল্ডার খুলুন:

• একবার আপনি প্রজেক্ট ফোল্ডারে হলে, আপনি টার্মিনাল থেকে সরাসরি Visual Studio Code-এ খুলতে পারেন।
• ফোল্ডার VS Code-এ খুলতে নিচের কমান্ড রান করুন:

• এটি পুরো প্রজেক্টকে Visual Studio Code-এ খুলবে।

আপনি প্রজেক্ট ফোল্ডারকে সরাসরি Visual Studio-এ খুলতে পারেন:

• File Explorer (Windows) বা Finder (Mac) খুলুন এবং সেখানে নেভিগেট করুন যেখানে Yeoman আপনার অ্যাড-ইন প্রজেক্ট তৈরি করেছিল।
• প্রজেক্ট ফোল্ডারে (যেমন: CustomAddin) Right-click » Open with Code সিলেক্ট করুন যদি আপনার Visual Studio Code ইনস্টল্ড থাকে।
• বিকল্পভাবে, আপনি Visual Studio Code খুলতে পারেন, File ট্যাবে যান » Open Folder সিলেক্ট করুন, এবং আপনার প্রজেক্ট ফোল্ডার সিলেক্ট করুন।

ধাপ ৩. রিয়েল-টাইম কারেন্সি কনভার্টার তৈরি করুন

প্রজেক্ট VS Code-এ খুলা হলে, আপনি এডিট এবং আপনার অ্যাড-ইন বিল্ড করা শুরু করতে পারেন:

Install Dependencies:

যদি আপনি ইতিমধ্যে প্রয়োজনীয় ডিপেন্ডেন্সি (যেমন Office.js) ইনস্টল না করে থাকেন, VS Code-এ একটি টার্মিনাল খুলুন এবং নিচের কমান্ড রান করুন।

VS Code-এ taskpane.html এবং taskpane.js আপডেট করুন

এখন, আপনি src/ ফোল্ডারের HTML, JavaScript, এবং CSS ফাইলগুলো এডিট করতে পারেন আপনার অ্যাড-ইনের কার্যকারিতা এবং চেহারা ডিফাইন করতে।

চলুন taskpane.html মডিফাই করি আপনার অ্যাড-ইনের ইউজার ইন্টারফেস ডিজাইন করতে, এবং taskpane.js আপডেট করি ইন্টারঅ্যাক্টিভিটি যোগ করতে (যেমন: এক্সেলের সাথে ইন্টারঅ্যাক্ট করার ফাংশন)।

Modify taskpane.html:

taskpane.html খুলুন এবং এক্সিস্টিং কন্টেন্টকে নিচের কন্টেন্ট দিয়ে রিপ্লেস করুন:

<!DOCTYPE html> <html> <head> <title>Currency Converter</title> <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script> <script src="./taskpane.js"></script> </head> <body> <h2>Currency Converter</h2> <label for="fromCurrency">From:</label> <input id="fromCurrency" type="text" placeholder="e.g., USD" /> <br> <label for="toCurrency">To:</label> <input id="toCurrency" type="text" placeholder="e.g., EUR" /> <br> <button id="convertButton">Convert</button> <p id="status"></p> </body> </html>

ব্যাখ্যা:

• <head> Section:
  • <title>: পেজের টাইটেল সেট করে “Currency Converter” হিসেবে।
  • <script>:
    • Office Add-in ইন্টিগ্রেশনের জন্য office.js ইনক্লুড করে।
    • taskpane.js লিংক করে কাস্টম JavaScript ফাংশন্যালিটির জন্য।

• <body> Section:
  • <h2>: “Currency Converter” হেডিং প্রদর্শন করে।
  • <label> and <input>: ইউজার ইনপুটের জন্য ফিল্ড (fromCurrency এবং toCurrency)।
  • <button>: কারেন্সি কনভারশন ট্রিগার করে।
  • <p>: স্ট্যাটাস মেসেজ বা এরর প্রদর্শন করে।

এই লেয়াউট আপনার এক্সেল অ্যাড-ইনের ইউজার ইন্টারফেস তৈরি করে।

taskpane.js-এ লজিক যোগ করুন:

taskpane.js খুলুন এবং এক্সিস্টিং কন্টেন্টকে এই কোড দিয়ে রিপ্লেস করুন:

Office.onReady(() => { document.getElementById('convertButton').addEventListener('click', convertCurrency); }); async function convertCurrency() { const fromCurrency = document.getElementById('fromCurrency').value.toUpperCase(); const toCurrency = document.getElementById('toCurrency').value.toUpperCase(); if (!fromCurrency || !toCurrency) { document.getElementById('status').innerText = "Please enter valid currencies."; return; } try { const apiKey = "Your_Api_Key"; // Replace with your ExchangeRates API key const url = `https://api.exchangerate-api.com/v4/latest/${fromCurrency}`; const response = await fetch(url); const data = await response.json(); const rate = data.rates[toCurrency]; if (!rate) { document.getElementById('status').innerText = `Invalid conversion rate for ${toCurrency}.`; return; } await Excel.run(async (context) => { const range = context.workbook.getSelectedRange(); range.load("values"); await context.sync(); const convertedValues = range.values.map(row => row.map(cell => cell * rate) ); range.values = convertedValues; document.getElementById('status').innerText = `Converted to ${toCurrency} successfully.`; await context.sync(); }); } catch (error) { console.error(error); document.getElementById('status').innerText = "Error fetching conversion rate."; } }

ব্যাখ্যা:

• Office.onReady: অফিস এনভায়রনমেন্ট রেডি হলে অ্যাড-ইন ইনিশিয়ালাইজ করে।
• convertCurrency Function:
  • ইনপুট কারেন্সি পড়ে (fromCurrency এবং toCurrency)।
  • ইনপুট ভ্যালিডেট করে এবং API ভিয়া এক্সচেঞ্জ রেট ফেচ করে।
  • Excel.run ব্যবহার করে সিলেক্ট করা এক্সেল সেলগুলিতে কনভারশন প্রয়োগ করে।
  • টাস্ক প্যানে সাকসেস বা এরর মেসেজ ডিসপ্লে করে।
• Error Handling: API বা এক্সেল রানটাইম এরর ক্যাচ এবং লগ করে, ইউজার ফিডব্যাক প্রদান করে।

ধাপ ৪. আপনার অ্যাড-ইন টেস্ট করুন

চলুন অ্যাড-ইন টেস্ট করি দেখতে কীভাবে এটি এক্সেলে কাজ করে।

• আপনি যদি প্রজেক্ট ফোল্ডারে না থাকেন, টার্মিনালে আপনার প্রজেক্ট ফোল্ডারে নেভিগেট করুন:
• VS Code টার্মিনালে নিচের কমান্ড রান করুন।

• ডেভেলপমেন্ট সার্ভার スタ্ট করতে নিচের কমান্ড রান করুন।

• এটি একটি প্রশ্ন প্রম্পট করবে: “? Allow localhost loopback for Microsoft Edge WebView?”
• টাইপ করুন: Yes

এই কমান্ড এক্সেল ফাইল লঞ্চ করবে।

• এক্সেল খুলবে, এবং অ্যাড-ইন অটোমেটিক্যালি টাস্ক প্যানে লোড হবে।
  • সোর্স কারেন্সিতে মানযুক্ত সেলের একটি রেঞ্জ সিলেক্ট করুন।
  • আমরা সেল A2:A10 সিলেক্ট করেছি।
  • From বক্সে: USD ইনসার্ট করুন এবং To বক্সে: EUR ইনসার্ট করুন।
  • Convert-এ ক্লিক করুন।

ধাপ ৫: অ্যাড-ইন ডিপ্লয় করুন

আপনি এটি Office 365-এ ডিপ্লয় করতে পারেন বা আপনার অর্গানাইজেশনে শেয়ার করতে পারেন ব্যবহার করতে। আপনি এটি অ্যাড-ইন প্যাকেজ করে এবং Office Store-এ আপলোড করে করতে পারেন।

এখানে অ্যাড-ইন প্যাকেজ করার পদ্ধতি:

• টার্মিনালে, রান করুন:

• এটি আপনার অ্যাড-ইনের একটি প্রোডাকশন বিল্ড তৈরি করবে, যা আপনি একটি ওয়েব সার্ভারে হোস্ট করতে পারেন বা Azure-এর মতো ক্লাউড সার্ভিসে আপলোড করতে পারেন।

সাধারণ এনভায়রনমেন্ট সেটআপ সমস্যা এবং সমাধান

• Script Execution Policy Error (npm.ps1 cannot be loaded)
  • Solution: এক্সিকিউশন পলিসি সেট করুন রান করে:

Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned

• yo Command Not Recognized
  • Solution: নিশ্চিত করুন Yeoman সঠিকভাবে ইনস্টল্ড আছে রান করে:

• • ইনস্টলেশন ভেরিফাই করতে রান করুন:

• Permission Issues When Installing Packages
  • Solution: PowerShell বা Command Prompt Administrator হিসেবে রান করুন, বা ইনস্টলেশনের সময় –force ফ্ল্যাগ ব্যবহার করুন।

উপসংহার

উপরোক্ত ধাপ অনুসরণ করে, আপনি এক্সেলে একটি Currency Converter অ্যাড-ইন তৈরি করতে পারেন। আমরা কভার করেছি কীভাবে ডেভেলপমেন্ট এনভায়রনমেন্ট সেট আপ করতে হয়, অ্যাড-ইন বিল্ড করতে হয়, এবং JavaScript-এ ফাংশন্যালিটি ইমপ্লিমেন্ট করতে হয়। আপনি এই অ্যাড-ইনের ফাংশন্যালিটি আরও প্রসারিত করতে পারেন আরও অ্যাডভান্সড ফিচার যোগ করে।

Get FREE Advanced Excel Exercises with Solutions!