वीके मिनी ऐप्स में एप्लिकेशन डेवलपमेंट

मुझे वीके में काम करने के लिए विकासशील अनुप्रयोगों की ओर क्यों देखना चाहिए? मेरे पीछे बड़े पैमाने पर सेवाओं के लिए कई वर्षों का फ्रंट-एंड डेवलपमेंट हुआ है, और वर्तमान में VKontakte सोशल नेटवर्क क्या दे रहा है डेवलपर एक बहुत ही प्रभावी और प्रभावी तरीके से एक और संचार चैनल का निर्माण कर रहा है। नीचे मैं आपको बताऊंगा कि वीके मिनी ऐप्स का विचार क्या है, एप्लिकेशन विकसित करते समय कौन सी तकनीकों का उपयोग करना है, और आपको किस पर ध्यान देना चाहिए।



Blog.ru क्लाउड सॉल्यूशंस ब्लॉग पोस्ट पर आलेख का प्रारंभिक प्रकाशन: https://mcs.mail.ru/blog/razrabotka-prilozhenij-v-vk-mini-apps

वीके मिनी एप्स प्लेटफॉर्म

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

अनुप्रयोग बुनियादी ढांचा वीके मिनी ऐप

वीके मिनी ऐप एक विशिष्ट पते पर स्थित एक नियमित वेब संसाधन है। हमें इसे सामाजिक नेटवर्क के "एप्लिकेशन कंट्रोल पैनल" में रखना होगा।

VKontakte आपको एप्लिकेशन के तीन संस्करण रखने की अनुमति देता है:

• मोबाइल ग्राहकों के लिए - अर्थात, देशी VKontakte एप्लिकेशन में खोलने के लिए;
• डेस्कटॉप विकल्प - ब्राउज़र में vk.com ;
• मोबाइल फोन में ब्राउज़रों के लिए विकल्प (https://m.vk.com)।

रखते समय, आप "विकास मोड" को भी सक्षम कर सकते हैं। यह VKontakte उपयोगकर्ताओं को तीन स्टोरफ्रंट में से प्रत्येक के परीक्षण के लिए एक अलग पते का उपयोग करने के लिए आवेदन प्रशासक के रूप में नामित करने की अनुमति देता है। यही है, आवेदन खोलते समय, एक साधारण उपयोगकर्ता यह देखेगा कि सशर्त पते yourapp.com पर क्या स्थित है, और व्यवस्थापक test.yourapp.com देखेंगे।

आपका वेब संसाधन सामान्य वेब व्यू के माध्यम से VKontakte एप्लिकेशन में एम्बेडेड है, जब डेस्कटॉप से ​​iFrame के माध्यम से खोला जाता है। इसलिए, यह ध्यान रखना आवश्यक है कि जावास्क्रिप्ट कार्यक्षमता का हिस्सा उपलब्ध नहीं हो सकता है, पूरी तरह से परीक्षण आवश्यक है।

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

सही एप्लिकेशन बनाने के तरीके पर एक विस्तृत ज्ञापन है । मेरा सुझाव है कि आप मॉडरेशन के लिए आवेदन देने से पहले उसके साथ सावधानीपूर्वक जांच करें।

अनुप्रयोग विकास वीके मिनी ऐप

तो, वीके मिनी ऐप्स एप्लिकेशन, वास्तव में, एक नियमित वेब एप्लिकेशन है जो iFrame या WebView के माध्यम से प्लेटफॉर्म में एम्बेडेड है। इसलिए, प्रौद्योगिकी का विकल्प जिस पर लिखा जाएगा वह आपका है।

हालांकि, फ्रंटएंड को विकसित करने के लिए, VKontakte रिएक्ट से बने वीके यूआई के लिए तैयार घटकों के अपने पुस्तकालय की सिफारिश करता है:

यह सुविधाजनक है - कई विशिष्ट घटक पहले से ही तैयार हैं, यह केवल आपके पृष्ठ या एसपीए की संरचना में उन्हें एम्बेड करने के लिए बना हुआ है।

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

VKontakte डेवलपर को किसी भी कठोर फ्रंटेंड आर्किटेक्चर का पालन करने की आवश्यकता नहीं है - हम केवल वही लेते हैं जो आवश्यक है और आवश्यकतानुसार घटकों को संशोधित करते हैं। उदाहरण के लिए, आप हमेशा अपनी कक्षा, अपने ईवेंट हैंडलर को एक बेवकूफ़ दृश्य-घटक में जोड़ सकते हैं, किसी भी गहराई के नेस्टेड घटक बना सकते हैं, और इसी तरह।
वीकेयूआई पर एक काफी विस्तृत (हालांकि पूरी तरह से पूर्ण नहीं) प्रलेखन है । GitHub पर स्रोत कोड: https://github.com/VKCOM/VKUI तदनुसार, सबसे सरल स्थापना:

npm i —save-dev @vkontakte/vkui 

निम्नलिखित मेटा टैग को अपने एप्लिकेशन के लेआउट पृष्ठ के सिर में रखना सुनिश्चित करें, अन्यथा iOS उपकरणों पर देशी VKontakte नेविगेशन सही ढंग से प्रदर्शित नहीं होगा:

 <meta content=»width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no, viewport-fit=cover» name=»viewport» /> 

अगला, हमें केवल पृष्ठ पर प्रतिक्रिया एप्लिकेशन को एम्बेड करने की आवश्यकता है।

आवेदन खोलने के विकल्प

VKontakte ही एड्रेस बार में स्टार्टअप पैरामीटर जोड़ता है जिसके द्वारा आपका एप्लिकेशन खुलता है। उनकी सूची इस प्रकार है: vk_user_id, vk_app_id, vk_are_notifications_enabled, vk_language, vk_ref, vk_access_token_settings, vk_group_id, vk_viewer_group_role, vk_platform.kk यही कारण है कि आपके आवेदन लगभग एक ही पते के साथ खुलेगा साथ फ्रेम है: youvkapp.ru/?vk_access_token_settings=notify&vk_app_id=888888&vk_are_notifications_enabled=1&vk_is_app_user=1&vk_is_favorite=1&vk_language=ru&vk_platform=desktop_web&vk_ref=other&vk_user_id=111111&sign=fsdfsdgfgfiuoitu8345u34j

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

नवंबर 2019 के लिए, Vkontakte इस VKontakte सूची में अतिरिक्त मापदंडों को शामिल करने की योजना नहीं बनाता है। हालाँकि, url में आप एक मनमाना हैश पास कर सकते हैं, उदाहरण के लिए: youvkapp.ru # custom_param

मार्ग

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

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

 import {Root, View, Panel} from '@vkontakte/vkui'; <Root activeView={this.state.views.activeView}> <View id=»main» activePanel={this.state.views.main.activePanel}> <Panel id=»step-1″> … </Panel> <Panel id=»step-2″> … </Panel> </View> <View id=»search»> <Panel id=»search-panel»> … </Panel> </View> <View id=»info» activePanel={this.state.views.info.activePanel}> <Panel id=»oferta»> … </Panel> <Panel id=»conditions»> … </Panel> <Panel id=»about»> … </Panel> </View> </Root> 

सक्रियपैनेल में राज्य में, हम प्रदर्शित किए जाने वाले तत्व की आईडी निर्दिष्ट करते हैं।

लेआउट और घटकों

अब आप पैनल के अंदर एक विशिष्ट पृष्ठ देख सकते हैं, जिसे VK UI घटकों का उपयोग करके बनाया गया है।

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

 import { Button, Div, FormLayout, Input, Panel, PanelHeader, PanelHeaderBack, Search, View } from "@vkontakte/vkui"; import Icon36Done from "@vkontakte/icons/dist/36/done"; import CustomTextarea from "./YourComponents/CustomTextarea"; render() { return ( <div> <PanelHeader left={<PanelHeaderBack onClick={() => {this.Actions.historyBack()}} />} >App Title</PanelHeader> <Icon36Done width={48} height={48} /> <Div> <h1>This is the first page</h1> <p className="page-hint">You can do some interaction here</p> </Div> <FormLayout> <Input type="text" defaultValue="" placeholder="Enter your name" className="active" /> <CustomTextarea name="textarea1" className="custom" disabled={this.state.blocks.textarea.disabled} value={this.state.userData.textarea} /> <Button size="xl" level="secondary" >Submit</Button> </FormLayout> <Search value={this.state.search.text} onChange={this.onSearch} /> </div> ) } 

जैसा कि आप देख सकते हैं, एक और vkontakte पैकेज दिखाई दिया:

 npm i —save-dev @vkontakte/icons 

वांछित आइकन का चयन करने के लिए आप सुविधाजनक प्रबंधक का उपयोग कर सकते हैं।

मुख्य नियम घटक को सही ढंग से या हेडर के अपने स्वयं के लेआउट का उपयोग करना है। देशी VKontakte एप्लिकेशन हेडर के दाईं ओर बटन नियंत्रित करता है।



कस्टम ब्लॉक:

 import { Textarea } from «@vkontakte/vkui»; export default class CustomTextarea extends React.Component { render() { return ( <div className=»form-group custom_textarea»> <div className=»FormLayout__row-top»>Custom textarea is here</div> <Textarea disabled={this.props.disabled} name={name} id={name} onChange={(e) => this.bindData(e, this.props.name)} value={this.props.value} className={this.props.className} /> </div> </div> ); } } 

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

 .desktop_web { .View__panel—prev { max-width: 458px !important; margin: 0 auto; left: calc(50% — 230px) !important; -webkit-animation: root-android-animation-hide-back 3s cubic-bezier(.4, 0, .2, 1); animation: root-android-animation-hide-back 3s cubic-bezier(.4, 0, .2, 1); } .View__panel—next { max-width: 460px !important; left: calc(50% — 230px) !important; } } 

ये शैलियाँ आपके एप्लिकेशन से जुड़ी शैलियों की सामान्य धारा में जुड़ी हुई हैं।

वीके कनेक्ट लाइब्रेरी

वीके कनेक्ट लाइब्रेरी खुद वीकेकंटे नेटवर्क की व्यापक क्षमताओं तक पहुंच प्रदान करती है, साथ ही साथ अगर हम मोबाइल एप्लिकेशन से काम करते हैं तो डिवाइस की क्षमताओं के लिए। इसे कनेक्ट करने के लिए, आपको vkontakte / vk-connect पैकेज स्थापित करने की आवश्यकता है: npm i -save-dev vkontakte / vk-connect ।

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

सामान्य रूप से काम करना शुरू करने के लिए हमारे आवेदन के लिए, हमें पहले आरंभीकरण करना चाहिए:

 import connect from '@vkontakte/vk-connect'; connect.send(«VKWebAppInit», {}); 

पुस्तकालय के साथ सभी आगे की बातचीत एक समान तरीके से होती है। Connect.send पद्धति का उपयोग करते हुए, हम वांछित कार्रवाई कहते हैं और उत्तर सुनते हैं। ऐसा करने के लिए, हमें घटनाओं की सदस्यता लेनी चाहिए:

 connect.subscribe((e) => { switch (e.detail.type) { case «VKWebAppGetUserInfoResult» : this.bindConnectUserData(e.detail.data); break; } }); 

डिटेल ऑब्जेक्ट में, टाइप लौटाया जाता है - जिस प्रकार की घटना का नाम हम एक उत्तर के लिए प्रतीक्षा कर रहे हैं, और डेटा - एक डेटा सेट। ऊपर दिए गए उदाहरण में, हम connect.send रिक्वेस्ट ("VKWebAppGetUserInfo", {}) पर प्रतिक्रिया सुनते हैं, जिसमें आवेदन उपयोगकर्ता के बारे में जानकारी वापस आनी चाहिए: नाम, लिंग, जन्म तिथि, निवास स्थान, सोशल नेटवर्क पर अवतार की तस्वीर का लिंक।

VKontakte सभी उपकरणों (iOS, Android, वेब) पर सभी घटनाओं के लिए समर्थन की गारंटी नहीं देता है, इसलिए कोड को निष्पादित करने से पहले इस समर्थन की जांच करना बेहतर है:

 if (connect.supports(«VKWebAppGetUserInfo»)) … 

वीके कनेक्ट वीके एपीआई के लिए अनुरोधों के लिए भी समर्थन प्रदान करता है , अगर आपको वीके कनेक्ट लाइब्रेरी से अधिक कुछ चाहिए तो स्वयं प्रदान कर सकते हैं:

 connect.send(«VKWebAppCallAPIMethod», {«method»: «users.get», «request_id»: «your_unique_req_id», «params»: {«user_ids»: «1», «v»:»5.103″, «access_token»:»your_token»}}); 

वीके पे

वीके पे, वास्तव में, मनी मेल का उपयोग करके ऑनलाइन भुगतान सेवा का उपयोग करने के लिए एक सुविधाजनक फ्रंट-एंड है। भुगतान फ़ॉर्म को कॉल करने के लिए, बस वीके कनेक्ट लाइब्रेरी में कॉल का उपयोग करके भुगतान विंडो खोलें:

 connect.send(«VKWebAppOpenPayForm», {«app_id»: 888888, «action»: «pay-to-service», «params»: {}}); 

इस प्रकार, आप VKontakte नेटवर्क पर भुगतान के आंतरिक साधनों का उपयोग करके अपनी सेवाएं और सामान बेच सकते हैं। आधिकारिक दस्तावेज में अधिक जानकारी।