कर्सर के साथ मेरे आईओएस ऐप में एक नई सुविधा जोड़ने की चरण-दर-चरण प्रक्रिया
Latest Technology, (लेटेस्ट टेक न्यूज़) Gadget (गैजेट्स) …
मैं वेबसाइट और आईओएस ऐप बनाने के लिए वाइब-कोडिंग करता हूं। मेरे पास ऐप स्टोर पर पहले से ही दो ऐप लाइव हैं।
मेरा पहला ऐप था ब्रश ट्रैकरजो आपकी दैनिक ब्रश करने की आदतों को ट्रैक करने, लगातार बने रहने और छोटे-छोटे प्रेरक सुझावों के माध्यम से आपके दांतों को साफ रखने में मदद करता है। मैंने ऐप बनाने और उसे ऐप स्टोर पर भेजने की पूरी प्रक्रिया पर एक लेख भी लिखा है।
हाल ही में, मैंने ब्रश ट्रैकर में एक नई सुविधा जोड़ने का निर्णय लिया: एक कैलेंडर जैसा ग्रिड जो उपयोगकर्ता की मासिक ब्रशिंग स्थिरता दिखाता है। इस लेख में, मैं आपको बताऊंगा कि मैंने कर्सर का उपयोग करके इस सुविधा को कैसे कार्यान्वित किया और कुछ मैन्युअल समायोजन किए।
प्रारंभिक संकेत
मेरे मन में जो था वह उन ग्रिडों के समान था जो आप आदत-ट्रैकिंग ऐप्स या GitHub पर योगदान ग्राफ़ में देखते हैं।
मैंने कर्सर के प्लान मोड से शुरुआत की, जिसे मैंने कोई नई सुविधा जोड़ने या कोई बड़ा बदलाव करते समय अत्यधिक कुशल पाया है। आप सुविधा को परिभाषित करते हैं या कार्य की व्याख्या करते हैं और कर्सर एक विस्तृत कार्यान्वयन योजना तैयार करता है।
यहां वह सटीक संकेत दिया गया है जिसका उपयोग मैंने आरंभ करने के लिए योजना मोड में किया था:
मैं उपयोगकर्ता द्वारा पूर्ण ब्रशिंग के दिनों को ट्रैक करने के लिए एक कैलेंडर-जैसी ग्रिड जोड़ना चाहता हूं। वर्गों के साथ ग्रिड बनाएं जहां प्रत्येक वर्ग एक महीने में एक दिन का प्रतिनिधित्व करता है। ग्रिड में वर्गों की प्रारंभिक अवस्था काली है। यदि उपयोगकर्ता सभी ब्रशिंग पूरी कर लेता है तो वर्ग को हरे रंग से पेंट करें, यदि उपयोगकर्ता आंशिक रूप से ब्रशिंग पूरी करता है तो हल्के हरे रंग से पेंट करें। उदाहरण के लिए, उपयोगकर्ता दैनिक ब्रशिंग की संख्या 2 निर्धारित करता है। यदि वे एक दिन में एक ब्रशिंग पूरी करते हैं, तो वर्ग हल्का हरा होना चाहिए। यदि वे दिन में दो बार ब्रश करते हैं, तो उस दिन का वर्ग हरा होना चाहिए। ग्रिड को स्क्रीन के ऊपर बाईं ओर एक कैलेंडर आइकन दबाकर एक्सेस किया जाना चाहिए।
कार्यान्वयन योजना को अंतिम रूप देने से पहले कुछ विवरण स्पष्ट करने के लिए कर्सर ने मुझसे दो प्रश्न पूछे। मुझे यह कदम वास्तव में पसंद आया क्योंकि कर्सर को स्वयं धारणा बनाने के बजाय स्पष्टीकरण मांगते देखना आश्वस्त करने वाला है।
कर्सर द्वारा पूछे गए दो प्रश्न:
- क्या कैलेंडर ग्रिड को केवल चालू माह दिखाना चाहिए, या महीनों के बीच नेविगेशन की अनुमति देनी चाहिए?
- क्या हमें आज से ट्रैकिंग शुरू करनी चाहिए, या पिछले दिनों को भी दिखाना चाहिए (जो काला होगा)?
मैंने कर्सर को महीनों के बीच नेविगेशन की अनुमति देने और महीने के पिछले दिनों को काले रंग में प्रदर्शित करने का निर्देश दिया। फिर, कर्सर ने एक विस्तृत कार्यान्वयन योजना की रूपरेखा तैयार करते हुए एक मार्कडाउन फ़ाइल बनाई।
योजना में विस्तार से बताया गया है कि सुविधा को कैसे लागू किया जाएगा और इसमें कार्रवाई योग्य कार्य आइटमों की एक सूची भी शामिल है।
कर्सर के TODO आइटम:
- ऐतिहासिक दैनिक ब्रशिंग डेटा को दृढ़ता के साथ ट्रैक करने के लिए ब्रशमॉडल का विस्तार करें
- माह ग्रिड और रंग-कोडित वर्गों के साथ CalendarGridView घटक बनाएं
- कंटेंटव्यू के ऊपर बाईं ओर कैलेंडर आइकन बटन जोड़ें
- शीट प्रेजेंटेशन का उपयोग करके कैलेंडरग्रिडव्यू को कंटेंटव्यू के साथ एकीकृत करें
इसके बाद, मैंने कर्सर से योजना को लागू करने के लिए कहा। यह निष्पादन से पहले योजना को संशोधित करने की भी अनुमति देता है, लेकिन मैं कर्सर की मूल रूपरेखा के साथ रहना चाहता था।
कार्यान्वयन ने पहले ही प्रयास में काम किया, और मैं सीधे Xcode सिम्युलेटर में सुविधा का परीक्षण करने में सक्षम था। हालाँकि, डिज़ाइन भयानक था:
नोट: इस आलेख में उपयोग की गई सभी छवियों में मेरे ऐप, ब्रश ट्रैकर के स्क्रीनशॉट शामिल हैं।
Xcode सिम्युलेटर में अब दिनांक और समय सेटिंग्स शामिल नहीं हैं, इसलिए मैंने यह जांचने के लिए अपने मैक पर सिस्टम दिनांक बदल दिया कि विभिन्न दिनों में ग्रिड के रंग कैसे अपडेट होते हैं।
मुझे ये स्टाइल बिल्कुल पसंद नहीं आया. इसलिए मैंने कर्सर से निम्नलिखित संकेत का उपयोग करके ग्रिड को फिर से डिज़ाइन करने के लिए कहा:
हमें ग्रिड का डिज़ाइन बदलने की ज़रूरत है। मेरे मन में Github योगदान ग्रिड जैसा कुछ है। साथ ही, दिनों का प्रतिनिधित्व करने वाले वर्गों में दिन का मान न दिखाएं।
यह संकेत मेरी आशा के अनुरूप काम नहीं किया। इसमें किया गया एकमात्र बदलाव दिन संख्या को हटाना था:
इसके बाद, मैंने अपनी इच्छित ग्रिड शैली की एक नमूना छवि साझा की और कर्सर से एक समान डिज़ाइन बनाने के लिए कहा।
नया डिज़ाइन मेरे मन में जो था उसके करीब था लेकिन इसमें संरचनात्मक मुद्दे थे। वर्ग बहुत छोटे थे और लेआउट के भीतर अच्छे पैमाने पर नहीं थे:
तो इस डिज़ाइन के साथ दो मुख्य समस्याएँ हैं:
- प्रत्येक माह में 42 वर्ग होते हैं (किसी भी महीने के दिनों का प्रतिनिधित्व नहीं करते)।
- वर्ग बहुत छोटे हैं.
मैंने कर्सर से इस संकेत के साथ पहली समस्या को ठीक करने के लिए कहा:
वर्तमान कार्यान्वयन में, नवंबर और दिसंबर में 42 वर्ग हैं। ग्रिड में वर्ग एक महीने में दिनों का प्रतिनिधित्व करते हैं इसलिए वर्गों की संख्या उस महीने में दिनों की संख्या के बराबर होनी चाहिए।
दूसरी समस्या सरल थी और मैं कुछ पैरामीटर मानों को समायोजित करके इसे हल कर सकता था। उदाहरण के लिए, ग्रिड में वर्गों का आकार बदला जा सकता है squareSize पैरामीटर:
struct DaySquare: View {
let isToday: Bool
let isCurrentMonth: Bool
let brushCount: Int
let brushesPerDay: Int
private let squareSize: CGFloat = 8 // change this parameterवर्ग आकार को 32 में बदलने के बाद ग्रिड इस प्रकार दिखता है:
दूसरी समस्या जिसे पैरामीटर मानों को समायोजित करके हल किया जा सकता है वह है पंक्तियों के बीच पैडिंग।
ऊपर दिए गए स्क्रीनशॉट में, पंक्तियों के बीच कोई जगह नहीं दिख रही है। इसे पंक्तियों के बीच पैडिंग बढ़ाकर बदला जा सकता है।
मैं एक पंक्ति में 8 वर्ग (यानी दिन) भी रखना चाहता हूं और पंक्तियों के बीच का स्थान बदलना चाहता हूं।
ये सभी निम्नलिखित कोड स्निपेट में किए जा सकते हैं:
// Calendar grid - smaller GitHub style
LazyVGrid(columns: Array(repeating: GridItem(.flexible(), spacing: 0.2), count: 8), spacing: 0) {
ForEach(Array(calendarDays.enumerated()), id: \.offset) { index, dayInfo in
DaySquare(
isToday: dayInfo.isToday,
isCurrentMonth: dayInfo.isCurrentMonth,
brushCount: dayInfo.brushCount,
brushesPerDay: model.brushesPerDay,
size: 32
)
.padding(.bottom, 3)
}
}spacingएक पंक्ति में वर्गों के बीच की जगह को नियंत्रित करता हैpaddingपंक्तियों के बीच की जगह को नियंत्रित करता हैcountएक पंक्ति में वर्गों की संख्या को नियंत्रित करता है
उपरोक्त कोड स्निपेट में इन पैरामीटर मानों के साथ खेलने के बाद, मुझे निम्नलिखित ग्रिड मिला:
यदि उपयोगकर्ता एक दिन में सभी ब्रशिंग पूरी कर लेता है, तो उसे चमकीला हरा रंग मिलता है। आंशिक समापन के मामले में, उस दिन का वर्ग हल्के हरे रंग से रंगा जाता है। अन्य दिनों को काले रंग में दिखाया गया है और वर्तमान दिन को एक सफेद फ्रेम में दर्शाया गया है।
पिछले दिनों पर नज़र रखने की सुविधा लागू करने के बाद, स्ट्रीक्स के लिए सूचनाएं जोड़ना स्वाभाविक लगा। मैंने कर्सर को निम्नलिखित संकेत का उपयोग करके ऐसा करने के लिए कहा:
जब उपयोगकर्ता ने 10, 20 और 30 दिनों के लिए सभी ब्रशिंग पूरी कर लीं तो सूचनाएं जोड़ें। साथ ही, जब उपयोगकर्ता एक महीने में सभी दिन पूरे कर लेता है तो उसके लिए एक महीने की अधिसूचना भी जोड़ें। सूचनाएं उत्साहवर्धक और प्रेरक होनी चाहिए.
मेरे द्वारा बनाया गया ग्रिड सबसे अच्छा डिज़ाइन नहीं है लेकिन संदेश देने के लिए काफी अच्छा है। जब कोई उपयोगकर्ता इस ग्रिड को देखता है, तो उसे तुरंत अपने दांतों को ब्रश करने की आवृत्ति का अंदाजा हो जाता है।
कर्सर और कुछ मैन्युअल बदलावों की मदद से, मैं कुछ ही घंटों में इस सुविधा को लागू करने और शिप करने में सक्षम हो गया। इस लेख को लिखने के समय, यह संस्करण अभी भी ऐप स्टोर समीक्षा में है। जब तक आप लेख पढ़ेंगे, यह वितरित हो सकता है। यहां ऐप स्टोर का लिंक दिया गया है ब्रश ट्रैकर यदि आप इसे देखना चाहते हैं या ऐप आज़माना चाहते हैं।
पढ़ने के लिए आपका शुक्रिया! यदि आपके पास लेख या ऐप के बारे में कोई प्रतिक्रिया है, तो मुझे आपके विचार सुनना अच्छा लगेगा।
(टैग्सटूट्रांसलेट)एआई कोडिंग असिस्टेंट्स(टी)एआई डेवलपमेंट(टी)कर्सर(टी)एलएलएम(टी)वाइब कोडिंग
Latest Technology, (लेटेस्ट टेक न्यूज़) Gadget (गैजेट्स) …
Source link