¡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.
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.
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.
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:
|
1 2 3 4 5 |
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 |
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:
|
1 |
var nombre_variable = dato; |
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.
|
1 2 3 |
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 |
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:
|
1 2 |
var holaMundo = ui.addText("¡Hola Mundo!",margin,margin,w,h); // Los parámetros son texto, posición X, posición Y, ancho, alto |
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:
|
1 |
ui.addText(texto_a_mostrar,posición_X,posición_Y,ancho,alto); |
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.
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!
