Category: Development

Acceder a Nokia Maps desde QML

May 14th, 2012

Hoy encontré un link a mi blog desde este thread en Nokia Developer en donde preguntaban como abrir la aplicación Nokia Maps (ex Ovi Maps) con unas coordenadas especificas desde una app Qt, hacer esto desde QML es muy fácil, solo debemos usar el método openUrlExternally del objeto Qt de la siguiente manera:

MeeGo
Qt.openUrlExternally("geo:-34.603611,-58.381667")
Symbian
Qt.openUrlExternally("http://m.ovi.me/?c=-34.603611,-58.381667")

Ademas de poder abrir Nokia Maps en una ubicación precisa, con openUrlExternally también es posible, hacer llamados telefónicos, enviar SMSs, emails, abrir una dirección web en el navegador nativo y algunas otras cosas mas, pueden ver algunos ejemplos de esto y su implementación en esta entrada en la wiki de Nokia Developer

Development , , , , No response

Intro a QJson

May 11th, 2012

Hace unos días navegando por los proyectos públicos en Nokia Developer, me tope con un fork de QJson que incluye ciertas modificaciones para poder integrar QJson de forma mas natural con QML, antes ya había escrito como consumir JSON con QML, pero usar esta versión de QJson es mucho mas simple y eficiente.

Para empezar, lo primero que hay que hacer es bajar el proyecto y copiarlo en una carpeta con nombre el QJson en la carpeta raíz de nuestro proyecto.

Luego en el .pro de nuestro proyecto debemos hace un include al .pri de QJson.

include(./QJson/json.pri)

También en el .pro hay que declarar que vamos a usar la función network.

QT += network

En el main.cpp de nuestra app solo hay que crear los includes para QtDeclarative y para QJson y registrar el Type.

#include <QtGui/QApplication>
#include "qmlapplicationviewer.h"

#include <QtDeclarative>
#include "QJson/qjson.h"

Q_DECL_EXPORT int main(int argc, char *argv[])
{
    QScopedPointer<QApplication> app(createApplication(argc, argv));

    qmlRegisterType<QJson>("QJson", 1, 0, "QJson");

    QmlApplicationViewer viewer;
    viewer.setMainQmlFile(QLatin1String("qml/QColor/main.qml"));
    viewer.showExpanded();

    return app->exec();
}

En la parte QML empezamos agregando un import a QJson, luego crearemos un objeto QJSon y por ultimo vamos a declarar que cuando se dispare el evento Component.onCompleted se le asignara la url a parsear al objeto QJson y luego iteraremos la data resultante de la consulta he iremos asignando lo valores obtenidos a los campos correspondientes del modelo.

import QtQuick 1.1
import QJson 1.0
import com.nokia.symbian 1.1

Page {
    id: mainPage

    ListModel {
        id:colorsModel
    }

    Component {
        id:colorsDelegate
        ListItem {
            height: 100
            Image {
                id:icon
                smooth: true
                width: parent.width
                height: parent.height
                source: imageUrl
                Rectangle {
                    width:parent.width
                    height: 28
                    color:"#000"
                    anchors.bottom: parent.bottom
                    anchors.bottomMargin: 0
                    opacity: 0.750
                    ListItemText {
                        role: "SubTitle"
                        text:title +" by " + userName
                        horizontalAlignment: Text.AlignHCenter
                    }
                }
            }
        }
    }

    ListView {
        anchors.fill: parent
        model: colorsModel
        delegate: colorsDelegate
    }

    QJson {
        id: json
        onError: {
            console.log("line:"+line)
            console.log("message:"+message)
        }
    }

    Component.onCompleted: {
        var data = json.parse("http://www.colourlovers.com/api/palettes/new&format=json")

        for(var p in data){
            colorsModel.append({
                                   "title"   : data[p]["title"]
                                   ,"userName"  : data[p]["userName"]
                                   ,"imageUrl": data[p]["imageUrl"]
                               })
        }
    }
}

Para este ejemplo use el API de ColorLovers para poder consultar las ultimas paletas que se han agregado a su DB, el resultado de este pequeño ejemplo pueden apreciarlo en la siguiente imagen.

QColor Demo

Development , , , , 4 responses

Gaia, la UI de Boot to Gecko (B2G)

January 29th, 2012

Gaia, es la UI de Boot to Gecko, decir que esta en un estado de alpha seria algo muy optimista, Gaia mas que nada esta en un estado experimental, en donde se están probando y aplicando las mejoras que van apareciendo en WebAPI, así que tanto en lo visual como en lo estructural todo puede cambiar en mayor o menor medida.

En Gaia todo es una WebApp y la primera de las WebApps que vemos es la Homescreen (ver imagen debajo), la Homescreen usa window.navigator.mozApps para encontrar todas las WebApps instaladas y mostrar su correspondiente icono en la Homescreen, esto es en la teoría, actualmente el listado de apps que se ven en la Homescreen esta hardcodeado en el archivo ${GAIA}/apps/homescreen/webapi+apps.js, como dije al principio Gaia es una PoC (prueba de concepto) bastante experimental, por lo que en esta etapa del proyecto es posible encontrar cosas como estas.

B2G Lockscreen, Homescreen and Dialer
B2G Lockscreen, Homescreen y Dialer

El resto de las aplicaciones están en un nivel muy básico de desarrollo, algunas están mas avanzadas y son mas funcionales que otras, por ejemplo ya es posible enviar SMSs usando B2G siempre y cuando lo estemos corriendo en un dispositivo, otra app que por obvias razones esta muy avanzada es el Browser, el resto de las apps están en sus comienzos, por lo que habrá que esperar para ver su evolución.

B2G Browser
B2G Browser

Instalando Gaia

Podemos probar Gaia, flasehando una imagen de B2G en un dispositivo (Samsung Galaxy S2, Nexus S) he instalando Gaia encima, otra opción es hacer lo mismo pero corriendo todo en el emulador que trae el SDK de Android y por ultimo podemos correrlo dentro de un browser, esta ultima opción es la que escogí yo, el proceso para compilar Gaia, esta muy bien explicado en la Wiki de Mozilla, antes de comenzar con el proceso de compilación es recomendable chequear que cumplimos con todos lo pre requisitos necesarios para compilar Firefox, la información esta disponible para varias distros en Mozilla Developer Network, presten especial atención a Autoconf ya que Mozilla usa la versión 2.13 de Autoconf para las tareas de compilación y la mayoría de las distros viene con una versiones mas actualizada, por lo que casi con seguridad van a tener que hacer un downgrade.

Web Apps en Gaia

El modelo de desarrollo de apps para B2G se basa en estándares Web, usando HTML, CSS y JavaScript, si han creado una aplicación Web usando solo estas tecnologías el proceso de portarlas a B2G es algo trivial, ademas se esta trabajando en un conjunto de APIs para poder acceder a funciones “nativas” de los dispositivos y extender su funcionalidad, en la siguiente tabla pueden ver un listado de estas APIs.

Aplicación API
Dialer Telephony & Messaging API, Contacts API
Battery Battery API
Address Book Contacts API
SMS Telephony & Messaging API, Contacts API
Camera Camera API, Filesystem API
Gallery Filesystem API
Settings Device Status API, Settings API
Games Accelerometer API, Mouse Lock API, Vibration API
Maps Geolocation API, Contacts API

Estructura de una WebApp

En el siguiente esquema pueden ver como esta organizada una pequeña WebApp, la estructura es la misma que utilizan las apps que viene precargadas con Gaia, así que estimo sera la que ellos recomendaran en un futuro, si lo desean pueden organizar los archivos de la manera que les parezca mas cómoda lo único que si o si tiene que estar presente en la WebApp es el archivo manifest.appcache.

paulo@kendra ~/repos/gaia/apps/subtego $ tree
.
├── js
│   ├── jlinq.js
│   ├── lines.js
│   └── stations.js
├── manifest.appcache
├── manifest.webapp
├── style
│   ├── icons
│   │   └── SubteGo.png
│   ├── images
│   │   ├── a.png
│   │   ├── b.png
│   │   ├── c.png
│   │   ├── d.png
│   │   ├── e.png
│   │   ├── h.png
│   │   ├── h.png
... ... ... ...
│   │   └── pin.png
│   └── ui.css
└── subtego.html
manifest.webapp

Este archivo describe la WebApp, el nombre y el icono que se verá en la Homescreen como así también el archivo de inicio de la WebApp.

{
  "name": "SubteGo",
  "description": "SubteGo for Gaia",
  "launch_path": "/subtego.html",
  "developer": {
    "name": "realnorth",
    "url": "http://realnorth.net"
  },
  "icons": {
    "120": "/icons/SubteGo.png"
  }
}

Si siguen estos simples pasos y usan estándares web, migrar o crear una aplicación “compatible” con B2G sera una tarea simple, si tienen dudas o quieren ahondar mas en el tema pueden aprender mucho mas viendo el código de las WebApps que se incluyen en Gaia o consultar directamente el código de una WebApp haciendo uso de la función “View Page Source” (ver primera imagen debajo) que se incluye en varias apps en Gaia.

B2G "View Source" function and SubteGo
B2G, función “View Page Source”

Development, User Interface , , No response

Tizen, pasado, presente y futuro

January 18th, 2012

Desde el día de la liberación de parte del código de Tizen hasta hoy ha habido gran actividad en torno a el, anuncios de fusión con bada, retractaciones, especulación y opiniones, muchas de ellas sin fundamento, una de las cosas que mas se repite es que Tizen es el sucesor de MeeGo, pero esto no es así, ni en código, ni en ideas, el único que podría tomar para si el titulo de sucesor de MeeGo es Mer Project, otro punto que se repite hasta el cansansio es que Tizen es un proyecto nuevo, esto tampoco es así, Tizen es el punto culmine de años de trabajo de Samsung, junto a los otros socios de la LiMo Foundation primero y de la Tizen Association ahora.

Pasado

La historia de Tizen comienza a principios de 2007 con la creación de la LiMo Foundation (ahora Tizen Association), esta fundación esta formada por varios fabricantes japoneses, algunos operadores europeos, Samsung y Vodafone entre otros, los socios de la ex LiMo Foundation produjeron mas de 50 dispositivos, la mayoría de ellos nunca salio del mercado japones, a excepción de los modelos que Samsung produjo para Vodafone (Vodafone 360 H1, Vodafone 360 M1).

Samsung Vodafone 360 M1
Samsung Vodafone 360 M1

Estos dispositivos estaban pensados para integrarse con el servicio Vodafone 360 (App Store, Sincronización, Mensajería, entre otros), estos dispositivos usan la versión 2 de la Samsung Linux Platform (compatible con LiMo Release 2) y por encima una UI bastante llamativa e interactiva (aunque en algunos caso no muy funcional) desarrollada con EFL (ver video a continuación)

Como ven las piezas empiezan a encajar y mucho mas aun si le dan una vista al código liberado de Tizen, que de MeeGo solo usa algo del stack de comunicaciones, el resto es una versión actualizada de la Samsung Linux Platform, lo mismo pasa con el SDK de Tizen, que casi con seguridad se baso o al menos tomo muchas ideas del LiMo BONDI SDK, que, oh casualidad esta optimizado para la creación de Web Apps, al igual que Tizen.

Presente

bada, es otra pieza del rompecabezas que posiblemente encuentre su lugar y su razón de ser, si la unión con Tizen se realiza, bada per se no es un OS, según Samsung, bada es una plataforma cuya arquitectura permite usar diferentes kernels, el primer dispositivo bada fue el Samsung S8500 Wave, este usa un kernel RTOS propietario, de este kernel dada la naturaleza cerrada del código de bada poco se sabe.

El porque Samsung decidió desarrollar toda una nueva plataforma (OS) en vez de usar directamente Samsung Linux Platform, es un misterio, lo que no era ningún misterio eran las intenciones de Samsung de abrir el código de bada, el rumor comenzó a tomar forma a fines del año pasado y al fin puede hacerse realidad si la decisión de integrar bada con Tizen se concreta, ¿en que consistiría esta integración?, la información acerca de este punto es casi nula, lo que si se sabe de forma no oficial es que las aplicaciones bada correrán en Tizen, pero antes deberán recompilarse, Tizen va a soportar las APIs usadas por bada, las que serán agregadas como si se tratase de un toolkit mas, aun falta ver que tan bien se integraran y que grado de compatibilidad tendrán las apps bada corriendo sobre Tizen, si toda esta movida sale bien permitirá sin mucho esfuerzo que Tizen tenga potencialmente en su catalogo alrededor de 20000 aplicaciones listas para usar, pero para que todo esto llegue a buen puerto Samsung va a tener que convencer primero a los demás socios de la Tizen Association para que den el visto bueno a la unión, cosa que dado el peso que tiene Samsung en la asociación debería darse por descontado.

Samsung Wave Series
bada phones, Samsung Wave, Wave 2 y Wave 3

Si la integración de bada con Tizen es aprobada, hay que ver si ademas de las APIs, también esta en los planes de Samsung agregar la UI en la movida, la UI de bada se basa en TouchWiz, al menos en su parte visual y comparada con la UI de la imagen que viene en el emulador del SDK, esta mucho mas desarrollada y pulida, es cierto que la UI es básica y no presenta ninguna función o pattern innovador (como Swipe UX), pero es funcional y se adapta bien al perfil del usuario de smartphones de gama media que es adonde apunta Tizen en un comienzo.

Lamentablemente el presente de Tizen, a pesar de la liberación del código sigue siendo incierto en mi opinión, todo por una política de comunicación totalmente oscura y deficiente, con anuncios que al poco tiempo se desmienten y donde las únicas fuentes de información son las listas de correos y el canal IRC, lugares en donde la especulación reina.

Futuro

Por suerte para ver como se delinea el futuro de Tizen no vamos a tener que esperar mucho, el mes próximo en el MWC 2012, Samsung casi con seguridad estará presentando mínimo un prototipo corriendo Tizen, espero también que Samsung y los demás socios de la Tizen Association aproveche el lugar y la cobertura de los medios para hacer anuncios concretos acerca de que tienen planeado hacer con Tizen y cuales van a ser los pasos a seguir para lograr sus objetivos, sera cuestión de tener un poco mas de paciencia, espero que la espera valga la pena.

Development, Opinion, Personal , , , No response

Tizen, primer contacto

January 8th, 2012

Desde su lanzamiento, he sido muy critico con Tizen, primero porque al parecer prima mas la política que la tecnología en el proyecto, y segundo por la falta de información y transparencia, algo que para ser un proyecto que se quiere posicionar como la verdadera opción Open Source en OSs para dispositivos móviles es totalmente inaceptable, el blog en Tizen.org solo ha publicado un post y este data del 27 de Septiembre de 2011 (casi 3 meses y medio), en las listas de email, no hay nadie que conteste absolutamente nada, afortunadamente esto esta empezando a cambiar, hoy gracias a un tweet de @gsbarbieri me entere que se podía acceder a el repositorio git con el código de Tizen, ademas de que ya estaba disponible para bajar el SDK.

Arquitectura

La arquitectura de Tizen, se divide básicamente en 3 capas, una capa con el Kernel Linux (optimizada para procesadores con arquitectura ARM Cortex A8), luego el Core, en donde se encuentran los diferentes servicios (Web, Security, Multimedia, Graphics, UI, Location, Telephony, Messaging, entre otros) que son expuestos por la Web API, a las aplicaciones web que corren en la capa, valga la redundancia de Aplicaciones.

Tizen Architecture

SDK

El SDK se encuentra disponible aquí, y hasta el momento solo se encuentra disponible para Linux, el instalador pesa unos 5 megas y la instalación completa del SDK ocupa aproximadamente 2 gigas de espacio en disco, el IDE se basa en Eclipse y permite crear tanto aplicaciones nativas como Web Apps, el SDK también incluye un emulador con el que podemos testear nuestras apps, el emulador es algo lento y limitado, no soporta OpenGL ES y EFL, tampoco detecta el cambio de posición de la pantalla (portrait, landscape) entre otras cosas, estas limitaciones se verán en parte solucionadas en febrero próximo cuando Samsung lance su primer modelo de referencia y se puedan hacer pruebas directamente en el dispositivo.

Tizen IDE

User Interface

La UI usada en esta versión es bastante básica, con algunos aires a TouchWiz, la homescreen es una simple lanzadera de programas y al parecer es posible tener mas de una homescreen, a diferencia de TouchWiz no es posible agregar widgets, lo cual hace a la UI algo limitada, pero por otro lado, esto favorece el consumo de recursos y es que al parecer Tizen en un principio va a estar mas orientado a equipos del rango medio a medio bajo, la UI también cuenta con una zona de notificaciones similar a la usada por Android, Symbian Belle o iOS 5 y su funcionamiento y apariencia es parecida, también cuenta con un Task Switcher donde podemos ver las aplicaciones que están corriendo, cuantos recursos están consumiendo y cerrarlas.

Debajo pueden ver algunas screenshots de las diferentes partes de la UI y de algunas aplicaciones en acción.

Tizen UX - Homescreen and Dialer
Homescreen and Dialer

Tizen UX - Settings and Task Switcher
Settings and Task Switcher

Tizen UX - Web Browser
Web Browser

Tizen UX - Photo Gallery
Photo Gallery

Este articulo es solo una primera toma de contacto tanto con Tizen, como con su entorno de desarrollo, en futuros posts iré profundizando mas en puntos como la arquitectura, las APIs disponibles para desarrollo, ya sean las nativas de Tizen como las de la especificación WAC, espero este articulo les sirva para ir conociendo a Tizen y espero también que sea el comienzo de una mayor y mejor comunicación por parte de la Tizen Association.

Announcements, Architecture, Development , 12 responses