Utilizando Appcelerator para crear tus aplicaciones móviles - Parte 1

June 18, 2021

Tags: Tech Trends
appcelerator
Unsplash

 

Hoy en día son muchas las empresas que están pensando en desarrollar aplicaciones móviles, ya sea como una forma de mostrar su información de una manera más accesible o para atraer nuevos clientes. Existe un gran auge por parte de los desarrolladores y usuarios de esta tecnología, esto se debe a que existen tiendas de aplicaciones con las que cualquier desarrollador puede subir sus aplicaciones y ganar dinero con ellas. Esto supone crear apps para las distintas plataformas disponibles (Android, IOS Blackberry, Windows Phone), pero programar para cada plataforma resulta más costoso y conlleva mucho más tiempo de programación que hacerlo en una herramienta como Appcelerator y su entorno de desarrollo Titanium.

 

Appcelerator es una herramienta que permite a los programadores de cualquier nivel, programar aplicaciones que puedan instalarse en las distintas plataformas para Smartphones. A continuación les mostraré un tutorial básico para crear una sencilla aplicación utilizando Appcelerator Studio. Una de las ventajas de Appcelerator es que podemos programar nuestras aplicaciones siguiendo la arquitectura MVC (Modelo-Vista-Controlador) donde, utilizando XML y CSS podemos separar la interfaz de usuario, la lógica de negocio y los datos.

 

Cómo crear una aplicación con Appcelerator

 

Para crear nuestra nueva aplicación seleccionaremos el framework Alloy en File->New->Mobile App Project

 

mongo replication process

 

En la siguiente ventana le damos un nombre y un Id a nuestro proyecto. El nombre del proyecto será MiBiblioteca. Adicionalmente podemos elegir las plataformas de despliegue de nuestra app. Hay que recordar que debemos tener los SDK necesarios.

 

Para terminar, seleccionamos la versión de Titanium SDK que utilizaremos y finalizamos el asistente.

 

Antes de continuar vamos a explicar brevemente en qué consiste la aplicación MiBiblioteca.

 

Es una aplicación sencilla que utiliza una lista y varios labels para desplegar un listado de libros de nuestro interés. Al seleccionar uno de ellos veremos información del libro, como el nombre del autor y la fecha de publicación.

 

La estructura de un proyecto en Appcelerator Alloy es como se muestra en la imagen

 

mongo replication process

 

El directorio app contiene los modelos, vistas, controladores y activos de la aplicación.

 

Para continuar, creamos un nuevo modelo. Hacemos clic derecho en el nombre del proyecto y seleccionamos new->Alloy Model El asistente nos ayudará a crear el modelo, para ello escribimos como nombre del modelo “books” y añadimos los campos que tendrá. En nuestro caso sólo serán “title” para el título del libro, “author” para el nombre del autor y “date” para la fecha de publicación del libro.

 

mongo replication process

 

Damos clic en “OK” y nuestro modelo ha sido creado.

 

Para verificar la configuración del modelo podemos ir a:

 

app/models/book.js y nos muestra el código con la configuración del modelo: [prism:javascript] ……….. config: { columns: { "title": "string", "author": "string", "date": "date" }, adapter: { type: "sql", collection_name: "books" } }, ……….. [/prism:javascript]

 

El siguiente paso es modificar el controlador en app/controllers/index.js El código se debe ver de la siguiente forma:

 

[prism:javascript] /**

 

  • Definimos el modelo mybooks */ var mybooks = Alloy.Collections.books;
/**
  • Añadimos un libro */ var book = Alloy.createModel('books',{ title : 'Cien años de soledad', author : 'Gabriel García Márquez', date: '05/06/1967' }); mybooks.add(book);
//Guardamos el libro book.save();

$.index.open(); [/prism:javascript]

 

El código anterior crea un nuevo modelo llamado mybooks y se guarda la información del primer libro creado.

 

Continuamos modificando la vista del index en app/views/index.xml para listar nuestros libros creados en el controlador.

 

[prism:javascript]

[/prism:javascript]

 

En este código creamos un nuevo Collection de “books” y definimos la vista de la tabla que desplegará el título y el autor del libro. Adicionalmente inicializamos el evento onClick para que al presionar el elemento se nos muestre una pantalla con información adicional del libro.

 

Debemos crear el método “detailsHandler” en nuestro controlador index.js para definir su funcionamiento Volvemos al archivo app/controllers/index.js y añadimos lo siguiente:

 

[prism:javascript] /*

  • @param {Object} e
  • Objeto de origen */ function detailsHandler(e){ var selectedBook = e.source; var args = { title : selectedBook.title, author : selectedBook.author, date : selectedBook.date }; var bookview = Alloy.createController('bookdetails',args).getView(); bookview.open(); } [/prism:javascript]

 

Como vemos, necesitamos crear un nuevo controlador al que llamaremos “bookdetails”. Para esto nos situamos en el directorio “controllers” y agregamos un nuevo “Alloy Controller”. Esto nos creará los archivos bookdetails.js y bookdetails.xml.

 

Abrimos bookdetails.xml y creamos la nueva vista, copiamos el siguiente código:

 

[prism:javascript]

[/prism:javascript]

 

Hemos creado una pantalla nueva con tres labels que tendrán la información del libro.

 

Abrimos el archivo bookdetails.js y copiamos lo siguiente:

 

[prism:javascript] var args = arguments[0] || {};

$.titleLabel.text = args.title || 'Default title'; $.authorLabel.text = args.author || 'Default Author'; $.dateLabel.text = args.date || ‘01/01/1900’; [/prism:javascript]

 

Eso es todo por ahora. Para probar nuestra aplicación, seleccionamos un dispositivo virtual o real en el selector de dispositivos y presionamos Run. En mi caso voy a utilizar un dispositivo virtual con Android 4.1.1

 

mongo replication process

 

Al terminar la compilación nuestra aplicación se verá así:

 

mongo replication process

 mongo replication process

 

Podemos añadir más libros desde un REST o manualmente para enriquecer nuestra biblioteca.

 

En un próximo blog veremos cómo aplicar estilos a las pantallas y a los Labels para que nuestra aplicación luzca mucho mejor y así lograr un acabado profesional y estético, complaciendo a tus clientes y usuarios.

 

Lo más destacado de esta herramienta es que podemos crear aplicaciones multiplataformas escribiendo el código en un sólo lenguaje de programación, ahorrando tiempo y dinero, esto último siendo un gran beneficio para cualquier empresa, ya sea pequeña, mediana o grande.

 

En Rootstack, nuestros expertos han dado solución a los problemas técnicos de nuestros clientes utilizando esta valiosa herramienta. Forma también parte de nuestra lista de clientes nacionales e internacionales que han mejorado y fortalecido su presencia digital de la mano de nuestro grupo de developers expertos, cambiando para siempre su presencia en la web.

 

Te recomendamos en video