IntelXDK con mySQL, PHP y JS - App de registro y consulta de datos remotos.

IntelXDK con mySQL, PHP y JS – App de registro y consulta de datos remotos.

Que tal, en esta ocasión traigo un pequeño ejemplo de cómo podemos crear una App con IntelXDK que se conecte a una base de datos remota de mySQL por medio de PHP y JavaScript. Antes que nada debemos tener lo siguiente:

  1. Crear una cuenta en algún hosting web gratuito o de paga, para esta práctica yo utilice x10Hosting, aquí podrán encontrar un post para que aprendan a registrarse y tener su propio hosting web y en donde podamos tener una base de datos en mysql.
  2. Tener instalado IntelXDK.
  3. Descargar la versión jQuery Mobile-1.4.5.

Iniciaremos un nuevo proyecto en IntelXDK y elegiremos una plantilla en blanco (verificar que el AppDesginer no este seleccionado) y daremos un nombre a nuestro proyecto, recuerda que los nombre no deben de llevar espacios ni caracteres especiales.

Primer Paso

IntelXDK – Nuevo Proyecto

2 paso

Poner nombre al proyecto

Cómo segundo paso borraremos todo lo que tiene nuestro archivo index.html e ingresaremos el siguiente código:

Cómo podrán darse cuenta en la linea 20 de nuestro código verán los links a nuestro plugin de jquery mobile para que no tengamos problemas es necesario descomprimir el archivo .zip que descargamos del portal de jquerymobile dentro de la carpeta www, para acceder a ella daremos clic derecho sobre la carpeta www y elegiremos la opción show in OS (Mostrar en el navegador).

Carpeta www

Mostrar carpeta www en el explorador de archivos de su sistema operativo instalado.

jquery mobile

Vista de la carpeta jquerymobile descomprimida dentro de la carpeta www.

Tercer paso, dentro de nuestro proyecto encontraremos una carpeta llamada js en donde se alojan los archivos de javascript de nuestro proyecto, en esa carpeta daremos clic derecho y elegiremos la opción nuevo archivo.

3 paso

Crear un nuevo archivo JS.

Este archivo le pondremos de nombre funciones.js y deberá llevar el siguiente código.

Para nuestro proyecto deberemos crear una base de datos en mysql en nuestro hosting web previamente creado recomiendo utilizar x10hosting.com ya que es gratuito y para prácticas nos permite tener hasta 2 bases de datos las cuales podemos ocupar para proyectos pequeños como este.

La base de datos deberá tener una tabla llamada usuarios con los siguientes campos y propiedades:

basededatos

Base de datos – mySQL

Posteriormente crearemos un nuevo archivo dentro de la carpeta www y a este le pondremos conecta.php y deberá llevar el siguiente código php. Este código deberán modificar sus datos del servidor en donde tienen alojada su base de datos, que utilizaremos para la conexión de la App.

Una vez que tengamos listo nuestro archivo de conexion.php deberemos subir a nuestro hosting alojándole en raíz para esto podemos ocupar un cliente FTP cómo Filezilla 

Antes de concluir nuestro proyecto deberemos verificar que tengamos habilitados los siguientes plugins en nuestro proyecto de IntelXDK:

Captura de pantalla de 2016-02-14 23-10-28

IntelXDK – Plugins

Al finalizar deberemos guardar los cambios en cada uno de nuestros archivos, OJO: cambiar cada campo de los archivos ejemplos que pongo por los datos de ustedes cómo nombre de hosting, nombre de base de datos, tabla, campos, contraseñas y usuarios de mysql para que no tengan ningún problema a la hora de ejecutar su aplicación.

Para construir nuestra App nos deberemos dirigir a la pestaña Build y elegiremos en esta ocasión construir para Android:

Captura de pantalla de 2016-02-14 22-43-09

Build en IntelXDK

 

Captura de pantalla de 2016-02-14 22-44-22

Build App Now

A continuación daremos clic en el botón Build App Now y nos aparecerá el botón de Download Build para descargar nuestra App y así poderla pasar mediante un cable usb a nuestro dispositivo Android para poder instalarlo, recordar que en su dispositivo tienen que tener habilitada la instalación de aplicación de orígenes desconocidos ya que nuestra app no la tenemos en el PlayStore.

Espero les haya servido este pequeño tutorial, cualquier duda o comentario dejo habilitado las opciones de esta entrada.

Fuente: Internet y muchos tutoriales en Portugués.