Figma प्लगइन बॉयलरप्लेट

यह एक उदाहरण कार्यान्वयन और बॉयलरप्लेट है जिसे उन Figma प्लगइन डेवलपर्स के लिए एक प्रारंभिक बिंदु के रूप में डिज़ाइन किया गया है जो Dodo Payments लाइसेंस कुंजी API को अपने प्लगइनों तक पहुँच प्रदान करने के लिए एकीकृत करना चाहते हैं। यह टेम्पलेट पूर्ण लाइसेंस कुंजी सत्यापन और सक्रियण कार्यक्षमता का प्रदर्शन करता है, जो आपको प्रीमियम Figma प्लगइनों को अंतर्निहित लाइसेंसिंग के साथ बनाने के लिए आवश्यक सब कुछ प्रदान करता है।

विशेषताएँ

लाइसेंस कुंजी सत्यापन: Dodo Payments API के खिलाफ लाइसेंस कुंजी की सत्यापन करता है
लाइसेंस कुंजी सक्रियण: उपयोगकर्ता पहचान के साथ लाइसेंस कुंजी को सक्रिय करता है
पर्यावरण समर्थन: परीक्षण और लाइव वातावरण के लिए कॉन्फ़िगर करने योग्य
CORS प्रॉक्सी: CORS प्रतिबंधों को संभालने के लिए Cloudflare वर्कर प्रॉक्सी का उपयोग करता है
TypeScript समर्थन: उचित त्रुटि हैंडलिंग के साथ पूरी तरह से टाइप किया गया कार्यान्वयन

प्रारंभ करना

Create Base Plugin

अपने स्वयं के Figma plugin परियोजना को Figma’s plugin quickstart guide का उपयोग करके बनाएँ। यह manifest.json फ़ाइल के साथ एक scaffold बनाएगा।

यह चरण केवल आपके plugin के लिए एक अद्वितीय नाम और ID प्राप्त करने के लिए है। आप अगले चरण में ID और नाम को git repository में commit करने के बाद उत्पन्न फ़ाइलों को हटाकर अनदेखा कर सकते हैं।

Clone the Example Implementation

dodopayments-figma repository को clone करें और इसके manifest.json को अपने उत्पन्न plugin फ़ोल्डर से प्राप्त नाम और ID से अपडेट करें।

git clone https://github.com/dodopayments/dodopayments-figma.git
cd dodopayments-figma

यह उदाहरण आपके एकीकरण के लिए प्रारंभिक बिंदु के रूप में कार्य करता है।

Version control के लिए आपको remote origin URL को अपने repository में बदलने की आवश्यकता है।

Install Dependencies

अपने project root में निम्न कमांड चलाएँ:

npm install

Configure Environment

API_MODE को src/ui/api.ts में सेट करें:

const API_MODE = "test_mode"; // for development
// const API_MODE = "live_mode"; // for production

वास्तविक भुगतान संसाधित करने से बचने के लिए विकास के दौरान हमेशा test_mode का उपयोग करें।

Customize Components

अपनी आवश्यकताओं के अनुसार plugin घटकों को अनुकूलित करें:

Authenticated.tsx को अपडेट करें ताकि मान्य license keys वाले उपयोगकर्ताओं के लिए कार्यक्षमता उपलब्ध हो
LicenseKeyInput.tsx को अपने डिज़ाइन प्राथमिकताओं के अनुसार अनुकूलित करें

Authenticated.tsx घटक वह स्थान है जहाँ आप अपने plugin की वे प्रीमियम सुविधाएँ जोड़ेंगे जिन्हें मान्य license की आवश्यकता होती है।

कॉन्फ़िगरेशन

Configure Network Access

CORS proxy के साथ संचार करने के लिए plugin को नेटवर्क एक्सेस की आवश्यकता है। अपने manifest.json में निम्नलिखित जोड़ें:

{
  "networkAccess": {
    "allowedDomains": ["https://dodo-payments-proxy.aagarwal9782.workers.dev"]
  }
}

यह प्लगइन को Dodo Payments API का उपयोग करके लाइसेंस कुंजी को मान्य और सक्रिय करने की अनुमति देता है।

CORS proxy आवश्यक है क्योंकि Dodo Payments API वर्तमान में browser-आधारित अनुप्रयोगों से API कॉल की अनुमति नहीं देता है।

Configure API Mode

src/ui/api.ts में API मोड कॉन्फ़िगर करें:

const API_MODE = "test_mode"; // or "live_mode"

केवल तब live_mode में स्विच करें जब आप production के लिए तैयार हों और test mode में पूरी तरह परीक्षण कर चुके हों।

विकास

Import Plugin

Figma डेस्कटॉप ऐप से “Import Manifest” का उपयोग करके plugin को इम्पोर्ट करें।

स्थानीय रूप से plugin विकसित और परीक्षण करने के लिए आपके पास Figma डेस्कटॉप ऐप इंस्टॉल होना चाहिए।

Start Development Server

npm run dev

यह स्वचालित पुनर्निर्माण के लिए फ़ाइल देखना के साथ विकास सर्वर शुरू करता है।

जब आप स्रोत कोड में परिवर्तन करेंगे, तो आपका plugin स्वचालित रूप से फिर से बन जाएगा।

निर्माण आदेश

Command	Description
`npm run build`	production के लिए plugin बनाएं
`npm run dev`	फ़ाइल निगरानी के साथ development सर्वर शुरू करें
`npm run lint`	कोड शैली और त्रुटियों की जांच करें
`npm run format`	Prettier से कोड को स्वरूपित करें

लाइसेंस कुंजी एकीकरण

उदाहरण कार्यान्वयन में पूर्ण लाइसेंस कुंजी सत्यापन और सक्रियण शामिल है जिसे आप अपने प्लगइन के लिए अनुकूलित कर सकते हैं:

उपयोगकर्ता इनपुट: उपयोगकर्ता अपने लाइसेंस कुंजी को प्लगइन UI में दर्ज करते हैं
सत्यापन: प्लगइन कुंजी को Dodo Payments API के खिलाफ सत्यापित करता है
सक्रियण: मान्य कुंजी उपयोगकर्ता पहचान के साथ सक्रिय होती हैं
एक्सेस नियंत्रण: मान्य लाइसेंस धारकों के लिए प्लगइन कार्यक्षमता अनलॉक होती है

प्रकाशन

जब आपका प्लगइन तैयार हो:

production के लिए बिल्ड करें: npm run build
test और live मोड दोनों में पूरी तरह परीक्षण करें
Figma’s plugin publishing guidelines का पालन करें
Figma Community के माध्यम से समीक्षा के लिए सबमिट करें

रिपॉजिटरी

पूर्ण उदाहरण कार्यान्वयन उपलब्ध है: github.com/dodopayments/dodopayments-figma इसे Dodo Payments लाइसेंस कुंजी एकीकरण के साथ अपना खुद का प्रीमियम Figma प्लगइन बनाने के लिए प्रारंभिक बिंदु के रूप में उपयोग करें.

​विशेषताएँ

​प्रारंभ करना

​कॉन्फ़िगरेशन

​विकास

​निर्माण आदेश

​लाइसेंस कुंजी एकीकरण

​प्रकाशन

​रिपॉजिटरी

विशेषताएँ

प्रारंभ करना

कॉन्फ़िगरेशन

विकास

निर्माण आदेश

लाइसेंस कुंजी एकीकरण

प्रकाशन

रिपॉजिटरी