Programação para Dispositivos Móveisarieldias.com/material/2019-1/PDM/Aula4n.pdf ·...
Transcript of Programação para Dispositivos Móveisarieldias.com/material/2019-1/PDM/Aula4n.pdf ·...
Programação para Dispositivos MóveisWebService (Estudo de caso: banco de dados externo)
Introdução
▪ Na aula de hoje criaremos uma aplicação responsável por enviar dados para um webservice e receber uma resposta do mesmo.
▪ Utilizaremos a API Volley e, no servidor, um webservice em PHP
▪ A estrutura do projeto é definida no próximo slide
Professor Ariel da Silva Dias - www.arieldias.com - Obra Gratuita, proibida reprodução e venda
Introdução
Professor Ariel da Silva Dias - www.arieldias.com - Obra Gratuita, proibida reprodução e venda
APP Android
Servidor Web
Envia dados para a nuvem
Introdução
Professor Ariel da Silva Dias - www.arieldias.com - Obra Gratuita, proibida reprodução e venda
APP Android
Servidor Web
Armazena os Dados
Introdução
Professor Ariel da Silva Dias - www.arieldias.com - Obra Gratuita, proibida reprodução e venda
APP Android
Servidor Web
Solicita Dados na Nuvem
Introdução
Professor Ariel da Silva Dias - www.arieldias.com - Obra Gratuita, proibida reprodução e venda
APP Android
Servidor Web
Processa requisição
Introdução
Professor Ariel da Silva Dias - www.arieldias.com - Obra Gratuita, proibida reprodução e venda
APP Android
Servidor Web
Devolve os dados ao usuário
Introdução
Professor Ariel da Silva Dias - www.arieldias.com - Obra Gratuita, proibida reprodução e venda
APP Android Servidor Web
MainActivity
EnviarDados
Detalhes
AppControler
iot/index.php
iot/api/retornadados.php
iot/api/post.php
Banco deDados
Servidor – iot/api/post.php
▪ O conteúdo do diretório API é composto por dois arquivos
▪ POST.PHP
▪ RETORNADADOS.PHP
▪ Estes arquivos são chamados de BackEnd, e é como o motor de funcionamento de toda nossa aplicação do lado do servidor
Professor Ariel da Silva Dias - www.arieldias.com - Obra Gratuita, proibida reprodução e venda
Servidor Web
iot/index.php
iot/api/retornadados.php
iot/api/post.php
Banco deDados
Servidor – iot/api/post.php
▪ A comunicação entre o cliente (APP) e o servidor será por meio do método POST
▪ Existem dois tipos de métodos de comunicação▪ GET - Quando utilizamos o GET, os parâmetros são
passados no cabeçalho da requisição. (Ex.: URL de vídeos do youtube);
▪ POST - O POST, ao contrário do GET, envia os parâmetros no corpo da requisição HTTP. Ele encapsula os dados no corpo da requisição e consegue transportar mais dados que o GET. Por isso será o método utilizado por nós.
▪ No próximo slide segue o código do arquivo post.php
Professor Ariel da Silva Dias - www.arieldias.com - Obra Gratuita, proibida reprodução e venda
Servidor Web
iot/index.php
iot/api/retornadados.php
iot/api/post.php
Banco deDados
Servidor – iot/api/post.php
<?php
//abre a conexão com o banco mysql
$connection = mysqli_connect("end_servidor","nome_usuario","senha_do_usuario","nome_base");
or die("Error " . mysqli_error($connection));
// recebe a requisição do aplicativo
$mtitulo = $_POST['titulo'];
$mdata = $_POST['data'];
$mnoticia = $_POST['noticia'];
echo "Resposta: ".$mtitulo." ";
$sql_query = "INSERT INTO minhaTabela (titulo,noticia,data) VALUES ('$mtitulo', '$mnoticia', '$mdata')";
if (mysqli_query($connection, $sql_query)) {
echo "Notícia postada com sucesso!!!";
} else {
echo "Erro: " . $sql_query . "<br>" . mysqli_error($connection);
}
mysqli_close($conn);
?>
Professor Ariel da Silva Dias - www.arieldias.com - Obra Gratuita, proibida reprodução e venda
Servidor Web
iot/index.php
iot/api/retornadados.php
iot/api/post.php
Banco deDados
Servidor – iot/api/retornadados.php
▪ Como o nome do arquivo diz, a função dele é retornar uma resposta para a requisição do usuário
▪ Este arquivo faz uma consulta no banco de dados por todas as notícias cadastradas
▪ Em seguida, retorna uma string no formato JSON
Professor Ariel da Silva Dias - www.arieldias.com - Obra Gratuita, proibida reprodução e venda
Servidor Web
iot/index.php
iot/api/retornadados.php
iot/api/post.php
Banco deDados
Servidor – iot/api/retornadados.php
<?php
//conecta-se com o banco de dados
$con = new mysqli("end_servidor","nome_usuario","senha_do_usuario","nome_base");
mysqli_set_charset($con,"utf8");
if($con->connect_errno){
echo "Erro ao conectar: " . $con->connect_erro;
}
//comando para pegar todas noticias
$sql2 = "select * from minhaTabela";
//executa no bd
$retorno = $con->query($sql2);
while($registro = $retorno->fetch_array()){
$emparray[] = $registro;
}
//apresenta a string json na tela
echo json_encode($emparray);
?>
Professor Ariel da Silva Dias - www.arieldias.com - Obra Gratuita, proibida reprodução e venda
Servidor Web
iot/index.php
iot/api/retornadados.php
iot/api/post.php
Banco deDados
Servidor – iot/index.php
▪ Se o conteúdo do diretório API é o BackEnd, saindo dela temos o arquivo index.php que é o FrontEnd, ou a parte visualizada pelo usuário
Professor Ariel da Silva Dias - www.arieldias.com - Obra Gratuita, proibida reprodução e venda
Servidor Web
iot/index.php
iot/api/retornadados.php
iot/api/post.php
Banco deDados
Servidor – iot/index.php
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SENAI News</title>
<!-- Bootstrap -->
<link href="ext/bootstrap.min.css" rel="stylesheet">
</head>
<body style="background-color: #f9f9f9">
<div class="container">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10" style="margin-top: 60px">
<h3>SENAI News </h3><p>24 horas no ar </p>
<span class="label label-success"> arieldias.com </span>
<span class="label label-danger" style="margin-left: 10px; margin-right: 10px;"> By: Ariel Dias </span>
<?php
//abre a conexão com o banco de dados
$connection = mysqli_connect("end_servidor","nome_usuario","senha_do_usuario","nome_base")
or die("Error " . mysqli_error($connection));
$sql = "select * from minhaTabela";
$result = mysqli_query($connection, $sql)
or die("Error in Selecting " . mysqli_error($connection));
while($row =mysqli_fetch_assoc($result))
{
$emparray[] = $row;
}
?>
<table class="table table-hover" style="margin-top: 20px;">
<tr class="success">
<td><b>Id</b></td>
<td><b>Tópico</b></td>
<td><b>Notícia</b></td>
</tr>
<?php foreach( $emparray as $vale): ?>
<tr class ="info">
<td>
<?php echo $vale['id']; ?>
</td>
<td>
<?php echo $vale['title']." (".$vale['time'].")"; ?>
</td>
<td>
<?php echo $vale['news']; ?>
</td>
</tr>
<?php endforeach; ?>
</table>
<?php
//close the db connection
mysqli_close($connection);
?>
</div>
<div class="col-md-1"></div>
</div>
<script language="Javascript">
window.onload = function () {
setTimeout('location.reload();', 10000);
}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="ext/ootstrap.min.js"></script>
</body>
</html>
Professor Ariel da Silva Dias - www.arieldias.com - Obra Gratuita, proibida reprodução e venda
Servidor Web
iot/index.php
iot/api/retornadados.php
iot/api/post.php
Banco deDados
Servidor
▪ Acesse: end_servidor/iot
▪ No meu caso: arieldias.com/iot
Professor Ariel da Silva Dias - www.arieldias.com - Obra Gratuita, proibida reprodução e venda
Servidor Web
iot/index.php
iot/api/retornadados.php
iot/api/post.php
Banco deDados
Cliente (APP)
▪ Do lado do cliente, no caso o APP, utilizaremos uma API para auxiliar o desenvolvimento
▪ A API que utilizaremos é a Volley
▪ Volley é uma API HTTP desenvolvida pelo Google e foi introduzida pela primeira vez durante o Google I/O 2013.
▪ Essa API é usada para transmitir dados pela rede. Na verdade, torna a rede mais rápida e fácil para o Google Apps. Está disponível através do repositório AOSP (Android Open Source Project).
Professor Ariel da Silva Dias - www.arieldias.com - Obra Gratuita, proibida reprodução e venda
APP Android
MainActivity
EnviarDados
Detalhes
AppControler
Cliente (APP) – API Volley
▪ Volley usa o conceito de caches para melhorar o desempenho do aplicativo.
▪ Quando o usuário solicita os mesmos dados, em vez de chamar do servidor, o Volley mostra-o diretamente do recurso de economia de cache e, assim, melhora a experiência do usuário.
Professor Ariel da Silva Dias - www.arieldias.com - Obra Gratuita, proibida reprodução e venda
APP Android
MainActivity
EnviarDados
Detalhes
AppControler
Cliente (APP) – API Volley
▪ Classe RequestQueue
▪ O Volley é uma biblioteca de rede gerenciada pelo RequestQueue e usada principalmente para fins de rede menores no Android.
▪ Para usá-lo, primeiro é necessário instanciar o RequestQueue e, mais tarde, você pode iniciar ou parar o pedido, adicionar ou cancelar o pedido e acessar o (s) cache (s) de resposta.
▪ RequestQueue queue = Volley.newRequestQueue(this);
▪ Após instanciar RequestQueue, uma solicitação deve ser criada. As classes de solicitação padrão já incluídas na biblioteca Volley são solicitação String, solicitação JSON e solicitação de imagem.
Professor Ariel da Silva Dias - www.arieldias.com - Obra Gratuita, proibida reprodução e venda
APP Android
MainActivity
EnviarDados
Detalhes
AppControler
Cliente (APP) – API Volley
▪ RequestConstructor
▪ Recebe 4 parâmetros
▪ JsonObjectRequest request = JsonObjectRequest(Request.Method.GET, url, new ResponseListener(), new ErrorListener());
▪ 1º Parametro - Request.Method.GET: O GET é usado para ler. Você também pode usar POST (para criar), PUT (para atualizar / substituir), DELETE (para excluir), PATCH (para atualizar / modificar) e muito mais.
Professor Ariel da Silva Dias - www.arieldias.com - Obra Gratuita, proibida reprodução e venda
APP Android
MainActivity
EnviarDados
Detalhes
AppControler
Cliente (APP) – API Volley
▪ RequestConstructor
▪ Recebe 4 parâmetros
▪ JsonObjectRequest request = JsonObjectRequest(Request.Method.GET, url, new ResponseListener(), new ErrorListener());
▪ 1º Parametro - Request.Method.GET: O GET é usado para ler. Você também pode usar POST (para criar), PUT (para atualizar / substituir), DELETE (para excluir), PATCH (para atualizar / modificar) e muito mais.
▪ 2º Parâmetro - URL: O URL que responderá ao pedido HTTP.
Professor Ariel da Silva Dias - www.arieldias.com - Obra Gratuita, proibida reprodução e venda
APP Android
MainActivity
EnviarDados
Detalhes
AppControler
Cliente (APP) – API Volley
▪ RequestConstructor
▪ Recebe 4 parâmetros
▪ JsonObjectRequest request = JsonObjectRequest(Request.Method.GET, url, new ResponseListener(), new ErrorListener());
▪ 1º Parametro - Request.Method.GET: O GET é usado para ler. Você também pode usar POST (para criar), PUT (para atualizar / substituir), DELETE (para excluir), PATCH (para atualizar / modificar) e muito mais.
▪ 2º Parâmetro - URL: O URL que responderá ao pedido HTTP.
▪ 3º Parâmetro – Listener de conclusão bem sucedida: Para onde seus dados irão após a conclusão bem-sucedida da solicitação.
Professor Ariel da Silva Dias - www.arieldias.com - Obra Gratuita, proibida reprodução e venda
APP Android
MainActivity
EnviarDados
Detalhes
AppControler
Cliente (APP) – API Volley
▪ RequestConstructor▪ Recebe 4 parâmetros▪ JsonObjectRequest request = JsonObjectRequest(Request.Method.GET, url, new ResponseListener(), new ErrorListener());
▪ 1º Parametro - Request.Method.GET: O GET é usado para ler. Você também pode usar POST (para criar), PUT (para atualizar / substituir), DELETE (para excluir), PATCH (para atualizar / modificar) e muito mais.
▪ 2º Parâmetro - URL: O URL que responderá ao pedido HTTP.▪ 3º Parâmetro – Listener de conclusão bem sucedida: Para onde seus dados
irão após a conclusão bem-sucedida da requisição.▪ 4º Parâmetro – Listener de conclusão com erro: O que será dito se houve
um problema com sua requisição.
Professor Ariel da Silva Dias - www.arieldias.com - Obra Gratuita, proibida reprodução e venda
APP Android
MainActivity
EnviarDados
Detalhes
AppControler
Cliente (APP) – API Volley
▪ Abra o Android Studio
▪ Crie um projeto com Empty Activity
▪ Dê o nome de ConexaoWebService
▪ O primeiro passo para utilizarmos a API Volley é adicionar a dependência no arquivo build.gradle
▪ No próximo slide apresento o build.gradle com
a dependência (em vermelho).
Professor Ariel da Silva Dias - www.arieldias.com - Obra Gratuita, proibida reprodução e venda
APP Android
MainActivity
EnviarDados
Detalhes
AppControler
Cliente (APP) – build.gradle
dependencies {
implementation fileTree(dir: 'libs', include: ['*.jar'])
implementation 'com.android.support:appcompat-v7:28.0.0'
implementation 'com.android.support.constraint:constraint-layout:1.1.3'
implementation 'com.android.volley:volley:1.1.0'
testImplementation 'junit:junit:4.12'
androidTestImplementation 'com.android.support.test:runner:1.0.2'
androidTestImplementation'com.android.support.test.espresso:espresso-core:3.0.2’
}
➔ IMPORTANTE: APÓS REALIZAR A ALTERAÇÃO, PRESSIONE A OPÇÃO SYNC NOW NA PARTE SUPERIOR DA TELA
Professor Ariel da Silva Dias - www.arieldias.com - Obra Gratuita, proibida reprodução e venda
APP Android
MainActivity
EnviarDados
Detalhes
AppControler
Cliente (APP) – API Volley
▪ Nós faremos uma consulta a internet, certo? Então precisamos solicitar no AndroidManifest.xml a permissão para acesso a internet
▪ A solicitação de permissão abaixo, deve ficar logo antes da TAG <application
<uses-permission android:name="android.permission.INTERNET" />
Professor Ariel da Silva Dias - www.arieldias.com - Obra Gratuita, proibida reprodução e venda
APP Android
MainActivity
EnviarDados
Detalhes
AppControler
Cliente (APP) – API Volley
▪ Teremos 4 classes, cada uma com responsabilidades distintas▪ MainActivity
▪ esta é a classe da activity inicial, quando o aplicativo é executado esta o conteúdo desta activity é o primeiro a ser desenhado na tela
▪ aqui a activity possui um listview que consulta o webservice e recupera os dados no banco para mostrar na tela
▪ nesta activity temos 2 botões: Adicionar Notícia e Atualizar Notícia▪ também nesta activity, ao clicar sobre um item da lista, é invocada
uma nova activity com os detalhes da notícia▪ esta classe possui o método fetchingData(), que é o coração da
aplicação, responsável por realizar a conexão com o webservice e as requisições
▪ Veja o código no anexo
Professor Ariel da Silva Dias - www.arieldias.com - Obra Gratuita, proibida reprodução e venda
APP Android
MainActivity
EnviarDados
Detalhes
AppControler
Cliente (APP) – API Volley
▪ Teremos 4 classes, cada uma com responsabilidades distintas
▪ EnviarDados
▪ esta activity é invocada pela activity inicial (MainActivity)
▪ nela temos 3 campos para inserir dados e 1 botão
▪ ao clicar no botão os dados são enviados para o webservice, o qual insere no banco de dados
▪ Veja o código no anexo
Professor Ariel da Silva Dias - www.arieldias.com - Obra Gratuita, proibida reprodução e venda
APP Android
MainActivity
EnviarDados
Detalhes
AppControler
Cliente (APP) – API Volley
▪ Teremos 4 classes, cada uma com responsabilidades distintas
▪ Detalhes
▪ esta activity também é invocada pela activity inicial (MainActivity)
▪ nela são apresentados os detalhes da notícia
▪ nesta classe temos o método postarNoticia, que é a ação do botão
▪ ao clicar, o aplicativo se conecta a URL realizando uma requisição por meio da classe AppControler
▪ Veja o código no anexo
Professor Ariel da Silva Dias - www.arieldias.com - Obra Gratuita, proibida reprodução e venda
APP Android
MainActivity
EnviarDados
Detalhes
AppControler
Cliente (APP) – API Volley
▪ Teremos 4 classes, cada uma com responsabilidades distintas
▪ AppControler
▪ esta classe não é uma activity
▪ ela é responsável por realizar as requisições
▪ Veja o código no anexo
Professor Ariel da Silva Dias - www.arieldias.com - Obra Gratuita, proibida reprodução e venda
APP Android
MainActivity
EnviarDados
Detalhes
AppControler
Cliente (APP) – API Volley
▪ Após tudo desenvolvido, agora execute o APP!
▪ Abra no navegador da internet o seguinte endereço:
▪ arieldias.com/iot
▪ Esta página apresenta todas as inserções no banco através do APP
▪ Ela atualiza a cada 5 segundos a procura de novos dados no banco
Professor Ariel da Silva Dias - www.arieldias.com - Obra Gratuita, proibida reprodução e venda