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


APP Android

Servidor Web

Envia dados para a nuvem

Introdução


APP Android

Servidor Web

Armazena os Dados

Introdução


APP Android

Servidor Web

Solicita Dados na Nuvem

Introdução


APP Android

Servidor Web

Processa requisição

Introdução


APP Android

Servidor Web

Devolve os dados ao usuário

Introdução


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


Servidor Web

iot/index.php


iot/api/post.php

Banco deDados


▪ 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


Servidor Web

iot/index.php


iot/api/post.php

Banco deDados


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

?>


Servidor Web

iot/index.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


Servidor Web

iot/index.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);

?>


Servidor Web

iot/index.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


Servidor Web

iot/index.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>



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


Servidor Web

iot/index.php


iot/api/post.php

Banco deDados

Servidor

▪ Acesse: end_servidor/iot

▪ No meu caso: arieldias.com/iot


Servidor Web

iot/index.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).


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.


APP Android

MainActivity

EnviarDados

Detalhes

AppControler


▪ 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.


APP Android

MainActivity

EnviarDados

Detalhes

AppControler


▪ 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.


APP Android

MainActivity

EnviarDados

Detalhes

AppControler






▪ 2º Parâmetro - URL: O URL que responderá ao pedido HTTP.


APP Android

MainActivity

EnviarDados

Detalhes

AppControler






▪ 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.


APP Android

MainActivity

EnviarDados

Detalhes

AppControler


▪ RequestConstructor▪ Recebe 4 parâmetros▪ JsonObjectRequest request = JsonObjectRequest(Request.Method.GET, url, new ResponseListener(), new ErrorListener());


▪ 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.


APP Android

MainActivity

EnviarDados

Detalhes

AppControler


▪ 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).


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


APP Android

MainActivity

EnviarDados

Detalhes

AppControler


▪ 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" />


APP Android

MainActivity

EnviarDados

Detalhes

AppControler


▪ 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


APP Android

MainActivity

EnviarDados

Detalhes

AppControler


▪ 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



APP Android

MainActivity

EnviarDados

Detalhes

AppControler



▪ 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



APP Android

MainActivity

EnviarDados

Detalhes

AppControler



▪ AppControler

▪ esta classe não é uma activity

▪ ela é responsável por realizar as requisições



APP Android

MainActivity

EnviarDados

Detalhes

AppControler


▪ 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


Programação para Dispositivos Móveisarieldias.com/material/2019-1/PDM/Aula4n.pdf ·...

Documents

Transcript of Programação para Dispositivos Móveisarieldias.com/material/2019-1/PDM/Aula4n.pdf ·...