शक्तिशाली एक्सेल ऐड-इन्स बनाएं: चरण-दर-चरण जावास्क्रिप्ट गाइड

चरण 1. अपना विकास वातावरण सेट करें

पूर्वापेक्षाएँ इंस्टॉल और डाउनलोड करें:

• Node.js इंस्टॉल करें:
  • Node.js डाउनलोड और इंस्टॉल करें।
• VS Code इंस्टॉल करें:
  • विजुअल स्टूडियो कोड डाउनलोड और इंस्टॉल करें।
• ऑफिस ऐड-इन CLI इंस्टॉल करें:
  • पावरशेल या टर्मिनल खोलें और चलाएं:

npm install -g yo generator-office

• एक्सेल इंस्टॉल करें:
  • सुनिश्चित करें कि आपके पास एक्सेल 2016 या बाद का संस्करण है (ऑफिस 365 अनुशंसित)।
  • हम MS ऑफिस 365 का उपयोग कर रहे हैं।

चरण 2: एक नया ऐड-इन प्रोजेक्ट बनाएं

• पावरशेल या कमांड प्रॉम्प्ट खोलें और व्यवस्थापक के रूप में चलाएं।
• अपना ऑफिस ऐड-इन प्रोजेक्ट बनाने के लिए निम्न कमांड चलाएं:

• यह कमांड जारी रखें या बाहर निकलें का संकेत देगा।
• अपने ऑफिस ऐड-इन प्रोजेक्ट के सेटअप के साथ आगे बढ़ने के लिए जारी रखें चुनें।
  • तीर कुंजियों का उपयोग करके जारी रखें चुनें और एंटर दबाएं।

• अगला, यह आपके द्वारा बनाए जाने वाले ऐड-इन के प्रकार के बारे में प्रश्नों की एक श्रृंखला संकेत देगा।
  • एक प्रोजेक्ट प्रकार चुनें:
    • टास्क पेन ऐड-इन चुनें (तीर कुंजियों का उपयोग करें और एंटर दबाएं)।
  • एक स्क्रिप्ट प्रकार चुनें:
    • अपनी प्राथमिकता के आधार पर जावास्क्रिप्ट या टाइपस्क्रिप्ट चुनें।
  • आप अपने ऐड-इन का नाम क्या रखना चाहते हैं?
    • अपने प्रोजेक्ट के लिए नाम टाइप करें (उदाहरण: CustomAddin)।
  • आप किस ऑफिस क्लाइंट एप्लिकेशन का समर्थन करना चाहेंगे?
    • एक्सेल चुनें।

• जनरेटर के पूरा होने की प्रतीक्षा करें। जनरेटर सभी आवश्यक फ़ाइलों के साथ एक प्रोजेक्ट फ़ोल्डर सेट करेगा। प्रोजेक्ट में निम्न फ़ाइलें होंगी:
  • taskpane.html: टास्क पेन का UI।
  • taskpane.js: आपके टास्क पेन के लिए जावास्क्रिप्ट कोड।
  • manifest.xml: ऑफिस को आपके ऐड-इन का वर्णन करता है।

चरण 3: विजुअल स्टूडियो कोड में प्रोजेक्ट खोलें

सेटअप पूरा करने के बाद, आप टर्मिनल का उपयोग करके प्रोजेक्ट फ़ोल्डर खोल सकते हैं या सीधे VS कोड में खोल सकते हैं। yo office कमांड चलाने पर Yeoman वर्तमान निर्देशिका में एक फ़ोल्डर बनाता है। फ़ोल्डर का नाम आपके द्वारा पहले निर्दिष्ट ऐड-इन प्रोजेक्ट का नाम होगा (उदाहरण: CustomAddin)।

टर्मिनल में प्रोजेक्ट फ़ोल्डर पर नेविगेट करें:

• अपने पावरशेल या कमांड प्रॉम्प्ट में, प्रोजेक्ट फ़ोल्डर में जाने के लिए cd (डायरेक्टरी बदलें) कमांड का उपयोग करें।
• प्रोजेक्ट फ़ोल्डर में जाने के लिए निम्न कमांड डालें

फोल्डर को विजुअल स्टूडियो कोड में खोलें:

• एक बार जब आप प्रोजेक्ट फ़ोल्डर में हों, तो आप इसे सीधे टर्मिनल से विजुअल स्टूडियो कोड में खोल सकते हैं।
• VS कोड में फ़ोल्डर खोलने के लिए निम्न कमांड चलाएं:

• यह पूरे प्रोजेक्ट को विजुअल स्टूडियो कोड में खोल देगा।

आप प्रोजेक्ट फ़ोल्डर को सीधे विजुअल स्टूडियो में खोल सकते हैं:

• फाइल एक्सप्लोरर (विंडोज) या फाइंडर (मैक) खोलें और उस फ़ोल्डर पर नेविगेट करें जहां Yeoman ने आपका ऐड-इन प्रोजेक्ट बनाया था।
• प्रोजेक्ट फ़ोल्डर (उदाहरण: CustomAddin) पर राइट-क्लिक करें >> कोड के साथ खोलें चुनें यदि आपके पास विजुअल स्टूडियो कोड इंस्टॉल है।
• वैकल्पिक रूप से, आप विजुअल स्टूडियो कोड खोल सकते हैं, फ़ाइल टैब पर जाएं >> फ़ोल्डर खोलें चुनें, और अपना प्रोजेक्ट फ़ोल्डर चुनें।

चरण 3. रियल-टाइम मुद्रा कनवर्टर बनाना

एक बार प्रोजेक्ट VS कोड में खुल जाने पर, आप ऐड-इन का संपादन और निर्माण शुरू कर सकते हैं:

निर्भरताएँ इंस्टॉल करें:

यदि आपने पहले से आवश्यक निर्भरताएँ (जैसे Office.js) इंस्टॉल नहीं की हैं, तो VS कोड में एक टर्मिनल खोलें और निम्न कमांड चलाएं।

VS कोड में taskpane.html और taskpane.js अपडेट करें

अब, आप src/ फ़ोल्डर में HTML, जावास्क्रिप्ट और CSS फ़ाइलों को संपादित करके ऐड-इन की कार्यक्षमता और उपस्थिति को परिभाषित कर सकते हैं।

आइए taskpane.html को अपने ऐड-इन के यूजर इंटरफेस को डिजाइन करने के लिए संशोधित करें, और taskpane.js को इंटरैक्टिविटी जोड़ने के लिए अपडेट करें (उदाहरण: एक्सेल के साथ इंटरैक्ट करने वाले फ़ंक्शन)।

taskpane.html संशोधित करें:

taskpane.html खोलें और मौजूदा सामग्री को निम्न से बदलें:

<!DOCTYPE html> <html> <head> <title>मुद्रा कनवर्टर</title> <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script> <script src="./taskpane.js"></script> </head> <body> <h2>मुद्रा कनवर्टर</h2> <label for="fromCurrency">से:</label> <input id="fromCurrency" type="text" placeholder="उदाहरण, USD" /> <br> <label for="toCurrency">को:</label> <input id="toCurrency" type="text" placeholder="उदाहरण, EUR" /> <br> <button id="convertButton">कनवर्ट करें</button> <p id="status"></p> </body> </html>

व्याख्या:

• <head> अनुभाग:
  • <title>: पृष्ठ का शीर्षक "मुद्रा कनवर्टर" सेट करता है।
  • <script>:
    • ऑफिस ऐड-इन एकीकरण के लिए office.js शामिल करता है।
    • कस्टम जावास्क्रिप्ट कार्यक्षमता के लिए taskpane.js लिंक करता है।

• <body> अनुभाग:
  • <h2>: "मुद्रा कनवर्टर" शीर्षक प्रदर्शित करता है।
  • <label> और <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 = "कृपया वैध मुद्राएं दर्ज करें।";
return;
}
try {
const apiKey = "Your_Api_Key"; // अपने ExchangeRates API कुंजी से बदलें
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 = `${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 = `${toCurrency} में सफलतापूर्वक परिवर्तित।`;
await context.sync();
});
} catch (error) {
console.error(error);
document.getElementById('status').innerText = "रूपांतरण दर प्राप्त करने में त्रुटि।";
}
}

व्याख्या:

• Office.onReady: ऑफिस वातावरण तैयार होने पर ऐड-इन को आरंभ करता है।
• convertCurrency फ़ंक्शन:
  • इनपुट मुद्राएं पढ़ता है (fromCurrency और toCurrency)।
  • इनपुट मान्य करता है और API के माध्यम से विनिमय दर प्राप्त करता है।
  • चयनित एक्सेल सेल पर रूपांतरण लागू करने के लिए Excel.run का उपयोग करता है।
  • टास्क पेन में सफलता या त्रुटि संदेश प्रदर्शित करता है।
• त्रुटि प्रबंधन: API या एक्सेल रनटाइम त्रुटियों को पकड़ता है और लॉग करता है, उपयोगकर्ता प्रतिक्रिया प्रदान करता है।

चरण 4. अपने ऐड-इन का परीक्षण करें

आइए ऐड-इन का परीक्षण करें कि यह एक्सेल में कैसे काम करता है।

• यदि आप प्रोजेक्ट फ़ोल्डर में नहीं हैं, तो टर्मिनल में अपने प्रोजेक्ट फ़ोल्डर पर नेविगेट करें:
• VS कोड टर्मिनल में निम्न कमांड चलाएं।

• विकास सर्वर शुरू करने के लिए, निम्न कमांड चलाएं।

• यह एक प्रश्न संकेत देगा: "? Microsoft Edge WebView के लिए लोकलहोस्ट लूपबैक की अनुमति दें?"
• टाइप करें: हाँ

यह कमांड एक्सेल फ़ाइल लॉन्च करेगी।

• एक्सेल खुलेगा, और ऐड-इन स्वचालित रूप से टास्क पेन में लोड हो जाएगा।
  • स्रोत मुद्रा में मान वाले सेल की एक रेंज चुनें।
  • हमने सेल A2:A10 चुना।
  • से बॉक्स में: USD डालें और को बॉक्स में: EUR डालें।
  • कनवर्ट करें पर क्लिक करें।

चरण 5: ऐड-इन तैनात करें

आप इसे ऑफिस 365 पर तैनात कर सकते हैं या अपने संगठन के भीतर उपयोग के लिए साझा कर सकते हैं। आप ऐड-इन को पैकेज करके और ऑफिस स्टोर पर अपलोड करके ऐसा कर सकते हैं।

ऐड-इन को पैकेज करने का तरीका यहां दिया गया है:

• टर्मिनल में, चलाएं:

• यह आपके ऐड-इन का प्रोडक्शन बिल्ड बनाएगा, जिसे आप वेब सर्वर पर होस्ट कर सकते हैं या Azure जैसी क्लाउड सेवा पर अपलोड कर सकते हैं।

सामान्य वातावरण सेटअप मुद्दे और समाधान

• स्क्रिप्ट निष्पादन नीति त्रुटि (npm.ps1 लोड नहीं किया जा सकता)
  • समाधान: निष्पादन नीति सेट करके चलाएं:

Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned

• yo कमांड पहचाना नहीं गया
  • समाधान: निम्न चलाकर सुनिश्चित करें कि Yeoman सही ढंग से इंस्टॉल है:

• • इंस्टॉलेशन सत्यापित करने के लिए चलाएं:

• पैकेज इंस्टॉल करते समय अनुमति समस्याएं
  • समाधान: पावरशेल या कमांड प्रॉम्प्ट को व्यवस्थापक के रूप में चलाएं, या इंस्टॉलेशन के दौरान --force फ्लैग का उपयोग करें।

निष्कर्ष

उपरोक्त चरण का पालन करके, आप एक्सेल में एक मुद्रा कनवर्टर ऐड-इन बना सकते हैं। हमने विकास वातावरण सेट करने, ऐड-इन बनाने, और जावास्क्रिप्ट के साथ कार्यक्षमता लागू करने के विस्तृत चरणों को कवर किया। आप अधिक उन्नत सुविधाएँ जोड़कर इस ऐड-इन कार्यक्षमता को और बढ़ा सकते हैं।