एआई टूल्स का उपयोग करके मैं इस एप्लिकेशन को कैसे बनाऊं

प्रेरणा

मैं अपने होम सर्वर के लिए बैकअप टूल के रूप में डुप्लिकाटी का उपयोग शुरू कर दिया। मैंने आधिकारिक डुप्लिकाटी डैशबोर्ड और डुप्लिकाटी मॉनिटरिंग का प्रयास किया, लेकिन मेरी दो मुख्य आवश्यकताएँ थीं: (1) स्व-होस्ट किया गया; और (2) होमपेज के साथ एकीकरण के लिए एक एपीआई एक्सपोज़ किया गया, क्योंकि मैं इसका उपयोग अपने होम लैब के होमपेज के लिए करता हूं।

मैंने नेटवर्क पर प्रत्येक डुप्लिकाटी सर्वर से सीधे कनेक्ट करने का भी प्रयास किया, लेकिन प्रमाणीकरण विधि होमपेज के साथ संगत नहीं थी (या मैं इसे उचित रूप से कॉन्फ़िगर करने में सक्षम नहीं था)।

चूंकि मैं एआई कोड टूल्स के साथ प्रयोग भी कर रहा था, इसलिए मैंने इस टूल को बनाने के लिए एआई का उपयोग करने का निर्णय लिया। यहां मैंने जो प्रक्रिया उपयोग की...

उपयोग किए गए टूल्स

1. यूआई के लिए: गूगल का फायरबेस स्टूडियो
2. कार्यान्वयन के लिए: कर्सर (https://www.cursor.com/)

नोट

मैंने यूआई के लिए फायरबेस का उपयोग किया, लेकिन आप प्रोटोटाइप उत्पन्न करने के लिए v0.app या कोई अन्य टूल का भी उपयोग कर सकते हैं। मैंने कार्यान्वयन उत्पन्न करने के लिए कर्सर का उपयोग किया, लेकिन आप अन्य टूल, जैसे वीएस कोड/कोपायलट, विंडसर्फ, ... का उपयोग कर सकते हैं।

यूआई

मैंने फायरबेस स्टूडियो में एक नया प्रोजेक्ट बनाया और "एआई के साथ ऐप प्रोटोटाइप करें" सुविधा में इस प्रॉम्प्ट का उपयोग किया:

टेलविंड/रिएक्ट का उपयोग करके एक वेब डैशबोर्ड एप्लिकेशन जो एक sqllite3 डेटाबेस में डुप्लिकाटी बैकअप समाधान द्वारा भेजे गए बैकअप परिणाम को एकीकृत करे जो कई मशीनों के --send-http-url (json प्रारूप) विकल्प का उपयोग करता है, बैकअप की स्थिति, आकार, अपलोड आकार को ट्रैक रखे।

डैशबोर्ड के पहले पृष्ठ में प्रत्येक मशीन के अंतिम बैकअप के साथ एक तालिका होनी चाहिए, जिसमें मशीन का नाम, डेटाबेस में संग्रहीत बैकअप की संख्या, अंतिम बैकअप स्थिति, अवधि (घंटा:मिनट:सेकंड), चेतावनियों और त्रुटियों की संख्या शामिल हो।

जब किसी मशीन की पंक्ति पर क्लिक किया जाए, तो चयनित मशीन का विस्तृत पृष्ठ दिखाएं जिसमें संग्रहीत बैकअप की एक सूची (पृष्ठांकित) शामिल हो, जिसमें बैकअप नाम, बैकअप की तिथि और समय शामिल हो, जिसमें यह बताया गया हो कि यह कितना पुराना है, स्थिति, चेतावनियों और त्रुटियों की संख्या, फ़ाइलों की संख्या, फ़ाइलों का आकार, अपलोड किया गया आकार और कुल संग्रहण का आकार शामिल हो। विस्तृत पृष्ठ में ट्रेमर का उपयोग करके इन क्षेत्रों के विकास को दर्शाने वाला एक चार्ट भी शामिल करें: अपलोड किया गया आकार; मिनटों में अवधि, निरीक्षण की गई फ़ाइलों की संख्या, निरीक्षण की गई फ़ाइलों का आकार। चार्ट को एक समय में एक क्षेत्र को प्लॉट करना चाहिए, चयनित क्षेत्र को प्लॉट करने के लिए ड्रॉपबॉक्स के साथ। इसके अलावा चार्ट को डेटाबेस में संग्रहीत सभी बैकअप को प्रस्तुत करना चाहिए, केवल पृष्ठांकित तालिका में दिखाए गए नहीं।

एप्लिकेशन को डुप्लिकाटी सर्वर से पोस्ट प्राप्त करने के लिए एक एपीआई एंडपॉइंट एक्सपोज़ करना चाहिए और एक मशीन के अंतिम बैकअप के सभी विवरण को जेसन के रूप में पुनर्प्राप्त करने के लिए एक अन्य एपीआई एंडपॉइंट।

डिज़ाइन आधुनिक, प्रतिक्रियाशील होना चाहिए और पढ़ना आसान बनाने के लिए आइकन और अन्य दृश्य सहायता शामिल करनी चाहिए। कोड साफ, संक्षिप्त और आसानी से बनाए रखने योग्य होना चाहिए। निर्भरताओं के साथ निपटने के लिए आधुनिक टूल्स जैसे पीएनपीएम का उपयोग करें।

एप्लिकेशन में चुनने योग्य डार्क और लाइट थीम होनी चाहिए।

डेटाबेस को डुप्लिकाटी जेसन द्वारा प्राप्त इन क्षेत्रों को संग्रहीत करना चाहिए:

"{ "Data": { "DeletedFiles": 0, "DeletedFolders": 0, "ModifiedFiles": 0, "ExaminedFiles": 15399, "OpenedFiles": 1861, "AddedFiles": 1861, "SizeOfModifiedFiles": 0, "SizeOfAddedFiles": 13450481, "SizeOfExaminedFiles": 11086692615, "SizeOfOpenedFiles": 13450481, "NotProcessedFiles": 0, "AddedFolders": 419, "TooLargeFiles": 0, "FilesWithError": 0, "ModifiedFolders": 0, "ModifiedSymlinks": 0, "AddedSymlinks": 0, "DeletedSymlinks": 0, "PartialBackup": false, "Dryrun": false, "MainOperation": "Backup", "ParsedResult": "Success", "Interrupted": false, "Version": "2.1.0.5 (2.1.0.5_stable_2025-03-04)", "EndTime": "2025-04-21T23:46:38.3568274Z", "BeginTime": "2025-04-21T23:45:46.9712217Z", "Duration": "00:00:51.3856057", "WarningsActualLength": 0, "ErrorsActualLength": 0, "BackendStatistics": { "BytesUploaded": 8290314, "BytesDownloaded": 53550393, "KnownFileSize": 9920312634, "LastBackupDate": "2025-04-22T00:45:46+01:00", "BackupListCount": 6, "ReportedQuotaError": false, "ReportedQuotaWarning": false, "MainOperation": "Backup", "ParsedResult": "Success", "Interrupted": false, "Version": "2.1.0.5 (2.1.0.5_stable_2025-03-04)", "BeginTime": "2025-04-21T23:45:46.9712252Z", "Duration": "00:00:00", "WarningsActualLength": 0, "ErrorsActualLength": 0 } }, "Extra": { "OperationName": "Backup", "machine-id": "66f5ffc7ff474a73a3c9cba4ac7bfb65", "machine-name": "WSJ-SER5", "backup-name": "WSJ-SER5 Local files", "backup-id": "DB-2" } } "

यह एक ऐप ब्लूप्रिंट उत्पन्न किया, जिसे मैंने फिर थोड़ा संशोधित किया (नीचे दिखाए अनुसार) फिर Prototype this App पर क्लिक करने से पहले:

मैंने बाद में डिज़ाइन और व्यवहार को समायोजित और परिष्कृत करने के लिए इन प्रॉम्प्ट का उपयोग किया:

डैशबोर्ड अवलोकन पृष्ठ से "विवरण देखें" बटन और मशीन के नाम पर लिंक को हटा दें, यदि उपयोगकर्ता पंक्ति पर कहीं भी क्लिक करता है, तो यह विस्तारित पृष्ठ दिखाएगा।

बाइट्स में आकार प्रस्तुत करते समय, स्वचालित स्केल (केबी, एमबी, जीबी, टीबी) का उपयोग करें।

विस्तारित पृष्ठ में, तालिका के बाद चार्ट ले जाएं। बारचार्ट का रंग किसी अन्य रंग में बदलें जो हल्की और गहरी थीम के साथ संगत हो।

विस्तारित पृष्ठ में, 5 बैकअप प्रति पृष्ठ प्रस्तुत करने के लिए पंक्तियों की संख्या कम करें।

डैशबोर्ड अवलोकन में, डेटाबेस में मशीनों की संख्या, सभी मशीनों के कुल बैकअप की संख्या, सभी बैकअप का कुल अपलोड किया गया आकार और सभी मशीनों द्वारा उपयोग किया गया कुल संग्रहण पर शीर्ष पर एक सारांश रखें। दृश्यीकरण को सुविधाजनक बनाने के लिए आइकन शामिल करें।

कृपया उपयोगकर्ता द्वारा चुनी गई थीम को स्थायी रूप से संग्रहीत करें। साथ ही, कुछ पार्श्व मार्जिन जोड़ें और यूआई को उपलब्ध चौड़ाई का 90% उपयोग करें।

मशीन विवरण हेडर कार्ड में, इस मशीन के लिए संग्रहीत सभी बैकअप का कुल योग, बैकअप स्थिति का एक सांख्यिकी, अंतिम बैकअप की चेतावनियों और त्रुटियों की संख्या, औसत अवधि (घंटे:मिनट:सेकंड में), सभी बैकअप का कुल अपलोड किया गया आकार और अंतिम बैकअप जानकारी के आधार पर उपयोग किया गया संग्रहण आकार शामिल करते हुए एक सारांश शामिल करें।

प्रयुक्त स्थान को कम करने के लिए सारांश को छोटा और अधिक सघन बनाएँ।

अंतिम बैकअप तिथि प्रस्तुत करते समय, एक ही कोशिका में, छोटे धूसर फ़ॉन्ट में, बैकअप होने का समय पहले (उदाहरण के लिए, x मिनट पहले, x घंटे पहले, x दिन पहले, x सप्ताह पहले, x महीने पहले, x साल पहले) दिखाएँ।

डैशबोर्ड अवलोकन में अंतिम बैकअप स्थिति से पहले अंतिम बैकअप तिथि दिखाएँ

इन संकेतों के माध्यम से पुनरावृत्ति करने के बाद, फ़ायरबेस ने नीचे दिए गए स्क्रीनशॉट में दिखाए गए अनुसार प्रोटोटाइप उत्पन्न किया:

नोट

एक दिलचस्प बात यह थी कि, पहली बातचीत के बाद से, फ़ायरबेस स्टूडियो ने पृष्ठों/चार्ट को भरने के लिए यादृच्छिक डेटा उत्पन्न किया, जिससे प्रोटोटाइप एक लाइव एप्लिकेशन की तरह कार्य करता है।

प्रारंभिक प्रोटोटाइप पूरा करने के बाद, मैं इंटरफेस में </> बटन पर क्लिक करके स्रोत कोड तक पहुंचा। फिर मैंने कोड निर्यात करने और इसे GitHub पर एक निजी रिपॉजिटरी में पुश करने के लिए Git एक्सटेंशन का उपयोग किया।

बैकएंड

सेटअप

मैंने GitHub से कोड डाउनलोड किया (git clone कमांड का उपयोग करके) एक स्थानीय फ़ोल्डर में (मेरे मामले में, लिनक्स चलाने वाला एक रास्पबेरी पाई 5) और निर्भरताओं Node.js, npm, और pnpm स्थापित की। अधिक विवरण DEVELOPMENT.md में देखें।

मैंने अपने विंडोज मशीन से कोड फ़ोल्डर तक पहुंचने के लिए एक एसएसएच कनेक्शन का उपयोग करके कर्सर सेट अप किया।

मैंने Duplicati द्वारा भेजे गए JSON का एक नमूना एक फ़ाइल में कॉपी किया (देखें नमूना बैकअप रिपोर्ट दस्तावेज़), कुछ अवांछित क्षेत्रों को साफ़ कर दिया।

कार्यान्वयन

मैंने कार्यान्वयन शुरू करने के लिए एक प्रारंभिक संकेत का उपयोग किया, जो स्थायित्व, सुधार और नई सुविधाओं पर केंद्रित था। यह एक लंबी लेकिन बहुत दिलचस्प प्रक्रिया थी।

संकेत उत्पन्न करने के लिए एआई का उपयोग करना

मैंने कर्सर चैट का उपयोग करके एक विस्तृत संकेत बनाया (Manual मोड, Auto मॉडल):

कर्सर एआई उपकरण को एक एप्लिकेशन प्रोटोटाइप का कार्यान्वयन उत्पन्न करने के लिए इस पाठ को सुधारें:

कृपया इस कोडबेस से एक Next.js एप्लिकेशन प्रोटोटाइप का पूर्ण कार्यान्वयन बनाने के लिए एक योजना बनाएं। आपका कार्यान्वयन प्रदान किए गए कोडबेस का गहन विश्लेषण करेगा ताकि सटीक दृश्य आकर्षण, उपयोगकर्ता अनुभव और नेविगेशन प्रवाह को बनाए रखा जा सके। डेटा संग्रहण के लिए, SQLite3 का उपयोग करें। डेटाबेस उत्पन्न करें और नमूना बैकअप रिपोर्ट दस्तावेज़ में पाई गई संरचना और सामग्री का उपयोग करके इसे भरें, यह सुनिश्चित करते हुए कि JSON का प्रत्येक क्षेत्र पूरी तरह से एकीकृत और स्थायी है।

एआई ने निम्नलिखित संकेत उत्पन्न किया:

एक व्यापक कार्यान्वयन योजना बनाएं एक Next.js अनुप्रयोग प्रोटोटाइप के लिए जिसमें निम्नलिखित आवश्यकताएँ हैं:

1. तकनीकी स्टैक:

• Next.js 14+ ऐप राउटर के साथ

• टाइपस्क्रिप्ट प्रकार सुरक्षा के लिए

• डेटा स्थिरता के लिए SQLite3

• स्टाइलिंग के लिए TailwindCSS

• उपयुक्त स्थानों पर React सर्वर घटक

• इंटरैक्टिव तत्वों के लिए क्लाइंट घटक

2. डेटाबेस डिज़ाइन:

• एक अनुकूल SQLite स्कीमा बनाने के लिए नमूना बैकअप रिपोर्ट दस्तावेज़ का विश्लेषण करें

• सभी बैकअप डेटा को कुशलतापूर्वक संग्रहीत करने के लिए तालिकाएँ डिज़ाइन करें

• सामान्य प्रश्नों के लिए अनुक्रमणिका शामिल करें

• डेटा मान्यता और प्रकार सुरक्षा लागू करें

3. अनुप्रयोग संरचना:

• प्रदान किए गए कोडबेस से सटीक UI/UX लागू करें

• सामान्य तत्वों के लिए पुन: प्रयोज्य घटक बनाएं

• ऐप राउटर का उपयोग करके उचित रूटिंग सेट करें

• उत्तरदायी लेआउट लागू करें

• डार्क/लाइट थीम समर्थन जोड़ें

4. मुख्य विशेषताएँ:

• मशीन स्थिति तालिका के साथ डैशबोर्ड अवलोकन

• बैकअप इतिहास के साथ विस्तृत मशीन दृश्य

• चार्ट का उपयोग करके डेटा दृश्यांकन

• वास्तविक समय बैकअप स्थिति अपडेट

• उचित त्रुटि हैंडलिंग और लोडिंग स्थितियाँ

5. डेटा प्रबंधन:

• डेटा संचालन के लिए API रूट बनाएं
• कुशल डेटा फ़ेचिंग रणनीतियाँ लागू करें
• उचित डेटा मान्यता जोड़ें
• डेटाबेस संचालन के लिए त्रुटि हैंडलिंग शामिल करें

कृपया एक विस्तृत कार्यान्वयन योजना प्रदान करें जो इन सभी पहलुओं को कवर करती है जबकि मौजूदा दृश्य डिज़ाइन और उपयोगकर्ता अनुभव को बनाए रखती है।

मैंने जनित प्रॉम्प्ट को क्लिपबोर्ड में कॉपी किया।

कार्यान्वयन यात्रा शुरू करें

मैंने + बटन पर क्लिक करके एक नया चैट बनाया, Agent मोड में स्विच किया, और Ctrl+Shift+V का उपयोग करके प्रॉम्प्ट चिपकाया (जैसे पाठ)।

योजना उत्पन्न होने के बाद, मैंने कार्यान्वयन शुरू करने के लिए चैट में please, implement this plan टाइप किया।

नोट

मैंने केवल प्रारंभिक बिंदु शामिल किया क्योंकि मैंने उपयोग किए गए सभी प्रॉम्प्ट को रिकॉर्ड नहीं किया। उनमें से कई थे।

नोट्स

• कुछ मॉडल बग ठीक करते समय फंस सकते हैं। "claude-3.5" और "claude-4" आमतौर पर बेहतर होते हैं, लेकिन कभी-कभी आपको किसी अन्य मॉडल (GPT, Gemini, आदि) को आजमाना पड़ता है। जटिल बग या त्रुटियों के लिए, त्रुटि के संभावित कारणों का विश्लेषण करने के लिए एक प्रॉम्प्ट का उपयोग करें, न कि केवल इसे ठीक करने के लिए पूछें।
• जटिल संशोधन करते समय, एक योजना बनाने के लिए एक प्रॉम्प्ट का उपयोग करें और फिर AI एजेंट से इसे लागू करने के लिए कहें। यह हमेशा बेहतर काम करता है।
• स्रोत कोड को बदलते समय विशिष्ट रहें। यदि संभव हो, तो संपादक में कोड के प्रासंगिक भाग का चयन करें और इसे चैट में संदर्भ के रूप में शामिल करने के लिए Ctrl+L दबाएँ।
• चैट में आप जिस फ़ाइल का उल्लेख कर रहे हैं, उसका संदर्भ भी शामिल करें ताकि AI एजेंट कोड के प्रासंगिक भाग पर ध्यान केंद्रित कर सके और कोड के अन्य भागों में परिवर्तन करने से बच सके।
• मुझे AI एजेंट को मानव रूप में देखने की प्रवृत्ति है क्योंकि यह लगातार 'हम', 'हमारा कोड' और 'क्या आप चाहते हैं कि मैं...' का उपयोग करता है। यह भी मेरे जीवित रहने की संभावनाओं को सुधारने के लिए है यदि (या जब) स्काईनेट संवेदनशील हो जाता है और टर्मिनेटर का आविष्कार होता है।
• कभी-कभी, Gemini, Deepseek, ChatGPT, Manus,... का उपयोग करें ताकि AI एजेंट के लिए बेहतर निर्देशों के साथ प्रॉम्प्ट उत्पन्न किया जा सके।