entrada-POST

¡Bienvenido a una nueva entrada del curso de Programación para con Protocoder!

En esta entrada vamos a instalar protocoder en nuestro terminal, ya sea teléfono o tablet, y vamos a dar los primeros pasos. Protocoder es un entorno de desarrollo para prototipado rápido de aplicaciones para Android. Incluye un IDE web completo y multitud de ejemplos, ¡y todo ello en nuestro bolsillo!

Descargando la aplicación móvil

El primer paso es descargar la aplicación en el terminal, para ello tenemos que dirigirnos a la web de Protocoder y una vez allí a la sección de descargas. Conviene descargar la aplicación de protocoder desde el terminal que vayamos a utilizar.
download_Protocoder

Podéis descargar cualquiera de las dos versiones existentes, la única diferencia entre ambas es que la versión normal no incluye permisos para mensajes de texto y llamadas, por lo que no podremos utilizar estas características.

Cuando pulsemos sobre la versión que hemos escogido, se descargará un archivo .apk, o Application Package File. Si hemos descargado la aplicación desde nuestro dispositivo Android, pulsar sobre la notificación de descarga y se instalará. En caso contrario, tendréis que pasar la aplicación a vuestro terminal y desde un explorador de archivos instalar la aplicación de Protocoder.

Si no habéis instalado ninguna aplicación utilizando un archivo .apk, aparecerá un mensaje de advertencia, para desactivarlo hay que marcar la opción orígenes desconocidos dentro del menú seguridad de los ajustes de Android.

A continuación podéis ver un vídeo con la instalación de Protocoder.

Accediendo al IDE de Protocoder

Para programar en Protocoder podemos utilizar un punto de acceso Wifi, en el que estén conectados tanto el dispositivo Android como el ordenador que estemos utilizando ( método recomendado a utilizar ) o bien conectado por medio de un cable usb (método explicado en la página web a continuación de las descargas).

Para acceder al entorno de desarrollo, o IDE, de Protocoder hay que utilizar un navegador web e introducir la dirección IP que se muestra en la parte de abajo de la interfaz de Protocoder. Podéis ver un ejemplo en la imagen siguiente.

ip_protocoder

Una vez que hemos accedido podemos empezar a crear nuestros propios programas.

Creando un nuevo proyecto

Para crear un nuevo proyecto tenemos que pulsar sobre el botón New Project en la interfaz de Protocoder, o bien en la aplicación de Protocoder en Android sobre el icono de menú (esquina superior derecha) y después en New. Solo faltará asignar un nombre a este nuevo proyecto y ya estaremos listos para empezar a crear.

Este proyecto lo llamaremos “Hola_mundo” y lo utilizaremos para empezar a conocer como funciona Protocoder y dar nuestros primeros pasos.

Una vez que el proyecto este creado, comenzaremos a editarlo.

Editando el proyecto

Para editar el proyecto tenemos que acceder a la IP como se ha explicado en el apartado Accediendo al IDE de Protocoder y pulsar sobre el proyecto que acabamos de crear si lo hemos creado desde la interfaz móvil. En el caso de que hayamos creado el proyecto desde la interfaz web ya estaremos dentro de el editor.

interfaz_web

En la parte superior de la pantalla nos encontramos con las opciones relativas al proyecto, como Save, que nos permitirá guardar el proyecto, Projects, que cambiará la pantalla a un listado de nuestros proyectos y ejemplos, y Run, que ejecutará el código en nuestro terminal.

En la parte derecha encontramos Quick Reference, o referencia rápida, donde encontraremos los diferentes “comandos” que podremos incluir en nuestro proyecto.

Justo debajo de la referencia rápida encontramos un pequeño cuadro que nos permite subir cualquier tipo de archivo, como imágenes o audio, para poder utilizarlo en nuestro equipo. Para eliminar los archivos subidos, desde un explorador de archivos en nuestro terminal móvil, tenemos que desplazarnos hasta la carpeta de Protocoder, y dentro de ésta, a la carpeta del proyecto, pudiendo eliminar así los archivos.

Además, en la parte inferior de la pantalla está la consola, donde podremos imprimir información y veremos los mensajes de error si existe algún fallo en la programación.

Creando el “¡Hola mundo!

Protocoder utiliza Javascript para facilitar la escritura de aplicaciones Android, por ello, utilizaremos la sintaxis propia de este lenguaje, además, podremos utilizar funciones propias de Javascript en nuestros programas.

Para este proyecto vamos a crear un cuadro de texto que ocupe prácticamente el ancho de la pantalla. Hay algunas opciones que acostumbro a poner como “cabecera” de todos los programas, estas son:

Estas opciones no es necesario incluirlas, pero si lo hacemos podremos tener un mayor control sobre como se mostrará nuestra aplicación.

A continuación, vamos a declarar variables que ayudarán a que los elementos visuales que creemos se ajusten a cualquier tamaño de pantalla, lo cual facilitará que podamos compartir nuestra aplicación sin necesidad de modificaciones y ajustes.

Para declarar una variable utilizamos la sintaxis:

A diferencia de otros lenguajes, las variables en Javascript se “adaptan” al tipo de datos que asignemos, por lo que en la declaración no tenemos que poner de que “tipo” es la variable.

Al incluir la línea de código var w = ui.screenWidth – 2*margin nos estamos asegurando que cualquier elemento que incluyamos dentro de la interfaz de usuario ocupará prácticamente el tamaño completo de la pantalla en cualquier terminal.

Una vez que tenemos configurado la “cabecera” de nuestra aplicación, que podemos guardar a parte y utilizar como borrador cada vez que creemos una aplicación nueva, vamos a pasar a declarar y “configurar” el elemento que conformará nuestra primera aplicación. Para ello, utilizamos el siguiente código:

Como con el resto de variables en primer lugar damos el nombre, y después utilizamos ui.addText() que indica a protocoder que la variable que vamos a crear esta dentro de la API de UI, del inglés User Interface o interfaz de usuario, y después que queremos añadir texto. Dentro del paréntesis enviamos los parámetros necesarios para generar el texto, que son:

Los diferentes elementos que podemos incluir tienen diferentes parámetros. Para saber que es cada parámetro utilizaremos los ejemplos y la referencia.

Una vez que hemos terminado el desarrollo de la aplicación, pulsamos sobre Run y veremos como se ejecuta la aplicación en nuestro terminal. También podemos acceder a las aplicaciones que hayamos creado en cualquier momento desde nuestro terminal, pulsando encima del “icono” de cada aplicación en el menú Projects.
Hola_mundo_BQ_Aquaris_E4

Compartiendo nuestro proyecto

Para compartir el proyecto, desde el listado de proyectos de Protocoder en el terminal móvil, pulsamos sobre el icono de menú contextual (tres puntos) en la esquina superior derecha del nombre del proyecto, después en Share project as .proto file y por último escogemos el servicio por el que queremos compartirlo.

¡Ya puedes empezar a crear tus proyectos y compartirlos!

11 comentarios

  1. En el ejemplo del capítulo, “¡Hola mundo!” se conecta todo perfectamente, me aparece el título pero no aparece el texto.
    Adjunto programa, por si alguien ve el problema del mismo.
    Gracias!

    /*
    *
    * Description ……..
    * by ……..
    *
    */
    ui.toolbar.title(“¡Hola mundo!”); // Modificamos el titulo
    ui.toolbar.bgColor(55, 155, 155, 255); // Modificamos el color de la barra de titulo
    ui.toolbar.show(true); // Obligamos a que se muestre la barra de titulo
    // ui.screenMode(“fullscreen”); // Es posible hacer que la aplicación se muestre a pantalla completa
    ui.screenOrientation(“portrait”); // Obligamos a que la aplicación se muestre en modo retrato

    var margin = 10; //tamaño del margen que utilizaremos.
    var w = ui.screenWidth – 2*margin; //utilizaremos la variable w como ancho para los elementos
    var h = 150; // utilizaremos la variable h como alto para los elementos
    var holaMundo = ui.addText(“¡Hola Mundo!”,margin,margin,w,h);
    // Los parámetros son texto, posición X, posición Y, ancho, alto

    1. Luis Díaz

      Hola Jorge,

      En algunos terminales no se ve correctamente el texto u otras etiquetas debido al color del texto. Puedes modificar el color con la orden:

      holaMundo.color(“#000000″);

      Con #000000 cambias el color del texto a negro. Los parámetros que utiliza son colores html.

      Un saludo.

      1. Hola Luis,

        Muchas gracias por tu ayuda, ha funcionado perfectamente, GRACIAS!!!
        Abusando un poco mas, donde podria encontrar un manual, lo mas completo posible, con los comandos del Protocoder .

        Saludos.

      2. Hola Luis.
        Tengo el mismo problema. Mi terminal es un MotoE 2genertaion
        Perdona pero no entiendo como puedo introducir la orden:

        holaMundo.color(#000000″);

        entre que linea y que linea? Tengo que poner delante “var”

        …lo siento, soy totalmente nuevo en esto.

        Gracias.

  2. Hola Luis, tengo una duda con la instalación. Verás tengo un ordenador Asus Notebook (vamos que se puede convertir en tablet, ademas tiene bluetooth) asi que, ¿podría descargar la aplicación en el? Y de ser así qué pasos debo hacer, porque fui al enlace lo descargue y cuando lo abrí no lo leía

  3. Luis Díaz

    Hola Bruno,

    Para descargar la aplicación necesitas un terminal con Android, ya que solo funciona bajo este sistema operativo. Una de las opciones que puedes usar para utilizarlo en tu ordenador es instalarlo dentro de un emulador de Android, pero no tendrás todas las características disponibles debido a la falta de funcionalidad ya que el dispositivo es emulador, no un terminal real Android.

    Un saludo.

    1. Luis Díaz

      Hi!

      We have not seen that error before. Have you tried with another browser? It seems that some file is missing, try removing the app and every file in your phone memory and installing again.

Los comentarios están cerrados.