تطوير التطبيقات في التطبيقات المصغرة VK

لماذا يجب أن أتطلع نحو تطوير تطبيقات للعمل في VK؟ لقد مررت بعدة سنوات من التطوير الأمامي للخدمات الجماهيرية ورائي ، وما تقدمه شبكة VKontakte الاجتماعية للمطور حاليًا هو وسيلة سريعة وفعالة لبناء قناة اتصال أخرى مع جمهور كبير حقًا. فيما يلي سوف أخبركم بفكرة تطبيقات VK mini ، والتقنيات التي يجب استخدامها عند تطوير التطبيق ، وما الذي يجب الانتباه إليه.



نشر أولي لمقال على مدونة Blog.ru Cloud Solutions: https://mcs.mail.ru/blog/razrabotka-prilozhenij-v-vk-mini-apps

VK تطبيقات مصغرة منصة

توفر VKontakte للمطورين الخارجيين الفرصة لكتابة تطبيقات الويب ووضعها في دليل التطبيق و / أو الترويج لها داخل الشبكة. لا يحتاج مستخدمو التطبيق إلى تنزيل التطبيقات الأصلية الفردية من متجر Google Play / App Store ، فتتوفر وظيفة التطبيق المحدد داخل جلسة المستخدم للتطبيق الرئيسي في فكونتاكتي أو من خلال متصفح على موقع الشبكة الاجتماعية. تحتوي الشبكة الاجتماعية على إرشادات مفصلة حول كيفية البدء على منصة التطبيقات المصغرة VK .

تطبيق البنية التحتية VK التطبيق المصغر

التطبيق المصغر VK هو مورد ويب عادي موجود في عنوان محدد. يجب أن نضعها في "لوحة تحكم التطبيق" للشبكة الاجتماعية.

VKontakte يسمح لك بوضع ثلاثة إصدارات من التطبيق:

• للعملاء المتنقلين - أي ، للفتح في تطبيق VKontakte الأصلي ؛
• خيار سطح المكتب - vk.com في المتصفح ؛
• الخيار للمتصفحات في الهواتف المحمولة (https://m.vk.com).

عند وضع ، يمكنك أيضا تمكين "وضع التنمية". يسمح لمستخدمي VKontakte المعينين كمسؤولين للتطبيق باستخدام عنوان منفصل لاختبار كل من واجهات المتاجر الثلاثة. أي عند فتح التطبيق ، سيرى المستخدم العادي ما هو موجود على العنوان الشرطي yourapp.com ، وسيشاهد المسؤول test.yourapp.com.

يتم تضمين مورد الويب الخاص بك في تطبيق VKontakte من خلال WebView المعتادة ، عند فتحه من سطح المكتب ، من خلال iFrame. لذلك ، من الضروري مراعاة أن جزءًا من وظيفة JavaScript قد لا يكون متاحًا ، فمن الضروري إجراء اختبار شامل.

بعد اختبار تطبيق الويب على أجهزة مختلفة ، يمكن إرساله للإشراف حتى يمكن وضعه في الدليل. يتم إرسال طلب الإشراف من "لوحة تحكم التطبيق". فترة الاعتدال التي أعلنتها فكونتاكتي هي 7 أيام. حسابات التطبيقات الجديدة (الخدمات في مصطلحات فكونتاكتي) تحدث مرة واحدة في الأسبوع يوم الخميس.

هناك مذكرة مفصلة حول كيفية إنشاء التطبيق الصحيح. أوصي بأن تتحقق منها بعناية قبل تقديم طلب الاعتدال.

تطوير التطبيق VK التطبيق المصغر

لذلك ، فإن تطبيق VK Mini Apps هو ، في الواقع ، تطبيق ويب عادي مدمج في النظام الأساسي عبر iFrame أو WebView. لذلك ، فإن اختيار التكنولوجيا التي ستكتب عليها هو اختيارك.

ومع ذلك ، لتطوير الواجهة الأمامية ، توصي VKontakte بمكتبتها الخاصة من المكونات الجاهزة لـ VK UI ، المصنوعة على React:

هذا مناسب - العديد من المكونات النموذجية جاهزة بالفعل ، يبقى فقط لتضمينها في هيكل صفحتك أو SPA.

تم تبسيط المكونات بالفعل وفقًا لإرشادات تصميم VKontakte - سيكون مألوفًا وملائمًا للمستخدم للعمل مع أدوات التحكم والتفاعل التي اعتاد عليها بالفعل أثناء وجوده داخل الشبكة الاجتماعية.

لا يتطلب VKontakte من المطور اتباع أي بنية صلبة للواجهة الأمامية - نأخذ فقط ما هو مطلوب ونعدل المكونات حسب الحاجة. على سبيل المثال ، يمكنك دائمًا إضافة الفصل الدراسي الخاص بك ، معالج الأحداث الخاص بك إلى مكون عرض غبي ، وجعل مكونات متداخلة من أي عمق ، وهلم جرا.
هناك وثائق مفصلة إلى حد ما (وإن لم تكن كاملة) على VKUI . شفرة المصدر على جيثب: https://github.com/VKCOM/VKUI . وفقا لذلك ، أبسط التثبيت:

npm i —save-dev @vkontakte/vkui 

تأكد من وضع علامة التعريف التالية في رأس صفحة التخطيط الخاصة بالتطبيق الخاص بك ، وإلا فلن يتم عرض التنقل VKontakte الأصلي بشكل صحيح على أجهزة iOS:

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

بعد ذلك ، نحتاج فقط إلى تضمين تطبيق React على الصفحة.

خيارات فتح التطبيق

تضيف 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 ، vk_is_favorite ، علامة . هذا هو الإطار مع التطبيق الخاص بك سوف تفتح مع ما يقرب من نفس العنوان: 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 ، لا تخطط فكونتاكتي لتضمين معلمات إضافية في قائمة فكونتاكتي. ومع ذلك ، في عنوان url ، يمكنك تمرير علامة تجزئة تعسفية ، على سبيل المثال: youvkapp.ru # custom_param

التوجيه

إذا كان التطبيق يحتوي على أكثر من شاشة واحدة (أعتقد أن هذا هو حالتك فقط) ، فأنت بحاجة إلى الانتقال بين الشاشات. حالة تطبيق React لدينا هي المسؤولة عن إظهار هذه الشاشة أو تلك. بالنسبة لتنظيم العرض ، توفر VKontakte طريقتين: تغيير المكون النشط لـ VKUI View و VKUI Panel.

كل طريقة عرض مسؤولة عن سيناريو المستخدم الخاص بها: الأساسي والثانوي وأدلة الاتصال وصفحات البحث وغيرها. داخل العرض يحتوي على مجموعة من لوحة - هذه هي خطوات محددة (الشاشات) في البرنامج النصي للمستخدم. مجردة ، يبدو مثل هذا:

 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> 

في الحالة في activePanel ، نحدد معرف العنصر الذي سيتم عرضه.

تخطيط والمكونات

يمكنك الآن رؤية صفحة نموذجية داخل اللوحة ، تم إنشاؤها باستخدام مكونات VK UI.

توفر مكتبة 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 تعلن أنه قد لا يتم عرض المكونات بشكل كاف على أجهزة الكمبيوتر المكتبية. ومع ذلك ، يمكن تصميمها بإضافة قواعد css الخاصة بها. على سبيل المثال ، تم تحريك الرسوم المتحركة للمراحل الانتقالية بين اللوحات في تطبيق واحد بهذه الطريقة:

 .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; } } 

ترتبط هذه الأنماط في الدفق العام للأنماط المتصلة بالتطبيق الخاص بك.

مكتبة VK Connect

توفر مكتبة VK Connect الوصول إلى الإمكانيات الواسعة لشبكة VKontakte نفسها ، وكذلك إلى إمكانيات الجهاز إذا كنا نعمل من تطبيق الهاتف المحمول. لتوصيلها ، تحتاج إلى تثبيت حزمة vkontakte / vk-connect: npm i —save-dev vkontakte / vk-connect .

من بين العديد من ميزات 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 و Web) ، لذلك من الأفضل التحقق من هذا الدعم قبل تنفيذ الكود:

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

يوفر VK Connect أيضًا دعمًا لطلبات واجهة برمجة تطبيقات VK ، إذا كنت بحاجة إلى شيء أكثر مما توفره مكتبة VK Connect نفسها:

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

VK Pay

VK Pay ، في الواقع ، واجهة أمامية مريحة لاستخدام خدمة الدفع عبر الإنترنت باستخدام Money Mail.Ru. للاتصال بنموذج الدفع ، فقط افتح نافذة الدفع باستخدام مكالمة في مكتبة VK Connect:

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

وبالتالي ، يمكنك بيع خدماتك وسلعك باستخدام وسيلة دفع داخلية على شبكة VKontakte. مزيد من التفاصيل في الوثائق الرسمية .