Tutorial: Crear aplicaciones Android - Horoscopo Chino

cicklow

Admin
Beta
Verificado con documento
Verificación en dos pasos activada
Desde
30 May 2011
Mensajes
57
Crédito(s)
1
Puntos
25.567
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.

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 :)
[video=youtube;cnHe-i5732U]http://www.youtube.com/watch?v=cnHe-i5732U[/video]
http://www.youtube.com/watch?v=cnHe-i5732U
(Si no pueden ver el video es porque recién lo termino de subir)

Saludos...
Yo solo soy un punto de partida, el resto depende de ti!
 
Última edición:

cicklow

Admin
Beta
Verificado con documento
Verificación en dos pasos activada
Desde
30 May 2011
Mensajes
57
Crédito(s)
1
Puntos
25.567
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. :)
 

carloszod

Alfa
Verificación en dos pasos desactivada
Desde
10 Nov 2011
Mensajes
27
Crédito(s)
0
Puntos
0
que tutorial mas trabajado, te doy las gracias, y me lo guardo
 

Soyrek

Beta
Verificación en dos pasos desactivada
Desde
25 Nov 2011
Mensajes
66
Crédito(s)
0
Puntos
0
buen tutorial para comenzar en este mundillo!!
 

blogers

Baneado
Pi
SEO
Verificación en dos pasos desactivada
Desde
22 Ago 2010
Mensajes
6.628
Edad
39
Crédito(s)
2
Puntos
130
Buenisimo lo voy hacer para mi blog
 

Koletta

Dseda
Verificación en dos pasos desactivada
Desde
10 Dic 2012
Mensajes
1.099
Edad
37
Crédito(s)
1
Puntos
143
Voy a empezar con el primero que me he perdido un poquito...
 

raveny

Dseda
Verificación en dos pasos desactivada
Desde
27 Nov 2010
Mensajes
1.146
Crédito(s)
2
Puntos
232
Gracias, siempre aportando los mejores tutoriales :p4:
 

ubuwolf

Zeta
Verificación en dos pasos desactivada
Desde
30 Nov 2011
Mensajes
1.740
Crédito(s)
0
Puntos
1.008
Una pregunta como importo el proyecto a app inventor2?
 

cicklow

Admin
Beta
Verificado con documento
Verificación en dos pasos activada
Desde
30 May 2011
Mensajes
57
Crédito(s)
1
Puntos
25.567
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
 

Arriba