Programação para Dispositivos Móveis WebService (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
Introdução Envia dados para a nuvem Servidor Web
Introdução Armazena os Dados Servidor Web
Introdução Solicita Dados na Nuvem Servidor Web
Introdução Processa requisição Servidor Web
Introdução Devolve os dados ao usuário Servidor Web
Introdução AppControler Detalhes EnviarDados iot/api/post.php iot/api/retornadados.php iot/index.php MainActivity Banco de Dados Servidor Web
iot/api/post.php Servidor iot/api/post.php iot/api/retornadados.php iot/index.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 Banco de Dados
iot/api/post.php Servidor iot/api/post.php iot/api/retornadados.php iot/index.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 Servidor Web Banco de Dados
iot/api/post.php Servidor iot/api/post.php iot/api/retornadados.php iot/index.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)); Banco de Dados // recebe a requisição do aplicativo $mtitulo = $_POST['titulo']; $mdata = $_POST['data']; $mnoticia = $_POST['noticia']; Servidor Web 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);
iot/api/post.php Servidor iot/api/retornadados.php iot/api/retornadados.php iot/index.php Como o nome do arquivo diz, a função dele é retornar uma resposta para a requisição do usuário Banco de Dados Este arquivo faz uma consulta no banco de dados por todas as notícias cadastradas Servidor Web Em seguida, retorna uma string no formato JSON
iot/api/post.php Servidor iot/api/retornadados.php iot/api/retornadados.php iot/index.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"); Banco de Dados if($con->connect_errno){ } echo "Erro ao conectar: ". $con->connect_erro; //comando para pegar todas noticias $sql2 = "select * from minhatabela"; Servidor Web //executa no bd $retorno = $con->query($sql2); while($registro = $retorno->fetch_array()){ } $emparray[] = $registro; //apresenta a string json na tela echo json_encode($emparray);?>
iot/api/post.php Servidor iot/index.php iot/api/retornadados.php 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 Banco de Dados
iot/api/post.php Servidor iot/index.php iot/api/retornadados.php 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, initialscale=1"> </head> <title>senai News</title> <!-- Bootstrap --> <link href="ext/bootstrap.min.css" rel="stylesheet"> <body style="background-color: #f9f9f9"> <div class="container"> </span> <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 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)) { } 20px;"> $emparray[] = $row; <table class="table table-hover" style="margin-top: </div> <tr class="success"> </tr> <td><b>id</b></td> <td><b>tópico</b></td> <td><b>notícia</b></td> <?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'];?> </tr> </td> <?php endforeach;?> <?php </table> //close the db connection mysqli_close($connection);?> </div> <div class="col-md-1"></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> </body> </html> <script src="ext/ootstrap.min.js"></script> Servidor Web Banco de Dados
iot/api/post.php Servidor iot/api/retornadados.php iot/index.php Acesse: end_servidor/iot No meu caso: arieldias.com/iot Banco de Dados Servidor Web
AppControler Cliente (APP) Detalhes EnviarDados MainActivity 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).
AppControler Cliente (APP) API Volley Detalhes EnviarDados MainActivity 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.
AppControler Cliente (APP) API Volley Detalhes EnviarDados MainActivity 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.
AppControler Cliente (APP) API Volley Detalhes EnviarDados MainActivity 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.
AppControler Cliente (APP) API Volley Detalhes EnviarDados MainActivity 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.
AppControler Cliente (APP) API Volley Detalhes EnviarDados MainActivity 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.
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. Detalhes EnviarDados MainActivity
AppControler Cliente (APP) API Volley Detalhes EnviarDados MainActivity 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).
AppControler Cliente (APP) build.gradle Detalhes EnviarDados MainActivity dependencies { implementation filetree(dir: 'libs', include: ['*.jar']) implementation 'com.android.support:appcompat-v7:28.0.0' implementation 'com.android.support.constraint:constraintlayout: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
AppControler Cliente (APP) API Volley Detalhes EnviarDados MainActivity 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" />
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 Detalhes EnviarDados MainActivity
AppControler Cliente (APP) API Volley Detalhes EnviarDados MainActivity 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
AppControler Cliente (APP) API Volley Detalhes EnviarDados MainActivity 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
AppControler Cliente (APP) API Volley Detalhes EnviarDados MainActivity 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
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