*si tuvieron algún problema pueden verificar la documentación oficial Vamos a crear una BD llamada droid_login como lo muestra la siguiente imagen:

Transcripción

1 Parte web Para realizar la parte web utilicé como lenguaje en la parte de servidor PHP (Version 5.3.1), como Base de Datos MySQL y como servidor Web Apache. Vamos a simular la nube para realizar pruebas de manera local para eso podemos utilizar AppServer que pueden descargar del sitio oficial, además está disponible para varios sistemas operativos y es de muy fácil instalación y uso. No vamos a explicar cómo instalarlo y configurarlo porque no es el objetivo de este tutorial. Parte Base de Datos: Como ya se comentó utilizaremos MySQL, podemos aprovechar la utilidad que provee appserver llamada phpmyadmin por lo cual accederemos mediante luego de loguearnos. *si tuvieron algún problema pueden verificar la documentación oficial Vamos a crear una BD llamada droid_login como lo muestra la siguiente imagen: O si vamos a la solapa SQL podemos ejecutar la siguiente consulta: CREATE DATABASE droid_login;

2 Crearemos una tabla llamada usuarios en donde guardaremos el nombre de usuario y password juntos. Podemos crear la tabla ejecutando esta simple consulta: Create Table usuarios(username varchar(10) NOT NULL, passw varchar(20) NOT NULL) Con esto basta por ahora con la base de datos. Dentro de la carpeta www crearemos una carpeta llamada droidlogin dentro de la cual colocaremos los siguientes archivos, estos serán la parte web de nuestro sistema.

3 config.php: En este se define el nombre de la base de datos su usuario, password y la ip del servidor. Es necesario modificar este archivo para poder adecuarlo a la configuración de la BD de cada uno. Deberán modificar el valor que está en rojo. <?php /** * Database config variables */ /*DB_HOST Hace referencia a donde se encuentra la BD si es en el mismo equipo utilizaremos localhost o si se encuentra en otro equipo deberemos colocar su dirección IP.*/ define( DB_HOST, localhost ); /*DB_USER cambiar por el nombre de usuario definido en la configuración de la BD*/ define( DB_USER, username ); /*DB_PASSWORD Modificar por el password elegido*/ define( DB_PASSWORD, password );

4 /*DB_DATABASE Nombre de la base de datos reemplazar si se utilizó otro diferente al mencionado anteriormente*/ define( DB_DATABASE, droidlogin );?> connectbd.php: Provee los métodos para conectarse y desconectarse a la BD. funciones_bd.php: Provee los procedimientos para interactuar con la BD e insertar nuevos usuarios, validar existencia de usuarios y validar un login login.html: Mediante esta página podemos loguearnos mediante el navegador sirve para observar la respuesta del sistema. acces.php: Se encarga de devolver en notacion Json si el logueo es valido adduser.html: Permite realizar alta de usuarios verificando previamente su existencia utiliza adduser.php Para poder comprobar qué es lo que hará la aplicación podemos verlo a través del navegador pero primero debemos crear un usuario. Accedemos a Podemos ingresar: -usuario: usuario1 -password: usuario1

5 Luego al clickear en Agregar. Si queremos volver a agregar el mismo usuario, nos mostrará el siguiente mensaje: Este usuario ya existe ingrese otro diferente! Por lo que la aplicación también controlara que no halla usuario repetidos. Podemos verificar directamente desde la BD los usuarios creados: Antes de pasar a la parte de Android vamos a probar si correctamente. todo funciona Para lo cual utilizaremos el archivo login.html Accederemos mediante

6 Veremos lo siguiente: Ingresamos el usuario y password creados anteriormente. Si configuramos todo correctamente y nada falla deberíamos acceder al archivo acces.php el cual nos devolverá en notacion json si el logueo fue correcto o no. [{"logstatus":"0"}] > logueo invalido > debemos verificar que los datos ingresados sean iguales a los creados en la BD. [{"logstatus":"1"}] > logueo valido Básicamente esto que nos devuelve el servidor es lo que leerá la app de android.

7 Parte Android: Al proyecto lo llame Login-en-Android-usando-PHP-y-MySQL-master.

8 Para la UI he tratado de inspirarme en el contenido link aunque son de ios sirven igual. He creado 2 interfaces para cuando el teléfono se encuentre en posición horizontal (layout-land): O vertical (layout-port):

9 Para hacer la interfaz más agradable hice que los EditText tengan bordes redondeados, encontré en Stackoverflow un post sobre esto. La pantalla de login es muy simple tiene un Button y 2 TextView que al presionarlos cada uno hará una acción diferente. Se encuentran definidos en los siguientes archivos: /res/layout-port/main.xml

10 /res/layout-land/main.xml

11 El xml que utilicé para hacer los bordes redondeados es este: res/drawable-ldpi/edittext_rounded_corners.xml

12 Ahora el AndroidManifest.xml. Como pueden ver hay definidas 2 activities definidos. Ahora veremos el código principal, comento en cada caso. /src/test/droidlogin/login.java En la línea número 35 es necesario modificar esa dirección IP y reemplazarla por la del PC en el que esté el servidor web con los archivos descritos anteriormente. Si van a colocar esto en internet deberían usar el dominio correspondiente. También recorriendo revisar el Logcat para entender mejor el funcionamiento.

13

14 Como vemos, utilizo una clase interna asynclogin la cual es una AsyncTask para mostrar el progressdialog hasta que termina de realizarse la validación. Desde esta clase redirección al usuario al HiScreen o en el caso de ser el logueo inválido vibramos el teléfono y mostramos el mensaje de error. También he creado una clase para manejar con mayor facilidad el envío de peticiones a nuestro web service. El manejo de su respuesta se encuentra en: /src/test/droidlogin/library/httppostaux.java

15 Ahora veremos la otra activity a la que seremos redirigidos si el login es correcto. Para esta también definí dos layouts diferentes para cubrir el cambio de la orientación de la pantalla. /res/layout-port/lay_screen.xml

16 /res/layout-land/lay_screen.xml

17 Ahora el código de su clase: /src/test/droidlogin/hiscreen.java

18 Luego de todo esto, Si todo fue configurado y funciona correctamente comenté anteriormente. veremos al HiScreen que Cuando el usuario presiona Cerrar sesión volvemos a la ventana de logueo. Parte Aplicación Java Netbeans Para la aplicación java, utilizaremos el nombre serviciowebescritorio como se ve a continuación.

19 Luego haremos la interface para la aplicación: Una vez hecha la interfaz nos dirigimos a la programación de las clases. Presentación/Login.java:

20

21

22 Y finalmente pasamos a probar la aplicación de escritorio: Si no ingresamos correctamente los datos aparecerá la siguiente ventana:

23 En cambio sí ingresamos correctamente los datos nos aparecerá lo siguiente: Y eso sería la parte final del trabajo, con las 3 interfaces diferentes y una misma base de datos.