Hoy vamos a modificar el icono de nuestra app con Phonegap. Es bastante sencillo así que son muy pocos pasos:

1.- Primero necesitamos tener un proyecto creado y un icono ya preparado para la app que estamos desarrollando.

2.- Dentro de la carpeta “res” hay varias carpetas que se llaman “drawable-xxxx” donde xxxx es el tipo de definición de la pantalla del dispositivo movil. Si queremos que según la calidad del móvil muestre un icono u otro porque tenemos distintos, entonces pegaremos cada icono dentro de la carpeta correspondiente. En mi caso he metido la misma imagen dentro de todas las carpetas.

Ruta iconos

Ruta iconos

Es muy importante que el icono se llame igual en todas las carpetas ya que lo único que cambia debería ser la calidad de la imagen según el dispositivo.

3.- A continuación abrimos el archivo “AndroidManifest.xml”, que es donde podemos modificar todas las propiedades de nuestro proyecto. En la pestaña “Application” podemos modificar el atributo “Icon” indicándole el nombre del icono que hemos añadido en las carpetas.

Atributos aplicación

Atributos aplicación

Con esto ya solo nos falta probarlo y ver cómo queda.

Aquí se encuentran los archivos del ejemplo para quien este interesado en tenerlos.

Algo que siempre vamos a hacer cuando desarrollamos una aplicación es cambiar el icono que viene por defecto en el programa. Queremos que la app tenga una imagen asociada que refleje su funcionalidad o que tenga que ver con su objetivo, así que vamos a ver cómo se hace cuando creamos aplicaciones con App Inventor:

1.- En el proyecto que tengamos creado, desde el diseñador de pantallas accedemos a las propiedades de la primera pantalla, la principal.

2.- Cuando veamos sus propiedades nos fijamos en que una de ellas se llama “Icon”. Es aquí donde podremos cambiar el icono.

Cambiar icono app

Cambiar icono app

3.- Elegimos el icono que tenemos ya preparado y que queremos que tenga nuestra app, lo subimos y aceptamos dando a “Ok”.

Al descargar la app a nuestro dispositivo móvil para comprobar cómo ha ido veremos los cambios realizados. ¿Bastante sencillo verdad?

 

Hoy voy a hablar sobre Titanium Appcelerator. Esta herramienta es un framework de desarrollo de apps para dispositivos móviles basado en el entorno de desarrollo ya conocido Aptana. La peculiaridad que tiene es la posibilidad de hacer una app como si de una Web se tratara (HTML5, CSS3 y Javascript) y la opción de hacer programas nativos utilizando para ello el lenguaje de programación Javascript orientado a objetos. El framework compila el código generado y lo adapta al dispositivo donde se va a instalar por lo tanto, ya sea app Web o nativa con Javascript, no es necesario codificar varias veces según el dispositivo móvil donde queramos ejecutarlo como por ejemplo en iOS y Android. Así que voy a explicar cómo se realiza la instalación de esta herramienta:

1.- Primero hay que tener una cuenta en la web de Titanium Appcelerator para poder descargarse la aplicación. En este enlace está el formulario para registrarse. A continuación nos descargamos el programa.

2.- Una vez descargado lo ejecutamos para instalarlo y cuando termine deberemos esperar hasta asegurarnos de que todo está actualizado. Si queremos probar el código en un emulador de Android necesitamos descargar e instalar el SDK de Android. Para ello en la página principal que se muestra al abrir Titanium hay un botón donde indica que se puede instalar Android SDK.

Instalar SDK

Instalar SDK

Pulsamos y descargamos las librerías. Hay que tener en cuenta que Titanium requiere la versión 2.2 de Android por lo que es importante que se marque esa opción al instalar.

Seleccionar API 2.2

Seleccionar API 2.2

3.- Ya podemos crear un nuevo proyecto. Pinchamos en la opción “Create project”, elegimos “mobile project” y rellenamos los datos como el id de proyecto y su nombre.

Crear proyecto

Crear proyecto

4.- Una vez creado el proyecto ya podemos ejecutarlo pulsando en “Run -> Android emulator” para ver cómo queda.

Ejecutar en emulador

Ejecutar en emulador

A partir de este momento ya podemos empezar a codificar como queramos el programa.

Hace un par de días hablé sobre el App Inventor para conocerlo y probar su funcionamiento. Ahora voy a hablar de Phonegap, un framework de desarrollo de apps que permite hacerlo utilizando lenguaje Web como son HTML, Javascript y CSS. Como es Web, es soportado prácticamente por todos los dispositivos móviles lo cual da mucha ventaja a la hora de empezar a crear apps porque no hace falta adaptar el código en función del sistema operativo donde irá instalado. Y para probarlo voy a explicar los pasos:

1.- Primero hay que instalarse un entorno de desarrollo. Yo recomiendo Eclipse porque existe un plugin para instalar phonegap en él. Nos descargamos eclipse de aquí. Existe un pack ya creado con el entorno de desarrollo Eclipse en  una carpeta y android SDK en otra instalados y compatibles, se llama ADT (Android Development Tools). En caso de optar por esta opción, saltar al punto número 4.

2.- El siguiente paso es descomprimir Eclipse donde queramos tenerlo y lo arrancamos.

3.- Una vez abierto ya podemos comenzar a instalar los plugins necesarios para poder crear proyectos android con Phonegap. Empezaremos por el SDK de android, para ello, accedemos al menú “Help -> Install New Software”. A continuación nos aparecerá una ventana emergente.

Instalar plugins

Instalar plugins

Pulsamos en el botón llamado “Add” que está en la parte derecha de la ventana y en el hueco para introducir datos al lado de “Location” copiamos esta dirección: “https://dl-ssl.google.com/android/eclipse/”. Para completar la instalación del plugin pulsamos en el botón “Ok” y aceptamos la licencia. Al final tendremos que reiniciar el Eclipse.

Añadir repositorio

Añadir repositorio

4.- Cuando se reinicie el Eclipse, tendremos que volver a hacer los mismos pasos para instalar otro plugin, esta vez el de Phonegap. Accedemos al menú “Help -> Install New Software” y en el botón “Add” copiamos esta dirección: “http://svn.codespot.com/a/eclipselabs.org/mobile-web-development-with-phonegap/tags/r1.2/download” Y para completar con la instalación pulsamos el botón “Ok” y aceptamos la licencia. De nuevo Eclipse pedirá reiniciarse.

5.- Ahora que ya tenemos instalados los dos plugins, podemos crear un proyecto de Phonegap para empezar a desarrollar apps. Este paso se realiza pulsando en el nuevo botón del móvil que se ha añadido en la barra de botones al instalar el plugin. Lo primero que tendremos que decidir es qué librerías de estilos usar, jQuery Mobile o Sencha Touch. Por último solo nos quedará pulsar en “Next” para ir pasando de pantallas y proporcionando los datos como el nombre del proyecto y el nombre del paquete (suele ser extension.dominio.nombreproyecto).

Crear proyecto Phonegap

Crear proyecto Phonegap

6.- Ya tenemos la aplicación base creada con un ejemplo de jQuery Mobile. Para ejecutarlo y ver cómo se muestra en el emulador android, con el proyecto seleccionado pulsamos en el botón que es una flecha en un circulo verde y seleccionamos la opción “Run as -> Android application”.

Ejecutar proyecto phonegap

Ejecutar proyecto phonegap

Con esto ya tenemos preparado el entorno de desarrollo para hacer nuestras propias apps, pero eso ya iremos comentando más adelante.

Android Studio

Android Studio

Estos días esta siendo el evento anual de Google I/O 2013, un acontecimiento donde Google presenta sus nuevas tecnologías a todo el mundo. La noticia de hoy trata sobre una nueva herramienta de desarrollo de apps para Android que ha hecho Google: el Android Studio.

Este programa es un entorno de desarrollo basado en otro conocido como es IntelliJ IDEA, que sirve para crear apps para Android usando el lenguaje Java. Aunque no se ha mencionado mucho sobre la herramienta, lo más destacable es que tiene la posibilidad de ver en tiempo real lo que se va codificando, algo que los demás entornos de desarrollo no ofrecen. Además, contiene una gran variedad de emuladores diferentes para poder testear lo que hagamos en distintos dispositivos y resoluciones como por ejemplo tablets. Los amantes de Java seguro que lo encontráis muy útil así que os animo a probarlo y a que comentéis vuestro punto de vista al respecto.

Hoy voy a hablar sobre esta herramienta de desarrollo. App Inventor es una aplicación que permite crear programas para dispositivos móviles de una manera muy sencilla. Simplemente se trata de “encajas las piezas” necesarias hasta conseguir la funcionalidad que buscamos.

Primero voy a comenzar explicando un poco cómo configurarlo todo para poder empezar a usarlo. Aunque en la propia web de la herramienta hay un buen tutorial para configurarlo, voy a explicarlo un poco a modo resumen para los que prefieran no tener que leer en ingles:

1.- Hace falta tener instalada la máquina virtual Java así que aquí pongo el enlace para poder descargar el software e instalarlo.

2.- Aunque se utiliza el navegador para crear las apps, hace falta instalar un software. Este es el segundo paso, descargarse la herramienta de desarrollo desde la web e instalarla en el ordenador. Añado aquí el enlace para ello pero luego habrá que elegir una opción de descarga u otra dependiendo del sistema operativo de cada uno.

3.- Una vez instalado todo ya podemos empezar a usarlo. Para ello primero necesitamos una cuenta de gmail ya que de lo contrario no puedes acceder a la herramienta que, como hemos dicho antes, se utiliza a través del navegador. Cuando tengamos la cuenta de gmail, accedemos a esta dirección y ya podremos empezar a crear un proyecto nuevo. Pulsando en “My projects -> New” introducimos un nombre y ya creamos el proyecto.

App Inventor

App Inventor

Con esto vemos cómo la pantalla está dividida en 3 secciones: columna izquierda, parte central y las 2 columnas de la derecha. Antes de hacer nada más lo que tenemos que hacer es abrir el editor de bloques, para ello pulsamos en el botón correspondiente “Open the Blocks Editor” que aparece en la parte derecha de la barra de menú verde.

Proyecto creado

Proyecto creado

 

Al pulsar se nos descargará un archivo que debemos abrir. Si tenemos la máquina virtual Java instalada correctamente no habrá ningún problema y aparecerá ante nosotros una nueva ventana verde que es donde más adelante juntaremos las piezas de puzzle. El último paso a configurar es el de conectar un dispositivo móvil al ordenador o abrir un emulador. Evidentemente este paso es para poder probar la app que generemos. En mi caso yo lo voy a hacer abriendo un emulador pero si por lo que sea hay dudas pues ya explicaré de la otra manera también. Pulsando en el botón “New Emulator” se ejecuta el emulador de Android (tardará un rato en cargar todos los controladores) y una vez abierto, desplegamos la lista de opciones donde indica “Connect to Device” que está al lado del botón del emulador y elegimos la opción de nuestro emulador. Comprobaremos que todo ha ido bien cuando el dibujito del móvil que aparece a su lado está en verde. Así es como nos quedaría.

Editor de bloques

Editor de bloques

 

Con esto ya podemos empezar a crear nuestra aplicación.

Los pasos a seguir para crear una aplicación es muy sencillo:

1.- De la columna de la izquierda se arrastra al centro el componente que se quiera añadir. Por ejemplo un botón.

2.- A continuación en las columnas de la derecha se modifican las propiedades de dicho botón. como por ejemplo su nombre, el color de fondo, etc. Quedaría así.

Primeros pasos

Primeros pasos

 

3.- Y por último en el editor de bloques, del mismo modo, se arrastran al centro de la pantalla los eventos que se quieren crear interconectándolos entre sí. Un ejemplo de esto sería que al hacer clic en el botón, se cambiara el color de fondo del mismo. Para hacer esta funcionalidad he obtenido las piezas de cada apartado en las diferentes pestañas. Por ejemplo: de la pestaña “Built-In” he obtenido la función “make color” en el apartado “Colors”, las funciones de “random integer” y “number” se obtienen en el apartado de “Math”, etc. Así es como quedaría el puzzle que hace que el botón cambie de un color aleatorio cada vez que se haga clic en el.

Editor de bloques en los primeros pasos

Editor de bloques en los primeros pasos

 

Y así es como poco a poco pueden crearse funcionalidades para una app de android.

¿Cuáles podrían ser las ventajas de este sistema? Realmente no es que se pueda crear una app sin tener conocimientos de programación, porque ya hemos visto por el ejemplo que las piezas de puzzle se unen mediante estructuras habituales que contienen todos los lenguajes de programación como son los bucles, las condiciones, etc, así que yo diría que es una manera de hacer apps en pseudocódigo sin tener que aprender un lenguaje nuevo. Simplemente que a uno se le de bien hacer puzzles y la lógica de programación.

A todo esto también hay que mencionar que según se va construyendo el puzzle se pueden ver los resultados al momento en el dispositivo móvil al que está conectado o en el emulador abierto. Ha sido una buena experiencia practicar con esta herramienta, y muy divertida además por lo que no descarto investigar un poco más. Pero eso ya más adelante.

He estado investigando sobre las apps para dispositivos móviles y es un mundo muy grande. Primero, existen distintos sistemas operativos como son Android, iOS, BlackBerry, Windows Mobile, etc, así que hay que decidir para cuál de ellos queremos hacer una app. El más extendido es Android seguido de iOS por lo que con estos 2 sistemas podemos abarcar casi todos los dispositivos móviles. Por este motivo, he empezado a investigar y documentarme acerca de herramientas para desarrollar aplicaciones para estos casos y me he encontrado con lo siguiente:

– Es posible hacer apps sin necesidad de conocimientos de programación: En este caso he descubierto una herramienta de Google llamada App Inventor.  Este tipo de aplicación permite que podamos crear apps rápidamente uniendo bloques y eventos que suelen tener los móviles como por ejemplo, que al hacer clic en un botón se active la vibración del dispositivo. Es muy sencillo y cubre las necesidades más básicas de una app pero está limitado por las opciones que ofrece el propio programa. Naturalmente App Inventor es para Android pero existen otros programas para cubrir tanto los dispositivos Android como iOS, por ejemplo, LiveCode.

– Es posible programar apps del mismo modo que si desarrolláramos  una Web: Para este caso me he encontrado con herramientas como Phonegap o Sencha. Estos frameworks de desarrollo permiten crear apps para móviles de la misma forma que una Web, con HTML5, CSS3 y JavaScript. Al ser una app Web no hay problemas de compatibilidad con los diferentes sistemas operativos pero no llega a tener el rendimiento que posee una aplicación nativa del sistema.

– Existe una plataforma de desarrollo más reciente  con un propósito similar al de estos 2 anteriores frameworks llamada Titanium Appcelerator, que en lugar de desarrollar usando lenguajes de programación Web se usa Javascript orientado a objetos. La ventaja de esta herramienta está en que transforma el lenguaje de programación utilizado al lenguaje nativo del sistema operativo por lo que sí que obtiene un rendimiento óptimo aunque esta en continuo cambio optimizando la manera de programar y de adaptarse a los diferentes sistemas. De momento es compatible con iOS y con Android.

– Es posible programar apps en el lenguaje nativo del sistema operativo donde se instalará: Para este caso no queda más remedio que aprender a codificar en Java para Android o en el caso de iOS, Objective C. Este sin duda es el caso con mejores resultados en cuanto a rendimiento y posibilidades para programar apps para móviles, aunque la curva de aprendizaje es muy larga y costosa ya que requiere saber 2 lenguajes de programación distintos.

Más adelante comentaré más datos sobre estas herramientas porque parecen muy interesantes. Además, hay que probar todos los aspectos de un tema para saber si a uno le gustan o no.

Bueno, esta es la primera entrada del blog, así que voy a presentarme. Me llamo Iker Villarroel y soy desarrollador de aplicaciones Web. Hasta ahora mi dedicación profesional ha sido exclusivamente a programar este tipo de aplicaciones. Me gusta hacer pequeñas aplicaciones que puedan ser útiles en la vida cotidiana de una persona, y por ello me decanté por hacerlo de un modo que permita a la persona utilizar el programa desde cualquier sitio: La Web.

Ahora, y con todos los dispositivos móviles que hay en el mercado, me interesa aprender a hacer apps que puedan utilizarse con smartphones, tablets y demás dispositivos ya que cada vez estamos más unidos a estos. He de admitir que hasta hace poco mi teléfono era una patata que lo único que hacía era llamar y mandar mensajes. Pero ahora parece que pueden hacer de todo, te puedes descargar e instalar aplicaciones en tu móvil y llenarlo de utilidades para lo que necesites. Este terreno es totalmente desconocido para mí, mis conocimientos para el desarrollo de este tipo de aplicaciones son nulos así que he pensado que estaría bien hacer un blog y compartir mis experiencias con otras personas que estén en la misma situación. Nadie nace sabiendo así que ¿por qué no echar una mano a quienes están empezando?

De momento mi primer paso va a ser documentarme sobre cómo empezar a programar para estos dispositivos. Qué hay que tener en cuenta sobre los dispositivos, si existe alguna manera concreta de desarrollar las aplicaciones y qué herramientas hay disponibles para llevar a cabo este propósito.

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies