Erasmus+



SMART WELLNESS. Healthy Youth through digital technology, science and entrepreneurial culture.

eTwinning

SmartWellness

IESBI

zsPacov

Displaying the menu (top left) and clicking on "IAM", we are shown the project permissions where the created service account appears.

By clicking on "service accounts" we obtain the details of it. This service account together with the Credential (File format .p12) will be used in the App that we will create with App Inventor.

 

WE PREPARE THE FUSION TABLE "GLUTEN FREE" TO BE USED FROM APP INVENTOR

Once we have created the Fusion Table "Gluten Free" and enabled the Fusion Table API with the corresponding Credential and Service Account, we must add that service account to the list of users with permission to write and read the aforementioned Dynamic Table.

To perform this operation we will proceed as follows

Open the Fusion Table and click on the "Share ..." option in the File pull-down menu

 

We copy the ID of the service account that we can find GoogleCloud Platform

 

 and we paste it in Invite people. We deactivate "Notify people" and we accept

It will request confirmation of the invitation

Once the operation is completed we will have a window similar to this one

Finally, by clicking on the “About this table” option in the File drop-down menu, we find the identifier of the table that is necessary in the application that we are going to develop with App Inventor.

 

We are going to develop an easy application, by way of example, using the Fusiontable component and the Gluten Free table that we have created.

GLUTEN FREE APP

 We are going to create an application to assign ratings between 0 and 10 to restaurants in a list formed by 4 different establishments, which will be saved in the Fusion Table Gluten free. The application will consist of a single screen and will show the average rating obtained by each restaurant as well as the number of registered ratings.

The appearance that the App will present will be similar to the following:

Components and design

In addition to the not visible component FusiontablesControl1 to manage the Fusion Table "Gluten Free" (created previously), we will have to add the extension file ".p12" that contains the authorization credential.

We will also need the service account that has the permission to access the aforementioned Fusion Table and the Identifier of the table.

For the choice of restaurant we will use 4 buttons, and to rate them a slider that will vary between 0 and 10. Labels will show the information. We will use vertical and horizontal arrangements and labels in the design editor to achieve the desired appearance.

Finally, we will use some buttons to send the score to the Fusion Table and to read the content of it (Reload button), respectively.

Next we have the list of components with their properties

 

 

Components

Properties

Screen1

·         AlignHorizontal: Center

·         AppName: Gluten Free

·         BackgroundColor: Orange

·         ScreenOrientation: Portrait

VerticalArrangement1

·         AlignHorizontal: Center

·         Width: 85%

·         BackgroundColor: Dark Gray

Label1

·         Text: Choose a restaurant

·         TextColor: Cyan

Labels 2, 3, 4,  8, 9, 15, 16, 17, 18, 19, 20 and 25 (will be used for distance buttons and others components)

·         Height: 3 píxeles

·         Text: blank

HorizontalArrangement1 and 2

·         AlignHorizontal: Center

·         BackgroundColor: None

·         Width: fill parent

HorizontalArrangement3 and 4

·         AlignHorizontal: Left

·         BackgroundColor: None

·         Width: 70%

Button1, 2, 3 and 4 (Restaurants)

·         BackgroundColor: Cyan

·         Text: Restaurant 1 (2, 3 and 4, respectively)

Label5

·         Text: Restaurant selected:

·         TextColor: White

Label_restaurant

·         Text: 0

·         TextColor: Cyan

Label7

·         Text: Rating:

·         TextColor: White

Label_rating

·         Text: 10

·         TextColor: Orange

Slider1

·         Width: 70%

·         MaxValue: 10

·         MinValue: 0

·         ThumbPosition: 10

Button_Send

·         BackgroundColor: Green

·         Width: 90 pixels

·         Shape: rounded

·         Text: Send

VerticalArrangement2

·         AlignHorizontal: Center

·         Width: 85%

·         BackgroundColor: Dark Gray

HorizontalArrangement5, 6, 7, 8 and 9

·         AlignHorizontal: Left

·         Width: 80 %

Label10

·         Text: No Restaurant

·         Width: 30%

·         TextAlignment: center

·         TextColor: White

Label11

·         Text: Average

·         Width: 20%

·         TextAlignment: center

·         TextColor: White

Label12

·         Text: No Ratings

·         Width: 30%

·         TextAlignment: center

·         TextColor: White

Label13, 14, 21 and

·         Text: 1 (2, 3 and 4, respectively)

·         Width: 30%

·         TextAlignment: center

·         TextColor: White

Label_R1_average, Label_R2_average, Label_R3_average, Label_R4_average

·         Text: 0

·         Width: 20%

·         TextAlignment: center

·         TextColor: White

Label_R1_No_ratings, Label_R2_No_ratings, Label_R3_No_ratings, Label_R4_No_ratings

·         Text: 0

·         Width: 30%

·         TextAlignment: center

·         TextColor: White

Button_reload

·         BackgroundColor: Green

·         Width: 90 pixels

·         Shape: rounded

·         Text: Reload

FusiontablesControl1

·         KeyFile: name.p12

·         ServiceAccountEmail: name@name*.iam.gserviceaccount.com

·         UseServiceAuthentication: Enable

 

Template Settings
Select color sample for all parameters
Red Green Blue Gray
Background Color
Text Color
Google Font
Body Font-size
Body Font-family
Scroll to top