Anwendungsentwicklung in VK Mini Apps

Warum sollte ich mich mit der Entwicklung von Anwendungen für die Arbeit in VK befassen? Ich habe viele Jahre Front-End-Entwicklung für Massendienste hinter mir und das, was das soziale Netzwerk von VKontakte dem Entwickler derzeit bietet, ist eine schnelle und effektive Möglichkeit, einen weiteren Kommunikationskanal mit einem wirklich großen Publikum aufzubauen. Im Folgenden erkläre ich Ihnen, was die Idee von VK Mini-Apps ist, welche Technologien bei der Entwicklung der Anwendung verwendet werden sollen und worauf Sie achten sollten.



Die Erstveröffentlichung des Artikels im Blog von Blog.ru Cloud Solutions: https://mcs.mail.ru/blog/razrabotka-prilozhenij-v-vk-mini-apps

VK Mini-Apps-Plattform

VKontakte bietet Drittentwicklern die Möglichkeit, Webanwendungen zu schreiben und im Anwendungsverzeichnis abzulegen und / oder innerhalb des Netzwerks zu bewerben. Anwendungsbenutzer müssen keine einzelnen nativen Anwendungen aus dem Google Play / App Store herunterladen. Die Funktionen der ausgewählten Anwendung stehen in der Benutzersitzung der Hauptanwendung in VKontakte oder über einen Browser auf der Website des sozialen Netzwerks zur Verfügung. Das soziale Netzwerk bietet detaillierte Anweisungen für den Einstieg in die VK mini-Apps-Plattform .

Anwendungsinfrastruktur VK Mini App

Die VK Mini-App ist eine reguläre Webressource, die sich an einer bestimmten Adresse befindet. Wir müssen es im "Application Control Panel" des sozialen Netzwerks platzieren.

Mit VKontakte können Sie drei Versionen der Anwendung platzieren:

• für mobile Clients - dh zum Öffnen in der nativen VKontakte-Anwendung;
• Desktop-Option - vk.com im Browser;
• Option für Browser in Mobiltelefonen (https://m.vk.com).

Beim Platzieren können Sie auch den "Entwicklungsmodus" aktivieren. VKontakte-Benutzer, die als Anwendungsadministratoren festgelegt wurden, können eine separate Adresse zum Testen jeder der drei Storefronts verwenden. Das heißt, beim Öffnen der Anwendung sieht ein normaler Benutzer, was sich unter der bedingten Adresse yourapp.com befindet, und der Administrator sieht test.yourapp.com.

Ihre Webressource wird über das übliche WebView in die VKontakte-Anwendung eingebettet, wenn Sie über iFrame vom Desktop aus geöffnet werden. Daher ist zu beachten, dass ein Teil der JavaScript-Funktionalität möglicherweise nicht verfügbar ist. Daher ist ein gründliches Testen erforderlich.

Nach dem Testen der Webanwendung auf verschiedenen Geräten kann sie zur Moderation gesendet und in das Verzeichnis gestellt werden. Der Antrag auf Moderation wird über das "Application Control Panel" gesendet. Die von VKontakte angekündigte Moderationsfrist beträgt 7 Tage. Die Berechnung neuer Anwendungen (Dienste in der Terminologie von VKontakte) erfolgt einmal wöchentlich donnerstags.

Es gibt ein detailliertes Memo zum Erstellen der richtigen Anwendung. Ich empfehle Ihnen, sich sorgfältig mit ihr in Verbindung zu setzen, bevor Sie den Antrag auf Moderation stellen.

Anwendungsentwicklung VK Mini App

Die VK Mini Apps-Anwendung ist also eine normale Webanwendung, die über iFrame oder WebView in die Plattform eingebettet ist. Daher liegt die Wahl der Technologie, auf die geschrieben wird, bei Ihnen.

Für die Entwicklung des Frontends empfiehlt VKontakte jedoch eine eigene Bibliothek mit vorgefertigten Komponenten für die VK-Benutzeroberfläche , die auf React erstellt wurde:

Dies ist praktisch - viele typische Komponenten sind bereits fertig und müssen nur noch in die Struktur Ihrer Seite oder Ihres SPA eingebettet werden.

Die Komponenten sind bereits gemäß dem VKontakte-Styleguide stilisiert. So kann der Benutzer vertrauter und bequemer mit den Steuerelementen und der Interaktivität arbeiten, mit denen er bereits im sozialen Netzwerk vertraut ist.

VKontakte verlangt vom Entwickler nicht, dass er einer starren Frontend-Architektur folgt. Wir nehmen nur das, was benötigt wird, und passen die Komponenten nach Bedarf an. Zum Beispiel können Sie Ihre Klasse, Ihren Event-Handler immer einer dummen Ansichtskomponente hinzufügen, verschachtelte Komponenten beliebiger Tiefe erstellen und so weiter.
Es gibt eine ziemlich detaillierte (wenn auch nicht vollständige) Dokumentation zu VKUI . Quellcode auf GitHub: https://github.com/VKCOM/VKUI . Dementsprechend einfach ist die Installation:

npm i —save-dev @vkontakte/vkui 

Stellen Sie sicher, dass Sie das folgende Meta-Tag in den Kopf der Layout-Seite Ihrer Anwendung einfügen, da andernfalls auf iOS-Geräten die native VKontakte-Navigation nicht korrekt angezeigt wird:

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

Als nächstes müssen wir nur die React-Anwendung auf der Seite einbetten.

Optionen zum Öffnen von Anwendungen

VKontakte selbst fügt der Adressleiste, über die Ihre Anwendung geöffnet wird, Startparameter hinzu. Die Liste lautet wie folgt: 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 . Das ist der Rahmen mit Ihrer Anmeldung wird ungefähr die gleiche Adresse öffnen: 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

Auf diese Weise können Sie bereits beim Starten der Anwendung einen ziemlich vollständigen Datensatz aus der URL extrahieren, um eine persönliche Interaktion mit einem bestimmten Benutzer zu beginnen. Sprechen Sie zum Beispiel dieselbe Sprache mit ihm - Russisch, Englisch oder eine andere Sprache, oder fragen Sie nach Ihren Benachrichtigungen.

Für November 2019 plant Vkontakte nicht, zusätzliche Parameter in diese Liste von VKontakte aufzunehmen. In der URL können Sie jedoch einen beliebigen Hash übergeben, zum Beispiel: youvkapp.ru # custom_param

Routing

Wenn die Anwendung mehr als einen Bildschirm hat (ich denke, das ist nur Ihr Fall), brauchen Sie einen Übergang zwischen den Bildschirmen. Der Status unserer React-Anwendung ist für die Anzeige dieses oder jenes Bildschirms verantwortlich. In Bezug auf die Organisation von View bietet VKontakte zwei Möglichkeiten: Ändern der aktiven Komponente von VKUI View und VKUI Panel.

Jede Ansicht ist für ihr eigenes Benutzerszenario verantwortlich: Primär-, Sekundär-, Anrufverzeichnisse, Suchseiten und andere. In der Ansicht befindet sich eine eigene Gruppe von Bedienfeldern. Hierbei handelt es sich um bestimmte Schritte (Bildschirme) im Benutzerskript. Abstrakt sieht es so aus:

 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> 

In state in activePanel geben wir die ID des Elements an, das angezeigt werden soll.

Layout und Komponenten

Jetzt sehen Sie eine typische Seite innerhalb des Panels, die mit den VK-UI-Komponenten erstellt wurde.

Die VK-Benutzeroberflächenbibliothek enthält fast alle Komponenten, die zum Erstellen einer interaktiven Anwendung erforderlich sind: alle Arten von Formularelementen, Popups, stilisierten Warnungen, Galerien, Navigationsfeldern, Drehfeldern, Avataren, Fußzeilen usw.

 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> ) } 

Wie Sie sehen, ist ein weiteres vkontakte-Paket erschienen:

 npm i —save-dev @vkontakte/icons 

Mit dem praktischen Manager können Sie das gewünschte Symbol auswählen.

Die Hauptregel besteht darin, die Komponente richtig zu verwenden oder das Layout der Kopfzeile selbst festzulegen. Die native VKontakte-Anwendung platziert Steuerungsschaltflächen auf der rechten Seite der Kopfzeile.



Benutzerdefinierter Block:

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

Es ist zu beachten: VKontakte weist darauf hin, dass die Komponenten auf Desktops möglicherweise nicht ausreichend angezeigt werden. Sie können jedoch durch Hinzufügen eigener CSS-Regeln gestaltet werden. Zum Beispiel wurde die Animation von Übergängen zwischen Panels in einer Anwendung folgendermaßen stilisiert:

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

Diese Stile sind im allgemeinen Stream der Stile verknüpft, die mit Ihrer Anwendung verbunden sind.

VK Connect-Bibliothek

Die VK Connect-Bibliothek bietet Zugriff auf die umfangreichen Funktionen des VKontakte-Netzwerks selbst sowie auf die Funktionen des Geräts, wenn wir von einer mobilen Anwendung aus arbeiten. Um eine Verbindung herzustellen , müssen Sie das Paket vkontakte / vk-connect installieren: npm i —save-dev vkontakte / vk-connect .

Zu den zahlreichen Funktionen von VK Connect gehören das Scannen eines QR-Codes, das Abrufen einer Geolocation und das Aufrufen einer Kontaktkarte. Es gibt auch zahlreiche Möglichkeiten, die Funktionen des sozialen Netzwerks zu nutzen: Benachrichtigungen aktivieren / deaktivieren, Beiträge an der Pinnwand veröffentlichen, Community-Autorisierung, Nachrichten abonnieren. Sie müssen mit Bedacht eingesetzt werden: Beispielsweise ist die Anzahl der Benachrichtigungen begrenzt - nicht mehr als eine pro Tag. Es gibt separate Empfehlungen für Benachrichtigungen . Eine vollständige Liste der Funktionen finden Sie in der Dokumentation .

Damit unsere Anwendung im Allgemeinen funktioniert, müssen wir zuerst eine Initialisierung durchführen:

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

Alle weiteren Interaktionen mit der Bibliothek erfolgen auf ähnliche Weise. Mit der Methode connect.send rufen wir die gewünschte Aktion auf und hören uns die Antworten an. Dazu müssen wir Ereignisse abonnieren:

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

Im Detailobjekt wird type zurückgegeben - der Name des Ereignistyps, auf den wir warten, und data - ein Datensatz. Im obigen Beispiel hören wir uns die Antwort auf die Anfrage connect.send ("VKWebAppGetUserInfo", {}) an, die Informationen zum Benutzer der Anwendung zurückgeben soll: Name, Geschlecht, Geburtsdatum, Wohnort, Link zum Bild des Avatars im sozialen Netzwerk.

VKontakte garantiert nicht die Unterstützung aller Ereignisse auf allen Geräten (iOS, Android, Web). Es ist daher besser, diese Unterstützung zu überprüfen, bevor Sie den Code ausführen:

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

VK Connect bietet auch Unterstützung für Anfragen an die VK-API , wenn Sie mehr benötigen, als die VK Connect-Bibliothek selbst bieten kann:

 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 ist in der Tat ein praktisches Frontend für die Nutzung des Online-Zahlungsdienstes mit Money Mail.Ru. Um das Zahlungsformular aufzurufen, öffnen Sie einfach das Zahlungsfenster über einen Anruf in der VK Connect-Bibliothek:

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

So können Sie Ihre Dienstleistungen und Waren über ein internes Zahlungsmittel im VKontakte-Netzwerk verkaufen. Weitere Details in der offiziellen Dokumentation .