29 mar. 2013

Aprendiendo Programacion en QML para Ubuntu Phone

El titulo basicamente lo dice todo. Concluciones Rapidas. 

1. Ubuntu pasara de usar Unity a Unity Next (QT) en algun momento en los proximos años. 

2. Programar en QML es muy sencillo. 

3. Hacer interfaces graficas con QML es relativamente mas facil que usar GTK y Python. 

4. Hacer aplicacione que funcionan en un Telefono, una Tablet y en el PC es un WIN WIN para cualquiera que este pensando en comenzar a programar. 

Basicamente lo que digo es que si hay todo un nuevo SDK porque no aprender de el y usarlo. 
No digo que olviden Python ni GTK, pero interesante aprender QML o Javascript y hacer programas para Ubuntu (Phone, Tablet y PC) o usar Javascript que es el nuevo lenguaje para Gnome. 

Aqui mis primero pasos usando el nuevo SDK de Ubuntu. 

Rapido y Facil 

1. Instalar el SDK (Si usan Raring es simple sudo apt-get install ubuntu-sdk) eso instalara QT5 y QTCreator que es lo que se usa para programar. 

Si usan versiones anteriores 

sudo add-apt-repository ppa:canonical-qt5-edgers/qt5-proper && sudo add-apt-repository ppa:ubuntu-sdk-team/ppa && sudo apt-get update && sudo apt-get install ubuntu-sdk notepad-qml 

2. Creando un programa para abrir una pagina web. (Bastante basico)
Me voy ahorrar el hola mundo porque basicamente un ejemplo mas complejo es un ejemplo util para hacer cosas mas interesantes y entendiendo el programa que voy a organizar se puede entender un simple hola mundo.

Programando.

1. Abrir Qt Creator es el nuevo IDE para las cosas de Ubuntu, es como Geany y otros que usabamos cuando estabamos tratando con Python.

2. Crear un Nuevo Proyecto



Para este caso le puse como nombre al proyecto eltiempo. Le damos finalizar y pasamos con el codigo.



EL CODIGO
Si conocen Javascript esto sera cosa de niños, realmente QML no es nada del otro mundo, tecnicamente es mas simple que Python, quizas por eso es mas rapido de usar.

Lo creado con QML lo podemos usar en dispositivos Android, PC, y Windows sin hacer esfuerzos raros ni cosas complejas.

Todo programa en QML se estructura de la siguiente forma.

imports

MainView

      Propiedades del MainView

      Page

          Contenido de la Aplicación
       
      Contenido por fuera de la aplicación

Repasemos que es esto.

Import, es lo mismo que importar modulos en Python, nada nuevo para nosotros.

MainView es el mismo Main() que usabamos en Python es la declaracion del programa.

Las propiedades se refieren a tamaño, color, si es maximizado o minimizado y todas esas cosas visuales.

Page hace referencia a la declaracion del codido del programa.

Y pues el contenido por fuera de la aplicación esto es nuevo porque no lo han visto tanto en Python pero cuando se use lo explicare en detalle.

He aquí el programa.

import QtQuick 2.0
import QtWebKit 3.0
import Ubuntu.Components 0.1


MainView {
    objectName: "mainView"
    applicationName: "eltiempo"
    id: root

    width: units.gu(60)
    height: units.gu(80)

    property real margins: units.gu(2)
    property real buttonWidth: units.gu(9)

    Page {
        title: i18n.tr("El Tiempo (Noticias)")
        WebView {
                id: webview
                url: "http://m.eltiempo.com"
                width: parent.width
                height: parent.height
                
    }
  }
}


Lo procedo a explicar con velocidad.

import QtQuick 2.0
import QtWebKit 3.0
import Ubuntu.Components 0.1

Se encarga de importar los tres ("modulos") que usaremos  QtQuick es la version de QT para QML.
QtWebkit es un modulo para usar un navegador en codigo QML o QT (Abrir paginas web y esas cosas)
Ubuntu Components se encarga de lo estético para que sea una aplicación con los parámetros de diseño de Unity Next

MainView {
    objectName: "mainView"
    applicationName: "eltiempo"
    id: root

    width: units.gu(60)
    height: units.gu(80)

    property real margins: units.gu(2)
    property real buttonWidth: units.gu(9)

Aqui definimos el MainView es decir como se ve la aplicación principal
El nombre del obejto es mainView pero podria haberlo llamado vistaprincipal o como quieran.
El nombre de la aplicacion es eltiempo porque basicamente estoy creando una aplicacion para ver las noticias de la pagina www.eltiempo.com (Periodico Digital en Colombia)

id: root basicamente define que esta es la raiz del programa.

Width y Height son tamaños están en unidades básicas para celulares smartphones pero pueden cambiarlas.

Lo demas son margenes y esas cosas, detalles visuales que realmente son una copia de los parámetros establecidos por Unity Next.

El programa en si es lo que sigue.
Page {
        title: i18n.tr("El Tiempo (Noticias)")
        WebView {
                id: webview
                url: "http://m.eltiempo.com"
                width: parent.width
                height: parent.height
                
    }
  }
}
 

title: Es basicamente el titlo del programa para mi caso particular lo llame El tiempo (Noticias) i18n.tr basicamente lo que dice es que estoy usando codigo internacional para el texto pueden quitar eso si quieren, no hay lio.

WebView es el modulo que voy a ejecutar para este caso particular.
id: es el nombre de identificación que tendrá este micro programa dentro del programa. Podria llamarlo desde cualquier otro lado del programa usando solo el texto webview.

url: es básicamente la pagina que usa el tiempo para dispositivos moviles.

Width y Height son el tamaño que debe tener la pagina para este caso le dice que usara el tamaño definido por la ventana principal así que usara 60 y 80 que fue lo que definí mas atrás.

Y eso es basicamente todo.

Control + R para correr el programa y aquí ya lo ven funcionando.


Bastante fácil, solo usamos Ubuntu Components para lo visual y eso se encargo del trabajo.

Ya esta básicamente lista la aplicación para usarla en un teléfono o desde el pc mismo.

Pero hay mas.
Como se imaginaran esto es una aplicación que solo abre una pagina hecha para moviles pero resulta que eltiempo.com tiene una API

En mi segundo tutorial usaremos la api dentro de esta aplicación recién creada para evitar ver publicidad y demás cosas que muestra la pagina oficial.

Ahora el reto es para ustedes lectores, que aplicación pueden crear, un horoscopo, un sudoku o un render de alguna pagina con contenido interesante. Recuerden que el primer paso es hacer algo sencillo despues podemos proceder con cosas mas complejas como adaptar las API's a nuestra aplicacion.