Introduction to Protocoder and “Hello world!”

Welcome to the latest entry of the Programming with Arduino and Protocoder for makers course! In this entry, we are going to install Protocoder on our device (whether a mobile or a tablet), and take our first steps. Protocoder is a development environment for speedy prototyping of Android apps. It includes a comprehensive web IDE and many examples, and everything is pocket-sized!

Downloading the mobile app

The first step is to download the app to your terminal from the Protocoder website under the downloads section. The best thing to do is o download the Protocoder app onto the terminal that you will be using. You can download any of the last two existing versions, the only difference between them is that the normal version does not allow text messages and calls, which is why we won´t be using these features. When we press on the chosen version, an .apk (Application Package File) will be downloaded. If you have downloaded the app from our Android device, press on the download notification to install it. Otherwise, you will need to pass the application to your terminal and install Protocoder via a file explorer. If you haven´t installed an app using an .apk file before, a warning message will appear. To disable it, select the unknown sources option from the Android security settings menu. Watch the video below on how to install Protocoder.

Accessing the Protocoder IDE

To program in Protocoder, the Android device and the computer you’re using can be connected via a Wi-Fi access point (the recommended method) or via a USB cable (this method is explained on the website below the downloads). To access the Protocoder development environment or IDE, we need to use a web browser and enter the IP address shown at the bottom of the Protocoder interface. You can see an example in the picture below.

Once we have accessed it, we can start creating our own programs.

Creating a new project

To create a new project, we have to press the New Project button in the Protocoder interface or the menu icon (in the top right corner) of the Protocoder app on Android, followed by New. All you need to do is give the project a name and you´re ready to start creating. We will call this project “Hola_mundo” (Hello world) and we will use it to find out how Protocoder works and get started. Once the project has been created, we can start to edit to.

Editing the project

To edit the project, we can access the IP, as explained earlier under Accessing the Protocoder IDE, and then press on the project that we have just created, if done so via the mobile interface. If you created the project via the web interface, you will already be in the editor screen. The project options appear at the top of the screen, such as Save, which enables us to save the project, Projects, will displays the project and examples as a list, and Run, which executes the code on our terminal. On the right, you will see Quick Reference, where we can find the various “commands” that we can include in our project. Just below Quick Reference, you will see a small box which enables you to upload any type of file, such as images or audio, which we will then be able to make use of. To remove uploaded files using a file explorer on our mobile device, we will need to go to the Protocoder folder, and then delete them from the project folder. The console also appears at the bottom of the screen, where we can print information and view any programming error messages.

Creating the message

Protocoder uses JavaScript to enable Android apps to be written, so we will be using the syntax of this language, as well as JavaScript functions in our programs. For this project, we are going to create a text box that will occupy practically the entire width of the screen. There are “header” options which usually go at the top of the screen:

ui.toolbar.title("¡Hola mundo!"); // We enter the title (Hello world!)
ui.toolbar.bgColor(55, 155, 155, 255); // We change the colour of the title bar
ui.toolbar.show(true); // We set it to display the title bar
//ui.screenMode("fullscreen"); // The app can display it in full screen
ui.screenOrientation("portrait"); // We set it to portrait mode

ui.toolbar.title("¡Hola mundo!"); // We enter the title (Hello world!)

ui.toolbar.bgColor(55, 155, 155, 255); // We change the colour of the title bar

ui.toolbar.show(true); // We set it to display the title bar

//ui.screenMode("fullscreen"); // The app can display it in full screen

ui.screenOrientation("portrait"); // We set it to portrait mode

You don´t have to include them options, but if we do, we will have better control over how our application is displayed. Now we will declare some variable which will help the visual elements that we create to fit any screen size, making it easier to share our app without the need to adjust it. To declare a variable, we use this syntax:

 var nombre_variable = dato;

1	var nombre_variable = dato;

In contrast to other languages, Javascript variables adapt to the type of data assigned to it, so there is no need to declare the type of variable.

var margin = 10; // The size of the margin we will use
var w = ui.screenWidth - 2*margin; // We will use the w variable as the width of the elements
var h = 150; // We will use the h variable as the height of the elements

var margin = 10; // The size of the margin we will use

var w = ui.screenWidth - 2*margin; // We will use the w variable as the width of the elements

var h = 150; // We will use the h variable as the height of the elements

On including the var w = ui.screenWidth – 2*margin code line, we make sure that any element we add to the user interface will practically take up the entire screen on any terminal. Once the “header” of our app has been configured, we can save it and use it again as a outline every time we create a new application. We will declare and “configure” the element that will form our first app. To do this we will use this code:

var holaMundo = ui.addText("¡Hola Mundo!",margin,margin,w,h);
// The parameters are text, positions X and Y, width and height

1 2	var holaMundo = ui.addText("¡Hola Mundo!",margin,margin,w,h); // The parameters are text, positions X and Y, width and height

As with the other variables, first we name them and then we need to use ui.addText() which tells Protocoder that the variable that we are going to create is within the UI API, and that later we want to add some text. We send the parameters required for generating the text in parenthesis, which are:

ui.addText(texto_a_mostrar,posición_X,posición_Y,ancho,alto);

1	ui.addText(texto_a_mostrar,posición_X,posición_Y,ancho,alto);

The different elements that can be included have different parameters. We will use examples and the reference to find out about each parameter. Once we have finished developing the application, if we hit Run, we will see how the application is executed the on our device. We can also access the applications created at any time via terminal, by pressing the “icon” for each application in the Projects menu.

Sharing our project

To share the project via the list of Protocoder projects on the mobile device, we press the context menu icon (three dots) in the top right corner of the project name, followed by Share project as .proto file and finally we select the service we want to share it with. Now you can start creating and sharing your own projects!