Desarrollo de aplicaciones en mini aplicaciones VK

¿Por qué debería buscar desarrollar aplicaciones para trabajar en VK? Tengo muchos años de desarrollo front-end para servicios masivos, y lo que la red social VKontakte está ofreciendo actualmente al desarrollador es una forma rápida y efectiva de construir otro canal de comunicación con una audiencia realmente grande. A continuación, le diré cuál es la idea de las mini aplicaciones VK, qué tecnologías usar al desarrollar la aplicación y a qué debe prestar atención.



Publicación inicial de un artículo en la publicación del blog Blog.ru Cloud Solutions: https://mcs.mail.ru/blog/razrabotka-prilozhenij-v-vk-mini-apps

Plataforma de aplicaciones mini VK

VKontakte ofrece a los desarrolladores externos la oportunidad de escribir aplicaciones web y colocarlas en el directorio de aplicaciones y / o promocionarlas dentro de la red. Los usuarios de la aplicación no necesitan descargar aplicaciones nativas individuales de Google Play / App Store, la funcionalidad de la aplicación seleccionada está disponible dentro de la sesión del usuario de la aplicación principal en VKontakte o mediante un navegador en el sitio de la red social. La red social tiene instrucciones detalladas sobre cómo comenzar en la plataforma de mini aplicaciones VK .

Infraestructura de aplicaciones VK mini app

La mini aplicación VK es un recurso web regular ubicado en una dirección específica. Debemos colocarlo en el "Panel de control de aplicaciones" de la red social.

VKontakte le permite colocar tres versiones de la aplicación:

• para clientes móviles, es decir, para abrir en la aplicación VKontakte nativa;
• opción de escritorio: vk.com en el navegador;
• opción para navegadores en teléfonos móviles (https://m.vk.com).

Al colocar, también puede habilitar el "Modo de desarrollo". Permite a los usuarios de VKontakte designados como administradores de aplicaciones usar una dirección separada para probar cada uno de los tres escaparates. Es decir, al abrir la aplicación, un usuario común verá lo que se encuentra en la dirección condicional yourapp.com, y el administrador verá test.yourapp.com.

Su recurso web está incrustado en la aplicación VKontakte a través del WebView habitual, cuando se abre desde el escritorio, a través de iFrame. Por lo tanto, es necesario tener en cuenta que parte de la funcionalidad de JavaScript puede no estar disponible, es necesario realizar pruebas exhaustivas.

Después de probar la aplicación web en diferentes dispositivos, se puede enviar con moderación para que se pueda colocar en el directorio. La solicitud de moderación se envía desde el "Panel de control de la aplicación". El período de moderación anunciado por VKontakte es de 7 días. Los cálculos de nuevas aplicaciones (servicios en la terminología de VKontakte) se realizan una vez a la semana los jueves.

Hay una nota detallada sobre cómo crear la aplicación correcta. Le recomiendo que consulte cuidadosamente con ella antes de darle la solicitud de moderación.

Desarrollo de aplicaciones VK mini app

Entonces, la aplicación VK Mini Apps es, de hecho, una aplicación web normal que está integrada en la plataforma a través de iFrame o WebView. Por lo tanto, la elección de la tecnología en la que se escribirá es suya.

Sin embargo, para desarrollar la interfaz, VKontakte recomienda su propia biblioteca de componentes listos para VK UI , realizada en React:

Esto es conveniente: muchos componentes típicos ya están listos, solo queda incrustarlos en la estructura de su página o SPA.

Los componentes ya están estilizados de acuerdo con la guía de estilo de VKontakte: será más familiar y conveniente para el usuario trabajar con los controles y la interactividad a la que ya está acostumbrado dentro de la red social.

VKontakte no requiere que el desarrollador siga ninguna arquitectura frontend rígida: tomamos solo lo que se necesita y modificamos los componentes según sea necesario. Por ejemplo, siempre puede agregar su clase, su controlador de eventos a un estúpido componente de vista, crear componentes anidados de cualquier profundidad, etc.
Existe una documentación bastante detallada (aunque no completamente completa) sobre VKUI . Código fuente en GitHub: https://github.com/VKCOM/VKUI . En consecuencia, la instalación más simple:

npm i —save-dev @vkontakte/vkui 

Asegúrese de poner la siguiente metaetiqueta en el encabezado de la página de diseño de su aplicación, de lo contrario, en dispositivos iOS, la navegación nativa de VKontakte no se mostrará correctamente:

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

A continuación, solo necesitamos insertar la aplicación React en la página.

Opciones de apertura de aplicaciones

VKontakte agrega parámetros de inicio a la barra de direcciones mediante la cual se abre su aplicación. Su lista es la siguiente: 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 . Ese es el marco con su aplicación se abrirá con aproximadamente la misma dirección: 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

Esto le permite tener un conjunto bastante completo de datos extraídos de la URL cuando inicia la aplicación para comenzar la interacción personal con un usuario específico. Por ejemplo, hable el mismo idioma con él: ruso, inglés o algún otro idioma, o solicite incluir sus notificaciones.

Para noviembre de 2019, Vkontakte no planea incluir parámetros adicionales en esta lista de VKontakte. Sin embargo, en la url puede pasar un hash arbitrario, por ejemplo: youvkapp.ru # custom_param

Enrutamiento

Si la aplicación tiene más de una pantalla (creo que este es su caso), necesita una transición entre pantallas. El estado de nuestra aplicación React es responsable de mostrar esta o aquella pantalla. En cuanto a la organización de View, VKontakte ofrece dos formas: cambiar el componente activo de VKUI View y VKUI Panel.

Cada vista es responsable de su propio escenario de usuario: primario, secundario, directorios de llamadas, páginas de búsqueda y otros. Dentro de la vista contiene su propio conjunto de paneles: estos son pasos específicos (pantallas) en la secuencia de comandos del usuario. En resumen, se ve así:

 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> 

En estado en activePanel, especificamos la identificación del elemento que se mostrará.

Diseño y componentes

Ahora puede ver una página típica dentro del Panel, creada usando los componentes de VK UI.

La biblioteca VK UI proporciona un conjunto casi completo de componentes necesarios para crear una aplicación interactiva: todo tipo de elementos de formulario, ventanas emergentes, alertas estilizadas, galerías, paneles de navegación, hilanderos, avatares, pies de página, 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> ) } 

Como puede ver, apareció otro paquete vkontakte:

 npm i —save-dev @vkontakte/icons 

Puede usar el administrador conveniente para seleccionar el icono deseado.

La regla principal es usar el componente correctamente o su propio diseño del encabezado. La aplicación nativa de VKontakte coloca botones de control en el lado derecho del encabezado.



Bloque personalizado:

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

Vale la pena prestar atención: VKontakte declara que los componentes pueden no mostrarse adecuadamente en los escritorios. Sin embargo, se pueden diseñar agregando sus propias reglas CSS. Por ejemplo, la animación de transiciones entre paneles en una aplicación se estilizó de esta manera:

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

Estos estilos están conectados en la secuencia general de estilos conectados a su aplicación.

Biblioteca VK Connect

La biblioteca VK Connect proporciona acceso a las amplias capacidades de la red VKontakte en sí, así como a las capacidades del dispositivo si estamos trabajando desde una aplicación móvil. Para conectarlo, debe instalar el paquete vkontakte / vk-connect: npm i —save-dev vkontakte / vk-connect .

Entre las muchas características de VK Connect están escanear un código QR, obtener una geolocalización y llamar una tarjeta de contacto. También hay amplias oportunidades para usar las funciones de la red social: activar / desactivar notificaciones, publicar publicaciones en el muro, autorización de la comunidad, suscribirse a mensajes. Deben usarse con prudencia: por ejemplo, hay un límite en el número de notificaciones, no más de una por día. Hay recomendaciones separadas para las notificaciones . Se proporciona una lista completa de características en la documentación .

Para que nuestra aplicación comience a funcionar en general, primero debemos realizar la inicialización:

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

Toda interacción adicional con la biblioteca ocurre de manera similar. Usando el método connect.send, llamamos a la acción deseada y escuchamos las respuestas. Para hacer esto, debemos suscribirnos a eventos:

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

En el objeto de detalle, se devuelve el tipo: el nombre del tipo de evento al que esperamos una respuesta y los datos, un conjunto de datos. En el ejemplo anterior, escuchamos la respuesta a la solicitud connect.send ("VKWebAppGetUserInfo", {}), que debe devolver información sobre el usuario de la aplicación: nombre, sexo, fecha de nacimiento, lugar de residencia, enlace a la imagen del avatar en la red social.

VKontakte no garantiza el soporte para todos los eventos en todos los dispositivos (iOS, Android, Web), por lo que es mejor verificar este soporte antes de ejecutar el código:

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

VK Connect también proporciona soporte para solicitudes a la API de VK , si necesita algo más de lo que la biblioteca de VK Connect puede proporcionar:

 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 es, de hecho, un front-end conveniente para usar el servicio de pago en línea usando Money Mail.Ru. Para llamar al formulario de pago, simplemente abra la ventana de pago mediante una llamada en la biblioteca VK Connect:

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

Por lo tanto, puede vender sus servicios y bienes utilizando un medio de pago interno en la red VKontakte. Más detalles en la documentación oficial .