agenda web y app android

Agenda Web y Android App Desarrollo de una agenda web, junto con una App para Android para compartir datos.

M.C.C. Salvador Hernández Mendoza

22/02/2012

1

Tabla de contenido Descripción general ............................................................................................................................. 3

Esquema del proyecto ......................................................................................................................... 4

Sitio WEB para la agenda .................................................................................................................... 5

Base de datos .................................................................................................................................. 6

Hoja de estilo .................................................................................................................................. 7

Parámetros de conexión con la base de datos .............................................................................. 10

Conexión con la base de datos ...................................................................................................... 11

Pagina índice ................................................................................................................................. 12

Menú ............................................................................................................................................. 13

Tablas de registros ........................................................................................................................ 14

Modificar nombre ......................................................................................................................... 16

Guardar modificación .................................................................................................................... 18

Insertar nombre ............................................................................................................................ 19

Guardar nombre insertado ........................................................................................................... 21

Servicios WEB .................................................................................................................................... 23

Consultas JSON .............................................................................................................................. 24

Insertar JSON ................................................................................................................................. 24

App para Android .............................................................................................................................. 25

Activity Main ................................................................................................................................. 26

Activity Agenda ............................................................................................................................. 27

Activity Configuración ................................................................................................................... 28

Activity Acerca de .......................................................................................................................... 29

Activity Insertar ............................................................................................................................. 30

Librerías adicionales ...................................................................................................................... 31

Sub Process_Globals ..................................................................................................................... 32

Sub Globals .................................................................................................................................... 32

Sub Activity_Create(FirstTime As Boolean) ................................................................................... 32

Sub ExtraerListaNombres .............................................................................................................. 33

Sub ListView1_ItemClick (Position As Int, Value As Object) .......................................................... 33

Sub ExecuteRemoteQuery(Query As String, TaskId As Int) ........................................................... 33

Sub ExecuteRemoteInsert(Query As String, TaskId As Int) ........................................................... 33

2

Sub hc_ResponseError (Response As HttpResponse, Reason As String, StatusCode As Int, TaskId As Int) ............................................................................................................................................ 34

Sub hc_ResponseSuccess (Response As HttpResponse, TaskId As Int) ......................................... 34

Sub btActualizar_Click ................................................................................................................... 35

Sub btInsertar_Click ...................................................................................................................... 35

3

Descripción general

Este proyecto consiste en generar un sitio web ya sea en un servidor local o un servidor remoto en Internet, que permita tener una agenda con datos básicos como nombre, teléfono y email, y además en conjunto contara con una App para Android que se conecte con este servidor y permita acceder a estos datos al mismo tiempo de poder insertar nuevos si así se desea.

Más allá de la complejidad que pueda suponer desarrollar un sitio Web con HTML, CSS, PHP o una App para Android, este tutorial pretende servir como una introducción para desarrollar proyectos que donde la lógica del proyecto no solo radique en la nube o en las App, sino en ambas.

Este tutorial está compuesto por 3 partes:

1. Un Sitio Web con conexión a una base de datos en MySQL, que permite mostrar, insertar, modificar y borrar registros.

2. Servicio Web para realizar el intercambio de datos entre la App y la base de datos MySQL.

3. Una App para Android que se conectara de forma remota a la Base de datos, para poder consultar e insertar registros.

4

Esquema del proyecto

Para desarrollar el proyecto se requiere tener instalado un servidor Web (Apache, IIS, etc.), un gestor de base de datos, en este caso MySQL, y un intérprete PHP, para poder construir el sitio web. Adicionalmente el proyecto puede estar montado de forma local o de forma remota en Internet.

Por el lado de la App, es necesario contar con un dispositivo móvil con el sistema Android y con conexión a Internet, ya sea mediante WiFi o 3G.

5

Sitio WEB para la agenda

6

Base de datos La base de datos Agenda, contendrá solamente una tabla que permitirá almacenar el

nombre, teléfono y email, para posteriormente realizar consultas a esos datos, además de poder modificarlos y eliminarlos si se requiere.

agenda.sql CREATE DATABASE `salvador_agenda` DEFAULT CHARACTER SET utf8 COLLATE utf8_spanish_ci; USE `salvador_agenda`; CREATE TABLE IF NOT EXISTS `nombres` ( ìdNombre` int(11) NOT NULL AUTO_INCREMENT, `nombre` varchar(50) NOT NULL, `telefono` varchar(10) NOT NULL, èmail` varchar(30) NOT NULL, PRIMARY KEY (ìdNombre`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=95 ; -‐-‐ -‐-‐ Volcar la base de datos para la tabla `nombres` -‐-‐ INSERT INTO `nombres` (ìdNombre`, `nombre`, `telefono`, èmail`) VALUES (1, 'Nadia Grisel Perez Sandoval', '5467889009', '[email protected]'), (2, 'Jose Gomez Gonzalez', '7715623456', '[email protected]’), (3, 'Salvador Hernandez Mendoza', '7757512345', '[email protected]');

7

Hoja de estilo Se define una hoja de estilo para establecer los colores, tipos de letras, y demás formatos

de estilo para el sitio web que se creara.

estilo.css body { background-‐color:white; color:blue; font-‐family: "lucida sans unicode", "lucida grande", sans-‐serif; font-‐size: 14px; } h1 { color:blue; text-‐align:center; font-‐size:18px; font-‐family: "lucida sans unicode", "lucida grande", sans-‐serif; } p { font-‐family: "lucida sans unicode", "lucida grande", sans-‐serif; font-‐size:14px; } a { color:blue; font-‐size:14px; text-‐decoration: none; border-‐left-‐style: none; font-‐family: "lucida sans unicode", "lucida grande", sans-‐serif; border-‐bottom-‐style: double; border-‐bottom-‐width: 1px; border-‐bottom-‐color: orange; } table { color:blue; font-‐family:arial,helvetica,sans-‐serif; font-‐size:14px; } td { color:blue; background-‐color:white; } input.enlace { border:0; font-‐family: "lucida sans unicode", "lucida grande", sans-‐serif; background-‐color:#ffffff; color:blue;

8

cursor:pointer; font-‐size: 14px; border-‐bottom-‐style: double; border-‐bottom-‐width: 1px; border-‐bottom-‐color: orange; } #newspaper-‐a { font-‐family: "lucida sans unicode", "lucida grande", sans-‐serif; font-‐size: 14px; margin: 45px; text-‐align: left; border-‐collapse: collapse; border: 1px solid #69c; } #newspaper-‐a th { padding: 12px 17px 12px 17px; font-‐weight: normal; font-‐size: 14px; color: #039; border-‐bottom: 1px dashed #69c; text-‐align: center; font-‐weight: bold; } #newspaper-‐a td { padding: 7px 17px 7px 17px; color: #669; } #newspaper-‐a tbody tr:hover td { color: #339; background: #d0dafd; } #newspaper-‐b { font-‐family: "lucida sans unicode", "lucida grande", sans-‐serif; font-‐size: 14px; margin: 45px; text-‐align: left; border-‐collapse: collapse; border: 1px solid #69c; } #newspaper-‐b th { padding: 12px 17px 12px 17px; font-‐weight: normal; font-‐size: 14px; color: #039; border-‐bottom: 1px dashed #69c; text-‐align: center; } #newspaper-‐b td { padding: 7px 17px 7px 17px;

9

color: #669; }

10

Parámetros de conexión con la base de datos Para realizar la conexión con la base de datos se creara un archivo llamado

datosConexion.php que permitirá definir los parámetros para establecer:

Ruta del servidor o dirección del host : dbhost Nombre de la base de datos: dbname Usuarios con el cual se realizara la conexión: dbuser Contraseña para la conexión: dbpassword

datosConexion.php <?php $dbhost = "localhost"; $dbname = "salvador_agenda"; $dbuser = "root"; $dbpassword = ""; ?>

11

Conexión con la base de datos Una vez que se definen los parámetros de conexión en el archivo datosConexion.php se

llaman en el archivo conexión.php que será el encargado de realizar la conexión y verificar si existen errores al conectarse. Este archivo será llamado en otras páginas, para poder establecer de forma fácil la conexión.

conexion.php

<?php include 'datosConexion.php'; $conexion = mysql_connect($dbhost, $dbuser, $dbpassword) or die("Connection Error: " . mysql_error()); mysql_select_db($dbname) or die("Error al conectar a la base de datos."); ?>

12

Pagina índice Para el diseño del sitio web se utilizaran marcos, de forma tal que habrá un titulo, menú y

el contenido, donde se podrá ver, modificar, insertar y eliminar registros a la base de datos.

index.php

<html> <head> <title> agenda salvador hm </title> </head> <frameset rows="12%,*" border="0"> <frame name="cabecera" src="cabecera.html"> <frameset cols="120,*"> <frame name="menu" src="menu.html"> <frame name="contenido" src="nombresregistrados.php"> </frameset> </frameset> </html>

13

Menú Este archivo contiene 2 hipervínculos:

• Inicio manda llamar la página nombresRegistrados.php que muestra una tabla con los datos almacenados en la base.

• Nuevo que llama a registroNombres.php, cuya función es la de mostrar un formulario para insertar nuevos registros.

menu.html

<html> <head> <meta http-‐equiv="content-‐type" content="text/html; charset=utf-‐8"/> <link rel="stylesheet" type="text/css" href="estilo.css"> </head> <body> <h1>menú</h1> <ul> <li><a href="nombresregistrados.php" target="contenido">inicio</a> <li><a href="registronombres.php" target="contenido">nuevo</a> </ul> </body> </html>

14

Tablas de registros Esta página realiza una consulta a la base de datos, solicitando todos los registros

almacenados, para posteriormente mostrarlos en una tabla.

nombresRegistrados.php

<html> <head> <meta http-‐equiv="content-‐type" content="text/html; charset=utf-‐8"/> <link rel="stylesheet" type="text/css" href="estilo.css"> <?php include 'conexion.php'; ?> </head> <body> <h1>nombres registrados</h1> <?php $result = mysql_query("select * from nombres order by idnombre", $conexion) or die("no se puede ejecutar la consulta: ".mysql_error());; ?> <center> <table id='newspaper-‐a' summary='nombres en la agenda'> <thead> <tr> <th scope='col'>nombre</th> <th scope='col'>teléfono</th> <th scope='col'>e-‐mail</th> <th scope='col'>editar</th> <th scope='col'>eliminar</th> </tr> </thead> <tbody> <?php while (($row = mysql_fetch_row($result)) !== false) { echo "<tr>"; echo "<td>$row[1]</td>"; echo "<td>$row[2]</td>"; echo "<td>$row[3]</td>"; echo "<td><a href='modificarnombre.php?idnombre=$row[0]'>modificar</a></td>";

15

echo "<td><a href='borrarnombre.php?idnombre=$row[0]'>borrar</a></td>"; echo "</tr>"; } echo "</tbody> </table>"; mysql_close($conexion); ?> </center> </body> </html>

16

Modificar nombre Esta página como su nombre lo indica, permite editar el registro seleccionado,

permitiendo corregir los datos previamente capturados.

modificarNombre.php

<html> <head> <meta http-‐equiv="content-‐type" content="text/html; charset=utf-‐8"> <link rel="stylesheet" type="text/css" href="estilo.css"> <?php include 'conexion.php'; ?> <title></title> </head> <body> <h1>editar clientes</h1> <center> <form action="guadarmodificacionnombre.php" method=post> <table id='newspaper-‐b' summary='modificar nombre'> <thead> <tr> <th scope='col' colspan='2'>registro a modificar</th> </tr> </thead> <tbody> <?php $consulta="select * from nombres where idnombre=".$_get['idnombre']; $result = mysql_query($consulta, $conexion) or die("no se puede ejecutar la consulta: ".mysql_error());; while (($row = mysql_fetch_array($result)) !== false) {

17

echo "<input type='hidden' name='idnombre' value='$row[0]'>"; echo "<tr><td>nombre<td><input type='text' name='nombre' value='$row[1]' size='50'></tr>"; echo "<tr><td>teléfono<td><input type='text' name='telefono' value='$row[2]' size='10'></tr>"; echo "<tr><td>e-‐mail<td><input type='text' name='email' value='$row[3]' size='30'></tr>"; } mysql_close($conexion); ?> </tdoby> </table> <input type='submit' name='boton' id='1' value='modificar' class='enlace'/> <a href='nombresregistrados.php' target='contenido'>cancelar</a> </form> </center> </body> </html>

18

Guardar modificación Este archivo es llamado desde modificarNombre.php, del cual recibe el idNombre,

nombre, teléfono y email, para realizar la actualización de dicho registro.

guadarModificacionNombre.php

<html> <head> <meta http-‐equiv="content-‐type" content="text/html; charset=utf-‐8"> <link rel="stylesheet" type="text/css" href="estilo.css"> <?php include 'conexion.php'; ?> <title></title> </head> <body> <?php $idnombre =$_post['idnombre']; $nombre = $_post['nombre']; $telefono = $_post['telefono']; $email = $_post['email']; $sql = "update nombres set nombre='$nombre', telefono='$telefono', email='$email' where idnombre=$idnombre;"; mysql_query($sql, $conexion) or die("no se puede ejecutar la consulta: ".mysql_error()); echo "se han modificado exitosamente el registro"; mysql_close($conexion); ?> <a href='nombresregistrados.php' target='contenido'>inicio</a> </body> </html>

19

Insertar nombre En esta página se muestra un formulario donde el usuario introducirá los valores que

desea almacenar en la base de datos.

registroNombres.php

<html> <head> <meta http-‐equiv="content-‐type" content="text/html; charset=utf-‐8"/> <link rel="stylesheet" type="text/css" href="estilo.css"> </head> <body> <h1>registro de nuevo nombre</h1> <center> <form name="clientes" action="insertarnombre.php" method=post> <table id='newspaper-‐b' summary='borrar nombre'> <thead> <tr> <th scope='col' colspan='2'>nuevo registro</th> </tr> </thead> <tbody> <tr> <td>nombre <td><input type="text" name="nombre" size='50'> </tr> <tr> <td>teléfono <td><input type="text" name="telefono"> </tr>

20

<tr> <td>e-‐mail <td><input type="text" name="email" size='30'> </tr> </tbody> </table> <input type='submit' name='boton' id='1' value='guardar' class='enlace'/> <input type='reset' name='boton' id='2' value='limpiar' class='enlace'/> <a href='nombresregistrados.php' target='contenido'>cancelar</a> </form> </center> </body> </html>

21

Guardar nombre insertado Una vez que los datos fueron capturados se realiza una llamada a esta página, que se

encarga de recibirlos y almacenarlos en la base.

insertarNombre.php

<html> <head> <meta http-‐equiv="content-‐type" content="text/html; charset=utf-‐8"/> <link rel="stylesheet" type="text/css" href="estilo.css"> <?php include 'conexion.php'; ?> </head> <body> <h1>datos nuevo usuario</h1> <?php $nombre = $_post['nombre']; $telefono = $_post['telefono']; $email = $_post['email']; $sql = "insert into nombres (nombre, telefono, email) values ('$nombre', '$telefono','$email')"; $result = mysql_query($sql, $conexion) or die("no se puede ejecutar la consulta: ".mysql_error()); if (!$result) { die("fallo en la inserción de registro en la base de datos: " . mysql_error()); } echo "gracias! hemos recibido sus datos.\n"; mysql_close($conexion); ?>

22

<a href='nombresregistrados.php' target='contenido'>inicio</a> </body> </html>

23

Servicios WEB Para realizar la comunicación entre la App y el servidor remoto se generaran servicios Web

en formato JSON, acrónimo de JavaScript Object Notation, que es un formato ligero para el intercambio de datos. JSON es un subconjunto de la notación literal de objetos de JavaScript que no requiere el uso de XML.

24

Consultas JSON Este archivo permite realizar consultas a la base de datos y formatear la salida con JSON

para su uso en la aplicación de Android.

consultarJSON.php <?php include 'conexion.php'; $con = mysql_connect($dbhost,$dbuser,$dbpassword) or die(mysql_error()); mysql_select_db($dbname) or die(mysql_error()); $query = file_get_contents("php://input"); $sth = mysql_query($query); if (mysql_errno()) { header("HTTP/1.1 500 Internal Server Error"); echo $query.'\n'; echo mysql_error(); } else{ $rows = array(); while($r = mysql_fetch_assoc($sth)) { $rows[] = $r; } print json_encode($rows); } ?>

Insertar JSON Este archivo recibe los datos enviados desde la aplicación Android e insertar los datos en la

base.

insertarJSON.php <?php include 'conexion.php'; $con = mysql_connect($dbhost,$dbuser,$dbpassword) or die(mysql_error()); mysql_select_db($dbname) or die(mysql_error()); $query = file_get_contents("php://input"); mysql_query($query); ?>

25

App para Android

26

Activity Main Pantalla principal de la App que contiene un TabHost para mostrar cada uno de los

Activities.

main.bal

• Activity • TabHost1

27

Activity Agenda Activity que muestra los items y al hacer tap en uno de ellos muestra los datos

correspondientes.

agenda.bal

• Activity • lblNombre • lblTelefono • lblEmail • ListView1 (click)

28

Activity Configuración Activity que configura la dirección URL del servidor donde esta hospedada la BD, en caso

de que la aplicación este conectándose a un servidor local, se sustituye la URL del host remoto, por la IP del servidor local. Ejemplo http://192.168.0.1/agenda

configuracion.bal

• Activity • txtDireccion • btActualizar (click)

29

Activity Acerca de Activity que muestra información sobre la creación de la aplicación

acerca.bal

• Activity • Label1

30

Activity Insertar Activity que permite insertar un nuevo registro en la base de datos MySQL.

insertar.bal

• lblNombreE • lblTelefonoE • lblEmailE • txtNombre • txtTelefono • txtEmail • btInsertar( click )

Nota: Las etiquetas de este Activity, tienen un nombre distinto a las del Activity agenda.bal

31

Librerías adicionales Lista de librerías que se deben anexar para realizar la conexión con HTTP y procesar los

resultados con JSON.

32

Sub Process_Globals Se declara una variable hc de tipo HTTPClient que permitirá la conexión hacia Internet para intercambiar datos, además se definen 2 variables que indican el número de proceso que se realiza al ejecutar una consulta.

Sub Process_Globals Dim hc As HttpClient Dim lista_nombres As Int : lista_nombres = 1 Dim datos_nombres As Int : datos_nombres = 2 End Sub

Sub Globals Es en este procedimiento donde se declaran las variables que podrán ser utilizadas en

todo el proyecto, además es aquí donde se declaran los componentes visuales que se generan desde el Designer al utilizar la opción Generate members.

Sub Globals Type TwoLines (First As String, Second As String) Dim lblTelefono As Label Dim ListView1 As ListView Dim lblNombre As Label Dim btActualizar As Button Dim lblEmail As Label Dim txtURL As EditText Dim txtDireccion As EditText Dim TabHost1 As TabHost Dim btInsertar As Button Dim txtEmail As EditText Dim txtNombre As EditText Dim txtTelefono As EditText Dim lblEmailE As Label Dim lblNombreE As Label Dim lblTelefonoE As Label End Sub

Sub Activity_Create(FirstTime As Boolean) Al iniciar el Activity inicializa el componente HC para conectarse a la red por HTTP. Con

ExtraerListaNombres se llama al procedimiento que realiza la solicitud para visualizar todos los registros.

Sub Activity_Create(FirstTime As Boolean) If FirstTime Then hc.Initialize("hc") End If Activity.LoadLayout("Main") tabhost1.AddTab("Agenda","agenda") tabhost1.AddTab("Configuración","configuracion") tabhost1.AddTab("Insertar","insertar") tabhost1.AddTab("Acerca de","acerca") ExtraerListaNombres End Sub

33

Sub ExtraerListaNombres Realiza la consulta de la tabla nombres para ver todos los registros.

Sub ExtraerListaNombres ProgressDialogShow("Buscando lista de Nombres") ExecuteRemoteQuery("SELECT * FROM nombres ORDER BY idNombre", lista_nombres) End Sub

Sub ListView1_ItemClick (Position As Int, Value As Object) Al hacer tap en la lista que está llena con el id y el nombre de los registros de la agenda, se

realiza una nueva consulta que muestra el teléfono y el email del nombre seleccionado.

Sub ListView1_ItemClick (Position As Int, Value As Object) If IsBackgroundTaskRunning(hc, datos_nombres) Then ToastMessageShow("Espere a que la acción anterior termine", False) Return End If Dim tl As TwoLines tl = Value lblNombre.Text = tl.Second lblTelefono.Text = "Llamando al servidor..." lblEmail.Text = "Llamando al servidor..." ExecuteRemoteQuery("SELECT * FROM nombres WHERE idNombre=" & tl.First & "",datos_nombres) End Sub

Sub ExecuteRemoteQuery(Query As String, TaskId As Int) Procedimiento que permite realizar consultas hacia el servidor utilizando el servicio web

creado en formato JSON. Para realizar dicha consulta se toma la dirección del servidor que está en el Activity configuración, ejemplo http://www.salvadorhm.com.mx/agenda o http://192.168.0.1/agenda

Sub ExecuteRemoteQuery(Query As String, TaskId As Int) Dim req As HttpRequest req.InitializePost2(txtDireccion.Text&"/consultasJSON.php", query.GetBytes("UTF8")) hc.Execute(req, TaskId) End Sub

Sub ExecuteRemoteInsert(Query As String, TaskId As Int) Procedimiento que permite insertar registros en el servidor utilizando el servicio web

creado en formato JSON. Para realizar dicha consulta se toma la dirección del servidor que está en el Activity configuración, ejemplo http://www.salvadorhm.com.mx/agenda

Sub ExecuteRemoteInsert(Query As String, TaskId As Int) Dim req As HttpRequest req.InitializePost2(txtDireccion.Text &"/insertarJSON.php", query.GetBytes("UTF8"))

34

hc.Execute(req, TaskId) End Sub

Sub hc_ResponseError (Response As HttpResponse, Reason As String, StatusCode As Int, TaskId As Int)

En caso de ocurrir un error en la conexión remota se llama a automaticamente a este metodo y se almacena un log con el detalle del error, tambien se puede mostrar un mensaje con el error.

Sub hc_ResponseError (Response As HttpResponse, Reason As String, StatusCode As Int, TaskId As Int) Log("Error: " & Reason & ", StatusCode: " & StatusCode) If Response <> Null Then Log(Response.GetString("UTF8")) Response.Release End If ProgressDialogHide End Sub

Sub hc_ResponseSuccess (Response As HttpResponse, TaskId As Int) Este procedimiento se encarga de procesar las consultas hacia el servidor, en caso de ser lista_nombres, solicita los datos y los muestra en el listView, en caso de ser datos_nombres realize la consulta con el idNombre correspondiente y muestra el nombre, teléfono y email consultado.

Sub hc_ResponseSuccess (Response As HttpResponse, TaskId As Int) Dim res As String res = Response.GetString("UTF8") Log("Response from server: " & res) Dim parser As JSONParser parser.Initialize(res) Select TaskId Case lista_nombres Dim nombres As List nombres = parser.NextArray 'returns a list with maps For i = 0 To nombres.Size -‐ 1 Dim m As Map m = nombres.Get(i) Dim tl As TwoLines tl.First = m.Get("idNombre") tl.Second = m.Get("nombre") ListView1.AddTwoLines2(tl.First, tl.Second, tl) Next ProgressDialogHide Case datos_nombres Dim l As List l = parser.NextArray If l.Size = 0 Then lblTelefono.Text = "N/A" lblEmail.Text = "N/A" Else Dim m As Map m = l.Get(0) lblTelefono.Text = m.Get("telefono") lblEmail.Text=m.Get("email") End If

35

End Select response.Release End Sub

Sub btActualizar_Click Este procedimiento quita todos los elementos del ListView, limpia los datos de las cajas de

texto y solicita la lista completa de datos para postrarlos nuevamente, a través del procedimiento ExtraerListaNombres.

Sub btActualizar_Click ListView1.Clear lblNombre.Text="" lblTelefono.Text="" lblEmail.Text="" ExtraerListaNombres End Sub

Sub btInsertar_Click Como su nombre lo indica este procedimiento toma los datos de las cajas de texto y genera una consulta en SQL para insertar los datos en el servidor, ya sea local o remoto.

Sub btInsertar_Click ExecuteRemoteInsert("insert into nombres(nombre,telefono,email) values('" & txtNombre.Text & "','" & txtTelefono.Text &"','" & txtEmail.Text & "')",5) txtNombre.Text="" txtTelefono.Text="" txtEmail.Text="" btActualizar_Click End Sub

agenda web y app android

Documents