Desarrollo

de una agenda web, junto con una App para Android para compartir datos.

Agenda Web y Android App

M.C.C. Salvador Hernndez Mendoza 22/02/2012

Tabla de contenido
Descripcin general ............................................................................................................................. 3 Esquema del proyecto ......................................................................................................................... 4 Sitio WEB para la agenda .................................................................................................................... 5 Base de datos .................................................................................................................................. 6 Hoja de estilo .................................................................................................................................. 7 Parmetros de conexin con la base de datos .............................................................................. 10 Conexin con la base de datos ...................................................................................................... 11 Pagina ndice ................................................................................................................................. 12 Men ............................................................................................................................................. 13 Tablas de registros ........................................................................................................................ 14 Modificar nombre ......................................................................................................................... 16 Guardar modificacin .................................................................................................................... 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 Configuracin ................................................................................................................... 28 Activity Acerca de .......................................................................................................................... 29 Activity Insertar ............................................................................................................................. 30 Libreras 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

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

Descripcin 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 bsicos como nombre, telfono y email, y adems 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. Ms 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 introduccin para desarrollar proyectos que donde la lgica 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 conexin 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.

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 intrprete 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 mvil con el sistema Android y con conexin a Internet, ya sea mediante WiFi o 3G.

Sitio WEB para la agenda

Base de datos
La base de datos Agenda, contendr solamente una tabla que permitir almacenar el nombre, telfono y email, para posteriormente realizar consultas a esos datos, adems 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` ( `idNombre` int(11) NOT NULL AUTO_INCREMENT, `nombre` varchar(50) NOT NULL, `telefono` varchar(10) NOT NULL, `email` varchar(30) NOT NULL, PRIMARY KEY (`idNombre`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=95 ; -- -- Volcar la base de datos para la tabla `nombres` -- INSERT INTO `nombres` (`idNombre`, `nombre`, `telefono`, `email`) VALUES (1, 'Nadia Grisel Perez Sandoval', '5467889009', 'nadia@gmail.com'), (2, 'Jose Gomez Gonzalez', '7715623456', 'jose@gmail.com), (3, 'Salvador Hernandez Mendoza', '7757512345', 'salvadorhm@gmail.com');

Hoja de estilo
Se define una hoja de estilo para establecer los colores, tipos de letras, y dems 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;

 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;

color: #669;

Parmetros de conexin con la base de datos

Para realizar la conexin con la base de datos se creara un archivo llamado datosConexion.php que permitir definir los parmetros para establecer: Ruta del servidor o direccin del host : dbhost Nombre de la base de datos: dbname Usuarios con el cual se realizara la conexin: dbuser Contrasea para la conexin: dbpassword datosConexion.php
<?php $dbhost = "localhost"; $dbname = "salvador_agenda"; $dbuser = "root"; $dbpassword = ""; ?>

10

Conexin con la base de datos

Una vez que se definen los parmetros de conexin en el archivo datosConexion.php se llaman en el archivo conexin.php que ser el encargado de realizar la conexin y verificar si existen errores al conectarse. Este archivo ser llamado en otras pginas, para poder establecer de forma fcil la conexin. 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."); ?>

11

Pagina ndice
Para el diseo 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>

12

Men
Este archivo contiene 2 hipervnculos: Inicio manda llamar la pgina nombresRegistrados.php que muestra una tabla con los datos almacenados en la base. Nuevo que llama a registroNombres.php, cuya funcin 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>

13

Tablas de registros
Esta pgina 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'>telfono</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>";

14

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

15

Modificar nombre
Esta pgina 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) {

16

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

17

Guardar modificacin
Este archivo es llamado desde modificarNombre.php, del cual recibe el idNombre, nombre, telfono y email, para realizar la actualizacin 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>

18

Insertar nombre
En esta pgina 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>telfono <td><input type="text" name="telefono"> </tr>

19

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

20

Guardar nombre insertado

Una vez que los datos fueron capturados se realiza una llamada a esta pgina, 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 insercin de registro en la base de datos: " . mysql_error()); } echo "gracias! hemos recibido sus datos.\n"; mysql_close($conexion); ?>

21

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

22

Servicios WEB
Para realizar la comunicacin entre la App y el servidor remoto se generaran servicios Web en formato JSON, acrnimo de JavaScript Object Notation, que es un formato ligero para el intercambio de datos. JSON es un subconjunto de la notacin literal de objetos de JavaScript que no requiere el uso de XML.

23

Consultas JSON
Este archivo permite realizar consultas a la base de datos y formatear la salida con JSON para su uso en la aplicacin 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 aplicacin 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); ?>

24

App para Android

25

Activity Main
Pantalla principal de la App que contiene un TabHost para mostrar cada uno de los Activities. main.bal Activity TabHost1

26

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)

27

Activity Configuracin
Activity que configura la direccin URL del servidor donde esta hospedada la BD, en caso de que la aplicacin este conectndose 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)

28

Activity Acerca de
Activity que muestra informacin sobre la creacin de la aplicacin acerca.bal Activity Label1

29

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

30

Libreras adicionales
Lista de libreras que se deben anexar para realizar la conexin con HTTP y procesar los resultados con JSON.

31

Sub Process_Globals
Se declara una variable hc de tipo HTTPClient que permitir la conexin hacia Internet para intercambiar datos, adems se definen 2 variables que indican el nmero 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 podrn ser utilizadas en todo el proyecto, adems es aqu donde se declaran los componentes visuales que se generan desde el Designer al utilizar la opcin 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("Configuracin","configuracion") tabhost1.AddTab("Insertar","insertar") tabhost1.AddTab("Acerca de","acerca") ExtraerListaNombres End Sub

32

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 telfono 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 accin 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 direccin del servidor que est en el Activity configuracin, 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 direccin del servidor que est en el Activity configuracin, 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"))

33

 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 conexin 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, telfono 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

34

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

35