Cómo construir una aplicación Pebble

Lo que vas a crear

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 con el 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, le 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 utilizas 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 le permite trabajar sin conexión y utilizar un editor de su 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 lo guía a través de los pasos para instalar la herramienta Pebble y el SDK en OS X y Linux. Pebble recomienda que use CloudPebble para el desarrollo en Windows, pero también puede usar una máquina virtual Linux.

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

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 la Guijarro Comando disponible para usted desde la línea de comando. Corriendo guijarro --versión muestra la información de la versión.

$ ~ pebble --version Pebble Tool v4.2.1

los Guijarro interfaz de línea de comandos incluye varios comandos convenientes. Puedes listar estos comandos ejecutando guijarro - ayuda o guijarro -h. Uno de los comandos configura un nuevo proyecto con un código de repetición. Cree un nuevo directorio y ejecute el siguiente comando en la raíz del nuevo directorio:

guijarro nuevo proyecto hello-pebble

Si esta es la primera vez que crea una aplicación Pebble, se le solicitará que acepte los términos de uso y la licencia de desarrollador de Pebble. Una vez que haya 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 su aplicación, debe hacer lo siguiente. Primero, asegúrese de estar en la raíz de su proyecto Pebble. En este caso, estamos en la raíz de la hola-guijarro directorio.

A continuación, ejecute el construcción de guijarros mando. Cuando se compila el código, debería ver el mensaje 'compilación' terminó con éxito y una serie de nuevos archivos 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, a 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.
  • Basalto es el nombre de la plataforma para el Pebble Time.
  • Y Tiza es el nombre de la plataforma para Pebble Time Round.

Podemos lanzar cualquiera de estos emuladores usando el --emulador bandera después de la instalación de guijarros comando, pasando la plataforma 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:

instalación de guijarros - emulador de basalto

Este comando inicia el emulador, inicia la plataforma seleccionada e instala el .pbw Archivo 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, arriba, abajo, seleccionar, y atrás. Estos son emulados con la arriba, abajo, Correcto, y izquierda teclas en su teclado respectivamente. Al presionar estas teclas, puede navegar por la aplicación que creó.

Si abrimos el código fuente del proyecto, verá 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, por lo que algunas cosas aún pueden cambiar en el futuro.

Deje el directorio del proyecto, cree un nuevo directorio y clone el repositorio de GitHub como se muestra a continuación.

mkdir hello-pebblejs cd hello-pebblejs git clon https://github.com/pebble/pebblejs .

Una vez que haya clonado el repositorio, ábralo en un editor de texto y eche un vistazo. El código fuente de la aplicación se puede encontrar en el src directorio. Dentro de ese directorio, tienes otros tres directorios., js, simplemente, util, y un C Principal expediente.

los js Directorio es donde ponemos el código de la aplicación. los simplemente directorio es donde el código nativo es que las funciones de JavaScript acceden y util directorio 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ía ver el siguiente resultado en el emulador:

Abierto js /app.js, echar un vistazo alrededor, y luego eliminar este archivo. Vamos a empezar desde cero.

2. Construyamos una aplicación

Lo primero que debemos aprender es cómo mostrar el texto en la pantalla. Pebble.js tiene un marco de interfaz de usuario para crear instancias. Elementos. Con este marco, puede crear elementos, como texto, rectángulos e imágenes. Agregue la siguiente línea a app.js requerir el marco.

var UI = require ('ui');

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

  • UNA Tarjeta se puede usar para mostrar texto en un formato preformateado, como un título en la parte superior, un subtítulo debajo de él y un área del cuerpo para un texto.
  • UNA Menú se utiliza para mostrar una lista de opciones.
  • UNA Ventana Es el más flexible y le permite agregarle varios elementos..

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

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

var UI = require ("ui"); var Vector2 = requiere ("vector2"); // Esta es nuestra ventana principal var main = new UI.Window (); // Este es nuestro contenido de texto var textfield = new UI.Text (tamaño: nuevo Vector2 (144, 60), texto: 'Hola PebbleJS'); // agregar el texto a la ventana main.add (campo de texto); // muestra la ventana main.show ();

Genera 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:

Pebble Build && Pebble Install - emulador de basalto

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

pebble build && pebble install - emulador basalto && pebble install --emulator aplite && pebble install --emulator chalk

Te darás cuenta de que aplique y basalto parece casi idéntico mientras tiza 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 Texto elemento que utiliza el Texto() método. La instanciación de Texto() toma un objeto como su parámetro para configurar el Texto elemento. los tamaño clave define el tamaño de un rectángulo (definido por un Vector2 instancia) en la que el Texto Se dibuja el elemento. El valor de la texto La clave contiene la cadena que queremos mostrar. Luego agregamos el Texto elemento a la Ventana antes de que llamemos espectáculo() en la ventana para mostrarlo.

Hasta ahora su aplicación está usando la configuración predeterminada para Ventana y Texto. 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 de sistema disponibles e incluso tiene la opción de cargar fuentes personalizadas que puede usar en su 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 faltarían hasta que Star Wars, Episodio VIII esté aquí..

Sé que quiero crear mi principal Ventana cuando se inicie la aplicación, calcule la cantidad de días restantes hasta el 15 de diciembre de 2017 y luego agregue 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 "Hello PebbleJS" actual que escribimos. En su lugar, utilizamos una variable como el valor de la texto clave y añadir una nueva clave, texto alineado, para centrar el texto.

var UI = require ('ui'); var Vector2 = requiere ('vector2'); var daysRemaining = "400"; var main = new UI.Window (); var text = new UI.Text (size: new Vector2 (144, 168), text: daysRemaining, textAlign: 'center'); // agregar el texto a la ventana main.add (texto); // muestra la ventana main.show ();

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

Como expliqué anteriormente, hay varias fuentes de sistema disponibles. Para este tutorial, nos quedaremos con una de las fuentes del sistema, Bitham 42 Bold, y colóquelo un poco más cerca del centro de la pantalla, tanto horizontal como verticalmente. los fuente La opción toma la cadena de la fuente que desea utilizar como se indica en la documentación. La posición está determinada por otro. Vector2 instancia, que define la Textoposición horizontal y vertical.

Cambiar el TextoLa configuración de esta manera:

var text = new UI.Text (size: new Vector2 (144, 168), text: daysRemaining, textAlign: 'center', posición: new Vector2 (0, 50), fuente: 'BITHAM_42_BOLD');

Ahora debería 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 puede encontrar en la vendedor directorio. Esto facilitará el cálculo..

Exigir momento.js en la aplicación y configurar el Días restantes Variable a una función con la siguiente implementación:

var momento = requiere ('vendedor / momento'); var daysRemaining = function () var eventdate = moment ("2017-12-15"); // Esta es la fecha en la que contamos hasta el 15 de diciembre var todaysdate = moment (); // Una instancia del momento de todaysdate return eventdate.diff (todaysdate, 'days'); // calcula la diferencia en días. 

A continuación, cambie la referencia a Días restantes a una llamada de función como esta:

var text = new UI.Text (size: new Vector2 (144, 168), text: daysRemaining (), // Ahora es una función llamada 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 la cantidad 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 del Ventana y el color del texto para que el fondo sea blanco y el texto más oscuro..

var main = new UI.Window (backgroundColor: 'white'); var text = new UI.Text (size: new Vector2 (144, 168), text: daysRemaining (), textAlign: 'center', posición: new Vector2 (0, 50), fuente: 'BITHAM_42_BOLD', color: ' negro ');

Y vamos a añadir otra Texto Elemento para indicar lo que representa el número. Creamos un nuevo Texto Elemento y opciones de tamaño, posición, fuente, etc..

var eventDetail = new UI.Text (tamaño: nuevo Vector2 (144, 168), texto: 'Episodio VIII', textoAligno: 'centro', posición: nuevo Vector2 (0, 15), fuente: 'GOTHIC_24', color: 'negro');

A continuación, agregamos el Texto elemento a la ventana principal después de añadir el texto objeto.

main.add (texto) main.add (eventDetail);

Finalmente, vamos a añadir una tercera. Texto Elemento para indicar que la cuenta atrás es en días..

var daysText = new UI.Text (tamaño: nuevo Vector2 (144, 168), texto: 'días', textoAlignar: 'centro', posición: nuevo Vector2 (0, 100), fuente: 'GOTHIC_24', color: ' negro '); 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 un nuevo 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. los en() El método toma tres parámetros, la acción, el botón y un controlador. Como se mencionó anteriormente, los posibles valores del segundo parámetro son arriba, abajo, seleccionar, o atrás. La accion suele ser hacer clic, pero también tienes la opción de usar clic largo.

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

Ejecute la aplicación y notará que obtiene una pantalla negra cuando hace clic hacia abajo. Puede que se esté preguntando cómo puede 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 troncos de guijarros - emulador de basalto. Reemplace el nombre del emulador si está utilizando uno de los otros emuladores. Ahora puedes ver que la consola registra Presionado abajo cuando se hace clic en el botón de abajo.

registros de guijarros - emulador de basalto [06:33:11] javascript> pulsado Abajo [06:33:11] javascript> (+) [ventana 2]: [ventana 1], [ventana 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 (tamaño: nuevo Vector2 (144, 168), texto: daysRemaining ("2016-12-16"), textAlign: 'center', posición: nuevo Vector2 (0, 50), fuente: 'BITHAM_42_BOLD', color: 'blanco'); var eventDetail = new UI.Text (tamaño: nuevo Vector2 (144, 168), texto: 'Rogue One', textoAligno: 'centro', posición: nuevo Vector2 (0, 15), fuente: 'GOTHIC_24', color: 'blanco'); var roDays = new UI.Text (size: new Vector2 (144, 168), texto: 'days', textAlign: 'center', position: new Vector2 ( 0, 100), fuente: 'GOTHIC_24', color: 'blanco'); ro.add (roCount); ro.add (roDays); ro.add (eventDetail); ro.show (); ro.show ( ););

Si lo desea, también puede agregar una pantalla para Episodio IX. Dejaré eso como un reto para que pruebes tú mismo..

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., Guijarro. 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 usando el plataforma llave. Si la plataforma es igual a tiza, Necesitamos hacer algunos ajustes a la interfaz de usuario..

En la cima de app.js, Obtenemos la información de observación de la acción y verificamos si el nombre de la plataforma actual es igual tiza.

var info = Pebble.getActiveWatchInfo (); // Devuelve watch info var platform = info.platform; // Devuelve una cadena del nombre de la plataforma var isChalk = platform === 'chalk';

Si ejecuta su aplicación en la plataforma Chalk, debería 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..

var sWidth = isChalk? 180: 144;

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

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

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

var UI = require ("ui"); var Vector2 = requiere ("vector2"); var momento = requiere ("momento"); var info = Pebble.getActiveWatchInfo (); plataforma var = info.platform; var isChalk = plataforma === "tiza"; 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); // Esta es la fecha en la que volvemos a contar hasta el 24 de abril var todaysdate = moment (); // Una instancia del momento de todaysdate var diferencia = 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 ", posición: nuevo Vector2 (0, countPosition), fuente:" BITHAM_42_BOLD ", color:" negro "); // Texto del detalle del evento var eventDetail = new UI.Text (size: new Vector2 (sWidth, 168), texto: "Episodio VIII", textoAlinear: "centro", posición: nuevo Vector2 (0, título de posición), fuente: "GOTHIC_24", color: "negro") // Texto del detalle del evento var daysText = new UI.Text ( tamaño: nuevo Vector2 (sWidth, 168), texto: "días", textoAlinear: "centro", posición: nuevo Vector2 (0, díasPosición), fuente: "GOTHIC_24", color: "negro") // agregar el texto a la ventana main.add (texto); main.add (eventDetail); main.add (daysText); // muestra la ventana main.show (); // ROGUE 1 window main.on ("click", "dow n ", function () var ro = new UI.Window (); var roCount = new UI.Text (tamaño: nuevo Vector2 (sWidth, 168), texto: daysRemaining ("2016-12-16"), textAlign: "center", posición: nuevo Vector2 (0, countPosition), fuente: "BITHAM_42_BOLD", color: "blanco"); var eventDetail = new UI.Text (tamaño: nuevo Vector2 (sWidth, 168), texto: "Rogue One", textAlign: "center", posición: nuevo Vector2 (0, titlePosition), fuente: "GOTHIC_24", color: "blanco") var roDays = new UI.Text (size: new Vector2 (sWidth, 168), texto: "days", textAlign: "center", position: new Vector2 (0, daysPosition), fuente: "GOTHIC_24 ", color blanco" ); 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), fuente: "BITHAM_42_BOLD", color: "black"); var eventDetail = new UI .Text (tamaño: nuevo Vector2 (sWidth, 168), texto: "Episodio IX", textoAligno: "centro", posición: nuevo Vector2 (0, títuloPosición), fuente: "GOTHIC_24", color: "negro") var nineDays = new UI.Text (size: new Vector2 (sWidth, 168), text: "days", textAlign: "center", position: new Vector2 (0, daysPosition), fuente: "GOTHIC_24", color: " negro "); nine.add (nineCount); nine.add (nineDays); nine.add (eventDetail); nine.show ();); );

Estoy seguro de que está 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 mostrarle 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 para nuestra aplicación, que tenemos que cambiar. Puedes encontrar este archivo en la raíz del proyecto. Abierto appinfo.json y cambiar el nombre de empresanombre corto, y nombre largo valores.

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

La forma más fácil de conseguir uno es tomarlo del original. hola-guijarro La aplicación que creamos al inicio de este tutorial, porque no la subiremos a la tienda de aplicaciones. Si eliminó el proyecto, cree un nuevo proyecto y copie el UUID de ese proyecto. Una vez hecho esto, crea una nueva construcció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 haya iniciado sesión, haga clic en el enlace que dice Publicar una aplicación Pebble.

En la página siguiente, elija Crear un watchapp en el fondo.

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

Después de este paso, lo 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 agregue una fecha de lanzamiento para su aplicación. Para ello, haga clic en Añadir un lanzamiento y subir el .pbw Archivo, que puedes encontrar en la carpeta de compilación de tu proyecto..

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

Antes de seguir adelante y golpear la Publicar botón, es posible que desee 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. Corriendo Captura de pantalla de guijarros tome una captura de pantalla del emulador actual y guárdelo en el directorio actual.

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

Conclusión

En este artículo, aprendió 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 Pebble con JavaScript, sino también sobre el desarrollo de Pebble en general y las herramientas disponibles para usted..