Tutorial: Crear aplicaciones Android - Horoscopo Chino

Cicklow · 8 Dic 2011

Tutoriales Anteriores:
Horóscopo Gratis (Script)
Tu sitio de Tarot sin hacer nada
Programar nuestro propio sitio de tarot
Programar nuestro propio sitio de tarot - V2
Crear aplicaciones Android - Horoscopo Chino
El complemento de todo sitio de Tarot (Aplicación Android)

En este nuevo tutorial vamos a aprender a realizar una aplicación para Android, que será GRATIS y PAGA, primero realizaremos la versión paga, luego le sacaremos algunas cosas y será la versión free.

Usaremos: http://ai2.appinventor.mit.edu/

Para este tutorial necesitaran un hosting con PHP (que será el encargado de enviar datos a nuestra aplicación).

Vamos a crear una aplicación de horóscopo chino. Este mostrara las características del signo, elemento según nacimiento y características de ese elemento. En la versión gratis solo mostrara las características.

Comenzamos. (Les recomiendo primero hacer el ejercicio del primer tutorial, para de esta forma estar más duchos con el tema.)

1- Como nombre a nuestra aplicación ponemos: HoroscopoChino

2- Editamos la propiedades:
a. Title = Horóscopo Chino
b. ScreenOrientation: Portrait
c. BackGroundColor: DarkGray

3- Para el horóscopo chino solo necesitamos pedir el año de nacimiento, de esta forma se calcula de que signo es. Agregamos en pantalla un Screen Arrangement->TableArrangement, y las propiedades son:
a. Width: Fill Parent
b. Columns: 3
c. Rows: 4
d. Editamos el nombre a: T1

4- Agregamos dentro de T1 un label, un TextBox (txtanio)
a. El valor dentro del paréntesis es el nombre del objeto, sino tiene un valor no se cambia el nombre.
b. TexBox-NumbersOnly: true
5- Agregamos la imagen de fondo, luego agregamos un objeto image y de propiedad Picture, seleccionamos la imagen de fondo previamente cargada.
6- Agregamos un Button (btnVer) y en la propiedad text ponemos: Ver mi horóscopo
Hasta ahora tendría que quedar así:

7- Ahora debajo de T1 colocaremos otro Screen Arrangement->TableArrangement (T2) con las propiedades:
a. Width: Fill Parent
b. Columns: 2
c. Rows: 7
d. Visible: false
(Para ver los objetos invisibles, seleccionamos arriba un checkbox que dice: Display Invisible Components in Viewer)

8- Dentro de T2, agregamos: image (imbSigno), label (txtSigno), debajo de estos agregamos: label, con la propiedad text: Caracteristicas.
Abajo del label agregamos otro label (txtCar), propiedad width: 250px. Tendria que quedar asi:

Agregamos un label con la propiedad text: Elemento segun fecha de nacimiento
Otro label (txtEle); width: 250px.
Otro label, propiedad text: Temperamento
Otro label (txtTem), propiedad width: 250px;
Un button (btnDemo), propiedad text: Obtener versión completa…
Un button (btnOtro), propiedad text: Consultar otro signo
Y todo esto queda mejor así:

9- Agregamos Other stuff->Web (web); Other stuff->ActivityStarter(AS); Other stuff->Notifier (alert)
a. Al ActivityStarter le editamos estas propiedades:
i. Action: android.intent.action.VIEW
ii. DataUri: http://www.miweb.com/redir_android.php
10- Ahora un poco de código (unir piezas de rompecabezas), hacemos click en el botón: Open the Blocks Editor, los pasos ahora son visuales:

- Agregamos el evento click del botón: btnVer
- Agregamos un if y verificamos si el txtanio es distinto de vacio
- Si no es vacio ponemos en pantalla: Cargando…
- Agregamos el objeto web.Url y le asignamos la url de nuestro script horos_android.php
- Ejecutamos el objeto Web

- Este paso es el más largo, agregamos el evento GotText del objeto Web (este evento se dispara cuando Web.Get termina de leer la url, agregamos un if / else.
- Ocultamos el botón btnDemo, también la tabla T1, y mostramos la tabla T2, asignamos a la variable tmp (previamente creada) el contenido obtenido (pero haciendo un Split de los datos).
- Asignamos a imgSigno la url de nuestro servidor + el 1 objeto del array + .png
- Asignamos al label txtsigno el objeto 2 del array
- Agregamos un if /else y verificamos si es un demo o no, sino es un demo asignamos los otros valores del array, de lo contrario mostramos el texto DEMO.

- Al evento clic del botón btnDemo le asignamos el objeto AS con el evento StarActivity, este se encarga de abrir la url de la aplicación completa.
- Dentro evento clic del botón btnOtro colocamos la tabla T1 y la mostramos y la tabla T2 la ocultamos.

Por si no entendieron este txt - tutorial, pueden ver el video - tutorial

(Si no pueden ver el video es porque recién lo termino de subir)

Saludos...
Esto es solo un punto de partida, el resto depende de ti!

Cicklow · 8 Dic 2011

Ahora el codigo PHP que tendremos que usar es:
redir_android.php

PHP:

<?php
	//aca va la url de nuestra apps paga!!
	$URL = 'https://market.android.com/details?id=';
	header('location: '.$URL);
	die();
?>

Este codigo es para cuando subamos la aplicacion al market de android, solo editamos la url y cuando el user quiera compra la aplicacion completa sera redirigido bien!

horos_android.php

PHP:

<?php
	//Verificamos el año
	if($_REQUEST['anio']!=""){
		//obtenemos el signo chino
		$T = tchino($_REQUEST['anio']);
		if($T!="error"){
			//Leemos el cahe y lo mostramos (eliminado los acentos)
			$A = file_get_contents('cache/'.$T.'.txt');
			die(_EA($A));
		}
	}

	die('error');

	function _EA($cadena){
		$tofind = "ÀÁÂÃÄÅàáâãäåÒÓÔÕÖØòóôõöøÈÉÊËèéêëÇçÌÍÎÏìíîïÙÚÛÜùúûüÿÑñ";
		$replac = "AAAAAAaaaaaaOOOOOOooooooEEEEeeeeCcIIIIiiiiUUUUuuuuyNn";
		return(strtr($cadena,$tofind,$replac));
	}

	function tchino($anio){
		if(eregi($anio,'1900, 1912, 1924, 1936, 1948, 1960, 1972, 1984, 1996, 2008')) return 'rata';
		if(eregi($anio,'1901, 1913, 1925, 1937, 1949, 1961, 1973, 1985, 1997, 2009')) return 'buey';
		if(eregi($anio,'1902, 1914, 1926, 1938, 1950, 1962, 1974, 1986, 1998, 2010')) return 'tigre';
		if(eregi($anio,'1903, 1915, 1927, 1939, 1951, 1963, 1975, 1987, 1999, 2011')) return 'conejo';
		if(eregi($anio,'1904, 1916, 1928, 1940, 1952, 1964, 1976, 1988, 2000, 2012')) return 'dragon';
		if(eregi($anio,'1905, 1917, 1929, 1941, 1953, 1965, 1977, 1989, 2001, 2013')) return 'serpiente';
		if(eregi($anio,'1906, 1918, 1930, 1942, 1954, 1966, 1978, 1990, 2002, 2014')) return 'caballo';
		if(eregi($anio,'1907, 1919, 1931, 1943, 1955, 1967, 1979, 1991, 2003, 2015')) return 'cabra';
		if(eregi($anio,'1908, 1920, 1932, 1944, 1956, 1968, 1980, 1992, 2004, 2016')) return 'mono';
		if(eregi($anio,'1909, 1921, 1933, 1945, 1957, 1969, 1981, 1993, 2005, 2017')) return 'gallo';
		if(eregi($anio,'1910, 1922, 1934, 1946, 1958, 1970, 1982, 1994, 2006, 2018')) return 'perro';
		if(eregi($anio,'1911, 1923, 1935, 1947, 1959, 1971, 1983, 1995, 2007, 2019')) return 'cerdo';

		return 'error';
	}
?>

Este codigo se encarga de controlar el año y ver que signo chino es. (el cche ya fue creado, asique no tienen que crearlo ustedes).

Descargar todo:
* Codigo para appinventor
* Codigos PHP
* Imagenes
* Cache
Ver el archivo adjunto HoroscopoChino.rar

Para que funcione tienes que editar los codigos de: www.miweb.com o www.miserver.com y colocar la url de su sitio, subir /cache/ y /img/chino/ al hosting.

Kevin Heurtebise · 8 Dic 2011

Tutorial currado, currado

Saludos amigo!

Bizleet · 8 Dic 2011

Te quiero.

sanyeta1992 · 8 Dic 2011

¿Cuál es el primero?

Cicklow · 8 Dic 2011

sanyeta1992 dijo:
¿Cuál es el primero?

http://forobeta.com/tutoriales/61241-crear-aplicaciones-android.html

carloszod · 12 Dic 2011

que tutorial mas trabajado, te doy las gracias, y me lo guardo

Alusne · 16 Dic 2011

interesante aporte

29JoSS · 17 Dic 2011

Un tutorial muy interesante

Soyrek · 18 Dic 2011

buen tutorial para comenzar en este mundillo!!

blogsypocomas · 22 Ene 2012

Gracias! Muy interesante!

Cicklow · 3 Abr 2012

Nuevo sitio creado por el MIT (google no esta mas)-> Enlace eliminado

aviloa88 · 6 Abr 2012

wow! sumamente interesantee!

blogers · 28 Abr 2013

Buenisimo lo voy hacer para mi blog

Koletta · 30 Abr 2013

Voy a empezar con el primero que me he perdido un poquito...

raveny · 30 Abr 2013

Gracias, siempre aportando los mejores tutoriales

4:

4l3xis · 10 May 2013

Esta muy interesante XD

ubuwolf · 11 Mar 2014

Una pregunta como importo el proyecto a app inventor2?

Cicklow · 11 Mar 2014

ubuwolf dijo:
Una pregunta como importo el proyecto a app inventor2?

mm en las opciones tenes para importar proyectos... no he importado proyectos viejos... de igual manera aun podes usar beta.appinventor.mit.edu

ubuwolf · 11 Mar 2014

cicklow dijo:
mm en las opciones tenes para importar proyectos... no he importado proyectos viejos... de igual manera aun podes usar beta.appinventor.mit.edu

barbarooo! gracias