[MUSIC PLAYING]
SPEAKER: Today we'll show you the interface used for building
apps within App Maker.
Welcome to the "Sheets to Apps" show,
where we talk about how to tame these tabular beasts
into productive applications.
Let's start by visiting at appmaker.google.com, where
you will have access to App Maker
if your G Suite admin has granted it.
Upon logging in with your G Suite account,
one has the option to create a blank app or leverage
any of the templates.
With that said, if you click Blank App,
it takes you to the typical App Maker canvas,
where all the magic happens.
Let's start from the top left.
First, you give your app a name by entering it
into the text box above.
And all changes are autosaved.
The three-lined hamburger menu allows
you to do things like open or create a project,
as well as delete your project.
On the immediate left sidebar, there are three headers--
Data, Pages, and Scripts.
If you hover over any of them, a plus sign
appears in order to create a new record.
In this case, let's click the plus sign on Data,
where you can create your fields that will automatically sync
with your Cloud SQL instance.
Each table created is called a data model.
You can optionally import your data columns
from a Google spreadsheet.
The next section, called Pages, is
where you will design how users will interact with the app.
You will create a different page for every user journey.
For example, you may want to create three pages for your app
because you want one page for end users
to enter items into a form, another one for admins
so they can take action on user requests,
and a third page that both admins and end
users can see a summary of all the requests made by the end
users.
Note, if you will use the same widgets and design
for multiple pages, let's say, you
want to have the same banner across all pages,
then you could choose to make a page fragment, which
saves that page with the banner design as a template that
can be dragged as a custom widget
into your data model editor to save you
time in having to recreate that design over and over again.
Then there are pop-ups, which are dialog boxes
displaying important information you would like to inform users,
such as showing a transaction is in progress
or confirming a request was deleted.
The app is basically a series of widgets put together
on each page by dragging and dropping them onto the pages
data model editor.
You can find widgets by clicking the four-squared icon
below the name of the app and scrolling or typing
in its search box for a particular widget.
Widgets bring in specific functionality to your app,
such as creating a form that collects data from users.
And you can bind these entries to your Cloud SQL database.
Just to name a few main widgets, you
can add star ratings, tables, buttons, multi pick lists,
a user directory, a drive file picker,
or make your own custom widget.
One can make app interfaces beautiful, too,
by using the images widget, HTML box,
headers, and can even import icons from the Material Design
Gallery by giving it the name it has in the gallery
and selecting its style to be an icon.
For those newer to material design,
it is a library of responsive icons and cards.
Out of the box, one can change the color or the style of icons
by selecting a widget and then choosing an option
from the Styles dropdown, which is located
right next to the Widgets icon.
Here, I provided an example where I inserted a label widget
and converted it into a star icon.
This is possible because of App Maker's seamless connection
to the Material Design Library.
As long as I select Icon from the dropdown
and change its name to Star in the property editor
to the right, it automatically turns my label
into a star icon.
The dropdown next to Styles allows
you to change the data model editor's canvas
size in case one wishes to build an app for a very
specific device screen.
Otherwise, the default customize is recommended.
The button next to the device display
creates a grid on your canvas for more precise alignment
during the UI build.
The Undo and Redo buttons on the top right help do just that.
Or you can use keyboard shortcuts, like Control-Z
to undo.
The last and third section of the sidebar on the left
is called Scripts, which allows users comfortable with using
code to add customizations, such as sending email notifications
via a client or server script.
There are links to scripting in App Maker and App
Script in the description if you wish to learn more.
Moving on to the sidebar on the right is the property editor.
When you finally drag and drop widgets on your pages
and you have the widget selected,
this sidebar lets you bind your data to it.
At the bottom of the editor is a section called Security, which
allows you to configure page level permissions in case
you would like admins of the app to have access
to different pages than your end users, for example.
Or you can also create custom roles.
If comfortable, one can optionally use CSS and HTML
if desired, but this is not required,
by clicking the art palette icon in the property editor, which
has code completion for easy styling.
And finally, at the top of the property
editor sidebar are a few buttons.
From right to left is the Preview button,
which lets you see how your final app will look
like without publishing it.
I find it helpful to preview my app for every page I create.
When in premium mode, it also has a log section
at the bottom, which allows you to see
if there are any errors happening if you wrote
a script to automate events.
The next button is to publish your app
when you are ready to make it available to users.
You can deploy multiple instances of your app
with completely different data for different departments
or clone the same exact data and name each version--
test sandbox version or production version,
for example.
If you click the dropdown icon by each deployment's name,
it offers more editing options.
However, you cannot change the name of your deployment once
published.
You will need to launch a new deployment to do so.
In this case, I want the link to the third version of my app
called Urban Planting 3.
The first URL listed has a Copy icon to copy the link.
So you can paste that link to share in an email, in a chat,
or embed it into a Google site.
And there you have it.
This completes our in-depth tour of App Maker's UI.
To get started on your app, work with your G Suite admin
and try out this code app that is linked to the description.
Then think of a process that presently
lives in a spreadsheet and plan how to map it out
into App Maker using Google's online documentation, which
is also listed below.
If you found this episode helpful,
please click like and subscribe.
Cheers.
[MUSIC PLAYING]