Está en la página 1de 24

https://www.youtube.com/watch?

v=eLVeBVQzhJg

http://www.taringa.net/posts/hazlo-tu-mismo/13917534/Como-crear-unasencilla-App-para-Android-iPhone-iPad-y-HTM.html

Como crear una sencilla App para Android, iPhone,


iPad y HTML5
Hola! Amigos Taringueros! Voy a intentar explicar de una forma clara y en pocos pasos
como hacer una app bastante sencilla y aparente para tu negocio, blog, ebook, etc. No
se trata de un trabajo complicado y por tanto no esperes una aplicacin sper avanzada y con
mltiples funcionalidades. Puede ser apropiada, por ejemplo, para que los clientes de tu
empresa tengan a mano en sus smartphone tus datos de contacto, web, telfono,
actualizaciones de Twitter y alguna que otra cosa ms.
Para ello vamos a utilizar la web iBuildApp. Esta web nos permite hacer aplicaciones
nativas para Android y iPhone, iPad y en HTML5.

Vamos a ver todos los pasos para crear la aplicacin.


n primer lugar pulsamos en Create Your App Now!! y se nos abrir una ventana donde
tenemos que elegir entre 3 opciones, app nativa android o iphone, ipad y HTML5, las
capturas de pantalla que ir poniendo son las mismas para cualquiera de los casos. Una vez
que elegimos la opcin que nos interese nos aparece la pantalla donde tenemos los distintos
templates predefinidos. Tenemos plantillas para negocios, e-books, galeras de fotos, etc.

Una vez hemos decidido cual ser la plantilla sobre la que trabajaremos pulsamos Select y
nos aparecer un formulario donde nos piden la informacin con la cual nuestra app
aparecer en la App Store de Apple o en el Android Market. Introducimos el nombre de la
aplicacin, la categora dentro de la cual la catalogaremos en la web de iBuildApp, una

descripcin, unos tags o palabras clave, la direccin web y una imagen de 512x512 pixel que
ser el icono que representar la aplicacin.

Una vez le damos a Create, nos preguntan en que plataforma queremos la aplicacin,
Android, iOS o en ambas, y la el formato horario (24 o 12 horas).

Ahora entramos en la pantalla importante, la pantalla de edicin, aqu es donde le damos


formato a la aplicacin y asignamos una funcionalidad a cada uno de los botones o enlaces,
dependiendo de la plantilla que hayamos seleccionado un par de pasos antes.

En esta pantalla de edicin podemos elegir el color de fondo que queramos, sustituir el logo
que viene por defecto ycolocar nuestro logo, o una frase slogan, o lo que queramos. En esta
plantilla en concreto tenemos 6 widgets a los cuales podemos cambiar el botn por los
nuestros personalizados y asignarles a cada uno la funcin que queramos dentro de las que
nos vienen como predeterminadas. Para eso pulsamos en el widget que queramos modificar
en el iPhone que nos aparece en pantalla y nos aparecen a la derecha las opciones que
tenemos, son las siguientes:
HTML Page (enlazar a una web) / RSS Atom Feed (actualizaciones de un blog) / Twitter /
Facebook / Contacts / Google Maps / Google Calendar / Photo Albums / Media / Events /
News / Tap to Call (pulsamos icono y se lanza una llamada ) / Tap to Mail (pulsamos icono y
se abre el mail) / Audio Stream / Video Stream / eBook / eCommerce

Como podis ver existen bastantes posibilidades para cada widget... con un poco de
imaginacin se pueden hacer cosas realmente chulas. Una vez que hemos terminado
volvemos a pasar por la pantalla de informacin para confirmarlo todo o hacer algn cambio.
El ltimo paso es la pantalla de publicacin de la aplicacin. Aqu tenemos diferencias

grandes entre iOS y Android. Si elegimos iOS tendremos que estar dado de alta como
developer y por tanto pasar por caja para poder enviar la aplicacin que generemos a la App
Store de Apple y esperar su aprobacin.

En el caso de Android es todo mucho ms sencillo, el sistema genera automticante un


certificado y con este obtenemos la API de Google Maps para poder crear la aplicacin. Una
vez lo hacemos se descarga a nuestro ordenador la aplicacin con formato .apk. Solo hay
que pasarlo a nuestro Smartphone con Android y listo a funcionar. Si la instalacin la haces de
esta forma, a travs de un puerto USB, hay que tener marcada la casilla de "Orgenes
Desconocidos" en Ajustes/Aplicaciones de vuestro telfono para permitir aplicaciones no
descargadas desde elAndroid Market.
Previamente a todo esto nos hemos tenido que registrar en la web (piden muy pocos datos) y
cada vez que entremos tnemos un apartado de My Apps donde tendremos agrupadas las
que hayamos creado previamente listas para modificar o actualizar si fuera necesario.
Y esto es todo... espero que sea util. Les dejo un par de muestras de dos aplicaciones creadas
con este sistema.
Ejemplo 1

Ejemplo 2

Espero que les sirva tanto como a m!! hasta prontooo tanringueros!!!.

A da de hoy, Android dispone de cientos de millones de dispositivos mviles en


ms de 190 pases a lo largo del mundo. Y todo ello acompaado de ms de 1.5

billones de descargas de aplicaciones desde Google Play cada mes. Unos


nmeros asombrosos que a muchas personas les han llevado a querer aportar su
granito de arena, desarrollando su propia aplicacin. Quin no ha pensado
tener esa idea que poder llevar a cabo?

Por ello, y aportando mi propia experiencia como desarrollador de apps para


Android,hoy vamos a inaugurar una nueva seccin orientada a introducirnos
al desarrollo de aplicaciones para Android: la seccin Aprende Android en
20 conceptos.
En esta seccin haremos un recorrido por los 20 fundamentos bsicos de la
API (Application Programming Interface) de Android para poder programa una
aplicacin en Android, desde cero. Para quien no conozca lo que es una API,
bsicamente se trata de la funcionalidad que nos proporcionan (en este caso
Android) para poder programar.
Esto no quiere decir que con estos 20 conceptos lo conozcamos todo, ni por
supuesto que no haya otros conceptos tambin importantes. De lo que se trata es
de explicar aqu los conceptos generales ms importantes para crear una
buena estructura de nuestra aplicacin. Con esta base, profundizar en

conceptos ms especficos (como por ejemplo puede ser el acceso al GPS) ser
mucho ms sencillo.
Los 20 conceptos que trataremos en la seccin Aprende Android en
20 conceptos son los siguientes:
0. Empezando
1. Fundamentos de una aplicacin
2. Recursos de una app
3. La clase Activity
4. La clase Fragment
5. View personalizada
6. Adaptadores (Adapter)
7. La clase Intent
8. Receptores de mensajes broadcast (Broadcast Receiver)
9. Prefencias de una app (Shared Preferences)
10. Bases de datos SQLite
11. Servicios (La clase Service)
12. Tareas asncronas (La clase AsyncTask)
13. Gestores de contenidos (Content Provider)
14. La barra de acciones ActionBar
15. Notificaciones
16. Orientacin del dispositivo
17. Animaciones
18. Widgets
19. Otros conceptos
20. Informacin adicional
La seccin ser semanal, pero introduciremos ms de un concepto cada
semana, a partir de la prxima semana. En esta semana nos preocuparemos

de dejar nuestro ordenador preparado para empezar a programar en


Android.
0. Empezando

Lo primero ser saber que para programar aplicaciones nativas en Android,


deberemos aprender a programar en el lenguaje Java, conociendo
la programacin orientada a objetos.
Lo primero que debemos hacer es preparar nuestro entorno de desarrollo y saber
dnde conseguir cualquier informacin. Para ello, lo primero es saber dnde
est toda la informacin para los desarrolladores de Android. Google nos
tiene preparada una web para ello, pero debemos saber que toda la informacin
est en ingls:
Web de desarrolladores de Android

En esta web, tenemos 3 secciones bsicas: Diseo, Desarrollo y


Distribucin. En ellas, tendremos toda la informacin acerca de las
recomendaciones de Google para disear nuestra app, toda la informacin sobre
la API de Android e informacin para saber publicar nuestra aplicacin, sabiendo
cmo promocionarla, anunciarla
En la parte de abajo, tendremos informacin adicional, sobre Android, conseguir
el SDK (Software Development Kit), soporte
ste ser nuestro primer paso, descargarnos el entorno de desarrollo, para lo
que iremos a Get the SDK, o haremos click en el siguiente enlace:
Descargar el SDK

Una vez en la web, basta con que le demos al link que dice Download the SDK, y
nos bajar una versin del entorno de desarrollo Eclipse, personalizada para
Android y ya preparada con el ltimo SDK, el plugin ADT, as como
emuladores sobre los que poder testear nuestra aplicacin.
En el pasado Google I/O (2013), anunciaron tambin el nuevo IDE Android
Studio, el cual podemos tambin utilizar en lugar de Eclipse, pero debemos
saber que an estn en fase beta. Desde la misma pgina podrs acceder a la
informacin al mismo.Nosotros ya hemos hablado antes de este nuevo IDE,
pero en este tutorial utilizaremos Eclipse.
Una vez abrimos nuestro entorno de desarrollo, podemos descargarnos todas
las versiones de Android si queremos, as como otros paquetes extra. Para
ello utilizaremos el Android SDK Manager.

Por otro lado, podremos crear tantos emuladores de dispositivos Android como
queramos: con distintos tamaos de pantalla, distintas versiones de Android
Para ello, debemos utilizar el Android Virtual Device Manager (ADB), al cual
podemos acceder desde Eclipse o desde la va de comandos de nuestro sistema
operativo:

Aunque la mejor manera de tener control sobre nuestros dispositivos ser


aprendiendo a manejar ADB desde la lnea de comandos, algo de lo que
tambin hemos hablado. No obstante, en Eclipse podremos gestionar tambin
nuestros dispositivos y sacar informacin de nuestro dispositivo: desde capturas
de pantalla o ver los ficheros hasta enviar coordenadas GPS o enviar una
llamada. Para ello, iremos a Window / Open perspective / Other / DDMS. La
vista de Eclipse DDMS (Dalvik Debug Monitor Server) nos ser de gran utilidad
mientras desarrollemos nuestras aplicaciones. Disponemos de toda la
informacin sobre la misma en el siguiente enlace:

DDMS
Llegados a este punto, nuestro ordenador est preparado para crear nuestra
primera aplicacin Android. Para ello, nos basaremos en los pasos que Google
nos recomienda seguir para una sencilla app. Toda esta informacin la
podremos encontrar en unos trainings que Google nos tiene preparados:
Formacin (Trainings) sobre Android de Google
Creando un nuevo proyecto Android
Nuestra seccin hoy terminar siguiendo el segundo enlace, donde crearemos un
nuevo proyecto Android. Para ello, seguiremos los siguientes pasos:
1. Haz click en New
2. En la ventana que aparece, abrir la carpeta Android y elegir Android Application
Project
3. En la siguiente ventana, debemos introducir el nombre de nuestra aplicacin, el
nombre del proyecto y el nombre del paquete (ste ser unico para nuestra app,
pues sera el ID que Google Play utilizar para identificar la aplicacin).
Tambin introduciremos la versin de Android mnima requerida, as como la
versin con la que compilaremos (generar nuestra aplicacin a partir del cdigo)
nuestra aplicacin.
4. Tras rellenar todos los campos segn necesitemos o queramos, nos vamos a la
siguiente pantalla, donde dejaremos las opciones seleccionadas por defecto.
5. En la siguiente pantalla, podremos crear un icono para nuestra aplicacin. Para
ello, sera ideal echar un vistazo a las guas de diseo de Android con respecto a
lo que a iconos se refiere.

6. Por ltimo, seleccionaremos una plantilla de actividad sobre la que empezar a


trabajar. Podemos seleccionar Blank Activity, que bsicamente es una pantalla
vaca.
7. Finalizamos el asistente.

Con esto, tendremos nuestro particular Hola mundo con el que siempre
empezamos a programar cuando utilizamos una nueva API (tambin vimos
cmo crear un Hola Mundo en AndroidStudio). Para ejecutarlo, basta con
tener un dispositivo real conectado o lanzar un emulador y hacer click en el
botn Run (un crculo verde con el icono Play en blanco).
Con esta informacin bsica, damos por terminada la seccin hoy. La prxima
semana entraremos de lleno en esos 20 conceptos que creo que nos
ayudaran a tener mucho ms claro cmo esta organizara la estructura de la API
de Android y, por tanto, nos facilitarn las cosas para tener claro cmo desarrollar
nuestras aplicaciones.

Si tenis cualquier duda o queris preguntarme o sugerirme cualquier cosa,


tambin podis encontrarme en Twitter.
Si an no os habis animado a programar, os animaris?

Si te interesa el mundo de la programacin de aplicaciones mviles y buscas una


herramienta que te facilite la tarea, App Inventor es para ti. App Inventor es
un entorno de desarrollo visual para Android originalmente propuesto
por Google y finalmente implementado por el MIT (Massachusetts Institute of
Technology) con el apoyo del gigante americano.
Su gran ventaja frente a otras plataformas similares es la potencia de su entorno
de trabajo: encontrars muchas funciones ya definidas en forma de bloques y la
flexibilidad a la hora de combinarlas te permitir potenciar al mximo tu
creatividad.
Su carcter gratuito la hace recomendable para todo tipo de usuarios. Eso s, si
quieres exprimir al mximo todas sus posibilidades, necesitars un cierto tiempo
de adaptacin y aprendizaje de la herramienta. Lo ideal es que tengas unas
mnimas nociones generales sobre programacin para poder disear ms
fcilmente el flujo de acciones y comprender en profundidad la utilidad de cada
bloque, aunque no ser necesario que modifiques el cdigo fuente.
Aprende en este prctico cmo iniciarte en App Inventor y lnzate al mercado de
las apps. Si adems requieres ms informacin, te recomendamos que eches
mano de los tutoriales que encontrars en la seccin Learn y en Reference
Documentation, para conocer en profundidad cada uno de los bloques.

NIVEL:AVANZADO

1. Pon a punto el programa

Visita en primer lugar la web oficial de App Inventor. Necesitars tener


una cuenta Google para acceder al servicio. App Inventor est compuesto por
un conjunto de herramientas que abarcan las diferentes tareas en la construccin
de la aplicacin: diseo, definicin del comportamiento y simulacin. Antes de
pasar a utilizarlas, habrs de comprobar que cuentas con todo lo requerido. Acude
a la pgina oficial y selecciona Setup. Pincha en Test your system y chequea tu
navegador.
Es necesario tener instalado Java y los sistemas operativos soportados son Mac
OS X 10.5/10.6, Windows XP/Vista/7, Ubuntu 8+ y Debian 5+. Cuando acabes,
pincha en Done? Lets move on! y pasars a la descarga del software de
escritorio App Inventor. En el ltimo paso, escoge si deseas probar tus
aplicaciones con tu propio telfono o utilizar el emulador. Este ltimo simular un
dispositivo Android que podrs manejar a travs del ordenador como si de un
mvil real se tratara.

2. Panel de diseo
El panel de diseo es accesible desde el navegador. En la pgina principal, pincha
en Invent/Create Mobile Apps. En My Projects, selecciona New e introduce un
nombre para el nuevo proyecto. Una vez dentro, explora todas sus opciones.
En Palette/Basic, hallars utilidades bsicas como botones, insercin de
imgenes, cuadros de texto, etiquetas La subseccin Media contiene
componentes como acceso a la cmara de fotos y vdeo, galera de fotografas,

sonido, reproductor de vdeo Social incluye los elementos necesarios para


seleccionar contactos, nmeros de telfono de la agenda, correos electrnicos

Sensors, por su parte, nos brinda la oportunidad de utilizar sensores para obtener
informacin tal como la localizacin geogrfica o la orientacin del dispositivo.
Para conocer algn detalle ms sobre cada una de ellas, pincha en el smbolo de
la interrogacin que encontrars junto a su ttulo.

3. Tu primera pantalla
Pincha en Screen 1 en la seccin Components. En la columna de la derecha se
listarn sus propiedades. Establece una imagen de fondo cargndola
con BackgroundImage. Para que no se distorsione, es conveniente que utilices un
fondo plano o alguno de los tamaos por defecto para este tipo de pantallas.
Carga tambin otra imagen en Icon para que sirva de grfico identificativo de la
aplicacin y marca en Scrollable si deseas permitir el uso del scroll.
Ahora, aade un botn arrastrando hacia la pantalla el elemento Basic/Button.
Seleccinalo en Components y agrega una imagen desde Image. Elimina el texto

por defecto Text for Button 1 que aparece en el recuadro Text y escoge una forma
en Shape; puedes decidir entre circular, rectangular u oval. Incluyamos tambin
una caja de texto con Basic/TextBox con la leyenda Pincha sobre el icono.

Por ltimo, si quieres redistribuir las formas en la pantalla, juega con las opciones
de Screen Arrangement. Crea una tabla con TableArragement o establece la
alineacin horizontal o vertical de varios elementos
con HorizontalArrangement y VerticalArrangement, respectivamente.

4. Elementos no visibles
Se denominan no visibles porque no se muestran fsicamente en el panel de
diseo, como por ejemplo los archivos de sonido. Prueba a agregar un fichero a
travs de la opcin Source en Media/Sound. El procedimiento para agregar estos
elementos es el mismo que para aquellos visibles: arrstralo hacia el visor.
Aparecern listados en la parte inferior del panel, bajo el epgrafe Non-visible
components. Otros elementos similares son Camera, Camcorder o Player, al igual
que todos los incluidos en la seccin LEGO MINDSTORMS. Esta ltima incluye

componentes, registrados bajo la marca Lego, que te permitirn construir juegos


de robtica.

5. Editor de bloques
Antes de continuar introduciendo elementos, vamos a ilustrar el procedimiento
para relacionarlos entre s, utilizando para ello el botn que hemos creado y el
fichero de sonido cargado. Pincha en Open the Blocks Editor. Se generar
un fichero Java con extensin JNLP que debers guardar en tu PC. brelo y
acceders al editor de bloques. Acude ahora a la pestaa My Blocks y vers la
lista de todos los bloques que hayas aadido en el panel de diseo.
Selecciona Button 1 y observa sus opciones, que aparecern en forma de piezas
de puzzle. Hay tipos de piezas que indican acciones y otras para componentes. Tu
misin es encajarlas para conseguir el comportamiento deseado. Probemos a
establecer que al pinchar sobre nuestro botn se reproduzca nuestro fichero de
msica. Para ello, une en el editor los bloques Button1.Click con Sound1.Play y
listo.

6. Utiliza el emulador

Gracias al emulador, podremos desarrollar nuestras aplicaciones incluso si no


contamos con un smartphone o es de otra marca, y chequear su correcto
funcionamiento. En el editor de bloques, pincha en New emulator y se desplegar

un telfono Android tpico. Para conectar el editor con el telfono, pincha


en Connect to Device y selecciona el emulador. La transferencia de informacin
puede llegar a tardar dos o tres minutos, as que ten paciencia. Despus, accede
al men de aplicaciones como si de un dispositivo real se tratara y prueba la tuya.
El procedimiento para utilizar un mvil Android desde el editor es anlogo.
Conctalo al ordenador mediante un puerto USB y, antes de iniciar la simulacin,
comprueba que tu configuracin est habilitada para hacer este tipo de uso del
telfono. Para ello, sigue los pasos que encontrars en la pgina oficial de la
aplicacin. Recuerda que por ahora los archivos se encuentran exclusivamente en
tu ordenador.

7. Crea una lista


Volvamos al panel de diseo para aadir el elemento ListPicker, que permite la
eleccin entre una serie de opciones. Este est asociado a un botn, con el que
invitaremos al usuario a escoger entre la lista. Nosotros haremos la nuestra propia
con los nmeros de PC Actual. Despus acude al editor de bloques para crear
una variable global, en nuestro caso Nmeros, con Built-in/Definition/Variable.
Luego, agrega el bloque Make a list, que encontrars en Built-in/Definition/Lists,
para definir varias posibilidades para la variable global.

Finalmente, incluiremos bloques Text con tantas cadenas de texto como valores a
tomar. Cuando termines, debes indicar que, cuando se cargue la pantalla
inicial Screen1, se inicialice la lista creada. Para ello, une un bloque My
Blocks/Screen1/Screen1.Initialize con otro My Blocks/ListPicker1.Elements y este a
su vez con nuestra variable global a travs de My Blocks/My Definitions/global
Numeros.
Cuando el usuario abra la aplicacin y pinche en nuestro botn Escoge un
nmero, se mostrarn ante l los nmeros de la revista que hayamos determinado.
Para indicar la accin a realizar despus, puedes utilizar el bloque My
Blocks/ListPicker1.AfterPicking.

8. Empaqueta tu app
Siguiendo procedimientos similares a los explicados, poco a poco, puedes ir
aadiendo nuevas funciones. En el panel de diseo, pincha en Add Screen si
quieres que tu aplicacin contenga ms de una pantalla. No olvides guardar
peridicamente el trabajo con Save y establecer un punto al que retornar cuando
consigas un hito a travs de Checkpoint. Cuando consideres que has finalizado la
app, busca en la esquina superior derecha el men Package for Phone.

Encontrars tres opciones. La primer, Show barcode generar un cdigo


QR asociado a tu cuenta y aplicacin y para tu uso propio. Para bajarte el
programa a tu ordenador, escoge Download to this computer y el cdigo fuente se
guardar en forma de archivo APK. Para descargarla en tu telfono inteligente,
opta por Download to Connected Phone y recuerda que necesitars tener el editor
de bloques abierto, as como el dispositivo conectado a tu PC mediante el puerto
USB.

9. Publcala en Google Play Store


La publicacin de tu aplicacin no es un paso obligatorio, pero si optas por abrirla
al gran pblico, debes saber que para publicarla en Google Play Store debe
contener tanto un cdigo como un nombre de versin. El primero es un nmero
entero que indica si la app ha sido actualizada a una versin superior o inferior.
El segundo es una cadena de texto que tpicamente especifica esta misma
informacin como 1.0, 2.0, etc. Podrs definir ambos en el panel de diseo, en los
apartados VersionCode y VersionName, y debers actualizarlo cada vez que

quieras subir una nueva versin a la Red. Despus, debers descargar, como ya
te hemos explicado en el paso anterior, el archivo APK en tu ordenador.

Por ltimo, enlaza con Google Play


Store en https://play.google.com/apps/publish/signup y sigue las instrucciones
para introducir tus datos como desarrollador, cargar el fichero en la plataforma,
definir una descripcin y establecer un precio. La cuenta de desarrolladores tiene
una cuota de registro de 25 dlares. No olvides tampoco consultar la poltica de
comisiones de Google en caso de que tu app no sea gratuita.

App Inventor

Caractersticas: Entorno visual para creacin deaplicaciones Android

Contacto: MIT App Inventor

Lo mejor: Su gran variedad de funciones y posibilidades

Lo peor: Dominar todas sus caractersticas no resulta sencillo

Valoracin: 8,5

Calidad /Precio: 8,5

Precio: Gratuito
- See more at:
http://www.pcactual.com/articulo/zona_practica/paso_a_paso/paso_a_paso_software/125
44/crea_una_aplicacion_para_los_dispositivos_android.html#sthash.hVXQddNn.dpuf

http://appinventor.mit.edu/explore/ai2/setup.html

http://xn--diseorapido-4db.es/app-yet-vs-app-inventor-crea-tu-aplicacionandroid/

También podría gustarte