Step-by-step guide on how to build a mobile App Maker app — using “urban food growing” as an example
Happy Earth Day Earthlings(April 22nd)! At Google I learned to begin to grow my own food thanks to our community garden program as a city dweller. It was a great way to begin learning about the natural and interrelated processes that occur in our environment, and ultimately got me growing my own food and composting on my tiny apartment balcony. I am a big proponent of using technology to share “green” information, and better yet to build it on Google’s infrastructure, which builds sustainability within its operational design.
I have to say what’s quite magical for me is to see what a broccoli plant looks like, or to learn that no chemical alterations are needed for my food production if I leverage the synergies of different plants by planting them together such as the smell of my garlic plant neighboring my tomato plant to naturally repel insects — and well overtime I have learned that bugs are not foes either, but that’s a longer story. My intention with this article is to both celebrate Mama Earth and get you pumped about building a basic 3 page mobile “green app” for your organization using App Maker if you are trying to learn how to build apps or because you wish to help urbanites to know what month to plant seeds of common foods (within a container, a raised bed, mini green house, etc).
Steps
1)First, I entered my data into this Google spreadsheet. In this case I wrote down the most common plant foods and their growing months (in California — where I live) from a PDF guide on “planting times” by the Ecology Center (a non-profit in Berkeley) that focuses on “improving the health and the environmental impacts of urban residents.” This list also includes what plants like being close together and which do not.
2) Once I transferred my data from the PDF by hand, I moved on to building my app by visiting appmaker.google.com and selected a “blank app.” I was able to do so, since our G Suite admin already enabled a default Cloud SQL server (which is a one time deal if desired) for our entire domain and the organizational unit (user role) I fall under as a user in the G Suite admin panel that has been granted access to App Maker to create apps (and just as a friendly reminder App Maker is available to the following G Suite skus: Business, Enterprise, and EDU).
3) In order to get the same column headers I have in my spreadsheet into my App Maker database, I had to create a data model with a few clicks. In the left side panel there is a header that says “DATA,” I click the “+” sign next to it and follow the steps it guides me to using a Cloud SQL database, and called my table “Seeds”.
4) After auto-creating the schema, a new “data model” (data table) called “Seeds” was now visible under the “DATA” header, in the top part of the left sidebar and auto-synced to my own Cloud SQL instance automatically (which means that any additional fields I create are stored).
5) I then clicked into the “Seeds” data model to rename a couple of fields such as the one called “Friends.” I changed its “display name” to “Happy neighbors of” and renamed “Foes” to “Doesn’t like being planted with” so users understand a bit better the information I am providing in the app when I use those fields (but they stay short in the back-end).
6) I moved on to create the pages users will interact with by locating “PAGES” (below “DATA”) on that same left sidebar. Since I used a “blank app,” from the template gallery upon logging in, I already have a default page created for me called “NewPage” which I renamed to “AddPlants” by hovering over it, and selecting the 3 dots icon > “rename.” I could also click the “+” next to “PAGES” to create a new page if I hadn’t used a blank app. This page will not be the homepage, but it will allow users to enter completely new plant entries on top of the ones I already uploaded, creating a collaborative app.
7) I also wanted this to be a mobile app specifically, and changed the display from “Custom” to “small phone portrait” at the top navigation bar (under the name of the app) (sometimes I used “small phone landscape” for the other pages to display data horizontally). This just helped me visualize all the components on a tiny screen, so one can change the display as many times desired.
8) To add widgets onto my canvas-like page, I selected the widgets icon in the top left corner (4 squared blocks icon) and dragged a “fixed panel widget” to make a nice clean header for my app, and gave it a black color by having the panel selected and then changed the “style drop-down” (next to the widgets icon on the top left) from “Background” to “Dark.”
9) I went back into the widget list and drag and dropped a “multi select widget” and placed it under the black header, and made sure it was within the canvas boundaries (FYI I used this 10min how-to to learn how to bind data into a multi-select widget). This widget allows users to select multiple options, which in this case when they add a new plant, they need to select the “months of the year” in which their seeds will bloom. Keeping the “multi select” widget selected (you see blue lines around it), I used the right side panel called the “Property Editor” to change the following values. The field “name” was renamed to “MonthSelector” (no spaces), then “label” (the title users see) I changed to “Select Months.” In the “options” field I clicked “more options” and entered each month (abbreviated) one by one, and then “done” when I had all 12 months of the year listed which looked like this:
10) I also dropped in a “form widget” so users can list all the key details of a new plant in the database. Upon doing so, App Maker automatically asked if I wanted the data source of that form to be data bound to the “Planting” data model.
11) I clicked the title header of the form and changed it’s display in the “Property Editor” to “Add a plant” on the “text” field.
12) I then created a second page, this time calling it “SearchPlants.” I dragged a “table widget” that “inherited” my “Planting” data model. I dragged in a “fixed panel widget” and changed the “style” to “background” to make it “gray colored” header. I then dragged a “button widget” on top of the header in the right corner and changed the “text” field within its “Property Editor” to “Edit” in order to turn it into an “icon” by then clicking the “Style dropdown” and choosing “FabMini” which turns text into icons if the text is the name of an icon in the material design library (which is a public library of beautiful icons for web apps built by Google and is called by App Maker).
13) Just to get people excited, I dragged a “label widget” and named it’s display “Growing food is empowering” in the “Property Editor” and changed the “style” to “Headline” to make the font nice and big.
14) I then click “Preview” to see my work (in the top right corner on top of the “Property Editor”). FRIENDLY NOTE: I actually preview my work quite a bit throughout the app making process even if I do not call it out. It helps me validate that pages are sized and widgets are working properly every step of the way. I highly recommend previewing work constantly (just note that any data you enter when previewing the app will not be included in the final version of the app once deployed because it is just like a sandbox). When in “preview mode,” you can toggle viewing every page you created via the top drop-down in preview mode (which will only display if you have more than one page created).
15) I then created a third page called “EditPlants” in order to let users edit any past entries. If desired, I could make this editable third page restricted only to admins by scrolling down on the “Property Editor” to “Security” and choosing “Admins only” from the drop down or a desired custom role (which you can make) for example.
However in the spirit of gathering plant information from the community — the more folks who keep data accurate the better, so everyone has edit rights.
16) I now need to link the “edit fabmini button” from the second page to be taken to this third page (which is the editable form of the table). I do this by returning to that second page and clicking the “pencil button”at the top that I inserted and changing the “Property editor” values under “Events” to “OnClick” to “Navigate to page” > “EditPlants” page. This now embeds navigation from one page to another.
17) Finally on the “EditPlants” page, I repeated the process of adding an “fixed header widget” with the style “dark,” added “label widget” and turned it named it “Add” and changed it’s style to an “icon” so that it looked like a “plus sign,” and made it so that “OnClick” it “Navigate(s) to page” > “AddPlants” which is the first page I created, that allows users to add a brand new plant to the database.
18) Full circle now, I visited the first page (which was the form to enter a new plant into the database) and realized I was missing a button to go back to the homepage which is the list of plant information and so I added a “button widget” and named it “Planting guide,” and in the “Property Editor” I created an event so that “OnClick” it “Navigates to a page” and assigned it to the “Search Plants” page, and changed its “style” to “RaisedPrimaryDark” to make it a blue button with white text. I also realized I needed to put that same button on the second page which was the “Edit Plants” page and so I used my keyboard to copy the button (Ctrl + C) and then visited the second page and pasted the button there (Ctrl +V), making the widget transferable.
19) Before publishing my app, I did feel like it needed a little icon, so I dragged an “image widget” into the top banner of the page I was on, and on the “Property Editor” I pasted the URL of this cute carrot icon that I found on Google search (that was marked for reuse), and once the image appeared I did the same as the prior step in that I used my keyboard to copy and paste this image on all 3 pages quickly.
20) I did say I wanted to keep it basic, so I stopped there and clicked “Publish,” but there could have been more beautification with images that I could have done, including changing the background of the app. Once in the “Publishing settings” under the “App Setting” header, I set the last page as the homepage so users land there first. At a later time I intend to go back into the “Publish settings” and also paste a Google Analytics ID later so I can optionally collect data on it’s daily usage.
21) Another important thing to note, is that I can publish multiple versions of this app if I wanted to have a “sandbox version” and “production version.” Every version is automatically saved, and has it’s own custom URL that I can share it via email or chat to folks. Every version can also store it’s own custom data since it uses a different Cloud SQL database.
22) While in the publishing process, I give my deployment version a name and save it. The last thing that saves me time is uploading all the data from my spreadsheet into that version of my deployment. I then went back into editing my app and located the “IMPORT DATA FROM SHEET” in the top left corner under the name of the app. I was prompted by the standard Google “authorization” page to grant App Maker access to my spreadsheet. Voila!! All 40 items were slurped up, and my users can now all see data loaded in the published version of my app.
23) To share this app, I shared the link that was created in the publish settings to my peers, and clicked “Export” in the bottom left corner of the app in editing mode which created this .ZIP file that any App Maker instance can import with just a few clicks.
24) The importing/exporting functionality is my favorite thing about App Maker, since it makes it easy to replicate an app for other departments or organizations (reducing IT needs big time). You can export the whole app or only parts of it to share. I am however crossing my fingers for our product team to one of these days let App Maker apps be shareable outside of my domain as a live app since at the moment apps can only be used inside your G Suite domain.
Here’s the final product…happy food growing friends!
Shout out of gratitude: to my fellow Developer Advocate peer and mentor Christian Schalk for inspiring me to build apps for the love and nerdness of it.
