Crie um aplicativo de feed de localização para Android com o Kotlin

O Pusher , nosso patrocinador semanal, faz APIs de comunicação e colaboração que impulsionam aplicativos em todo o mundo, com o suporte de SDKs fáceis de integrar para a Web, dispositivos móveis e também para as pilhas de back-end mais populares. Iniciar.

Muitas vezes gostamos de acompanhar e visualizar nossos aplicativos em um local central. Feeds são ótimos para isso! Neste tutorial, criaremos um aplicativo para Android com um feed de atividades que permita aos usuários transmitir seus locais e compartilhar com todos os outros usuários conectados em tempo real.

Construiremos o aplicativo para Android para monitorar as atividades de uma API REST do Node.js. Toda vez que o terminal da API é atingido, o Pusher publica um evento com algumas informações (local compartilhado pelo usuário) em um canal. Este evento será recebido em tempo real, em todos os dispositivos Android conectados.

Aqui está o aplicativo em ação:

Pré-requisitos

Este tutorial usa as seguintes tecnologias

Para seguir adiante, você precisará se inscrever com o Pusher e obter acesso ao seu painel para criar um projeto Pusher. Você também precisará ter o Android Studio v3 + instalado para criar a parte cliente deste aplicativo. Para construir nosso script do lado do servidor, você precisará baixar e instalar o Node se você ainda não o tiver instalado.

Lado do cliente

Agora que você resolveu isso, vamos começar a criar nosso aplicativo para Android. Inicie o Android Studio e crie um novo projeto. Certifique-se de incluir o suporte ao Kotlin. Digite o nome de um aplicativo, no nosso caso – Feeds de Local do Pusher

Selecione o SDK de destino do aplicativo:

Escolha o modelo de atividade básico:

Quando a construção do projeto estiver concluída, abra o arquivo build.gradle nível do aplicativo e atualize as dependências da seguinte forma:

Em seguida, sincronize o projeto clicando em Sincronizar agora com o arquivo gradle para instalar as dependências adicionadas.

Atividades de aplicação

Atividade de login

Por padrão, a criação do projeto Android também cria uma classe MainActivity e um arquivo activity_main.xml associado a você. Agora precisamos de uma atividade de login para coletar o nome de usuário dos usuários. Portanto, crie uma nova atividade, clique com o botão direito do mouse em MainActivity >> New >> Activity >> Empty Activity e , em seguida, nomeie-a como LoginActivity . Depois que essa atividade for criada, ela criará um arquivo de layout padrão activity_login.xml dentro da pasta de layout sob res . O layout será bastante simples, ele terá uma entrada de texto para coletar o username de usuário do username e um botão para compartilhar sua localização. Aqui está um trecho para o arquivo activity_login.xml :

Aqui temos um LinearLayout simples com dois objetos de exibição, uma entrada EditText para coletar o username de usuário do username e um botão de compartilhamento para enviar o local ao servidor.

O estilo padrão do Android nem sempre é atraente, por isso, vamos adicionar alguns estilos personalizados ao nosso layout simplesmente para fins estéticos. Sob a pasta res , abra a pasta values e navegue até o arquivo colors.xml e atualize-o com este código:

Em segundo lugar, para obter os estilos de botão e entrada, criamos dois arquivos que podem ser drawable . Sob res clique com o botão direito em drawable >> Novo >> Arquivo de recursos Drawable , nomeie-o input_bg e atualize-o com este código:

Isso simplesmente adiciona bordas arredondadas ao objeto EditText. Para os estilos de botão, siga os mesmos passos como o descrito acima e criar um novo arquivo drawable, o nome dele button e configurá-lo assim:

Por fim, atualize seu arquivo styles.xml dentro da pasta values no diretório layout :

Neste ponto, sua saída no visualizador xml deve ser exatamente assim:

Em seguida, vamos criar um novo arquivo de layout chamado custom_view.xml . Usaremos esse arquivo para renderizar cada mapa individual de um usuário em nosso objeto recyclerview. Dentro da pasta de layout sob res , crie o novo arquivo de recurso de layout e configure-o da seguinte forma:

Ok, terminamos com o login e a interface do usuário, vamos conectá-lo ao seu arquivo Java para lidar com a lógica. Abra o arquivo LoginActivity.kt e configure-o da seguinte forma:

Aqui estamos simplesmente obtendo o valor da entrada que definimos no arquivo de layout e passando para a classe MainActivity com uma intenção. Uma vez que o usuário tenha inserido um valor (nome de usuário) no objeto Edittext , definimos um ouvinte no botão para chamar a ação de intenção quando clicado. Esta ação só será executada se o valor de entrada não estiver vazio.

Atividade principal

Em seguida, definimos um layout onde renderizaremos os locais do mapa de cada usuário quando eles compartilharem sua localização. Obteremos as coordenadas de latitude e longitude juntamente com o nome de usuário que eles forneceram no LoginActivity e o enviaremos ao nosso servidor, que retornará um mapa do local com o nome de usuário fornecido no marcador e o exibirá na tela para todos os usuários .

Antes de entrarmos no MainActivity, vamos primeiro definir um novo arquivo de layout com um objeto RecyclerView para manter esses widgets de localização enquanto os usuários os compartilham. Em res , clique com o botão direito do mouse em layout >> Novo >> Arquivo de recursos de layout e nomeie-o content_main (se você selecionou o modelo de atividade básico durante a configuração do projeto, deverá ter esse arquivo por padrão). Abra este arquivo e configure-o da seguinte forma:

Como visto, simplesmente temos um objeto RecyclerView onde renderizaremos a localização de cada usuário individual para que todos possam aparecer em uma lista. Por fim, abra o arquivo activity_main.xml e atualize-o:

Lógica de aplicação

Como usamos um RecyclerView em nosso arquivo de layout, precisaremos de uma classe de adaptadores. RecyclerView trabalha com um Adaptador para gerenciar os itens de sua fonte de dados e um ViewHolder para manter uma exibição representando um único item da lista. Antes de criarmos a classe Adapter , vamos primeiro criar uma classe Model que interaja entre nossos dados remotos e o adaptador. Ele terá os valores que passaremos para nossa visualização de reciclagem. Agora clique com o botão direito do mouse em MainActivity >> New >> Arquivo / Classe Kotlin , nomeie-o Model, sob o menu suspenso Kind , selecione Class e configure-o da seguinte forma:

Agora que temos isso, vamos criar a classe Adapter . Clique com o botão direito do mouse em MainActivity >> New >> Arquivo / Classe Kotlin , nomeie-o como Adapter , sob o menu suspenso Kind , selecione Class novamente e configure-o com o código:

Aqui nós definimos um arrayList de nossa classe Model que será usada pelo adaptador para preencher o R``ecycler``V``iew . No método onBindViewHolder() , vinculamos os locais provenientes de nosso servidor (como longitude e latitude) ao detentor da visualização que definimos para ele. Também passamos o nome de usuário do usuário para o marcador do mapa.

Em seguida, no método onCreateViewHolder() , definimos o design do layout para itens individuais na lista. Finalmente, o addItem() adiciona uma nova instância de nossa classe de modelo ao arrayList e atualiza a lista toda vez que recebemos uma nova adição.

Em seguida, vamos estabelecer uma conexão com o nosso servidor Node usando a biblioteca Retrofit que instalamos no início. Primeiro, criamos uma nova interface do Kotlin para definir o ponto de extremidade da API que estaremos chamando para este projeto. Clique com o botão direito do mouse em MainActivity >> New >> Kotlin File / Class , sob o menu suspenso Kind , selecione Interface name it Service e configure-o da seguinte forma:

Também precisamos de uma classe que nos dê uma instância de Retrofit para fazer chamadas de rede. Também será a classe onde definiremos o URL do servidor e os parâmetros de rede. Então siga os passos anteriores e crie uma classe chamada Client.kt e configure-a assim:

Substitua o URL Base pelo seu endereço de host local para o servidor Node. Bem

O baseUrl que usamos aqui aponta para o nosso servidor Node local em execução na sua máquina, como mostrado acima, mas vamos ver isso mais adiante no tutorial. Por enquanto, vamos voltar para MainActivity.kt e inicializar os objetos necessários e atualizá-los com as classes que criamos acima.

Aqui nós apenas inicializamos os objetos que precisaremos, nossa classe Adapter, Pusher, pedido de localização e o fusedLocationClient .

No método onCreate() , vamos configurar o nosso RecyclerView com o adaptador. Também chamaremos o método setupPusher() e a ação sendLocation() com o botão de ação flutuante:

Ao adicionar este código ao seu método onCreate() , onCreate() cuidado para não perder as chaves

Então, nós chamamos métodos que ainda não definimos, não é problema definirmos o método setupPusher() mais tarde no tutorial, mas primeiro, vamos definir e configurar o método sendLocation() dessa vez, fora do onCreate() :

Com o objeto fusedLocationClient inicializado anteriormente, estamos obtendo a localização do usuário. Se conseguimos obter a localização, passamos a longitude e latitude junto com o username de usuário do username em nosso objeto body . Em seguida, usamos para construir nossa solicitação HTTP com os jsonObjects como nossos parâmetros de solicitação.

Também chamamos o método checkLocationPermission() no método onCreate() , mas ainda não o definimos. Vamos agora criar este método e configurá-lo assim:

É claro que não podemos simplesmente pegar a localização de todos os usuários sem primeiro pedir sua permissão, então aqui está como nós configuramos o método que solicita permissão para acessar sua localização. Logo após o método sendLocation() , adicione: x

E agora vamos definir o método setUpPusher() que chamamos anteriormente no método onCreate() :

Aqui, simplesmente passamos as configurações do Pusher para o objeto Pusher e nos inscrevemos no canal de feed para ouvir eventos de location . Em seguida, obtemos os dados retornados do servidor em nossas variáveis ??definidas e os passamos para nossa classe de modelo para atualizar o adaptador.

Em seguida, implementamos os onStart() e onStop() para conectar e desconectar o Pusher, respectivamente, em nosso aplicativo:

Finalmente, no lado do cliente, criamos uma classe de dados Kotlin que definirá a carga que estaremos solicitando do servidor. Seguindo as etapas anteriores, crie uma classe chamada RequestPayload e configure-a da seguinte forma:

Lado do servidor

Configurar o empurrador

Agora que temos todas as funcionalidades do lado do cliente, vamos em frente e construir nosso servidor. Mas primeiro, se você não tiver, agora será um bom momento para criar uma conta gratuita aqui . Quando você fizer login pela primeira vez, será solicitado que você insira algumas opções de configuração:

Digite um nome, escolha Android como sua tecnologia front-end e Node.js como sua tecnologia de back-end. Isso fornecerá um código de exemplo para você começar junto com as chaves da API do projeto:

Em seguida, acesse a guia ” Chaves de apps” e copie suas credenciais app_id, key e secret, precisaremos delas mais tarde.

Configurar um servidor de nós

Para isso, vamos usar o Node. Portanto, verifique se você possui o node e o npm instalados em sua máquina executando este comando no prompt de comando:

 nó --versão 
 // deve exibir números de versão 

 npm --version 
 // deve exibir números de versão

Se esse não for o caso, faça o download e instale o nó .

Em seguida, vamos começar a construir nosso script do lado do servidor. Ainda no prompt de comando, execute:

 mkdir pusherLocationFeeds 
 // isso cria um diretório de projeto para hospedar seus arquivos de projeto 

 cd pusherLocationFeeds 
 // isso navega no diretório recém criado 

 npm init -y 
 // isso cria um arquivo padrão package.json para hospedar nossas dependências de projeto

Vamos instalar os módulos do Nó que precisaremos para este projeto. Basicamente, precisaremos do Express, Pusher e body-parser. Dentro do diretório do projeto, execute:

 instalar express, body-parser, pusher

Você sempre pode verificar essas instalações abrindo o seu arquivo `package.json`, neste ponto o bloco de dependência deve ficar assim:

 "dependências": { 
 "body-parser": "^ 1.18.2", 
 "express": "^ 4.16.3", 
 "pusher": "^ 1.5.1" 
 }

Em seguida, crie um arquivo server.js no diretório do projeto. Primeiro, precisamos dos módulos do Node instalados:

 var express = require ("express") 
 var pusher = require ("empurrador") 
 var bodyParser = require ("body-parser")

Em seguida nós configuramos o Express:

 var app = express (); 
 app.use (bodyParser.json ()); 
 app.use (bodyParser.urlencoded ({extended: false}));

Vamos agora criar o objeto Pusher passando o objeto de configuração com o id, key e o segredo para o aplicativo criado no Pusher Dashboard :

 var pusher = new Pusher ({ 
 appId: "pusher_app_id", 
 chave: "pusher_app_key", 
 segredo: "pusher_app_secret", 
 cluster: "pusher_app_cluster" 
 });

Como descrevemos anteriormente, usaremos o Pusher para publicar eventos que acontecem em nosso aplicativo. Esses eventos têm um eventChannel , que permite que eles se relacionem a um determinado tópico, um eventName que é usado para identificar o tipo do evento e uma carga útil à qual você pode anexar qualquer informação adicional e enviá-la de volta ao cliente.

Em nosso caso, publicaremos um evento em um canal Pusher (“feed”) quando o terminal de nossa API for chamado. Em seguida, envie as informações como um anexo para que possamos mostrá-las em um feed de atividades no lado do cliente.

Veja como definimos o endpoint REST da nossa API:

 app.post ('/ location', (req, res, next) => { 

 var longitude = req.body.longitude; 
 var latitude = req.body.latitude; 
 var username = req.body.username; 
 ...

Aqui, quando recebermos parâmetros de solicitação, extrairemos a longitude, a latitude e o nome de usuário do remetente da solicitação e enviaremos de volta como resposta para o cliente da seguinte forma:

 ... 
 pusher.trigger ('feed', 'location', {longitude, latitude, username}); 
 res.json ({sucesso: 200}); 
 });

Agora, quando um usuário digita um nome de usuário e clica no botão do local de compartilhamento, o servidor retorna os dados como:

 { 
 "longitude": "longitude_value" 
 "latitude": "latitude_value" 
 "username": "username_value" 
 }

A partir daqui, usamos o adaptador para passá-lo ao ViewHolder e colocá-lo na tela.
Quando terminar, o seu arquivo server.js deve ficar assim:

 var pusher = require ("empurrador") 
 var express = require ("express") 
 var Pusher = require ("pusher") 
 var bodyParser = require ("body-parser") 
 var pusher = new Pusher ({ 
 appId: "app_id", 
 chave: "app_key", 
 segredo: "app_secrete", 
 cluster: "app_cluster" 
 }); 
 var app = express (); 
 app.use (bodyParser.json ()); 
 app.use (bodyParser.urlencoded ({extended: false})); 

 app.post ('/ location', (req, res, next) => { 

 var longitude = req.body.longitude; 
 var latitude = req.body.latitude; 
 var username = req.body.username; 

 pusher.trigger ('feed', 'location', {longitude, latitude, username}); 
 res.json ({sucesso: 200}); 
 }); 
 app.listen (4040, function () { 
 console.log ('Listening on 4040') 
 })

Agora navegue até o terminal e faça cd no arquivo server.js . Em seguida, execute o servidor com:

 node server.js

Executar aplicativo

Quando o servidor estiver ativo, vá em frente e execute o aplicativo para Android. Para executar o aplicativo, mantenha seu sistema conectado à internet. De volta ao Android Studio, clique no ícone de reprodução verde na barra de menu para executar o aplicativo ou selecione Executar no menu e clique em Executar ‘app’ no menu suspenso. Esta ação irá lançar o seu dispositivo modal para você ver todos os dispositivos conectados e emuladores. Se você estiver usando um dispositivo físico, basta selecionar o dispositivo na lista de dispositivos disponíveis mostrada e clicar em OK .

Se você estiver executando em um emulador, selecione seu emulador preferido na lista de dispositivos se tiver uma configuração ou siga estas instruções para configurar um novo emulador:

Nos dispositivos modais, selecione Criar novo dispositivo virtual. Isso iniciará um modal de seleção de hardware onde você selecionará qualquer dispositivo de sua escolha, por exemplo (Nexus 5), e clicará em Avançar. Isto irá lançar outro modal onde você irá selecionar o nível da API que você gostaria de executar no dispositivo. Você pode escolher qualquer uma das opções disponíveis para você ou manter o padrão e selecionar o nível de API 25. Clique em Avançar novamente para dar um nome personalizado ao seu emulador e clique em Concluir para concluir a configuração. Agora, quando você executar o aplicativo novamente, verá seu emulador listado no modal de dispositivos disponíveis. Com o seu sistema ainda conectado à internet, selecione seu dispositivo preferido e clique em OK para executar.

Conclusão

Espero que este tutorial tenha mostrado de maneira fácil como criar um feed de atividades para aplicativos Android com o Pusher. Enquanto você continua construindo coisas, talvez você veja por si mesmo que as atualizações em tempo real são de grande importância. Quando você faz isso, o Pusher tem tudo que você precisa para ser empurrado. O projeto está disponível no Github e o código do lado do servidor também está disponível nesta essência .