🧘🏾 👩🏿‍🏭 🤱🏻 एप्लीकेशन रिडिजाइन

मोबियस बाइक एक बाइक और स्कूटर किराए पर लेने की सेवा है जिसे तेलिन के लिए विकसित किया गया है (भौगोलिक विस्तार वर्तमान में योजनाबद्ध है)।

पहली रिलीज़ परिकल्पना "यूरोपीय बाजार में एक बाइक किराए पर लेने की मांग" होगी। दिसंबर 2019 में, मुख्य परिकल्पना को संशोधित किया गया था और अब यह इस तरह लग रहा था: "अंतिम उपयोगकर्ता और फ्रेंचाइजी के लिए सुविधा के कारण बाइक और स्कूटर किराये की सेवा अधिकतम वितरण प्राप्त कर सकती है?" इस प्रश्न का उत्तर देने के लिए, निम्नलिखित को लागू करना आवश्यक था:

भविष्य में एक नए प्रकार के परिवहन और संभावित स्केलिंग को लागू करने के लिए आवेदन की संरचना (दोनों आंतरिक - बैकएंड, और बाहरी - डिजाइन और फ्रंटेंड) के अनुकूलन पर काम करना।
व्यवस्थापक पैनल में किराये की शर्तों को समायोज्य बनाएं

Lyubov Nikiforuk - परियोजना प्रबंधक

रीडिज़ाइन से पहले मोबियस बाइक एप्लिकेशन की मुख्य स्क्रीन

एक उत्पाद डिजाइनर के रूप में मेरे पहले कार्यों में से एक नए प्रकार के परिवहन - इलेक्ट्रिक स्कूटर को पेश करने के लिए लेआउट तैयार करना था। लेआउट के साथ समाप्त होने के बाद, मैंने डिज़ाइन और UX अनुप्रयोगों में कुछ बदलाव करने और एक छोटा नया स्वरूप बनाने का निर्णय लिया। टीम को नए लेआउट दिखाए। मुझे एक प्रतिक्रिया मिली: लोगों ने सलाह दी और अपनी राय साझा की। नतीजतन, कई प्रमुख स्क्रीन टाइप की गईं।

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

रीडिज़ाइन प्रक्रिया के दौरान बनाए गए प्रमुख स्क्रीन के वेरिएंट

काम का संगठन

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

अपने सभी महिमा टेस्ट स्कूटर में फुर्तीली

पथ प्रदर्शन

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

(). , , , , , , . . . ,

— front-end

— «». — (bottom navigation)

, , UI-kit

नेविगेशन बदलने के अलावा, हमने एप्लिकेशन स्क्रीन पर स्केल नियंत्रणों को छोड़ दिया। इशारों से झूम उठे। बदले हुए मोडल विंडो, डायलॉग और स्क्रीन का हिस्सा स्वाइप-अप स्क्रीन के साथ। फिर से, क्योंकि एक हाथ से एप्लिकेशन का उपयोग करना अधिक सुविधाजनक है - ऐसी स्क्रीन बस नीचे और नीचे "स्वाइप" की जा सकती है।

रिडिजाइन के बाद मोबियस बाइक एप्लिकेशन में स्वाइप-अप स्क्रीन के उदाहरण

हमने Google और फेसबुक के माध्यम से लॉग इन करके आवेदन में पंजीकरण प्रक्रिया को भी सरल बनाया है। बैंक कार्ड लिंक करने के अलावा, उन्होंने ऐप्पल पे और गूगल पे का उपयोग करके भुगतान करने की क्षमता को जोड़ा।

ऐप्पल पे का उपयोग करके एप्लिकेशन और भुगतान दर्ज करने की स्क्रीन

। भविष्य में एप्लिकेशन में नई सुविधाओं को जोड़ना आसान बनाने के लिए, हमने घटकों की एक लाइब्रेरी बनाई और उनके आवेदन और बातचीत के सिद्धांतों का वर्णन किया।

Mobius बाइक यूआई-किट अनुप्रयोगों

रिफ्लेक्टरिंग और स्विचिंग ग्रेफ्लीक के लिए

रीडिज़ाइन के मुख्य उद्देश्य थे:

घटकों की अधिक लचीली और स्केलेबल प्रणाली बनाएं जो आसानी से नई कार्यक्षमता जोड़ने की अनुमति दे, उदाहरण के लिए, एक अन्य प्रकार का परिवहन, उपस्थिति के साथ समझौता किए बिना और आवेदन के साथ बातचीत के सामान्य तर्क।
जितना संभव हो सके इंटरफ़ेस को हल्का और सरल करें
"ताज़ा करें" आवेदन की उपस्थिति

लेकिन एप्लिकेशन इंटरफ़ेस को अपडेट करने के अलावा, रीडिज़ाइन का दृश्य पक्ष, रेस्टफुल एपीआई से ग्राफकलाइन के लिए संक्रमण एक बहुत महत्वपूर्ण हिस्सा था।

इसे सरलता से कहने के लिए, GraphQL एक सिंटैक्स है जो बताता है कि कैसे एक क्लाइंट (फोन / एप्लिकेशन) विशेष प्रश्नों का उपयोग कर सर्वर से डेटा प्राप्त करता है। अनुरोध के आधार पर, सर्वर यह या वह डेटा देता है।

आर्टीम बुकथोयारोव - देवो / बैकएंड डेवलपर

GraphQL की तीन मुख्य विशेषताएं हैं:

क्लाइंट को यह निर्दिष्ट करने की अनुमति देता है कि उसे किस डेटा की आवश्यकता है
कई स्रोतों से डेटा एकत्र करने की सुविधा
डेटा का वर्णन करने के लिए एक प्रकार की प्रणाली का उपयोग करता है

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

इसके अलावा, रिफैक्टरिंग की प्रक्रिया में, हमने ग्राफकॉल का उपयोग करने के निम्नलिखित लाभों पर प्रकाश डाला:

डेवलपर के लिए सुविधाजनक प्रलेखन
WebSocket के लिए एक अच्छा समाधान, बैकएंड और फ्रंटएंड दोनों के लिए
ग्राफकॉल डेवलपर्स के लिए कोड संरचना को नेविगेट करना आसान बनाता है
RESTful API की तुलना में अधिक लचीला विकास, आपको कुछ नया तेज और आसान जोड़ने की अनुमति देता है (हमारे मामले में, यह एक नए प्रकार का परिवहन है)

यह अजीब था जब चीन के पहले साइकिल लॉक ने चीन में अपना भू-स्थान निर्धारित किया था, हालांकि यह सेंट पीटर्सबर्ग में शारीरिक रूप से था। और इस लॉक के लिए सॉफ्टवेयर एन्क्रिप्ट किया गया था और हमें सेटिंग्स में बदलाव करने के लिए डिक्रिप्शन विधि की तलाश करनी थी।

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

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

मताधिकार और प्रशासन

सेवा स्वामी के पास एप्लिकेशन के व्यवस्थापक पैनल के लिए कुछ आवश्यकताएं थीं। चूंकि यह योजना है कि सेवा एक मताधिकार के रूप में बेची जाएगी, इसलिए प्रत्येक फ्रेंचाइजी को यात्रा की लागत, टैरिफ पैरामीटर, सदस्यता, आदि को संपादित करने में सक्षम होना चाहिए।

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

समस्या

बेशक, कुछ कठिनाइयाँ थीं। हमने यात्राओं के इतिहास में इस मार्ग की कल्पना करने से इनकार कर दिया है। बाइक लॉक में जीपीएस मॉड्यूल हमेशा निर्देशांक को सही ढंग से संचारित नहीं करता है। और एक सुंदर मार्ग रेखा के बजाय, जैसे ड्रिबल शॉट पर, हमें यह मिला:

वीएस वास्तविकता की प्रतीक्षा

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

कई प्रश्न टैरिफ प्रणाली और सदस्यता के कार्यान्वयन के आसपास थे। हमने अलग-अलग मामलों को प्रदान करने की कोशिश की: यात्रा के दौरान सदस्यता समाप्त होने पर क्या करना है, क्या एक प्रकार के परिवहन के लिए अलग-अलग सदस्यता खरीदने का अवसर देना है, क्या यह सदस्यता के ऑटो-नवीकरण करने के लायक है, यात्रा की लागत की गणना कैसे करें, और इसी तरह।

परिणामस्वरूप, हम निम्नलिखित रेटिंग विकल्प पर आ गए: यात्रा का समय असमान खंडों में विभाजित है और हर बार अंतराल अलग से चार्ज किया जाता है। उदाहरण के लिए, यात्रा लागत € 2 के पहले 15 मिनट, यदि आप 15 मिनट से अधिक समय तक सवारी करते हैं, लेकिन आधे घंटे से कम समय, तो यात्रा की लागत € 3.5 है, 30 मिनट से एक घंटे तक - € 5, आदि। और उपयोगकर्ता को टैरिफ नेविगेट करने में आसान बनाने के लिए, हमने लागत गणना की कल्पना करने का फैसला किया और इसे एक प्रगति बार में बनाया। अब उपयोगकर्ता यह देख सकता है कि यात्रा की लागत वास्तविक समय में कैसे बदलती है। टैरिफ और सदस्यता के साथ

प्रगति बार स्क्रीन के रूप में दृश्य लागत

कुछ उपयोगकर्ताओं को यात्रा के लिए भुगतान नहीं करने का विकल्प मिला: उन्होंने एक बैंक कार्ड जोड़ा, फिर उसे हटा दिया और मुफ्त में सवारी की। जब हमें यह पता चला, हमने अपनी सॉल्वेंसी की जांच करने के लिए € 1 को ब्लॉक करना शुरू कर दिया और यात्रा के दौरान या यदि कोई अवैतनिक ऋण है तो कार्ड को निकालने की क्षमता को हटा दिया।

साथ ही कभी-कभी यात्रा पूरी करने में भी दिक्कतें आती थीं। बाइक की सवारी को पूरा करने के लिए आपको लॉक को बंद करने की आवश्यकता है, जो सर्वर को जानकारी स्थानांतरित करता है। लेकिन महल ने हमेशा समय पर डेटा प्रसारित नहीं किया। और अंत में, लोग कथित तौर पर अधूरी यात्राओं के लिए कई सौ यूरो का ऋण जमा कर सकते थे। हमने फैसला किया कि हम बड़ी मात्रा में मैन्युअल रूप से जांच करेंगे और उनके लिए ऑटो-रिकॉर्डिंग हटा देंगे। लगभग कोई शिकायत नहीं थी, क्योंकि यूरोप में कुछ लोगों के पास एसएमएस अलर्ट हैं। रूस में यह अलग होगा।

जाँच - परिणाम

फ़्रंट एंड

रिएक्ट नेटिव पर विकास की मुख्य विशेषताओं में से एक घटक प्रदर्शन की ट्रैकिंग है। एफपीएस में कमी को रोकने के लिए, यह मूल्य है:

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

रिएक्ट नेटिव की ताकत को इसकी बहुमुखी प्रतिभा कहा जा सकता है। IOS और Android पर 2 अलग-अलग विकास टीमों की आवश्यकता नहीं है। इसके अलावा, अक्सर, आप डिजाइन अवधारणाओं को लागू कर सकते हैं जो देशी प्लेटफार्मों पर विकसित करना अधिक कठिन है।

रिएक्ट नेटिव की कमजोरी इसकी पूर्ण गंभीरता नहीं है। आपको लगातार यह सुनिश्चित करना चाहिए कि आप जेएस-थ्रेड को अधिभार न डालें। ऑटोलिंकर को पेश किए जाने तक संस्करण 0.60 तक देशी पैकेज को अपडेट करने और स्थापित करने की व्यथा।

बैकएंड

ज्यादातर मामलों में ग्राफकॉल पर स्विच करना एपीआई के विकास को आसान बनाता है। यह डेवलपर और ग्राहक दोनों के लिए स्पष्ट हो गया है।

ग्राफकॉल फायदे:

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

रेखांकन कमजोरियां:

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

इंटरफेस

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

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

एप्लीकेशन रिडिजाइन - इनसाइड लुक