Desenvolvimento de aplicativos em mini aplicativos VK

Por que devo procurar desenvolver aplicativos para trabalhar no VK? Eu já tive muitos anos de desenvolvimento front-end para serviços de massa e o que a rede social da VKontakte atualmente oferece ao desenvolvedor é uma maneira rápida e eficaz de construir outro canal de comunicação com um público realmente grande. Abaixo, mostrarei qual é a ideia dos mini aplicativos VK, quais tecnologias usar no desenvolvimento do aplicativo e o que você deve prestar atenção.



A publicação inicial do artigo na postagem do blog Blog.ru Cloud Solutions: https://mcs.mail.ru/blog/razrabotka-prilozhenij-v-vk-mini-apps

Plataforma de aplicativos mini VK

O VKontakte oferece aos desenvolvedores de terceiros a oportunidade de escrever aplicativos da Web e colocá-los no diretório de aplicativos e / ou promovê-los na rede. Os usuários do aplicativo não precisam fazer o download de aplicativos nativos individuais da Google Play / App Store. A funcionalidade do aplicativo selecionado está disponível na sessão do usuário do aplicativo principal no VKontakte ou através de um navegador no site da rede social. A rede social possui instruções detalhadas sobre como começar na plataforma de aplicativos mini VK .

Mini-aplicativo VK de infraestrutura de aplicativos

O mini aplicativo VK é um recurso regular da Web localizado em um endereço específico. Devemos colocá-lo no "Painel de controle do aplicativo" da rede social.

O VKontakte permite colocar três versões do aplicativo:

• para clientes móveis - ou seja, para abrir no aplicativo VKontakte nativo;
• opção de área de trabalho - vk.com no navegador;
• opção para navegadores em telefones celulares (https://m.vk.com).

Ao colocar, você também pode ativar o "Modo de Desenvolvimento". Ele permite que os usuários do VKontakte designados como administradores de aplicativos usem um endereço separado para testar cada uma das três fachadas de lojas. Ou seja, ao abrir o aplicativo, um usuário comum verá o que está localizado no endereço condicional yourapp.com e o administrador verá test.yourapp.com.

Seu recurso da Web é incorporado ao aplicativo VKontakte por meio do WebView usual, quando aberto da área de trabalho, pelo iFrame. Portanto, é necessário ter em mente que parte da funcionalidade JavaScript pode não estar disponível, é necessário um teste completo.

Após testar o aplicativo Web em diferentes dispositivos, ele pode ser enviado com moderação para que possa ser colocado no diretório O pedido de moderação é enviado a partir do "Painel de Controle do Aplicativo". O período de moderação anunciado por VKontakte é de 7 dias. Os cálculos de novas aplicações (serviços na terminologia do VKontakte) ocorrem uma vez por semana às quintas-feiras.

Há uma nota detalhada sobre como criar o aplicativo certo. Eu recomendo que você verifique cuidadosamente com ela antes de apresentar o pedido de moderação.

Mini aplicativo VK de desenvolvimento de aplicativos

Portanto, o aplicativo VK Mini Apps é, de fato, um aplicativo Web regular incorporado à plataforma via iFrame ou WebView. Portanto, a escolha da tecnologia na qual será escrita é sua.

No entanto, para desenvolver o frontend, o VKontakte recomenda sua própria biblioteca de componentes prontos para a interface do usuário do VK , feitos no React:

Isso é conveniente - muitos componentes típicos já estão prontos, resta apenas incorporá-los na estrutura da sua página ou SPA.

Os componentes já foram estilizados de acordo com o guia de estilo do VKontakte - será mais familiar e conveniente para o usuário trabalhar com os controles e a interatividade com os quais ele já estava acostumado na rede social.

O VKontakte não exige que o desenvolvedor siga nenhuma arquitetura rígida de front-end - pegamos apenas o necessário e modificamos os componentes conforme necessário. Por exemplo, você sempre pode adicionar sua classe, seu manipulador de eventos a um componente de exibição estúpido, criar componentes aninhados de qualquer profundidade e assim por diante.
Existe uma documentação bastante detalhada (embora não totalmente completa) na VKUI . Código-fonte no GitHub: https://github.com/VKCOM/VKUI . Por conseguinte, a instalação mais simples:

npm i —save-dev @vkontakte/vkui 

Coloque a seguinte metatag na cabeça da página de layout do seu aplicativo; caso contrário, nos dispositivos iOS, a navegação nativa do VKontakte não será exibida corretamente:

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

Em seguida, precisamos incorporar o aplicativo React na página.

Opções de abertura de aplicativos

O próprio VKontakte adiciona parâmetros de inicialização à barra de endereço pela qual seu aplicativo é aberto. A lista deles é a seguinte: 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, sinal . Esse é o quadro com o seu aplicativo será aberto com aproximadamente o mesmo endereço: 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

Isso permite que você já tenha um conjunto razoavelmente completo de dados extraídos do URL ao iniciar o aplicativo para iniciar a interação pessoal com um usuário específico. Por exemplo, fale o mesmo idioma com ele - russo, inglês ou outro idioma, ou peça para incluir suas notificações.

Para novembro de 2019, o Vkontakte não planeja incluir parâmetros adicionais nesta lista de VKontakte. No entanto, no URL, você pode transmitir um hash arbitrário, por exemplo: youvkapp.ru # custom_param

Encaminhamento

Se o aplicativo tiver mais de uma tela (acho que esse é o seu caso), você precisará de uma transição entre as telas. O estado do nosso aplicativo React é responsável por mostrar esta ou aquela tela. Quanto à organização do View, o VKontakte oferece duas maneiras: alterar o componente ativo do VKUI View e do VKUI Panel.

Cada modo de exibição é responsável por seu próprio cenário de usuário: primário, secundário, diretórios de chamadas, páginas de pesquisa e outros. Inside the View contém seu próprio conjunto de painéis - estas são etapas específicas (telas) no script do usuário. Abstratamente, fica assim:

 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> 

No estado do activePanel, especificamos o ID do elemento a ser exibido.

Layout e componentes

Agora você pode ver uma página típica dentro do painel, criada usando os componentes da interface do usuário da VK.

A biblioteca de interface do usuário do VK fornece um conjunto quase completo de componentes necessários para a criação de um aplicativo interativo: todos os tipos de elementos de formulário, pop-ups, alertas estilizados, galerias, painéis de navegação, giradores, avatares, rodapés e assim por diante.

 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 você pode ver, outro pacote vkontakte apareceu:

 npm i —save-dev @vkontakte/icons 

Você pode usar o gerenciador conveniente para selecionar o ícone desejado.

A regra principal é usar o componente corretamente ou seu próprio layout do cabeçalho. O aplicativo VKontakte nativo coloca os botões de controle no lado direito do cabeçalho.



Bloco 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 a pena prestar atenção: o VKontakte declara que os componentes podem não ser exibidos adequadamente nos desktops. No entanto, eles podem ser estilizados adicionando suas próprias regras de css. Por exemplo, a animação de transições entre painéis em um aplicativo foi estilizada da seguinte maneira:

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

Esses estilos são conectados no fluxo geral de estilos conectados ao seu aplicativo.

Biblioteca VK Connect

A biblioteca VK Connect fornece acesso aos amplos recursos da própria rede VKontakte, bem como aos recursos do dispositivo, se trabalharmos em um aplicativo móvel. Para conectá-lo, você precisa instalar o pacote vkontakte / vk-connect: npm i - save -dev vkontakte / vk-connect .

Entre os muitos recursos do VK Connect, estão a digitalização de um código QR, a obtenção de uma localização geográfica e a chamada de um cartão de contato. Também existem amplas oportunidades para o uso dos recursos de rede social: ativar / desativar notificações, publicar mensagens na parede, autorização da comunidade, assinar mensagens. Eles devem ser usados ​​com sabedoria: por exemplo, há um limite no número de notificações - não mais que uma por dia. Existem recomendações separadas para notificações . Uma lista completa de recursos é fornecida na documentação .

Para que nosso aplicativo comece a funcionar em geral, primeiro precisamos executar a inicialização:

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

Toda interação adicional com a biblioteca ocorre de maneira semelhante. Usando o método connect.send, chamamos a ação desejada e ouvimos as respostas. Para fazer isso, precisamos assinar os eventos:

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

No objeto de detalhe, o tipo é retornado - o nome do tipo de evento ao qual estamos aguardando uma resposta e os dados - um conjunto de dados. No exemplo acima, ouvimos a resposta à solicitação connect.send ("VKWebAppGetUserInfo", {}), que deve retornar informações sobre o usuário do aplicativo: nome, sexo, data de nascimento, local de residência, link para a imagem do avatar na rede social.

O VKontakte não garante suporte para todos os eventos em todos os dispositivos (iOS, Android, Web), portanto, é melhor verificar esse suporte antes de executar o código:

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

O VK Connect também fornece suporte para solicitações à API do VK , se você precisar de algo mais do que a própria biblioteca do VK Connect possa fornecer:

 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

O VK Pay é, de fato, um front-end conveniente para usar o serviço de pagamento on-line usando o Money Mail.Ru. Para ligar para o formulário de pagamento, basta abrir a janela de pagamento usando uma chamada na biblioteca do VK Connect:

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

Assim, você pode vender seus serviços e mercadorias usando um meio de pagamento interno na rede VKontakte. Mais detalhes na documentação oficial .