SubteGo, es una guiá para el servicio de Subte (Metro, Subway) de Capital Federal (Buenos Aires, Argentina), SubteGo es una aplicación para Symbian^3, desarrollada con Qt haciendo uso extensivo de QML y de Qt Components para la UI, de Qt Webkit y el API de Nokia Maps (ex Ovi Maps) para la parte de mapas y de Offline Storage para persistir los datos.

La aplicación ya esta disponible para su descarga desde Nokia Store de forma gratuita, una versión para MeeGo esta en proceso de ser enviada para su aprobación por el equipo de QA en Nokia Store.

El código fuente tanto de la versión para Symbian como el de la versión para MeeGo, va a estar disponible luego de que las dos aplicaciones hayan sido aprobadas por Nokia Store.

SubteGo es un proyecto que nació como un experimento (por eso forma parte de los labs) con el objeto de crear una aplicación en la que pueda aplicar las ultimas novedades de Qt y conocer el proceso de aprobación de aplicaciones que lleva a cabo Nokia Store, también tenia como objetivo el que sea una aplicación útil para un gran numero de personas y que pueda ser un medio de consulta recurrente.

Espero que la aplicación les sea útil si es que la descargan, y que el código fuente que pronto sera liberado les permita aprender un poco mas acerca de Qt y el proceso de desarrollo de aplicaciones para Symbian y MeeGo.

Download SubteGo

Si están leyendo este post es muy posible que sea porque tienen problemas para que Smart Installer detecte e instale Qt Components, se supone que al compilar nuestro proyecto teniendo la opción de que lo haga junto con Smart Installer y que en el .pro este presente la siguiente linea de código:

# Add dependency to Symbian Qt Components
CONFIG += qtquickcomponents

Smart Installer detectara en el momento de la instalación, si el dispositivo ya cuenta con Qt Components, caso contrario se encargara de descargarlo e instalarlo, lamentablemente esto ha veces no pasa, ya que por alguna extraña razón, muchas personas (incluido yo) han estado reportado que Smart Installer ni siquiera detecta que Qt Components es una dependencia, por lo cual no lo instala y como resultado tenemos una aplicación que directamente no arranca o en el mejor de los casos arranca pero falla miserablemente en las vistas en donde se haga uso de Qt Components.

La solución

La solución ha este problema consiste en decirle a Smart Installer explícitamente que tiene a Qt Components como dependencia, para hacerlo solo debemos agregar las siguientes lineas de código al .pro de nuestro proyecto.

symbian {
    components.pkg_prerules += 
    "; Dependency to Symbian Qt Quick components" 
    "(0x200346DE), 1, 0, 0, {"Qt Quick components"}"

    DEPLOYMENT += components
}

Espero que este tip les haga ahorrar horas de trabajo y hasta un posible bochazo en la Ovi Store.

Actualización

Tal como comenta (ver abajo) Lucian Tomuta (Chief Engineer en Forum Nokia), hay una solución mas simple y elegante a este problema, solo debemos usar la siguiente línea en el .pro de nuestro proyecto.

# Add dependency to Symbian Qt Components
CONFIG += qt-components

Y llego el día, Nokia anuncio por fin el N9, su primer dispositivo MeeGo compatible(*) enfocado al publico en general, quiero aprovechar este post, no para hacer una review del evento de presentación, ni para hablar de las features del mismo, sino para aclarar algunos aspectos sobre la personalidad del OS y sobre los recursos y herramientas que ya tenemos disponibles para comenzar a desarrollar.

Harmattan?, que es eso?

MeeGo 1.2 Harmattan es la implementación MeeGo de Nokia, es altamente compatible a nivel de APIs y arquitectura, lo que permitirá fácilmente tomar los cambios que se hagan en el upstream de MeeGo he incorporarlos cuando se vayan liberando, Harmattan trae integrado, Qt 4.7.?, Qt Quick Components 1.0, Qt Mobility 1.2.0, Qt Webkit 2.1.1, PulseAudio y GStreamer para crear aplicaciones y plugins que hagan uso de audio y video, Telepathy-Qt4 para aplicaciones que usen vídeo llamadas y mensajería instantánea y por ultimo la Qt Games API para el desarrollo de juegos basados en OpenGL ES 2.0.

N9 & N950

Como dije al principio, el N9 es el primer dispositivo MeeGo de Nokia para el publico en general, en cambio para los desarrolladores se encuentra disponible el N950, el mismo no puede ser comprado directamente, sino que Nokia se encargara de entregarlos usando un criterio que aun no se ha hecho publico, pero que seguramente incluirá a los Forum Nokia Champions, los miembros del programa Launchpad y a contribuyentes destacados de las comunidades MeeGo, Maemo y Qt.

Developer and Design Tools

Apenas terminada la presentación del Nokia N9, fueron liberadas las herramienta necesarias para comenzar a diseñar y desarrollar aplicaciones para el mismo.

Qt SDK 1.1.2 Update for Meego 1.2 Harmattan

Este update incorpora una actualización menor de Qt Creator y el toolchain para crear aplicaciones compatibles con Meego 1.2 Harmattan, el toolchain aun esta en fase experimental y no están completas aun muchas de sus herramientas y características..

Pueden instalar el SDK haciendo una instalación limpia del mismo usando algunos de los siguientes instaladores:

O si ya tienen instalado Qt SDK, pueden actualizarlo utilizando la herramienta SDKMaintenanceTool y seleccionado Harmattan en la sección Experimental

Harmattan UX Guidelines

Se ha habilitado toda una nueva sección en Nokia Developer para hacer lugar a la nuevas Nokia N9 UX Guidelines, la documentación es realmente muy completa, visual e interactiva, tratando de guiarnos en el nuevo paradigma que acompaña la UI del N9, ademas de la documentación en linea, es posible bajar, las guidelines y templates para el diseño de iconos, como así también un toolkit con los graficos de los distintos componentes que forman parte de la UI para ser usados en el prototipado de aplicaciones.

Creo que con estos recursos y estas herramientas tenemos como para entretenernos un buen rato, conociendo y explorando las posibilidades que MeeGo nos puede proveer y como aplicarlas a futuros proyectos.

Hace un tiempo escribí sobre lo fácil que es consumir XML con QML, hoy le toca el turno a JSON, consumir JSON con QML requiere un poco mas de trabajo comparado con XML, pero no mucho mas.

Pasemos al código, lo primero que haremos sera crear un archivo data.js que contendrá la lógica que poblara al Model con los datos, para este ejemplo vamos a usar el API de Wikileaks para mostrar un listado con los últimos cables liberados, lo siguiente es agregar el ListModel, el Delegate cuyo código esta al final y no necesita muchos comentarios, el ListView que mostrara los datos y vamos a disparar la función getLatestCables() cuando la view se haya cargado.

main.qml

import QtQuick 1.0
import "data.js" as Data

Rectangle {
    width:360
    height:640

    Component.onCompleted:Data.getLatestCables();

    ListModel {
        id:cablesModel
    }

    CablesDelegate {
        id:cablesDelegate
    }

    Item {
        id:cablesList
        anchors.fill:parent

        ListView {
            model:cablesModel
            delegate:cablesDelegate
            anchors.fill:parent
        }
    }
}

La magia que no es mucha, pasa aquí, esto es simple y puro JavaScript, utilizaremos un XMLHttpRequest para acceder al feed con los datos, luego lo parseamos e iremos agregando uno a uno los datos al Model.

data.js

function getLatestCables(){
    var xhr = new XMLHttpRequest;
    xhr.open("GET", "http://api.leakfeed.com/v1/cables/latest.json");
    xhr.onreadystatechange = function() {
        if (xhr.readyState == XMLHttpRequest.DONE) {
            var a = JSON.parse(xhr.responseText);
            for (var c in a) {
                var i = a[c];
                cablesModel.append({identifier: i.identifier, classification: i.classification, office: i.office, subject: i.subject});
            }
        }
    }
    xhr.send();
}

CablesDelegate.qml

import QtQuick 1.0

Component {

    Rectangle {
        border.color:"#b7b7b7"
        border.width:1
        width:parent.width
        height:cableIdentifier.height + cableOffice.height + cableClass.height + cableSubject.height + 10
        color:"#fff"

        Item {
            width:parent.width
            height:parent.height

            Grid {
                rows:4
                width:parent.width
                anchors.verticalCenter:parent.verticalCenter
                anchors.left:parent.left
                anchors.leftMargin:5
                anchors.right:parent.right
                anchors.rightMargin:5

                Text {
                    id:cableIdentifier
                    text:identifier
                    font.bold:true
                    font.pixelSize:18
                    smooth:true
                    color:"#333"
                }

                Text {
                    id:cableOffice
                    color:"#0076A3"
                    text:office
                    font.pixelSize:18
                    font.bold:true
                    smooth:true
                }

                Text {
                    id:cableClass
                    color:"#aa1317"
                    text:classification
                    font.pixelSize:16
                    font.bold:true
                    smooth:true
                }

                Text {
                    id:cableSubject
                    text:subject
                    font.pixelSize: 14
                    wrapMode:Text.WrapAtWordBoundaryOrAnywhere
                    width:parent.width
                    smooth:true
                    color:"#333"
                }
            }
        }
    }
}

Si todo sale bien, al correr la demo deberíamos obtener como resultado algo parecido a los que se ve en la siguiente imagen.

Qt/3D es un conjunto de herramientas y funciones que permiten crear aplicaciones que hagan uso de gráficos 3D, Qt3D extiende las clases del modulo OpenGL de Qt, estas APIs facilitan escribir código que sea fácil de portar entre aplicaciones de escritorio OpenGL y aplicaciones embebidas o mobile OpenGL/ES, por ultimo pero no menos importante, contamos con un binding para utilizar Qt/3D desde QML.

Para comenzar con Qt/3D lo primero que debemos hacer es instalarlo, los pasos a seguir están muy bien explicados aquí, ya sea en Linux, Windows o Mac OS X, no son complicados, aunque puede tomar algo de tiempo el proceso.

¿Que podemos hacer con Qt/3D y QML?

Con Qt/3D podemos crear viewports, asignar luces y cámaras, crear o importar nuestros propios modelos 3D, ya sea usando las figuras básicas incluidas, creando nuestros propios meshes, o usando algún modelo ya existente en formato 3ds o bzs, también podemos crear animaciones y aplicárselas a los modelos, las cámaras y las luces.

Si han trabajado anteriormente con aplicaciones 3D todos estos términos y conceptos les sonaran familiares, lo que les permitirá reutilizar su conocimiento a la vez de que podrán rápidamente ponerse manos a la obra.

Hello World 3D

El siguiente ejemplo muestra de forma simple, algunos de los conceptos y controles que se usan en la mayoría de la aplicaciones 3D, lo primero es crear los imports correspondientes de Qt/3D, luego sigue el Viewport que define la escena 3D, así como su tamaño, las luces y las cámaras a utilizar y sus posiciones.

Luego tenemos un objeto Sphere que tiene un levelOfDetail de 10 el máximo de su tipo y que mide la cantidad de triángulos necesarios para crear el objeto, en este caso 32768, luego alineamos el objeto al eje Y, para terminar aplicándole una textura usando el elemento Effect.

Para finalizar vamos a animar el objeto 3D, para ello usaremos una Rotation3D, a la cual seteamos el eje que queremos animar y luego en una NumberAnimation establecemos la propiedad a animar, en este caso, angle.

import Qt 4.7
import Qt3D 1.0
import Qt3D.Shapes 1.0

Viewport {
    width: 640
    height: 360
    camera: Camera {
        eye: Qt.vector3d(0,0,8)
    }
    Sphere {
        levelOfDetail: 10
        axis: Qt.YAxis
        effect: Effect {
            texture: "images/land_ocean_ice_2048.jpg"
            decal: true
        }
        transform:[
            Rotation3D {
                axis: Qt.vector3d(0,1,0)
                NumberAnimation on angle {
                    running: true
                    loops: Animation.Infinite
                    from: 360
                    to: 0
                    duration: 6000
                }
            }
        ]
    }
}

Con este simple ejemplo pueden darse una idea del poder que nos brinda la combinación Qt/3D y QML, si están interesados en el tema, pueden profundizar mas en el dando un vistazo a la documentación oficial, o ver un repaso rápido de las principales características en la presentación dada por Sarah Smith en los Qt Developers Days 2010.