Posted by Christian Schalk, Developer Advocate, App Maker

We recently made App Maker generally available. App Maker is a new, low-code development environment for G Suite that lets you build a wide range of apps for your business and customize processes to help you be more efficient.

Building apps in App Maker is easy. You can declaratively define your app’s backend data, visually design a UI, add custom behaviors with Code (optional) and publish your app quickly.

To get familiar, here’s a quick walkthrough of App Maker’s main app development features.

Building your data backend 

With App Maker, backend Data Models are created in a declarative manner so you don’t have to worry about writing a lot of database code. Supported App Maker Data Models include:

• Cloud SQL - connects to Google Cloud SQL (GCP account required). 
• Calculated - a computed virtual model via Scripting or SQL. It can also connect to external data (JDBC, REST). 
• Directory - fetches your organizational data.

To build Data Model Fields you can either build them from scratch, or use an existing CSV or via a Google Sheet.
After defining the structure of your Data Model you can insert validation rules to limit what data can be saved.
Building relations (one-to-many, many-to-many, etc.) between data models is easily doable in the App Maker Relation Editor.
The App Maker Model editor also provides a variety of other features that include setting up custom queries and filters, securing data access based on Roles as well as triggering Data Events based execution. See the Data Models documentation for more info.

Designing your UI 

App Maker helps you streamline UI development by providing a visual design environment where you can drag and drop UI elements (Widgets) onto a canvas and then set the properties of the widgets using a Property Editor. Or if you want, there are also helpful UI generation wizards that can create ready-made UI structures, including Edit or Insert Forms, Tables and a variety of Charts to further speed UI development.
The look and feel of the UI is governed by CSS, where the default is Google's Material design standard. A variety of style variants are available in the editor so that the author can easily toggle how a widget is rendered via a dropdown menu or direct CSS editing.

The UI is connected to backend data via App Maker’s data-binding feature which allows an author to connect widget properties to data model fields.

The combination of visual design, databinding, CSS UI Styling with, Google Material as a default, all contribute to a productive UI creation experience. For full coverage of App Maker UI concepts. see the UI documentation.

Enrich your apps with code 

Although App Maker does all the heavy lifting when it comes to database communications and UI design, sometimes you need to customize application behaviors. This is where App Maker’s scripting feature comes in.

The scripting language used by App Maker is JavaScript, which is used in both the Browser (Client) or Server. The Server’s runtime environment is Apps Script which provides access to a vast library of G Suite services for common operations with Gmail, Docs, Sheets, Calendar and other services.

App Maker streamlines the process of writing code by providing an intuitive Code Editor that’s equipped with helpful Code Completion.
Plus, App Maker provides syntax error highlighting along with an interactive warning/error indication feature. For more information on App Maker coding topics, see these Scripting Docs.

Previewing and publishing your app 

Finally, App Maker provides an easy-to-use Preview feature where you can quickly test your app on your own. When you’re ready to share your app with users, App Maker provides a comprehensive Publish (or Deployment) feature. To learn more about previewing and publishing apps, see the publishing guide.

Try App Maker today 

Now that you have a general idea of App Maker’s features, have a go at the App Maker Codelab. Note: You’ll need to have App Maker enabled on your domain via G Suite Business/Enterprise or G Suite for Education.
To learn more about App Maker, visit developers.google.com/appmaker or stay tuned for more information!

Posted by Wesley Chun (@wescpy), Developer Advocate, G Suite

Do you feel like you live in a chat window, and wish it could do more? Google made Hangouts Chat generally available earlier this year to help. This messaging platform helps users easily collaborate from one place, and features archive and search, tighter G Suite integrations and the ability to create separate, threaded chat rooms. More importantly for developers, Chat includes a bot framework and API. Whether you want to automate common tasks, query information or perform other heavy-lifting, bots can help transform the way you work.

Speed up workflows with bots in Hangouts Chat 

In addition to plain text replies, Hangouts Chat can also display bot responses with richer user interfaces (UIs) called cards which can render header information, structured data, images, links, buttons and more. Users can also interact with these components, like updating displayed information. In the latest episode of the G Suite Dev Show, we talk about how to create a bot that features an updating interactive card.


Pointers on building a Hangouts Chat bot The most important thing when bots receive a message is to determine the event type and take the appropriate action. Here are the types and how each work:

• ADDED_TO_SPACE 
• REMOVED_FROM_SPACE - A bot will perform any desired "paperwork" when it is added to or removed from a room or direct message (DM), generically referred to as a "space.” When added to a space, a bot will generally send a welcome message like, "Thank you for adding me to this room." No notifications are sent when a bot is removed from a space (because the bot has been removed… duh!). Developers typically just log that the bot has been removed. 
• MESSAGE - Receiving an ordinary message sent by users is the most likely scenario. Most bots do "their thing" here in serving the request. 
• CARD_CLICKED - The last event type occurs when a user clicks on an interactive card. Similar to receiving a standard message, a bot performs its requisite work, including possibly updating the card itself.

Below is some pseudocode summarizing these four event types and represents what a bot would likely do depending on the event type:

function processEvent(req, rsp) {
  var event = req.body; // event type received
  var message;          // JSON response message

  if (event.type == 'REMOVED_FROM_SPACE') {
      // no response as bot removed from room
      return;

  } else if (event.type == 'ADDED_TO_SPACE') {
    // bot added to room; send welcome message
    message = {text: 'Thanks for adding me!'};

  } else if (event.type == 'MESSAGE') {
    // message received during normal operation
    message = responseForMsg(event.message.text);

  } else if (event.type == 'CARD_CLICKED') {
    // user-click on card UI
    var action = event.action;
    message = responseForClick(
        action.actionMethodName, action.parameters);
  }

  rsp.send(message);
};

The bot pseudocode as well as the bot featured in the video respond synchronously. Bots performing more time-consuming operations, or those issuing out-of-band notifications, can send messages to spaces in an asynchronous way. This includes messages like notifications when a job is completed, alerts if a server goes down or pings to the Sales team when a new lead is added to the CRM (Customer Relationship Management) system.

Build your bot, your way 

While we demonstrate the bot implemented in JavaScript and Python in the video, one key takeaway is the flexibility of the platform: developers can use any language, any stack or any cloud to create and host their bot implementations. Bots only need to be able to accept HTTP POST requests coming from the Hangouts Chat service to function.

We recently delivered an overview of the bot framework at Google I/O 2018. This comprehensive tour of the framework includes live demos of sample bots in a variety of languages and platforms. Check it out:

To get started, check out this post on the Google Developers blog or this post for a deeper dive into the Python App Engine version of the vote bot featured in the video.

You can learn more about developing bots for Hangouts Chat by reviewing the concept guides as well as this “how-to” on creating bots.

Posted by Desmond Morris, Technical Staff, Trello and Wesley Chun (@wescpy), Developer Advocate, G Suite

Last October, we launched the Gmail Add-ons framework so that developers can build apps that appear inside Gmail. As a part of the launch, we invited a few partners to try out the new platform, including Trello. Trello’s team built an add-on that allows its users to create Trello cards right from their inbox. On Trello, “cards” represent individual tasks that are part of a larger workflow.

To learn more, we sat down with Desmond Morris, Trello’s lead developer for the add-on, to get his thoughts on the experience.

What is the Trello Add-on for Gmail? Why did you decide to build it? 

The Gmail Add-on we built for Trello makes it easy for folks to take incoming email messages and immediately send them to a Trello board. Trello’s board and list format gives the user more context as to where a task is in the process.

Basically, when you open up an email in Gmail, there is a Trello icon in the top right corner. When you first click the icon, the add-on will ask you to log in to your Trello account. Once authenticated, you are presented with the card creation form. The form is pre-populated with the subject and body of the email, and allows you to select both the board and list to which the card should be added.



Trello already integrates with other G Suite applications—Trello users can attach Google Drive files and folders to Trello cards and send alerts to Hangouts Chat right from Trello. Given the already tight integrations between our two products, building the Gmail Add-on felt like a natural fit.

What was your experience like building the Gmail Add-on? 

This was my first look ever at Apps Script. I had never used it before at all. I have experience writing Javascript, so picking up Apps Script was pretty easy.

Before I started building, I took a look through the docs and the samples that Google provided. There was a sample add-on which incorporated nearly all of the features provided by the framework. It was great because it basically gave us a set scope for exactly what we wanted to do. So my immediate first step was to dig around and start matching up the ideas I had in mind for the add-on and how the example demonstrated those features.

Did anything surprise you? 

At first when I was developing the add-on, I didn’t even touch mobile. When I finally got to the mobile portion, I was surprised to see that the code I’d been working with for the web client also worked on mobile, with no extra code on my part. It was easy, really.

I was initially surprised that the Add-ons framework didn't allow for "free rein" control—the ability to add a myriad of HTML/CSS/JS. But then I started using the tools and found that I had enough flexibility to be effective. Limiting what you can do actually helps make these add-ons device agnostic, which in turn relieves much of the burden from the developer.

Do you have any tips for developers who are considering building on the platform?

The tip I would suggest to developers, especially if they are new to the platform, is to make good use of the guides and sample code provided. It was helpful in allowing me to understand what was and was not possible within the platform.

The composable nature of the provided widgets made it easy to build simple abstractions around UI patterns. In the add-on, I made use of the Selection Input field widget to provide selectors for users to pick the board and list they want to create cards on. Rendering a selection input widget requires only a few lines of code, but I figured it would be helpful to get down to a single function call:

/**
 * A helper function for building dropdown widgets
 */
function buildDropdownWidget(key, title, items, selected) {

  var widget = CardService.newSelectionInput()
     .setType(CardService.SelectionInputType.DROPDOWN)
     .setTitle(title)
     .setFieldName(key)

  for(var i = 0; i < items.length; i++) {
    var itemSelected = selected === items[i].value
    widget.addItem(items[i].text, items[i].value, itemSelected)
  }

  return widget
}

It's great that we were able to add further integrations with G Suite for our users using add-ons.

To get started, visit the Gmail Add-ons documentation or check out this video library for inspiration to learn how to use Apps Script to build add-ons.

Posted by Luke Camery, Associate Product Manager, OAuth Security

As part of our constant efforts to improve Google’s OAuth application ecosystem, we are launching additional protections that can limit the spread of malicious applications. Applications requiring OAuth will be subject to a daily total new user cap and a new user acquisition rate limit. The first restricts the total number of new users that can authorize your application, while the second limits how rapidly your application can acquire new users.

Every application will have its own quotas depending on its history, developer reputation, and risk profile; for more details, see User Limits for Applications using OAuth.

These quotas will be initially set to match your application’s status and current usage so the majority of developers will see no impact. However, if you have received a quota warning about your application, or if you anticipate your application may exceed its quota (due to, for example, a high profile launch), you can take action to improve your application's adoption:

1. If your application has reached its total new user cap, submit the OAuth Developer Verification Form to request OAuth verification. Once granted, verification removes the new user cap. 
2. If your application is running into the new user authorization rate limit, you can request a rate limit quota increase for the application. 

We will actively monitor every application’s quota usage and take proactive steps to contact any developer whose application is approaching its quota. This should help prevent interruption due to these quotas for non-malicious developers on our platform.

These enhanced protections will help protect our users and create an OAuth ecosystem where developers can continue to grow and thrive in a safer environment.

Posted by Luke Camery, Associate Product Manager, OAuth Security

As part of our constant efforts to improve Google’s OAuth application ecosystem, we are launching additional protections that can limit the spread of malicious applications. Applications requiring OAuth will be subject to a daily total new user cap and a new user acquisition rate limit. The first restricts the total number of new users that can authorize your application, while the second limits how rapidly your application can acquire new users.

Every application will have its own quotas depending on its history, developer reputation, and risk profile; for more details, see User Limits for Applications using OAuth.

These quotas will be initially set to match your application’s status and current usage so the majority of developers will see no impact. However, if you have received a quota warning about your application, or if you anticipate your application may exceed its quota (due to, for example, a high profile launch), you can take action to improve your application's adoption:

1. If your application has reached its total new user cap, submit the OAuth Developer Verification Form to request OAuth verification. Once granted, verification removes the new user cap. 
2. If your application is running into the new user authorization rate limit, you can request a rate limit quota increase for the application. 

We will actively monitor every application’s quota usage and take proactive steps to contact any developer whose application is approaching its quota. This should help prevent interruption due to these quotas for non-malicious developers on our platform.

These enhanced protections will help protect our users and create an OAuth ecosystem where developers can continue to grow and thrive in a safer environment.

Cross-posted from the Google Developer blog 
Posted by Minhaz Kazi, Developer Advocate, Google Data Studio




Data Studio is Google’s free next gen business intelligence and data visualization platform. Community Connectors for Data Studio let you build connectors to any internet-accessible data source using Google Apps Script. You can build Community Connectors for commercial, enterprise, and personal use. Learn how to build Community Connectors using the Data Studio Community Connector Codelab.

Use the Community Connector Codelab 

The Community Connector Codelab explains how Community Connectors work and provides a step by step tutorial for creating your first Community Connector. You can get started if you have a basic understanding of Javascript and web APIs. You should be able to build your first connector in 30 mins using the Codelab.

If you have previously imported data into Google Sheets using Apps Script, you can use this Codelab to get familiar with the Community Connectors and quickly port your code to fetch your data directly into Data Studio.

Why create your own Community Connector 

Community Connectors can help you to quickly deliver an end-to-end visualization solution that is user-friendly and delivers high user value with low development efforts. Community Connectors can help you build a reporting solution for personal, public, enterprise, or commercial data, and also do explanatory visualizations.

• If you provide a web based service to customers, you can create template dashboards or even let your users create their own visualization based on the users’ data from your service. 
• Within an enterprise, you can create serverless and highly scalable reporting solutions where you have complete control over your data and sharing features. 
• You can create an aggregate view of all your metrics across different commercial platforms and service providers while providing drill down capabilities. 
• You can create connectors to public and open datasets. Sharing these connectors will enable other users to quickly gain access to these datasets and dive into analysis directly without writing any code. 

By building a Community Connector, you can go from scratch to a push button customized dashboard solution for your service in a matter of hours.

The following dashboard uses Community Connectors to fetch data from Stack Overflow, GitHub, and Twitter. Try using the date filter to view changes across all sources:


This dashboard uses the following Community Connectors:

• Stack Overflow 
• GitHub 
• Twitter 

You can build your own connector to any preferred service and publish it in the Community Connector gallery. The Community Connector gallery now has over 90 Partner Connectors connecting to more than 450 data sources.

Once you have completed the Codelab, view the Community Connector documentation and sample code on the Data Studio open source repository to build your own connector.

Posted by Raymond Wainman, Software Engineer, Gmail

You may have heard of the open-source framework, Accelerated Mobile Pages (AMP). It’s a framework for developers to create faster-loading mobile content on the web. Beyond simply loading pages faster, AMP now supports building a wide range of rich pages for the web. Today, we’re announcing AMP for Email so that emails can be formatted and sent as AMP documents. As a part of this, we’re also kicking off the Gmail Developer Preview of AMP for Email—so once you’ve built your emails, you’ll be able to test them in Gmail.

AMP for Email opens up several new possibilities:

• Design interactive components for email using a large library of supported AMP components like amp-carousel, amp-form, amp-bind, amp-list and more
• Help your content stay up-to-date and interactive for your users.
• Create more engaging and actionable email experiences

Here’s an example:

Brows and save your favorite items in Pinterest

<!doctype html>
<html ⚡4email>
<head>
 <meta charset="utf-8">
 <script async src="https://cdn.ampproject.org/v0.js">&lt'/script>
 <!-- The AMP4email boilerplate. -->
 <style amp4email-boilerplate>body{visibility:hidden}</style>
 <script async custom-element="amp-carousel"    src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
 <script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>
 <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
 <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
 <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
 <style amp-custom> html{font-family: 'Roboto';}
 ...
 </style>
</head>
<body>
 <h2>Hello dear user,</h2>
 <div class="photo-gallery">
   <div class="text">Photos from your latest trips:
     <span [text]="+selectedSlide + 1">1</span>/4</div>
   <amp-selector layout="container" name="carousel-selector"...>
     <amp-carousel controls width="430" height="80">
       <amp-img ...></amp-img>
   ...
     </amp-carousel>
   </amp-selector>
   <amp-carousel ...>
     <amp-img ...></amp-img>
    ...
   </amp-carousel>
   <div class="trip-location">Please rate your trip location:</div>
   <form id="rating" class="p2" method="post" ...>
   <fieldset class="rating">
     <input name="rating" type="radio" id="rating1" value="1" .../>
     <label for="rating1" title="1 stars">★</label>
     ...
   </fieldset>
   <div submit-success>
     <template type="amp-mustache">
       <div class="text">Thanks for rating {{rating}} star(s)!</div>
     </template>
   </div>
   </form>
 </div>
</body>
</html>
[Full example in AmpByExample’s Playground]

The AMP for Email spec is available today and will be supported in Gmail later this year. To get preview access to how Gmail will support AMP for Email, sign up here. Since it’s an open spec, we look forward to seeing other email clients adopt it, too.