Cleo Espiritu

Getting Started with Google App Maker 2: Learn the Building Blocks

If you have never developed an application before, and find yourself lost when you load app maker for the first time, this is the guide for you!


The Getting Started with Google App Maker series is targeted help newcomers of Apps Script / App Maker and software development to start writing their first web app with App Maker

This is Part 2 of the series; view Part 1 here.


If your G-Suite Admin has enabled App Maker for your organization, you can start building apps right away by visiting appmaker.google.com, which is an editing tool for you and/or your team to build your web application.

This article will introduce you to the “building blocks” of App Maker. I’ll cover how to build these blocks out in subsequent articles.

Building Blocks

The three “Building Blocks” for building an app in app maker is as follows:

    1. Data – this is where you will be defining the data you are displaying, collecting and storing in your application. 
    2. User interface (Pages) – this is where you will be defining what your end-users will see when they go to your application
    3. Scripts – this is the “intelligent” part of your application where your business rules, logic and special processing is implemented.

Building an app in App Maker involves you, as the developer to build out these blocks, then publish them as an app for your end-users to use.


Data

Note: to take advantage of the data modeling tools in App Maker, your G-suite admin needs to do a one time setup of a default Cloud SQL instance for App Maker. see Google's documentation for more info, or ask your G-suite admin.

In App Maker, you need to create data models to save information you are going to collect from your user.

This is analogous to creating a table in a spreadsheet for your data – the columns are your fields, and each row is an individual record or item.

Example table of Sandwich orders, if you were to record them on a spreadsheet

In App Maker, a table like this would become a Data Model. There are different types of models, but the one beginner uses the most will be the “Google Cloud SQL” table type, which will store the table in a database that your G-Suite Admin has set up.

How the Sandwich Orders table look like as a data model in App Maker

With a Google Cloud SQL Data model, a field “Id” is automatically created to each model. Much like the row number on a spreadsheet, the Id is used to refer to specific records in your table.

Taking a look a the App Maker data model screenshot above and you may wonder – “ok there’s the table – how would my users add data to that?” – this is where building the user interface come into play.

User Interface (Pages)

As the app developer, you’ll be the one to create the pages your users would use. If you have worked with Google Forms or Google Sites before, this process is quite similar – you’ll be using the Page Editor and pre-defined components (named widgets) to create the view your user would see.

The App Maker Page Editor. You can drag widgets from the left onto the Page to build the view for your user. The Page is essentially a “blank canvas” to start, allowing you to create your page however you want it!

On the right you’ll find the Property Editor, which allows you to tweak properties of the selected widget, such as appearances and its behavior. This allows you to tailor the widget to suit your needs.

Generally you’ll be creating Pages for your users to view, add and/or edit records in your Data Model.

Example of a Page with a Table Widget on it that allows user to view the records in my Sandwich Order data model

Scripts

The beauty of App Maker is that you can actually build an app in App Maker without writing a single line of code/script on your own, thanks the many built in properties and settings in the Data Models & Widgets. However, for something more advanced, such as more complex data validation, automation (e.g. sending automatic email notifications), and integrating with other G-suite functions (e.g. generating a Google Docs), you’ll need to write some apps script to make that happen.

I generally would recommend beginners to get comfortable building apps with data models and pages first before adding advanced functionalities that require scripting. I’ll be sharing some commonly used scripts here in the future for some commonly used functionalities (e.g. sending an email).

In the next article, I’ll be demonstrating how to convert a spreadsheet into an App Maker app with no scripting at all!

Follow me on Twitter to get latest news and updates on the site!

Leave a Reply

Your email address will not be published. Required fields are marked *