Tutorial: Crear aplicaciones Android - Horoscopo Chino

Cicklow Seguir
Seguidores
14

Admin
Épsilon
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Suscripción a IA
Desde
30 May 2011
Mensajes
939
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í:
file-b553b5f1db7d9fc7fb79c9b109aa2740.jpg

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:
file-dbe2bd90e26c797c53e2bbaafa9b842c.jpg


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í:
file-0d080fc83350aa2dc2be9aa54c47a493.jpg


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:
file-804192bd9422b57eac2da719bcd14067.jpg

- 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.
file-ac5fc9f7158b6fa00ae60ed8432e5c7f.jpg

- 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!
 
Última edición:

Cicklow

Admin
Épsilon
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Suscripción a IA
Desde
30 May 2011
Mensajes
939
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. :)
 

Bizleet

Épsilon
SEO
Verificación en dos pasos desactivada
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
11 Nov 2011
Mensajes
862

carloszod

Alfa
Verificación en dos pasos desactivada
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
10 Nov 2011
Mensajes
26
que tutorial mas trabajado, te doy las gracias, y me lo guardo
 

Alusne

Beta
Verificación en dos pasos desactivada
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
28 Nov 2011
Mensajes
69

29JoSS

Beta
Verificación en dos pasos desactivada
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
4 Dic 2011
Mensajes
61
Un tutorial muy interesante ;)
 

Soyrek

Beta
Verificación en dos pasos desactivada
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
25 Nov 2011
Mensajes
66
buen tutorial para comenzar en este mundillo!!
 

Cicklow

Admin
Épsilon
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Suscripción a IA
Desde
30 May 2011
Mensajes
939
Nuevo sitio creado por el MIT (google no esta mas)-> Enlace eliminado
 

blogers

Pi
SEO
Verificación en dos pasos desactivada
Desde
22 Ago 2010
Mensajes
6.616
Por favor, ten en cuenta 📝 que si deseas hacer un trato 🤝 con este usuario, está baneado 🔒.
Buenisimo lo voy hacer para mi blog
 

Koletta

Dseda
Verificación en dos pasos activada
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
10 Dic 2012
Mensajes
1.130
Voy a empezar con el primero que me he perdido un poquito...
 

ubuwolf

Iota
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
30 Nov 2011
Mensajes
2.148
Una pregunta como importo el proyecto a app inventor2?
 

Cicklow

Admin
Épsilon
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Suscripción a IA
Desde
30 May 2011
Mensajes
939
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
 

¡Regístrate y comienza a ganar!

Beneficios

  • Gana dinero por participar
  • Gana dinero por recomendarnos
  • Descubre ofertas de empleo diariamente
  • Negocios seguros
  • ¡Información premium y más!

Acceder

¿Ya tienes una cuenta? Accede aquí

Arriba