App development overview

App Maker has a lot of features that enable you to create powerful, professional apps. You can build an app with many pages and data models. You can use pre-built widgets to quickly add functionality to your pages, and write scripts for custom functions. This overview helps you approach App Maker, whether you're a veteran app builder or new to apps.

Step 1: Set up Cloud SQL and learn the basics

  1. If your app will manage data, we recommend Cloud SQL for your app database. After your G Suite admin sets up a default Cloud SQL database, your app can use the default or a custom Cloud SQL database.

  2. To get familiar with App Maker features and workflows, work through the tutorials and play the demonstration videos.

Step 2: Plan your app

No matter how you plan to use App Maker, some preparation helps you create a user-friendly, high-performing app faster. An app plan helps you build a targeted, efficient app. It helps you identify core tasks so that you can prioritize pages and features. It also helps you clarify relationships between data models. Don’t worry if you don’t know all the requirements or features yet. The app plan evolves as you plan and build your app.

Before you begin, review the app design best practices so that you’re realistic about the scope of your app.

To plan your app:

  1. In a blank document, add a section called “Tasks”. List who will use your app (roles) and what they want to accomplish with it (tasks).

    For example, if you want to build a project tracker so that people in your organization can keep track of what they work on each month, you might have the following roles and tasks:

    TASKS

    Manager tasks:

    • Manage a data model of people who work on projects
    • Add projects to a project data model, assign projects, set deadlines
    • Open a table of projects that they can filter to list projects for certain months and for certain workers, such as to see a worker’s projects for the next 3 months, or to see all projects for June
    • Send an email to a worker for a status update on a project
    Worker tasks:
    • Update a project status
    • Add notes to a project
    • Automatically email the manager when the project is complete

  2. If your app will let users manage data in a database, add a section called “Models” and list each model.

    For example, the project tracker might have 4 data models:

    MODELS
    • Person—a data model of workers and managers
    • Project—a data model of projects
    • Month—a list of months
    • Notes—a data model for the notes that workers add to projects

  3. For each model, list the fields, field type, the source of the data, any relations with other models, and security. Who should be able to load, create, edit, and delete records in the model?

    For example, for the Person model in the project tracker app:

    Person—a data model of workers and managers
    • Fields
      • Full name (string)
      • Email (string)
      • Current employee (Boolean)
    • Data source
      • Manager input
    • Relations
      • One manager (Person) can have many workers (Person)
      • One manager (Person) can have many projects (Project)
      • One project (Project) can have one manager (Person)
    • Security
      • Upper managers can add workers, edit worker information, change employee status.
      • Workers don't have access to this data.

  4. Add a section called “Pages and popups” to your app plan. For each role, list the pages and popups they need to complete their tasks.

    For example, for the manager tasks:

    PAGES AND POPUPS

    Manager pages

    • Project management page—has a filterable table of projects, a button that opens a popup that lets you add a project, a button to send an email to the person assigned to the project
    • Project creation popup—insert form to add a new project record
    • Email popup—form to create and send an email
    • People management page—table of current team members with a button that lets you add a new team member
    • Add person popup—insert form to add a new person

  5. Review the App Maker templates and samples to see if one of them can meet your needs. However, some templates and samples are complex and might be hard to understand if you are new to web development and App Maker. If you try to work with an existing app and get stuck, you might find it easier to gradually build your own app.

Step 3: Build your app

Now that you know what you need to build, build it!

  1. Sign in to the G Suite account provided by your work or school.
  2. Go to https://appmaker.google.com to open App Maker.
  3. Start a new app.

    • If App Maker displays the welcome dialog, click Create New App.
    • Otherwise, click Menu chevron_right New.
  4. Select the template that you want to use as a starting point. If you're just starting with App Maker, we recommend the Starter App template, which includes a Material Design header and a hard-coded menu.

Tips to build an app

App Maker has many features and capabilities—it can be overwhelming. Here are some guidelines:

  • Add models first. With this approach, you can associate pages and widgets with model datasources as you build. If your models will contain sensitive data, share the app project file (the file that App Maker creates in Drive) only with people who should have access to that data.
  • Build for the correct resolution. If most of your users will use your app on a mobile device, select a resolution from the resolution picker and build your pages to work well at that size.
  • Reuse and recycle. You can reuse apps and parts of apps to avoid rework and maintain a consistent layout for your app. Start with your page header and page template:

    • Create a page fragment for your page header. We recommend that you copy one from a sample or template and customize it.
    • Build a template page that includes your header, your navigation menu, and the standard layout for your pages. Then you can duplicate it and give your pages a standardized layout and style.
    • Use provided popups and dialogs.
  • Build and test pages and widgets incrementally. It's easier to fix one problem at a time and more satisfying to know at least one part of your app works while you build the rest of it. Use the Preview instance to test your app as an admin with all permissions.

  • Customize. You can add images, videos, and files, write custom scripts, and enter your own CSS styles.

  • Be patient. If you haven't built an app before or are new to App Maker, expect to do some trial-and-error as you learn how features work. If you get stuck, use the support resources.

  • Update your app plan as you go. It's easier to refer to your app plan for the exact name of a model field, page, or script function than to leave the editor you are in and go to that element. It also helps you collaborate with other developers who work on the app.

Step 4: Review app security and publish

Congratulations! You built and app and are ready to try it in a real runtime environment!

  1. Your app users and your organization rely on you to build an app that protects their data. Review the security best practices and make sure that your app uses them. By default, model data is accessible only to members of the Admin role. You must explicitly grant access to models for other users.
  2. Decide who should publish the app deployment. The deployment owner is the only one who can republish a deployment with updates, edit deployment settings, or delete a deployment.
  3. Publish a test deployment and confirm that the app restricts access to data, pages, and widgets as you expect.
  4. Publish a production deployment and assign users to access roles. You might also configure the deployment with a custom Cloud SQL database. Often, organizations use the default Cloud SQL database for the preview instances and test deployments of an app, and a custom Cloud SQL database for the production deployment.
  5. Share the URL with the people in your organization who need to use your app. To get the URL:

    1. In App Maker, click Publish chevron_right Edit deployments.
    2. Next to the deployment, click Down Arrow .
    3. Copy the URL and distribute it to your users.

    Remember, people outside your organization can't use your apps.

  6. If your app requires access to your users' G Suite data, such as Drive files or Gmail, your app users are prompted to review app permissions when they first open the app. You can ask your G Suite admin to whitelist an App Maker app deployment to turn off these reviews.

Step 5: Tend your app

Now that your app is live, your work isn't done. You can continue to update your app with features and to revise security settings.

Feature updates

You might get feedback from your app users or have your own ideas for improvements. You can continue to develop your app while your users access an older revision, then publish new revisions as they're ready.

Security updates

Your app users might change roles or you might need to add or remove users. Periodically review and update app security—the members of your app's access roles and who can use your app. Security updates are especially important if users can access sensitive data through your app.