Instituto Tecnolgico De Cd.

Jimnez.

Avances Proyecto Final

(Conexin)
ISC. Enrique Campos Rodrguez.

Integrantes:
Erick Garca Regalado
David Omar Robles Mora
Pedro Gerardo Seaez Arambula

07/04/2014

N.c 11740111.
N.c 11740130.
N.c 11740242.

ndice de contenido.
1. Introduccin

4
5
5
5
5
5

2. Objetivos
2.1. Objetivo general del curso
2.2. Objetivo de la conexin.
3. Marco terico.
3.1. BD Capacidad de
almacenamiento.
3.2. Consumir Servicios web
desde mviles.
3.3. Qu es el servidor
XAMPP?
4. Desarrollo.
4.1. Instalacin y ejecucin del
servidor XAMPP.
4.2. Creacin de bases de datos
MySQL y tablas.
4.3. Conexin a la base de
datos MySQL con PHP.
4.4. Creacin de la aplicacin
Android.
5. Conclusin.
6. Fuentes de Consulta

5
6
7
7
8
9
12
19
19

ndice de Listas
Listado 1: Crear tabla en Base de datos.
Listado 2: Datos para la conexin con la BD.
Listado 3: Cdigo para la conexin con la Base de datos.

8
9
10

Listado 4: Fragmento del cdigo para la conexin con la

Base de datos.
Listado 5: Cdigo que enlistara todos los productos.
Listado 6: Cdigo donde se encuentra AllProductsActivity y
donde se otorga permisos de internet a la aplicacin.
Listado 7: Creacin de la interfaz inicial.
Listado 8: Asignacin del evento al botn de la interfaz.
Listado 9: Creacin de la interfaz para ver todos los
productos.
Listado 10: Creacin de la interfaz para ver los
productos uno por uno.
Listado 11: Solicitud de la informacin de los productos.
Listado 12: sirve para mostrar la lista completa de los
productos.
Listado 13: Sirve para ver las caractersticas de cada
producto uno por uno.
Listado 14: Clase para obtener el URL de JSON, analizar y
mostrar los datos.

11
11
12
13
14
15
15
16
16
17
17

ndice de figuras.
Figura 4.1.1: Panel de control del XAMPP.
Figura 4.2.1: Interfaz de phpMyAdmin, crear DB.
Figura 4.2.2: Interfaz de phpMyAdmin, crear tabla.
Figura 4.3.1: Crear archivo php.
Figura 4.4.1: Interfaz Inicial de la aplicacin.
Figura 4.4.2: Interfaz que muestra todos los
productos.
Figura 4.4.3: Interfaz que muestra los detalles de
los productos uno por uno.

7
8
9
11
14
16
17

1.- Introduccin
Una parte importante de las aplicaciones de hoy en da es poder almacenar y
hacer uso de una gran cantidad de informacin que se encuentra almacenada no
solo en el mvil sino que tambin en otro lugar como una base de datos, la
mayora de las aplicaciones por no decir todas cuentan con conexin a una BD,
ya que de esta manera es un poco ms confiable y cmodo el manejo de
informacin importante.
Hay diversos SW que facilitan su creacin, adems de permitir estructurar
relacionar mejor la forma en que est organizada la informacin y as evitar
conflictos y problemas al momento de querer hacer uso de ellas.
No solo la creacin es importante, lo es tambin su relacin y conexin con la
aplicacin, ya que de esta manera se permitir acceder a la informacin sin la
necesidad de tenerla dentro de la misma aplicacin, de esta forma se evita el uso
innecesario de recursos de almacenamiento del dispositivo donde se encuentra la
aplicacin.

2.- Objetivos.
2.1- Objetivo general del curso.

Identificar las implicaciones actuales de la programacin mvil.

Identificar las caractersticas de los diferentes emuladores para dispositivos
mviles.
Identificar los problemas de comunicacin entre sistemas.
Utilizar tcnicas de modelado para la solucin de problemas.
Aplicar la sintaxis de un lenguaje para aplicaciones mviles.
Aplicar un lenguaje para la solucin de problemas para dispositivos mviles.

2.2.- Objetivo de la conexin.

El poder tener la aplicacin conectada con una base de datos es de gran ayuda
porque gracias a esto se puede tener una gran cantidad de informacin
almacenada y organizada de la cual puede hacer uso la aplicacin en cualquier
momento, siempre y cuando se encuentre dentro de los rangos de acceso que le
fueron otorgaros.

3.- Marco terico.

3.1.- BD Capacidad de almacenamiento.
Las bases de datos suelen ser creadas para almacenar grandes cantidades de
datos de forma permanente. Por lo general, los datos almacenados en stas
suelen ser consultados y actualizados constantemente.
Se refiere a la cantidad de datos que pueden almacenarse en un dispositivo de
almacenamiento. Esta capacidad puede ser medida en bytes, kilobytes,
megabytes, gigabytes, terabytes, etc. [1]

3.2.- Consumir Servicios web desde mviles.

Los servicios Web podran verse como la transformacin de las funciones de
software tradicionales a funciones estandarizadas, las cuales son visibles y
accesibles por cualquier aplicacin de software, utilizando a Internet como medio
de comunicacin. Estos servicios se enfocan en tareas especficas y abarcan
desde simples pedidos hasta complejos procedimientos tcnicos, que pueden ser
invocados por otros servicios Web o aplicaciones.
Un servicio Web es comparable con un mdulo o componente de software. ste
evita el conocido problema de hacer cambios o modificaciones a una aplicacin,
en donde generalmente un cambio significa cambios en todo el sistema, debido a
5

la alta dependencia entre ellos (alta mantenibilidad y flexibilidad). Por otra parte,
los servicios Web son utilizados por aplicaciones u otros servicios Web, sin que los
desarrolladores originales de las aplicaciones tengan conocimiento de su
implementacin. Estos servicios pueden ser vistos como un plug-in en los
desarrollos de sistemas de software.
Los servicios Web ofrecen la flexibilidad a los desarrolladores de trabajar en
cualquier lenguaje de programacin, permitindoles adems utilizar estos servicios
sin tener que adaptarse a nuevos ambientes de desarrollo. Por otra parte, este tipo
de soluciones promueve la interoperabilidad entre sistemas, ayudando a la
integracin de organizaciones independientes.
A grandes rasgos, se pueden distinguir tres aspectos importantes, que juntos
hacen posible el desarrollo de los servicios Web: (1) un protocolo estndar de
comunicacin e interoperabilidad entre servicios, como SOAP (Simple Object
Access Protocol); (2) una forma de proveer, tanto a los desarrolladores como a
aplicaciones, informacin detallada de los servicios ofrecidos y cmo utilizarlos,
como los WSDL (Web Services Definition Language); y (3) un lugar donde los
servicios Web puedan ser publicados y as ser buscados por los clientes, como lo
son los directorios UDDI (Universal Description, Discovery Interface),
Es de vital importancia en este trabajo de ttulo conocer ms a fondo los aspectos
descritos anteriormente, pues stos son la base del desarrollo y existencia de un
servicio Web. A continuacin se explica con ms detalle SOAP y WSDL, pues son
dos aspectos muy relacionados entre s, cuyo entendimiento es vital. [2]

3.3.- Qu es el servidor XAMPP?

XAMPP, es un servidor de plataforma libre, es un software que integra en una
sola aplicacin, un servidor web Apache, interpretes de lenguaje de scripts PHP,
un servidor de base de datos MySQL, un servidor de FTP FileZilla, el popular
administrador de base de datos escrito en PHP, MySQL, entre otros mdulos. De
hecho su nombre viene de ah, X (para cualquier sistema operativo), A (Apache),
M (MySQL), P (PHP) y P (Perl).
Te permite instalar de forma sencilla Apache en tu propio ordenador, sin importar
tu sistema operativo (Linux, Windows, MAC o Solaris). Y lo mejor de todo es que
su uso es gratuito. [3]

4.- Desarrollo.
4.1.- Instalacin y ejecucin del servidor XAMPP.
Descarga el servidor XAMPP desde https://www.apachefriends.org/download.html,
una vez finalizada la descarga ejecutar el fichero xampp-win32-1.8.3-3-VC11installer, y lo primero ser elegir el idioma. XAMPP nos da la bienvenida,
pulsamos Next y en el siguiente paso seleccionaran la ruta donde queremos que
se instale (por lo general suele ser en C: Debe asegurarse que la carpeta lleve por
nombre XAMPP), luego clic en Next. Opciones de XAMPP: en esta pantalla se
podrn seleccionar los Servicios que se instalaran segn queramos. Se dar clic
en Install para iniciar la instalacin, para terminar la instalacin clic en Finish y
as ya se podrn ejecutar los servicios desde el panel de control del XAMPP:

Figura 4.1.1: Panel de control del XAMPP.

Deber iniciar (Start) al menos los servicios Apache y MySQL para poder
inicializar el sistema de informacin desarrollado. Usted puede probar el servidor
al abrir la direccin http://localhost/ en su navegador. Tambin usted puede
comprobar phpmyadmin abriendo http://localhost/phpmyadmin.

4.2.- Creacin de bases de datos MySQL y tablas.

Se accede a phpmyadmin abriendo la direccin http://localhost/phpmyadmin/ en su
navegador. Usted podr utilizar la herramienta phpMyAdmin para crear una base
de datos y una tabla de la siguiente manera:
Primero clic en nueva, se le asignara un nombre a la BD (androidhive) y luego
crear, as se tendr la BD creada.

Figura 4.2.1: Interfaz de phpMyAdmin, crear DB.

Despus se da clic en SQL donde se ingresara el siguiente cdigo para crear la

tabla products:
CREATE TABLE products(
pid int(11) primary key auto_increment,
name varchar(100) not null,
price decimal(10,2) not null,
description text,
created_at timestamp default now(),
updated_at timestamp
);

Listado 1: Crear tabla en Base de datos.

Y clic en Continuar y con esto se tendr creada la BD con su Tabla

correspondiente.

Figura 4.2.2: Interfaz de phpMyAdmin, crear tabla.

4.3.- Conexin a la base de datos MySQL con PHP.

Vaya a la ubicacin donde se ha instalado el servidor XAMPP (En este caso se
instalado en C: \ xampp \) e ir a la carpeta htdocs y crear una nueva carpeta
para el proyecto. Tienes que poner todos los archivos del proyecto dentro de esta
carpeta.
Cree una carpeta llamada android_connect y hay que crear dos archivos
llamados db_config.php y db_connect.php.
db_config.php - tendr las variables de conexin de base de datos.
<?php
/*
* All database connection variables
*/
define('DB_USER', "root"); // db usuario
define('DB_PASSWORD', ""); // db password (mention your db password here)
define('DB_DATABASE', "androidhive"); // database nombre
define('DB_SERVER', "localhost"); // db server
?>

Listado 2: Datos para la conexin con la BD.

9

db_connect.php - un archivo para conectarse a la base de datos.

<?php
/**
* A class file to connect to database
*/
class DB_CONNECT {
// constructor
function __construct() {
// conectarse ala base de datos
$this->connect();
}
// destructor
function __destruct() {
// conexion db cierre
$this->close();
}
/**
* Funcin para conectar con la base de datos
*/
function connect() {
// Las variables de conexin / base de datos / importacin
require_once __DIR__ . '/db_config.php';
// Conectar con la base de datos mysql
$con = mysql_connect(DB_SERVER, DB_USER, DB_PASSWORD) or die(mysql_error());
// Seleccionar db
$db = mysql_select_db(DB_DATABASE) or die(mysql_error()) or die(mysql_error());
// returing connection cursor
return $con;
}
/**
* Funcin para cerrar la conexin db
*/
function close() {
// Conexin db cierre
mysql_close();
}
}
?>

Listado 3: Cdigo para la conexin con la Base de datos.

10

Uso: Cuando cada vez que desee conectarse a la base de datos MySQL y hacer
algunas operaciones utilizan la clase db_connect.php como ste:
$ Db = nueva db_connect (); / / Creacin de clase de objeto (Se abrir una conexin de base de
datos)

Listado 4: Fragmento del cdigo para la conexin con la Base de datos.

Para crearlos primero se abre el bloc de notas, se copia el cdigo y se guarda en

la direccin dicha anteriormente de la siguiente manera nombre.php y guardar:

Figura 4.3.1: Crear archivo php.

Se necesita un json para enumerar todos los productos en el dispositivo

Android. Por lo tanto crear un nuevo archivo php llamado get_all_products.php y
escribir cdigo siguiente:
<?php
/ *
* Cdigo siguiente listar todos los productos
* /
/ / Array para la respuesta JSON
$response = array();
// incluye db connect class
require_once __DIR__ . '/db_connect.php';

11

/ / De conexin a bd
$db = new DB_CONNECT();
/ / Obtiene todos los productos de la tabla de productos
$result = mysql_query("SELECT *FROM products") or die(mysql_error());
// Chequeo de resultados vacio
if (mysql_num_rows($result) > 0) {
/ / Bucle a travs de todos los resultados
nodo / / Productos
$response["products"] = array();
while ($row = mysql_fetch_array($result)) {
Array de usuario / / temp
$product = array();
$product["pid"] = $row["pid"];
$product["name"] = $row["name"];
$product["price"] = $row["price"];
$product["created_at"] = $row["created_at"];
$product["updated_at"] = $row["updated_at"];
//Push solo producto en una matriz de respuesta final
array_push($response["products"], $product);
}
/ / xito
$response["success"] = 1;
// echoing respuesta JSON
echo json_encode($response);
} else {
/ / No hay productos encontrados
$response["success"] = 0;
$response["message"] = "No products found";
// echo ningn usuario JSON
echo json_encode($response);
}
?>

Listado 5: Cdigo que enlistara todos los productos.

4.4.- Creacin de la aplicacin Android.

Crear nuevo proyecto en Eclipse IDE, vaya a File New Android Project y el
nombre de la clase de activity ser MainScreenActivity que por el momento no
ser modificada.
Abra el archivo AndroidManifest.xml y agregue el cdigo siguiente:
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.androidhive"
android:versionCode="1"
android:versionName="1.0" >

12

<uses-sdk android:minSdkVersion="8" />

<application
android:configChanges="keyboardHidden|orientation"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name" >
<activity
android:name=".MainScreenActivity"
android:label="@string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<!-- Todos los productos -->
<activity
android:name=".AllProductsActivity"
android:label="All Products" >
</activity>
</application>
<!-- Otorgar permisos de Internet -->
<uses-permission android:name="android.permission.INTERNET" />
</manifest>

Listado 6: Cdigo donde se encuentra AllProductsActivity y donde se otorga permisos de internet a

la aplicacin.

Ahora cree un nuevo archivo xml en res layout y con el nombre

main_screen.xml. Este archivo de diseo contiene un botn para ver todos los
productos:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:gravity="center_horizontal">
<!-- Botn para ver todos los productos en pantalla -->
<Button android:id="@+id/btnViewProducts"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="View Products"
android:layout_marginTop="25dip"/>
</LinearLayout>

Listado 7: Creacin de la interfaz inicial.

13

Figura 4.4.1: Interfaz Inicial de la aplicacin.

Abra usted la clase principal que es MainScreenActivity.java y escriba el evento

clic del botn que se menciona en main_screen.xml.
package com.example.androidhive;
import
import
import
import
import

android.app.Activity;
android.content.Intent;
android.os.Bundle;
android.view.View;
android.widget.Button;

public class MainScreenActivity extends Activity{

Button btnViewProducts;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main_screen);
// Boton
btnViewProducts = (Button) findViewById(R.id.btnViewProducts);
// Ver productos evento Click
btnViewProducts.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
// Launching All products Activity
Intent i = new Intent(getApplicationContext(), AllProductsActivity.class);
startActivity(i);
}
});
}
}

Listado 8: Asignacin del evento al botn de la interfaz.

14

Ahora se necesita una pantalla que muestre todos los productos en formato de
lista. Como sabemos vista de lista necesita dos archivos XML, uno para listview y
otra es para una sola fila de la lista.
Cree
dos archivos
xml
en res

nombres all_products.xml y list_item.xml.

layout

con

los

siguientes

all_products.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<!-- Principal ListView
Siempre dar valor id como lista (@ android: id / list)
-->
<ListView
android:id="@android:id/list"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
</LinearLayout>

Listado 9: Creacin de la interfaz para ver todos los productos.

list_item.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<!-- Identificacin del producto (PID) - estar oculto - se utiliza para pasar a otra
actividad -->
<TextView
android:id="@+id/pid"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:visibility="gone" />
<!-- Nombre de la etiqueta-->
<TextView
android:id="@+id/name"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingTop="6dip"
android:paddingLeft="6dip"
android:textSize="17dip"
android:textStyle="bold" />
</LinearLayout>

Listado 10: Creacin de la interfaz para ver los productos uno por uno.

15

Crear una nueva clase llamada AllProductsActivity.java. Que enviara una

solicitud a get_all_products.php y despus conseguir un JSON desde
get_all_products.php, analizara y mostrara en una vista la lista.
// Crear objeto JSON Analizador
JSONParser jParser = new JSONParser();
ArrayList<HashMap<String, String>> productsList;
// / Url para obtener toda la lista de productos
private static String url_all_products =
"http://192.168.1.220/android_connect/get_all_products.php";
/ / JSON nombres de nodo
private static final String
private static final String
private static final String
private static final String

TAG_SUCCESS = "success";
TAG_PRODUCTS = "products";
TAG_PID = "pid";
TAG_NAME = "name";

/ / Productos JsonArray
JSONArray products = null;

Listado 11: Solicitud de la informacin de los productos.

Figura 4.4.2: Interfaz que muestra todos los productos.

// Hashmap for ListView
productsList = new ArrayList<HashMap<String, String>>();
// Loading products in Background Thread
new LoadAllProducts().execute();
// Get listview
ListView lv = getListView();

Listado 12: Sirve para mostrar la lista completa de los productos.

16

Figura 4.4.3: Interfaz que muestra los detalles de los productos uno por uno.
// on seleting single product
// launching Edit Product Screen
lv.setOnItemClickListener(new OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view,
int position, long id) {
// getting values from selected ListItem
String pid = ((TextView)
view.findViewById(R.id.pid)).getText()
.toString();
// Starting new intent
Intent in = new Intent(getApplicationContext(),
EditProductActivity.class);
// sending pid to next activity
in.putExtra(TAG_PID, pid);
// starting new activity and expecting some response
back
startActivityForResult(in, 100);
}
});
}

Listado 13: Sirve para ver las caractersticas de cada producto uno por uno.

Se ha crea una clase llamada JSONParser para obtener el url de JSON. Esta
clase admite dos mtodos http de solicitud GET y POST.
public class JSONParser {
static InputStream is = null;
static JSONObject jObj = null;

17

static String json = "";

// constructor
public JSONParser() {
}
// function get json from url
// Haciendo HTTP POST o GET mehtod
public JSONObject makeHttpRequest(String url, String method,
List<NameValuePair> params) {
Peticin HTTP / / Making
try {
/ / Cheque por mtodo de la peticin
if(method == "POST"){
Mtodo / / peticin es POST
// defaultHttpClient
DefaultHttpClient httpClient = new DefaultHttpClient();
HttpPost httpPost = new HttpPost(url);
httpPost.setEntity(new UrlEncodedFormEntity(params));
HttpResponse httpResponse = httpClient.execute(httpPost);
HttpEntity httpEntity = httpResponse.getEntity();
is = httpEntity.getContent();
}else if(method == "GET"){
/ / Mtodo de peticin es GET
DefaultHttpClient httpClient = new DefaultHttpClient();
String paramString = URLEncodedUtils.format(params, "utf-8");
url += "?" + paramString;
HttpGet httpGet = new HttpGet(url);
HttpResponse httpResponse = httpClient.execute(httpGet);
HttpEntity httpEntity = httpResponse.getEntity();
is = httpEntity.getContent();
}
} catch (UnsupportedEncodingException e) {
e.printStackTrace();
} catch (ClientProtocolException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
try {
BufferedReader reader = new BufferedReader(new InputStreamReader(
is, "iso-8859-1"), 8);
StringBuilder sb = new StringBuilder();
String line = null;
while ((line = reader.readLine()) != null) {
sb.append(line + "\n");
}

18

is.close();
json = sb.toString();
} catch (Exception e) {
Log.e("Buffer Error", "Error converting result " + e.toString());
}
/ / Intentar analizar la cadena en un objeto JSON
try {
jObj = new JSONObject(json);
} catch (JSONException e) {
Log.e("JSON Parser", "Error parsing data " + e.toString());
}
/ / Devuelve JSON Cadena
return jObj;
}
}

Listado 14: Clase para obtener el URL de JSON, analizar y mostrar los datos.

5.- Conclusin.
Otra de las partes importantes de una aplicacin podra ser la base de datos, ya
que en esta se almacenara toda la informacin que se utilizara si no es que la
mayora, en esta etapa de la aplicacin se analizo de manera profunda la
estructura de la BD, adems de sus relaciones entre las diversas tablas que esta
contenga.
Durante el desarrollo de esta etapa nos apoyamos en programas como el
workbench para poder crear de una manera fcil la estructura de nuestra BD,
adems de otros programas como el XAMPP que nos permitieron lograr la
conexin de manera remota.

6.-Fuentes de Consulta
1.http://www.alegsa.com.ar/Dic/almacenamiento%20de%20bases%20de%20d
atos.php
2.http://www.google.com.mx/url?sa=t&rct=j&q=&esrc=s&source=web&cd=2&ca
d=rja&uact=8&ved=0CC4QFjAB&url=https%3A%2F%2Ffanyv88.com%3A443%2Fhttp%2Fwww.tesis.uchile.cl%2Ft
esis%2Fuchile%2F2007%2Fcarrasco_vh%2Fsources%2Fcarrasco_vh.pdf&ei=
YsxBU8GRDMaN3AX_soHwBw&usg=AFQjCNGKFHRqlb_kU8OZA6fgxpfDL6GDQ&bvm=bv.64367178,d.b2I
3.http://myu-charly.blogspot.mx/

19