Pourquoi devrais-je envisager de développer des applications pour travailler en VK? J'ai derrière moi de nombreuses années de développement front-end pour les services de masse, et ce que le réseau social VKontakte offre actuellement au développeur est un moyen rapide et efficace de construire un autre canal de communication avec un public très large. Ci-dessous, je vais vous dire quelle est l'idée des mini-applications VK, quelles technologies utiliser lors du développement de l'application et à quoi vous devez prêter attention.
Publication initiale d'un article sur le blog de Blog.ru Cloud Solutions: https://mcs.mail.ru/blog/razrabotka-prilozhenij-v-vk-mini-appsPlateforme VK mini apps
VKontakte offre aux développeurs tiers la possibilité d'écrire des applications Web et de les placer dans le répertoire des applications et / ou de les promouvoir au sein du réseau. Les utilisateurs d'applications n'ont pas besoin de télécharger des applications natives individuelles depuis Google Play / App Store, la fonctionnalité de l'application sélectionnée est disponible dans la session utilisateur de l'application principale dans VKontakte ou via un navigateur sur le site de réseau social. Le réseau social a des instructions détaillées sur la façon de démarrer sur
la plate-forme VK mini apps .
Infrastructure d'application VK mini app
VK mini app est une ressource Web régulière située à une adresse spécifique. Nous devons le placer dans le "Panneau de configuration des applications" du réseau social.
VKontakte vous permet de placer trois versions de l'application:
- pour les clients mobiles - c'est-à-dire pour l'ouverture dans l'application native VKontakte;
- option de bureau - vk.com dans le navigateur;
- option pour les navigateurs dans les téléphones mobiles (https://m.vk.com).
Lors du placement, vous pouvez également activer le "Mode de développement". Il permet aux utilisateurs de VKontakte désignés comme administrateurs d'applications d'utiliser une adresse distincte pour tester chacune des trois vitrines. Autrement dit, lors de l'ouverture de l'application, un utilisateur ordinaire verra ce qui se trouve à l'adresse conditionnelle yourapp.com, et l'administrateur verra test.yourapp.com.
Votre ressource Web est intégrée dans l'application VKontakte via la vue Web habituelle, lorsqu'elle est ouverte à partir du bureau, via iFrame. Par conséquent, il est nécessaire de garder à l'esprit qu'une partie de la fonctionnalité JavaScript peut ne pas être disponible, des tests approfondis sont nécessaires.
Après avoir testé l'application Web sur différents appareils, elle peut être envoyée pour modération afin de pouvoir être placée dans le répertoire. La demande de modération est envoyée depuis le "Panneau de configuration de l'application". Le délai de modération annoncé par VKontakte est de 7 jours. Les calculs de nouvelles applications (services dans la terminologie de VKontakte) ont lieu une fois par semaine le jeudi.
Il y a une note détaillée sur la façon de créer la bonne application. Je vous recommande de vérifier attentivement avec elle avant de donner la demande de modération.
Développement d'applications VK mini app
Ainsi, l'application VK Mini Apps est, en fait, une application Web standard intégrée à la plate-forme via iFrame ou WebView. Par conséquent, le choix de la technologie sur laquelle elle sera écrite vous appartient.
Cependant, pour développer l'interface, VKontakte recommande sa propre
bibliothèque de composants prêts à l'emploi pour l'interface utilisateur VK , réalisée sur React:
C'est pratique - de nombreux composants typiques sont déjà prêts, il ne reste plus qu'à les intégrer dans la structure de votre page ou SPA.
Les composants sont déjà stylisés selon le guide de style VKontakte - il sera plus familier et plus pratique pour l'utilisateur de travailler avec les contrôles et l'interactivité auxquels il est déjà habitué lorsqu'il est à l'intérieur du réseau social.
VKontakte n'exige pas du développeur qu'il suive une architecture frontale rigide - nous prenons uniquement ce qui est nécessaire et modifions les composants selon les besoins. Par exemple, vous pouvez toujours ajouter votre classe, votre gestionnaire d'événements à un stupide composant d'affichage, créer des composants imbriqués de n'importe quelle profondeur, etc.
Il existe une documentation assez détaillée (mais pas entièrement complète)
sur VKUI . Code source sur GitHub:
https://github.com/VKCOM/VKUI . En conséquence, l'installation la plus simple:
npm i —save-dev @vkontakte/vkui
Assurez-vous de mettre la balise Meta suivante dans la tête de la page de mise en page de votre application, sinon sur les appareils iOS, la navigation native de VKontakte ne s'affichera pas correctement:
<meta content=»width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no, viewport-fit=cover» name=»viewport» />
Ensuite, nous avons juste besoin d'intégrer l'application React sur la page.
Options d'ouverture d'application
VKontakte lui-même ajoute des paramètres de démarrage à la barre d'adresse par laquelle votre application s'ouvre. Leur liste est la suivante:
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, sign . Tel est le cadre avec votre application ouvrira à peu près à la même adresse:
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=fsdfsdgfgfiuoitu8345u34jCela vous permet d'avoir déjà un ensemble assez complet de données extraites de l'URL lorsque vous démarrez l'application pour commencer une interaction personnelle avec un utilisateur spécifique. Par exemple, parlez avec lui la même langue - russe, anglais ou une autre langue, ou demandez à inclure vos notifications.
Pour novembre 2019, Vkontakte ne prévoit pas d'inclure des paramètres supplémentaires dans cette liste de VKontakte. Cependant, dans l'url, vous pouvez passer un hachage arbitraire, par exemple:
youvkapp.ru # custom_paramAcheminement
Si l'application a plus d'un écran (je pense que c'est juste votre cas), vous avez besoin d'une transition entre les écrans. L'état de notre application React est responsable de l'affichage de tel ou tel écran. En ce qui concerne l'organisation de View, VKontakte propose deux méthodes: la modification du composant actif de VKUI View et VKUI Panel.
Chaque vue est responsable de son propre scénario utilisateur: primaire, secondaire, répertoires d'appels, pages de recherche et autres. À l'intérieur de la vue contient son propre ensemble de panneaux - ce sont des étapes spécifiques (écrans) dans le script utilisateur. De façon abstraite, cela ressemble à ceci:
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>
Dans l'état dans activePanel, nous spécifions l'id de l'élément à afficher.
Disposition et composants
Vous pouvez maintenant voir une page typique à l'intérieur du Panel, créée à l'aide des composants de l'interface utilisateur VK.
La bibliothèque VK UI fournit un ensemble presque complet de composants nécessaires à la création d'une application interactive: toutes sortes d'éléments de formulaire, fenêtres contextuelles, alertes stylisées, galeries, panneaux de navigation, filateurs, avatars, pieds de page, etc.
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> ) }
Comme vous pouvez le voir, un autre paquet vkontakte est apparu:
npm i —save-dev @vkontakte/icons
Vous pouvez utiliser le
gestionnaire pratique pour sélectionner l'icône souhaitée.
La règle principale est d'utiliser correctement le composant ou votre propre disposition de l'en-tête. L'application native VKontakte place des boutons de contrôle sur le côté droit de l'en-tête.
Bloc personnalisé:
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> ); } }
Il convient de faire attention: VKontakte déclare que les composants peuvent ne pas être affichés correctement sur les ordinateurs de bureau. Cependant, ils peuvent être stylisés en ajoutant leurs propres règles CSS. Par exemple, l'animation des transitions entre les panneaux dans une application a été stylisée de cette façon:
.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; } }
Ces styles sont connectés dans le flux général de styles connectés à votre application.
Bibliothèque VK Connect
La bibliothèque VK Connect donne accès aux vastes capacités du réseau VKontakte lui-même, ainsi qu'aux capacités de l'appareil si nous travaillons à partir d'une application mobile. Pour le connecter, vous devez installer le
package vkontakte / vk-connect:
npm i —save-dev vkontakte / vk-connect .
Parmi les nombreuses fonctionnalités de VK Connect, vous pouvez scanner un code QR, obtenir une géolocalisation et appeler une carte de contact. Il existe également de nombreuses possibilités d'utilisation des fonctionnalités des réseaux sociaux: activation / désactivation des notifications, publication de messages sur le mur, autorisation de la communauté, abonnement aux messages. Ils doivent être utilisés à bon escient: par exemple, le nombre de notifications est limité - pas plus d'une par jour. Il existe
des recommandations distinctes pour les notifications . Une liste complète des fonctionnalités
est fournie dans la documentation .
Pour que notre application commence à fonctionner en général, nous devons d'abord effectuer l'initialisation:
import connect from '@vkontakte/vk-connect'; connect.send(«VKWebAppInit», {});
Toute autre interaction avec la bibliothèque se produit de manière similaire. En utilisant la méthode connect.send, nous appelons l'action souhaitée et écoutons les réponses. Pour ce faire, nous devons nous abonner aux événements:
connect.subscribe((e) => { switch (e.detail.type) { case «VKWebAppGetUserInfoResult» : this.bindConnectUserData(e.detail.data); break; } });
Dans l'objet détail, le type est renvoyé - le nom du type d'événement auquel nous attendons une réponse, et les données - un ensemble de données. Dans l'exemple ci-dessus, nous écoutons la réponse à la demande connect.send ("VKWebAppGetUserInfo", {}), qui doit renvoyer des informations sur l'utilisateur de l'application: nom, sexe, date de naissance, lieu de résidence, lien vers l'image de l'avatar sur le réseau social.
VKontakte ne garantit pas la prise en charge de tous les événements sur tous les appareils (iOS, Android, Web), il est donc préférable de vérifier cette prise en charge avant d'exécuter le code:
if (connect.supports(«VKWebAppGetUserInfo»)) …
VK Connect prend également en charge les demandes à
l'API VK , si vous avez besoin de quelque chose de plus que la bibliothèque VK Connect elle-même peut fournir:
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 est, en fait, un frontal pratique pour utiliser le service de paiement en ligne en utilisant Money Mail.Ru. Pour appeler le formulaire de paiement, ouvrez simplement la fenêtre de paiement en utilisant un appel dans la bibliothèque VK Connect:
connect.send(«VKWebAppOpenPayForm», {«app_id»: 888888, «action»: «pay-to-service», «params»: {}});
Ainsi, vous pouvez vendre vos services et biens en utilisant un moyen de paiement interne sur le réseau VKontakte. Plus de détails dans la
documentation officielle .