Cómo desarrollar una aplicación para Pebble

Spanish (Español) translation by Steven (you can also view the original English article)

Final product image — What You'll Be Creating

El reloj inteligente Pebble ha existido desde su exitosa campaña Kickstarter en 2012 y es una opción popular entre los usuarios de relojes inteligentes. Esto se debe a su excelente duración de la batería, bajo precio, varios modelos para elegir y compatibilidad con iOS y Android.

Pebble ha tenido un SDK para desarrolladores desde el primer día, alentando a los desarrolladores a crear aplicaciones interesantes e innovadoras para la plataforma Pebble. El SDK siempre se ha mantenido actualizado, con nuevas funciones que se agregan a lo largo del tiempo.

Las aplicaciones de Pebble se han codificado tradicionalmente en C, pero, recientemente, Pebble ha tomado JavaScript y ha abierto el mundo del desarrollo de aplicaciones en su plataforma a incluso más desarrolladores. En esta introducción al desarrollo de Pebble, te explico algunos de los conceptos básicos para comenzar con el desarrollo de Pebble utilizando el SDK y la biblioteca Pebble.js al crear una aplicación y enviarla a la tienda de aplicaciones de Pebble.

Ser propietario de un Pebble o cualquier conocimiento previo del lenguaje C no se requiere para este tutorial.

1. Configuración del proyecto

Actualmente hay dos entornos en los que puedes construir aplicaciones Pebble. CloudPebble hace posible desarrollar aplicaciones Pebble en el navegador. Esto es genial si estás en Windows o usando una máquina menos potente.

La otra opción, y la opción que seguirá este tutorial, es tener el flujo de trabajo de desarrollo localmente. Esto te permite trabajar sin conexión y utilizar un editor de tu elección. Primero obtengamos la herramienta Pebble y el SDK instalados.

Actualmente, no hay soporte oficial para la herramienta Pebble y el SDK en Windows, por lo que la siguiente sección te guía a través de los pasos para instalar la herramienta Pebble y el SDK en OS X y Linux. Pebble recomienda que uses CloudPebble para el desarrollo en Windows, pero también puedes usar una máquina virtual de Linux.

La forma más fácil de instalar la herramienta Pebble en OS X es a través de Homebrew. Si no tienes Homebrew instalado, puedes obtener las instrucciones de instalación en el sitio web de Homebrew. Con Homebrew instalado, puedes instalar la herramienta Pebble con el siguiente comando:

1	brew install pebble/pebble-sdk/pebble-sdk

Hay algunos pasos adicionales a seguir para instalar la herramienta Pebble y el SDK en Linux. Pebble tiene una guía detallada disponible que puedes seguir. Una vez que hayas instalado la herramienta Pebble, tendrás disponible el comando pebble desde la línea de comandos. Ejecutando pebble --version muestra la información de la versión.

1	$ ~ pebble --version
2
3	Pebble Tool v4.2.1

La interfaz de línea de comandos de Pebble incluye varios comandos convenientes. Puede listar estos comandos ejecutando pebble --help o pebble -h. Uno de los comandos configura un nuevo proyecto con un código de repetición. Crea un nuevo directorio y ejecuta el siguiente comando en la raíz del nuevo directorio:

1	pebble new-project hello-pebble

Si esta es la primera vez que creas una aplicación Pebble, se te solicitará que aceptes los términos de uso y la licencia de desarrollador de Pebble. Una vez que hayas aceptado estos, se descargará e instalará el último Pebble SDK (3.11.1 en el momento de la escritura).

Después de instalar Pebble SDK, se configura un proyecto básico de Pebble en el directorio actual. Para construir, instalar y ejecutar tu aplicación, debes hacer lo siguiente. Primero, asegúrate de estar en la raíz de tu proyecto Pebble. En este caso, estamos en la raíz del directorio hello-pebble.

A continuación, ejecuta el comando pebble build. Cuando se compila el código, deberías ver el mensaje 'build' finished successfully y una serie de archivos nuevos en el directorio de compilación. El único archivo del que tenemos que preocuparnos ahora es hello-pebble.pbw. Esta es tu aplicación que se instalará en el reloj.

Para ejecutar la aplicación, usamos el emulador de Pebble que viene con el SDK de Pebble. Pebble utiliza el emulador QEMU de código abierto. Actualmente, hay tres generaciones de Pebble que están disponibles para desarrollarse. Pebble y Pebble Steel son la generación original de Pebble. Pebble Time admite 64 colores y utiliza la versión 3.x del sistema operativo, ligeramente más nueva.

La ronda de tiempo de Pebble es casi idéntica a la hora de Pebble, con la excepción de la pantalla circular y más grande. Pebble usa nombres de plataforma para diferenciar las tres generaciones de relojes inteligentes de Pebble.

Aplite es el nombre de plataforma utilizado para Pebble y Pebble Steel.
Basalt es el nombre de la plataforma para Pebble Time.
Y Chalk es el nombre de la plataforma para Pebble Time Round.

Podemos iniciar cualquiera de estos emuladores utilizando el indicador --emulator después del comando pebble install, pasando la plataforma a la que queremos apuntar. Por ejemplo, si quisiéramos ejecutar nuestra aplicación en la plataforma para Pebble Time, ejecutaríamos el siguiente comando en el directorio raíz del proyecto Pebble:

1	pebble install --emulator basalt

Este comando inicia el emulador, inicia la plataforma seleccionada e instala el archivo .pbw almacenado en el directorio de compilación. Esto es lo que deberías ver en el emulador:

El reloj Pebble no tiene pantalla táctil y viene con cuatro botones, up, down, select, y back. Se emulan con las teclas arriba, abajo, derecha e izquierda en tu teclado respectivamente. Al presionar estas teclas, podrás navegar por la aplicación que creaste.

Si abrimos el código fuente del proyecto, verás que está escrito en C. Para usar Pebble.js para el proyecto, usaremos una plantilla que puede ayudarnos a comenzar más rápido. Pebble.js aún se encuentra en fase beta al momento de escribir esto, por lo que algunas cosas pueden cambiar en el futuro.

Deja el directorio del proyecto, crea un nuevo directorio y clona el repositorio de GitHub como se muestra a continuación.

mkdir hello-pebblejs

cd hello-pebblejs

git clone https://github.com/pebble/pebblejs .

Una vez que hayas clonado el repositorio, ábrelo en un editor de texto y echa un vistazo. El código fuente de la aplicación se puede encontrar en el directorio src. Dentro de ese directorio, tienes otros tres directorios, js, simply, util, y un archivo main.c.

El directorio js es donde ponemos el código de la aplicación. El directorio simply es donde el código nativo es el acceso a las funciones JavaScript y el directorio util contiene más código nativo que no necesitamos tocar. El punto de entrada para la aplicación va a vivir en js/app.js. Si compilamos y ejecutamos esta aplicación, deberías ver el siguiente resultado en el emulador:

Abre js/app.js, echa un vistazo y elimina este archivo. Vamos a empezar desde cero.

2. Desarrollemos una aplicación

Lo primero que debemos aprender es cómo mostrar el texto en la pantalla. Pebble.js tiene un framework de interfaz de usuario para crear una instancia de Elements. Con este framework, puedes crear elementos, como texto, rectángulos e imágenes. Agrega la siguiente línea a app.js para requerir el framework.

1	var UI = require('ui');

El primer elemento que usaremos en este tutorial es Window. Las ventanas son los bloques de construcción principales de las aplicaciones Pebble. Hay tres tipos de ventanas.

Se puede usar una Card para mostrar el texto en un formato preformateado, como un título en la parte superior, un subtítulo debajo de ella y un área del cuerpo para un texto.
Un Menu se utiliza para mostrar una lista de opciones.
Una ventana 'Window' es la más flexible y te permite agregar varios elementos.

Para agregar texto a una ventana, también necesitamos Vector2, un módulo para dibujar vectores en 2D y uno con el que estarías familiarizado si hubieras hecho algo con three.js o cualquier otra biblioteca de dibujo de vectores.

Nuestro primer objetivo es crear una ventana; crear y agregar texto a esa ventana y mostrarlo al usuario. El siguiente fragmento de código es el mínimo requerido para mostrar texto en la pantalla.

var UI = require("ui");
var Vector2 = require("vector2");
// This is our main window
var main = new UI.Window();

// This is our text content
var textfield = new UI.Text({
    size: new Vector2(144, 60),
    text: 'Hello PebbleJS'
});

//add the text to the window
main.add(textfield);

//show the window
main.show();

Compila el proyecto e instala la aplicación para ver el resultado. En lugar de hacer ambos pasos por separado, prefiero encadenar los comandos y ejecutar el siguiente comando:

1	pebble build && pebble install --emulator basalt

Si deseas probar en las tres plataformas simultáneamente, puedes agregar los comandos de instalación para cada emulador:

1	pebble build &&
2	pebble install --emulator basalt &&
3	pebble install --emulator aplite &&
4	pebble install --emulator chalk

Notarás que aplite y basalt se ven casi idénticos, mientras que chalk no se ve muy bien. Esto se debe a la pantalla redonda y las dimensiones de la pantalla. Discutiremos la detección de la plataforma en un momento. Por ahora, avanzamos con algunas de las funcionalidades básicas.

En el fragmento de código anterior, creamos un elemento de Texto usando el método Text(). La creación de instancias Text() toma un objeto como parámetro para configurar el elemento Text. La clave de tamaño size define el tamaño de un rectángulo (definido por una instancia de Vector2) en el que se dibuja el elemento Text. El valor de la clave text contiene la cadena que queremos mostrar. Luego agregamos el elemento Text a Window antes de llamar a show() en la ventana para mostrarlo.

Hasta ahora tu aplicación está utilizando la configuración predeterminada para Window y Text. Sin embargo, tenemos la opción de personalizarlos. Tenemos el control para cambiar la posición, el color y el tamaño de la fuente. Hay algunas fuentes del sistema disponibles e incluso tienes la opción de cargar fuentes personalizadas que puedes usar en tu aplicación.

Nuestra aplicación va a contar hasta una fecha determinada. Cuando se inicie la aplicación, queremos que tome la fecha de hoy y calcule cuántos días faltan para una fecha en particular en el futuro. Digamos, por ejemplo, que quería una aplicación que me dijera cuántos días pasarán hasta que Star Wars, Episodio VIII esté aquí.

Sé que quiero crear mi Window principal cuando se inicia la aplicación, calcular el número de días restantes hasta el 15 de diciembre de 2017 y luego agregar ese número a mi pantalla en el centro. Nada demasiado lujoso.

Comencemos mostrando un número estático, no muy diferente del código actual "Hello PebbleJS" que escribimos. En su lugar, usamos una variable como el valor de la clave text y agregamos una nueva clave, textAlign, para centrar el texto.

var UI = require('ui');
var Vector2 = require('vector2');
var daysRemaining = "400";

var main = new UI.Window();

var text = new UI.Text({
    size: new Vector2(144, 168),
    text:daysRemaining,
    textAlign:'center'
});

//add the text to the window
main.add(text);

//show the window
main.show();

Ejecutar la aplicación te da el resultado que se muestra a continuación.

Como expliqué anteriormente, hay varias fuentes del sistema disponibles. Para este tutorial, usaremos una de las fuentes del sistema, Bitham 42 Bold, y la colocaremos un poco más cerca del centro de la pantalla, tanto horizontal como verticalmente. La opción font toma la cadena de la fuente que deseas utilizar como se indica en la documentación. La posición está determinada por otra instancia de Vector2, que define la posición horizontal y vertical de Text.

Cambia la configuración de Text de esta manera:

var text = new UI.Text({
    size: new Vector2(144, 168),
    text:daysRemaining,
  textAlign:'center',
  position: new Vector2(0, 50),
    font:'BITHAM_42_BOLD'
});

Ahora deberías tener algo parecido a lo siguiente:

Ahora deberías tener algo parecido a lo siguiente:Vamos a reemplazar el valor codificado por el número correcto de días. Cuando clonamos el proyecto de GitHub, obtuvimos todos los archivos necesarios para acceder a las API del dispositivo y varias otras utilidades para crear una aplicación Pebble con JavaScript. Una de estas utilidades es la biblioteca moment.js, que puedes encontrar en el directorio vendor. Esto facilitará el cálculo.

Requiere moment.js en la aplicación y establece la variable daysRemaining en una función con la siguiente implementación:

var moment = require('vendor/moment');

var daysRemaining = function(){
    var eventdate = moment("2017-12-15"); // This is the date we're counting down to - December 15
    var todaysdate = moment(); // A moment instance of todaysdate
    return eventdate.diff(todaysdate, 'days'); // calculate the difference in days.
}

A continuación, cambia la referencia a daysRemaining a una llamada de función como esta:

var text = new UI.Text({
    size: new Vector2(144, 168),
    text:daysRemaining(), // This is now a function call
    textAlign:'center',
    position: new Vector2(0, 50),
    font:'BITHAM_42_BOLD'
});

Si compilas y ejecutas la aplicación, deberías ver el número correcto de días hasta que se lance Star Wars, Episodio VIII. Podríamos dejar esto aquí y tener una aplicación que simplemente muestre el número de días hasta el evento que queremos rastrear, pero ¿por qué no aprovechar la oportunidad de agregar algunas características a la aplicación?

Primero, cambiemos el color de fondo de Window y el color del texto para que el fondo sea blanco y el texto sea más oscuro.

var main = new UI.Window({
    backgroundColor:'white'
});

var text = new UI.Text({
    size: new Vector2(144, 168),
    text:daysRemaining(),
    textAlign:'center',
    position: new Vector2(0, 50),
    font:'BITHAM_42_BOLD',
    color:'black'
});

Y agreguemos otro elemento Text para indicar qué representa el número. Creamos un nuevo elemento Text y lo pasamos por opciones de tamaño, posición, fuente, etc.

var eventDetail = new UI.Text({
    size: new Vector2(144, 168),
    text:'Episode VIII',
    textAlign:'center',
    position: new Vector2(0, 15),
    font:'GOTHIC_24',
    color:'black'
});

A continuación, agregamos el elemento Text a la ventana principal después de agregar el objeto text.

1	main.add(text)
2	main.add(eventDetail);

Finalmente, agreguemos un tercer elemento Text para indicar que la cuenta regresiva está en días.

var daysText = new UI.Text({
    size: new Vector2(144, 168),
    text:'days',
    textAlign:'center',
    position: new Vector2(0, 100),
    font:'GOTHIC_24',
    color:'black'
});

main.add(daysText);

Para navegar, Pebble usa botones de hardware en lugar de una pantalla táctil, que se encuentra en la mayoría de los otros relojes inteligentes. Podemos agregar la capacidad de permitir que el usuario se sumerja más profundamente en nuestra aplicación utilizando estas entradas. Digamos, por ejemplo, que también queríamos mostrar la fecha de lanzamiento de las otras próximas películas de la franquicia Star Wars. Rogue One se lanza este año y ya existe una fecha de lanzamiento para el Episodio IX.

La interacción con los botones desencadena eventos a los que podemos suscribirnos. Cuando se detecta un evento, podemos decidir qué acción se debe tomar. Si el usuario hace clic hacia abajo, podríamos construir una nueva ventana para mantener la fecha de lanzamiento de Rogue One y mostrar el número de días hasta el lanzamiento de esa película.

Vamos a suscribirnos al botón de abajo y construir una nueva ventana. El método on() toma tres parámetros, la acción, el botón y un controlador. Como se mencionó anteriormente, los valores posibles del segundo parámetro son arriba, abajo, seleccionar o retroceder. La acción suele ser clic, pero también tienes la opción de usar longClick.

main.on('click', 'down', function(){
    var ro = new UI.Window();
    console.log('Down Clicked');
    ro.show();
});

Ejecuta la aplicación y notarás que obtienes una pantalla negra cuando haces clic hacia abajo. Es posible que te estés preguntando cómo puedes obtener acceso a la consola para ver los registros de Pebble.

Cuando la aplicación se está ejecutando, podemos adjuntarle otra consola y obtener los registros ejecutando pebble logs --emulator basalt. Reemplaza el nombre del emulador si estás utilizando uno de los otros emuladores. Ahora puedes ver que la consola registra el clic de abajo cuando se hace clic en el botón de abajo.

1	pebble logs --emulator basalt
2	[06:33:11] javascript> Down Clicked
3	[06:33:11] javascript> (+) [window 2] : [window 1],[window 2]

Como hicimos antes, calculemos el número de días hasta el lanzamiento y mostremos esta información al usuario. Para hacer uso de la función de cálculo de fecha, pasaré la fecha como un parámetro. No queremos duplicar el código.

var daysRemaining = function(dateString){
    var eventdate = moment(dateString);
    var todaysdate = moment();
    return eventdate.diff(todaysdate, 'days');
}

main.on('click', 'down', function(){
    var ro = new UI.Window();
    console.log('Down Clicked');

    var ro = new UI.Window();

    var roCount = new UI.Text({
        size: new Vector2(144, 168),
        text:daysRemaining("2016-12-16"),
        textAlign:'center',
        position: new Vector2(0, 50),
        font:'BITHAM_42_BOLD',
        color:'white'
    });

    var eventDetail = new UI.Text({
        size: new Vector2(144, 168),
        text:'Rogue One',
        textAlign:'center',
        position: new Vector2(0, 15),
        font:'GOTHIC_24',
        color:'white'
    });

    var roDays = new UI.Text({
        size: new Vector2(144, 168),
        text:'days',
        textAlign:'center',
        position: new Vector2(0, 100),
        font:'GOTHIC_24',
        color:'white'
    });

    ro.add(roCount);
    ro.add(roDays);
    ro.add(eventDetail);
    ro.show();

    ro.show();
});

Si lo deseas, también puedes agregar una pantalla para Episodio IX. Dejaré eso como un desafío para que lo intentes tú mismo.

New Screen Added for Two Additional Countdowns

Deberíamos solucionar el problema de visualización para los usuarios con una ronda de Pebble Time. Para hacer esto, necesitamos detectar en qué plataforma están y actualizar la interfaz de usuario en consecuencia.

En tu aplicación, tienes acceso a un objeto global, Pebble. Este objeto tiene algunas funciones que podemos usar, una de ellas es getActiveWatchInfo(), que devuelve un objeto con la información de tiempo de ejecución de la plataforma.

Podemos obtener el nombre de la plataforma utilizando la clave platform. Si la plataforma es igual a Chalk, necesitamos hacer algunos ajustes a la interfaz de usuario.

En la parte superior de app.js, obtenemos la información de observación de la acción y comprobamos si el nombre de la plataforma actual es igual a chalk.

1	var info = Pebble.getActiveWatchInfo(); // Returns watch info
2	var platform = info.platform; // Returns a string of the platform name
3	var isChalk = platform === 'chalk';

Si ejecutas tu aplicación en la plataforma Chalk, deberías ver lo siguiente:

En cualquier lugar donde dimensionemos y posicionemos los elementos de la interfaz de usuario, debemos hacer pequeños cambios para adaptarse a la pantalla redonda de la plataforma Chalk. Para empezar, creamos una variable que mantiene el ancho de la pantalla.

1	var sWidth = isChalk ? 180 : 144;

Pebble Time Round tiene una pantalla de 180px x 180px. Esto significa que necesitamos modificar la coordenada X de los objetos vectoriales. Creamos tres variables para ayudarnos con esto.

1	var countPosition = isChalk ? 65 : 50;
2	var daysPosition = isChalk ? 120 : 100;
3	var titlePosition = isChalk ? 25 : 15;

El código final se verá algo así:

var UI = require("ui");
var Vector2 = require("vector2");
var moment = require("moment");

var info = Pebble.getActiveWatchInfo();
var platform = info.platform;
var isChalk = platform === "chalk";
var sWidth = isChalk ? 180 : 144;
var countPosition = isChalk ? 65 : 50;
var daysPosition = isChalk ? 120 : 100;
var titlePosition = isChalk ? 25 : 15;

var daysRemaining = function(dateString) {
    var eventdate = moment(dateString); // This is the date we"re counting down to - 24th April
    var todaysdate = moment(); // A moment instance of todaysdate
    var difference = eventdate.diff(todaysdate, "days");
    return difference
};

var main = new UI.Window({
    backgroundColor: "white"
});

var text = new UI.Text({
    size: new Vector2(sWidth, 168),
    text: daysRemaining("2017-12-15"),
    textAlign: "center",
    position: new Vector2(0, countPosition),
    font: "BITHAM_42_BOLD",
    color: "black"
});

//Event Detail Text

var eventDetail = new UI.Text({
    size: new Vector2(sWidth, 168),
    text: "Episode VIII",
    textAlign: "center",
    position: new Vector2(0, titlePosition),
    font: "GOTHIC_24",
    color: "black"
})


//Event Detail Text

var daysText = new UI.Text({
    size: new Vector2(sWidth, 168),
    text: "days",
    textAlign: "center",
    position: new Vector2(0, daysPosition),
    font: "GOTHIC_24",
    color: "black"
})

//add the text to the window
main.add(text);
main.add(eventDetail);
main.add(daysText);

//show the window
main.show();


//ROGUE 1 window

main.on("click", "down", function() {

    var ro = new UI.Window();

    var roCount = new UI.Text({
        size: new Vector2(sWidth, 168),
        text: daysRemaining("2016-12-16"),
        textAlign: "center",
        position: new Vector2(0, countPosition),
        font: "BITHAM_42_BOLD",
        color: "white"
    });

    var eventDetail = new UI.Text({
        size: new Vector2(sWidth, 168),
        text: "Rogue One",
        textAlign: "center",
        position: new Vector2(0, titlePosition),
        font: "GOTHIC_24",
        color: "white"
    })

    var roDays = new UI.Text({
        size: new Vector2(sWidth, 168),
        text: "days",
        textAlign: "center",
        position: new Vector2(0, daysPosition),
        font: "GOTHIC_24",
        color: "white"
    });

    ro.add(roCount);
    ro.add(roDays);
    ro.add(eventDetail);
    ro.show();

    ro.on("click", "down", function() {
        var nine = new UI.Window({
            backgroundColor: "white"
        });

        var nineCount = new UI.Text({
            size: new Vector2(sWidth, 168),
            text: daysRemaining("2019-05-24"),
            textAlign: "center",
            position: new Vector2(0, countPosition),
            font: "BITHAM_42_BOLD",
            color: "black"
        });

        var eventDetail = new UI.Text({
            size: new Vector2(sWidth, 168),
            text: "Episode IX",
            textAlign: "center",
            position: new Vector2(0, titlePosition),
            font: "GOTHIC_24",
            color: "black"
        })

        var nineDays = new UI.Text({
            size: new Vector2(sWidth, 168),
            text: "days",
            textAlign: "center",
            position: new Vector2(0, daysPosition),
            font: "GOTHIC_24",
            color: "black"
        });

        nine.add(nineCount);
        nine.add(nineDays);
        nine.add(eventDetail);
        nine.show();
    });

});

Estoy seguro de que estás de acuerdo en que hay un amplio margen de mejora. Estamos duplicando código en varios lugares, lo cual no es una buena práctica. Dicho esto, espero que ahora tengas un conocimiento básico de cómo puedes crear aplicaciones para Pebble utilizando JavaScript y el SDK de Pebble.

En la última sección de este tutorial, me gustaría mostrarte cómo cargar nuestra aplicación en la tienda de aplicaciones Pebble.

3. Subiendo a la tienda de aplicaciones Pebble

Antes de cargar la aplicación, hay una cosa de la que debemos ocuparnos. Cuando iniciamos esta aplicación desde una plantilla, hay algunos detalles en appinfo.json, el manifiesto de nuestra aplicación, que debemos cambiar. Puedes encontrar este archivo en la raíz del proyecto. Abre appinfo.json y cambia los valores de companyname, shortname, y longname.

Lo último que necesitamos es un UUID (identificador único universal). El manifiesto ya contiene uno, pero cuando intentes cargar el archivo .pbw en la tienda de aplicaciones, obtendrás un error porque este UUID ya está en uso.

La forma más fácil de obtener una es sacarla de la aplicación original hello-pebble que creamos al comienzo de este tutorial, porque no la subiremos a la tienda de aplicaciones. Si eliminaste el proyecto, crea un nuevo proyecto y copia el UUID de ese proyecto. Una vez hecho esto, crea una nueva compilación.

Ahora tenemos una aplicación que está lista para subir a la tienda de aplicaciones Pebble. Dirígete al portal de desarrolladores de Pebble y regístrate para obtener una cuenta o inicia sesión si ya tienes una. Una vez que hayas iniciado sesión, haz clic en el enlace que dice Publicar una aplicación de Pebble.

En la página siguiente, elige Crear una aplicación de reloj en la parte inferior.

El formulario en la siguiente página parece un poco desalentador, pero los campos son bastante autoexplicativos. Para completar el envío, debes cargar al menos dos recursos, los cuales son íconos para tu aplicación.

Después de este paso, te llevarán a la vista previa de la tienda de aplicaciones con algunos datos de la aplicación en el lado derecho. Se requiere que agregues una fecha de lanzamiento para tu aplicación. Para hacer esto, haz clic en Agregar un lanzamiento y carga el archivo .pbw, que puedes encontrar en la carpeta 'build' de tu proyecto.

Una vez hecho esto, regresa a la pantalla de resumen y se verifica el archivo .pbw. Esto generalmente toma solo unos segundos. Una vez verificada, la aplicación está lista para su publicación. Si tienes algún problema aquí y falla la verificación, se te mostrará un mensaje útil que explica por qué falló la verificación.

Antes de continuar y presionar el botón Publicar, es posible que desees agregar algunas capturas de pantalla para que la gente pueda ver qué esperar después de instalarlo. Estas imágenes se muestran en la vista previa de la tienda de aplicaciones.

La herramienta CLI de Pebble tiene un método excelente y fácil para tomar capturas de pantalla. Ejecutando pebble screenshot FILENAME toma una captura de pantalla del emulador actual en ejecución y lo guarda en el directorio actual.

Después de cargar las capturas de pantalla y completar la descripción de las distintas plataformas, estás listo para publicar tu primera aplicación Pebble.

Conclusión

En este artículo, aprendiste cómo instalar y configurar Pebble SDK, cómo usar algunos de los comandos básicos de Pebble CLI y cómo crear una aplicación básica con JavaScript. No hace falta decir que solo hemos arañado la superficie en este tutorial. Hay mucho más que aprender, no solo sobre cómo escribir aplicaciones de Pebble con JavaScript, sino también sobre el desarrollo de Pebble en general y las herramientas disponibles para ti.