Desarrollo de Aplicaciones para Android

Encuentra en el sitio

Te ha gustado? Compartelo!Share on Facebook0Pin on Pinterest0Share on Google+0Share on StumbleUpon0Tweet about this on TwitterShare on LinkedIn0

Anteriormente había dado una Guía Para Desarrollar Aplicaciones Para BlackBerry en la cual hablaba de un FrameWork (PhoneGap), el cual nos facilita el desarrollo para los diversas plataformas existentes para los SmartPhone. Lo interesante de este FrameWork es que un solo desarrollo nos sirve para otras plataformas, usando lo que se conoce como WebWorks y tecnologías web que este tipo de desarrollo implica, tales como HTML5, CSS, JavaScript; Ademas de las anteriores tecnologías, usare jquery y jquery mobile para que el ejercicio sea mas completo 😉

Para comenzar tendremos que configurar nuestro entorno de trabajo, el cual estará dotado del SDK de android, NetBeans (Desarrollo Android), Aptana Studio (Desarrollo Web), XAMPP, y el FrameWork; lo anterior esta explicado en una guía para configurar el entorno para el Desarrollo de Aplicaciones para Smartphones, ademas de lo anterior es necesario instalar un plugin para Netbeans, el cual es necesario para desarrollar en Android mediante este IDE. La instalación y configuración de este plugin lo pueden encontrar en el siguiente post, antes de hacer esto es necesario tener descargado, ubicado y configurado el SDK.

1. Crearemos el proyecto web en Aptana Studio 3, compartire con ustedes el proyecto el cual usare de ejemplo, primero veamos como tiene que quedar la estructura del proyecto a realizar:
Proyecto Aptana

Cabe aclarar que los archivos que comienzan con jquery* son frameworks usados para el desarrollo web, los pueden descargan haciendo click en cada enlace: jquery y jquery mobile.

2. El archivo index.html ira en la carpeta principal del proyecto, en este caso ira en CalTemp, el código que contendrá el archivo es el siguiente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
        <!--Cargando js-->
        <script type="text/javascript" src="js/jquery1.9.js"></script>
        <script type="text/javascript" src="js/jquery.mobile-1.3.0.min.js"></script>
 
        <script type="text/javascript" src="js/scriptJS.js"></script>
 
        <!--Cargando css-->
        <link type="text/css" rel="stylesheet" href="css/jquery.mobile-1.3.0.min.css" />
        <link type="text/css" rel="stylesheet" href="css/estilos.css" />
 
        <title>Cal* Temp*</title>
    </head>
    <body >
 
    	<!-->Comienzo Pagina principal<-->
 
    	<div data-role="page" id="pageMain" data-position="fixed">
    		<div data-role="header" data-position="fixed" data-fullscreen="false"> <p class="titHeader">CONVERTIDOR DE TEMPERATURA</p> </div>
 
    		<div data-role="content" id="content" >   
 
    				<label for="name">Grados C° a Convertir  </label> <input type="text"  data-role="none" size="15" id="numCen"/>
    				<input type="button" value="Convertir" data-role="none" class="btnPer" id="convertir">
 
 
    			<!--Capa donde se mostraran los resultados-->
    			<div id="capRes">
    				<h2>CONVERSION</h2>
	    			<div class="divL"><label></label> <input type="text" maxlength="2" data-role="none"  id="grF" disabled="disabled"/></div> 
	    			<div class="divL"><label></label> <input type="text" maxlength="2" data-role="none"  id="grK" disabled="disabled"/></div> 
 
	    			<button data-role="none" id="btnRes" >REINICIAR</button>
    			</div>  
			</div> 			
 
 
    		<div data-role="footer"  data-position="fixed">
    			<div>
    				<a data-role="button" data-theme="b" href="https://www.jagonzalez.org" data-shadow="true">JaGonzalez.org</a>
    			</div>    			
    		</div>    		
    	</div> 	
    </body>
</html>

3. La ubicación para el archivo estilos.css es en la carpeta css, los estilos que se aplicaron son los siguientes:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
.titHeader{
	padding: 0 auto;
	text-align: center;
	font-family: Verdana;
	font-weight: 100;
	font-style: oblique;
	font-size: 14px;
}
 
#content{
	width: auto;
	height: 260px;		
	float: left;
	clear: both;	
}
 
.btnPer{
	width: auto;
	font-size: 16px;	
	border-radius: 10px;
	-moz-transition: all 0.9s;
  	-webkit-transition: all 0.9s;
  	-o-transition: all 0.9s;
  	transition: all 0.9s;
}
 
.btnPer:hover{
	background-color: #D2CDCC;
}
 
#capRes{
	visibility: hidden;	
}
 
input:not([type]), input[type="text"]{
 
	border-radius: 5px;
	text-align: right;	
}
 
.divL{
	margin: 15px 0 20px 0;
}
 
#btnRes{
	width: auto;
	color: #3200DC;	
	font-size: 16px;	
	border-radius: 10px;
	font-weight: bold;
}
 
#btnRes:hover{
	background-color: #D2CDCC;
}

4. Para darle dinamismo usamos jquery y javascript, el código esta en el archivo scriptJS.js, este se ubica en la carpeta js, el código es el siguiente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
$(document).ready(function(){//uso de jquery para usar javascript cuando se cargue el DOM
 
  	$("#convertir").click(function() {//cuando se hace click en el boton CONVERTIR
 
  		var num = document.getElementById("numCen").value;//obteniendo el valor del campo a convertir
 
  		if(num=="" || num==null){//validacion si la casilla esta vacia
  			document.getElementById("numCen").style.background='#FFBCD4'; //si esta vacia se sombrea con un color tenuea primera advertencia
  		}
  		else{//si no esta vacia la casilla sigue a la siguiente validacion
  			if(!isNaN(num)){//se valida si es un numero
  				var div = document.getElementById("capRes"); //se almacena en una variable la capa que esta oculta y muestra el resultado
 
  				document.getElementById("numCen").style.background='#fff';//se quita el color de los errores de las validaciones  				
 
  				var far = parseInt(num)*9/5+32;//se hace la conversion para la temperatura F°
  				var kel = parseInt(num) +273.15;//se hace la conversion para la temperatura K°
 
  				document.getElementById("grF").value= far; //se muestra el resultado F°
  				document.getElementById("grK").value = kel;//se muestra el resultado K°
  				document.getElementById("btnRes").style.visibility  = "visible"; //se hace visible el boton reiniciar
  				div.style.visibility= "visible"; 	//se hace visible la capa que muestra los resultados
 
 
 
  			}else{//si no es un numero se sombrea con un color mas fuerte segunda advertencia
  				document.getElementById("numCen").style.background='#FF6E97';//si no es un numero el que se ingresa se sombre con un color mas fuerte, segunda advertencia
  			}
 
  		}
 
	});
 
	$('#btnRes').click(function() {//cuando se hace click en el boton de reiniciar
 
		var div = document.getElementById("capRes"); //se almacena en una variable la capa que muestra el resultado
		document.getElementById("btnRes").style.visibility  = "hidden";//se oculta el boton de reiniicar
		document.getElementById("grF").value= "";//se elimina el valor en el campo de la temperatura F°
  		document.getElementById("grK").value = "";//se elimina el valor en el campo de la temperatura K°
  		document.getElementById("numCen").value ="";//se elimina el valor en el campo del numero a convertir
 
 
		div.style.visibility="hidden";//se oculta la capa que muestra los resultados
 
		});
 
});

En este punto la aplicación debería de verse así:
Aplicacion para Android

– La parte de la izquierda es como tiene que quedar la estructura del proyecto, la parte marcada de la derecha es lo único que aparece al inicio, una vez se le de CONVERTIR veremos el resultado en la parte de abajo, este ejercicio tiene dos validaciones 😉

5. Ahora pasaremos a copiar cierta carpeta que viene en la descarga del PhoneGap (espero que hayan leído sobre como configurar el entorno de desarrollo), la carpeta la encontramos en: C:phonegap-2.4.0libandroid, esta es la ubicación que deje para la carpeta del FrameWork; en esta ruta encontramos una carpeta que se llama example, la copiamos (Crtl + C):
Proyecto Android PhoneGap

6. La carpeta que copiamos en el anterior paso la pegamos en la ruta de los proyectos en NetBeans, C:UsersbelialDocumentsNetBeansProjects (Ctrl + V):
Proyecto Android Netbeans

7. Ubicamos la carpeta del proyecto realizado en el punto 1, y copiamos todo el contenido y lo pegamos en la siguiente ruta: C:UsersbelialDocumentsNetBeansProjectsexampleassetswww, antes de pegarlo, podemos eliminar sin preocupación lo que hay en esa carpeta, en este punto debería quedar así:
Aplicacion web en Proyecto Android

8. Luego abriremos Netbeans, en el cual buscamos el proyecto de nombre example y lo abrimos, una vez abierto damos click derecho sobre el nombre del proyecto y elegiremos Run para ejecutar nuestra aplicación:
Ejecucion aplicacion en netbeans

9. Para correr la aplicación tenemos dos opciones, la primera es Ejecutar la Aplicacion Android en el Emulador del SDK y la segunda es usar nuestro SmartPhone con Android, en este caso use la segunda opción:
Ejecutar Aplicacion Android en SmartPhone

10. La aplicación quedara instalada en el celular, la encontraremos con el nombre e icono predeterminado del proyecto de PhoneGap:
Aplicación en el celular

11. Ejecutada la aplicación veremos que trabaja exactamente igual que en el punto 1, pero con la diferencia de que es ejecutada en Android:
Aplicación en Android

12. Una vez ejecutamos el evento de convertir, se mostrara los resultados en la parte de abajo, si pulsamos reiniciar, veremos que la app volverá al punto anterior:
Función de la aplicacion

Si te ha gustado el post, compártelo, regala un like ó comenta 😉