*4.1. Study Design*

A three-hour workshop was conducted with students of a computer programming fundamentals course from a vocational education and training module. This workshop was implemented in the frame of a Code Week initiative (https://codeweek.eu/view/242496/desarrollo-sencillo-de-apps-movilespara-iot). The research question for this study was the following: is it easier for students to develop IoT mobile apps using VEDILS than using App Inventor?. To evaluate the legibility degree and ease of use of the IoT blocks compared to App Inventor's, we designed the following experimental scenario: During the first hour, students learned about IoT, its basic concepts, components and architectures. Later on, they learned about the features and applications of the Raspberry Pi single-board computer and Sense HAT add-on. Then, they were presented with the running IoT sample app described below. The instructor taught students how to design the UI of the app as well as the blocks required to connect and disconnect the Raspberry Pi device through Bluetooth. Later on, the students were provided with a base project for both App Inventor and VEDILS to be completed during the rest of the session (see Figure 7a). Finally, they were asked to fill out a short questionnaire, including both quantitative and qualitative question items.

A quasi-experimental study was conducted with the students. One half of the participants created first the app with App Inventor and then with VEDILS; whereas the other half did it in reverse order. To complete the app projects, the students were also provided with step-by-step tutorials to guide the development with both tools.

**Figure 7.** Developing the mobile app for interacting with the external Internet of Things (IoT) device. (**a**) Students programming the mobile app; (**b**) Android app communicating with the Raspberry and its Sense HAT add-on.

#### *4.2. The Sample App*

The proposed app shows the average temperature received from the IoT sensor for the last 10 s. In order to bring the IoT app development closer to a more realistic scenario, the temperature measurements of the Raspberry Pi were generated from a simulation server. The python server running in the device generated random value series in the [14, 104] interval, measured as degrees Fahrenheit. Occasionally, abnormal values (i.e., 127◦F) were generated to emulate measurement errors. The app had to obtain the temperature data, convert it into Celsius degrees, remove outliers and compute the average of the series.

#### 4.2.1. User Interface Design

The app layout (see the picture in Figure 7b) is based on a vertical arrangemen<sup>t</sup> composed of several elements. At the top of the screen, there are buttons for connecting and disconnecting to/from the Raspberry Pi. A chart depicting the evolution of the temperature is included in the centre of the screen. At the bottom of the screen, there are buttons for sending commands to change the Sense HAT LED panel background colour. The LED panel in the picture shows the temperature measured every second.

From the user interface perspective, the only difference between the App Inventor and VEDILS versions is that the former requires a *Canvas* component, whereas the latter uses the new *Chart* component. Nevertheless, from the user programming perspective, there are some remarkable differences, as explained next.

#### 4.2.2. Programming with App Inventor

A *Clock* component must be used to periodically check if there is new data to receive via the Bluetooth connection. Then, the developer must call the *ReceiveSignedBytes* method and then iterate through the data collection. For each individual value, a local variable is used to store the result of applying the conversion formula between the two measurement scales. Later on, a conditional statement must be applied to check if the calculated value is not an outlier. If so, that value must be added to an *accumulator* variable and increment by one the *counter* of valid measurements. Later on, the accumulator variable must be divided by the counter to compute the average (see Figure 8). Two text labels are accordingly updated to show the received raw of data and the computed average. Finally, the *updateChart* procedure is called to update the visual representation. Figure 9 shows how the *DrawLine* block in the *Canvas* must be used to depict the temperature along time as a line chart. This block requires a pair of (x,y) coordinates for both source and target points. Since the (0,0) point of the Canvas corresponds with its left upper corner, it is necessary to turn the temperature values into the proper values for the Y-axis. Besides, the X-axis must be consequently moved forward for each time instant. Some other variables must also be used to control the coordinates. Furthermore, at the beginning of the drawing process and every time the canvas right-edge is reached, the drawing area must be cleared and some horizontal lines must be drawn to represent certain temperature milestones (0◦, 10◦, etc.). Besides, some variables must be reinitialised.

**Figure 8.** Processing temperature data with App Inventor.


**Figure 9.** Drawing temperature data with App Inventor.

#### 4.2.3. Programming with VEDILS

With VEDILS (see Figure 10), the developer must handle the *StreamDataReceived* block, which directly provides a data stream of temperature measurements. This data stream is pipelined through a series of processing steps. With the *Map* block, every item in the stream is mapped into its corresponding Fahrenheit value; with the *Filter* block, outliers are discarded according to the validity condition; and finally, with the *Reduce* block, the data stream is summarized by computing an average. The *AppendData* block is used to depict the average temperature along time in the line chart. Thus, the computed value must be sent to the *Chart* component, together with the current timestamp provided by *Clock*. Previously, the *Chart* must have been configured with the category and value axes (see Figure 11).


**Figure 10.** Processing temperature data with VEDILS.


**Figure 11.** Drawing temperature data with VEDILS.
