Estado del curso de programación

Las últimas semanas he estado ocupado con otros proyectos y he tenido un poco parado el curso de programación. Ahora que tengo más tiempo libre me gustaría comentaros el estado del curso. En primer lugar quiero agradecer los comentarios y correcciones que habéis hecho de las diferentes entregas. Me ayuda a orientar este proyecto y a corregir los errores que se cuelan al escribir los capítulos. Al empezar el curso no sabía si sería un proyecto viable. Ubuntu Touch es un sistema operativo marginal que no tiene la distribución de otros sistemas operativos como Android o iOS. Es más productivo escribir cosas para Android o iOS porque tendrán mucha más visibilidad.
Leer más

Capítulo 04 – Lógica de la aplicación (7)

Os recuerdo que el curso tiene una lista de correo asociada en la que aparecen todas las novedades. Por cuestiones de tiempo no había podido poner el anuncio de la nueva entrega en InnerZaurus pero ahora es un buen momento para hacerlo. Como sabréis los que estéis siguiendo el curso, la calculadora ha sufrido un rediseño que la hace visualmente más agradable. Con este cambio se perdió la conexión con la lógica y en esta entrega se arregla este problema. El algoritmo inicial de la calculadora era sencillo: el usuario introducía un número, la operación y después el segundo número. Todos los cálculos se tenían que hacer siguiendo el mismo criterio.

Leer más

Capítulo 04 – Creación de una aplicación con QML (6)

Ya podéis leer una nueva entrega del curso. En esta entrega se estudia la forma de organizar los archivos en QML así como la creación de componentes personalizados. A medida que se añaden funciones a la calculadora, el número de botones y de combinaciones crece de forma importante. Para abordar este problema no se puede hacer todo de golpe sino que hay que dividir el problema en partes más manejables. Por una parte se ha dividido el archivo principal del interfaz de forma que cada bloque de la calculadora tenga un archivo propio. Por otra parte se han creado varios componentes personalizados que amplían la funcionalidad de la calculadora y simplifican el desarrollo.

Leer más

Capítulo 04 – Creación de una aplicación con QML (5)

Ya podéis leer una nueva entrega del curso de programación. Las novedades afectan al capítulo 2 (Instalación de las herramientas de desarrollo) y al capítulo 4 (Creación de una aplicación con QML). Recientemente se ha actualizado el SDK de Ubuntu Touch con novedades que afectan al contenedor que se usa en la compilación cruzada (LXD) y al entorno de desarrollo (QtCreator). Esas novedades han provocado que parte del capítulo 2 dejara de tener validez porque cambiaban las pantallas. He modificado esa parte para que coincidan las pantallas y la explicación. El interfaz tiene problemas de adaptación dependiendo de si la aplicación se ejecuta en el escritorio o un teléfono.

Leer más

Capítulo 04 – Creación de una aplicación con QML (4)

Acabo de publicar una nueva entrega del curso de programación de Ubuntu Touch. El interfaz de la calculadora ya está más o menos definido y es el momento de implementar la lógica de la aplicación. Para hacerlo tenemos que abandonar un poco QML y pasar a JavaScript. De forma resumida el usuario pulsa los botones de la calculadora y esa información se pasa al código en JavaScript para que realice las operaciones. Al mismo tiempo ese código debe modificar los controles del interfaz para ofrecer realimentación al usuario. Por sencillez la lógica se ha implementado en JavaScript. No descarto en un futuro pasar a C/C++ pero será cuando los conceptos básicos estén más establecidos.
Leer más

Capítulo 04 – Creación de una aplicación con QML (3)

La semana pasada publiqué una entrega del curso de programación deUbuntuTouch. El anuncio lo mandé a la lista de correo pero no lo había puesto enInnerZaurus. Seguimos el bloque de aplicaciones nativas con programación de una calculadora. Ya se ha visto la forma de trabajar con botones modificando sus atributos de texto, tamaño y color. Los botones se pueden pulsar y cambian su apariencia para mostrar este estado pero en estos momentos no tienen ninguna lógica por debajo. Al programar una aplicación es importante que el usuario tenga unarealimentaciónde las acciones que toma. Si pulsa el botón de una calculadora espera que cambie la apariencia del botón y se muestre el texto del botón pulsado en algún sitio. Ésto se puede realizar utilizando una etiqueta.

Una etiqueta es un componente que muestra texto. Puede ser un texto fijo o un texto variable dependiendo de ciertas condiciones. Previamente se ha estudiado el funcionamiento de las etiquetas, ahora es el momento de ver la forma de cambiar las características de las mismas. En concreto se modificará el tamaño, para que sea similar al que tiene el texto de los botones y la familia de la fuente. Las fuentes se clasifican en familias. Dependiendo de la familia que se use el ancho que tiene cada carácter es variable. No ocupa lo mismo una “M” que un “.”. Para que quede mejor la calculadora se usará una fuente de tamaño fijo de forma que todos loscaracterestengan el mismo ancho.

En este punto nos queda conectar los botones con la etiqueta que mostrará las operaciones. Cualquier componente enQMLgenera una serie de señales cuando el usuario lo utiliza. Si se capturan esas señales es posible hacer que se modifique el texto de la etiqueta cuando el usuario pulse los botones. El ejercicio final consiste en conectar los botones con la etiqueta de forma que se actualice el contenido de la misma al usar los botones.

Os dejo una captura de pantalla con el estado de la calculadora.

Estado de la calculadora

La siguiente entrega será la semana que viene. Necesito tiempo para prepararla bien, os aviso que será contundente :).

Capítulo 04 – Creación de una aplicación con QML (2)

La semana pasada se estudiaron los conceptos básicos de las aplicaciones que usan QML. Mediante el uso de etiquetas y el layout Column se organizaron los números de la calculadora. Esta organización es insuficiente ya que todas las columnas se distribuyen una detrás de otra. Para solucionar este pequeño problema, en el capítulo de esta semana, se estudian dos layots más: Row y Grid. El primero permite distribuir los componentes en filas mientras que el segundo los distribuye directamente en una tabla. Dependiendo del caso en el que estemos usaremos uno u otro (o una combinación de ellos). Una vez se ha completado el primer paso, la organización de los componentes, es necesario sustituir las etiquetas por botones. Enlace al capítulo.

El botón es un componente que permite la interacción con el usuario. Al pulsarlo se generan una serie de acciones que se utilizan en la aplicación. Por ejemplo, al pulsar los botones de los números se añaden al display de la calculadora. Por defecto Ubuntu Touch usa un color gris claro para los botones. Ese color no pega mucho con los que se encuentran en una calculadora por lo que hay que modificarlo. Otro detalle importante es que la calculadora tiene que funcionar en un dispositivo real. Ésto implica que los botones de la calculadora tienen que ser cómodos de pulsar. No sirve de mucho tener una aplicación que necesita del uso del ratón para utilizarla. En la parte final de la entrega se verá la forma de modificar el tamaño tanto de los botones como de la fuente que muestra la operación.

A lo largo del capítulo encontraréis ejercicios que ayudan a entender las explicaciones. Cada ejercicio tiene una descripción junto con una captura de pantalla del resultado final. A continuación se encuentra el código que lo resuelve. Os aconsejo que no miréis la solución antes de intentar resolver el ejercicio. Es posible que en un futuro mueva las soluciones a un capítulo propio para evitar que alguno haga trampas. Os dejo una captura del estado de la calculadora después de acabar el capítulo. Ya empieza a parecer una calculadora de verdad.

QML (02) Ejercicio 6

Capítulo 04 – Creación de una aplicación con QML (1)

En los capítulos anteriores hemos programado una aplicación sencilla utilizando como base la plantilla que tiene el entorno de desarrollo. Aunque seguiremos con la misma filosofía a partir de este capítulo, ya no estaremos tan encorsetados y tendremos más libertad. Para hacer el interfaz del usuario se utiliza el lenguaje QML. QML es un lenguaje de marcado en el que partimos de una pantalla (vista) y vamos distribuyendo los diferentes elementos que tiene la pantalla. Por ejemplo se pueden añadir etiquetas, cajas de texto o botones que implementarán la lógica que nosotros definamos. Para montar el interfaz de usuario hay que tener una serie de conceptos básicos claros. No son complejos y si tenéis cualquier duda podéis resolverla en los medios asociados al curso. En este capítulo se estudiará de forma básica la cabecera de la vista y el uso de las etiquetas.

Aunque lo he añadido al tablero de Trello lo comento aquí también. A partir de ahora las entregas serán semanales y las publicaré los sábados. Por cuestiones de tiempo no puedo mantener el ritmo de dos entregas por semana. Con QML la teoría no es tan lineal y me hace falta dedicar tiempo para estudiarlo. Cada entrega de QML tendrá varios ejercicios propuestos de forma que los conceptos que se expliquen queden claros. Añadiré una captura de pantalla con el resultado de los ejercicios para que se entienda mejor lo que pido (gracias por el comentario a Bolly). La solución aparecerá en la entrega de la siguiente semana.

Como siempre, si tenéis cualquier duda con el curso o con la instalación del entorno de desarrollo no dudéis en preguntarla. Nos vemos la semana que viene.

Capítulo 03 – Creación de una Web App

El tercer capítulo del curso ya está calentito en GitBook. Una vez tenemos el SDK configurado para trabajar con Ubuntu Touch el siguiente paso es crear una aplicación. Por simplificar un poco el proceso, la primera aplicación es una Web App. Una Web App toma como origen de los datos una URL y la transforma en una aplicación que aparece en el scope de Aplicaciones. Los datos asociados están confinados y no se comparten con el navegador Web de Ubuntu Touch.  El proceso de creación de la Web App es sencillo y se reduce básicamente a configurar las URL que queremos usar.

Cuando se ejecuta una aplicación desde el SDK se hace una instalación temporal en el dispositivo. En el momento que desconectamos del ordenador esa aplicación desaparece. Para evitarlo tenemos dos opciones. La primera es crear un paquete instalable (click) que se instale en el dispositivo mientras que la segunda consiste en publicar la aplicación en la tienda de Ubuntu. En este capítulo veremos las dos opciones finalizando con una Web App de ejemplo publicada en la tienda.

En la tienda de Ubuntu se pueden configurar los aspectos más importantes de la aplicación. Entre estos aspectos se encuentra la descripción de la aplicación, los iconos que usa o el precio que le queremos poner. Aunque se suele asociar software libre con software gratuito, esta afirmación no se cumple siempre. Es posible programar usando una licencia libre y al mismo tiempo cobrar por el trabajo asociado. La tienda de Ubuntu nos permite cobrar por las aplicaciones de forma sencilla utilizando una cuenta de PayPal.

Se ven bastantes conceptos en el capítulo que he publicado hoy. Os recomiendo leerlo con calma y preguntar las cosas que no os queden claras.

Enlace al curso:  https://www.gitbook.com/book/mimecar/curso-de-programacion-de-ubuntu-phone-touch/details

Capítulo 02 – Instalación de las herramientas de desarrollo

Acabo de publicar el segundo capítulo del curso de programación de Ubuntu Touch. En este capítulo se verá la configuración del entorno de desarrollo con la instalación del SDK de Ubuntu Touch y la creación de una aplicación de ejemplo. Si queréis seguir el curso es importante completar el capítulo para trabajar todos con un mismo sistema de desarrollo. A partir del siguiente capítulo empezará la programación de aplicaciones y daré por supuesto que tanto el ordenador como el dispositivo que usemos para pruebas estén configurado.

El capítulo es un poco extenso pero no tiene mucha complicación. La instalación del SDK requiere del uso de un par de comandos y no deberían aparecer problemas durante el proceso. Una vez está instalado el entorno de programación crearemos la aplicación de ejemplo. Como el emulador tiene algunos problemas en el momento de escribir el capítulo no lo usaremos de momento. Se sustituirá por una compilación nativa en el ordenador. La misma aplicación se puede compilar para escritorio o para un dispositivo que use Ubuntu Touch por lo que las pruebas se simplifican en cierta medida.

Si tenéis alguna duda o problema con la instalación del SDK o la ejecución de  la aplicación de ejemplo tenéis varios medios para resolverla:

Os recuerdo que hay un tablero de Trello con el contenido del curso. Se pueden añadir comentarios a las tarjetas con sólo tener una cuenta de Trello. Espero que os guste el capítulo.