Ecosystem Building Block: API + Platform Extensions

By Danny Christanto, Darwin Gautalius, Felix Kurniawan, Hermes Vincentius Gani, Karol Danutama, On Lee, Ricky Yudianto, Timotius Kevin Levandi, Timotius Nugroho Chandra, Wendy Fu, Wilyanto Salim

Everything should be made as simple as possible, but not simpler. — Albert Einstein.

Platforms and APIs are trending these days. Books and countless articles are written about it. Big companies and startups alike create platforms and/or APIs.

Photo by Pixabay

The public has finally learned one of Apple’s and Microsoft’s “hidden secrets” to reaching hundreds of millions of users globally at scale for decades: Platforms and APIs. Modern 21st century digital conglomerates — Airbnb, Alibaba, Amazon, Facebook, Google, Tencent, Uber — could scale up quickly, in less than 20 years, serving billions of users because they build platforms and APIs. In other words, they build ecosystems on top of their products; their products serve as a platform by providing APIs.

The API is the most basic building block. It provides access to your platform with the greatest flexibility. However, it is neither the easiest to use nor the fastest way to build custom apps especially in extending a platform.

The most common and best practice is to provide platform extensions. Platform Extension is a plug-in or add-ons that extends the functionality of a platform in some way. Extensions are higher-level and much easier to use than APIs. They are written on top of an API. The analogy between extension and computer language: API is the assembly language and extension is the high-level computer language.

Platform extensions increase software engineering productivity. They speed up building custom apps for customers, partners and internal development. Additionally, even less experienced software engineers could implement it because it is developer-friendly and designed to be simple to program.

A survey on how to create platform extensions shows that they fall into 3 categories:

1. Web App Extension
2. Native Mobile App Extension
3. Bot: Chatting App Extension

In this post, we are going to delve into the first category, Web App Extension. We will post about the second and the third in another future posts.

Web App Extension

There were times people thought native mobile apps will take over web apps in terms of popularity. It turns out it depends on the application requirements and timing. The fact is, web apps are still gaining more popularity.

As web technologies like HTML5, CSS and JavaScript become faster, the web continues its impressive growth due to the adoption of mobile devices such as smartphones and tablets getting more powerful hardware and larger amounts of memory — thanks to Moore’s Law in action for the past 50 years — at an affordable price for consumers.

Additionally, as the software web app mobile technology advances — for example, Google Progressive Web Apps, Angular, Accelerated Mobile Page, it combines the benefits of rapid web development & deployment (relative to native mobile app), convenience (without having to install and update megabytes of apps), and secure and native mobile user experiences on the web.

There are over a billion web apps in the world now and growing on daily basis. Some of the currently most popular are:

1. Facebook App
2. Google Chrome Extensions
3. Firefox’s WebExtensions
4. Google Docs

Facebook App

In order to create a Facebook App, you have to meet these prerequisites:

• Facebook Account
• Facebook Developer Account
• Facebook AppId for Website with Site URL (e.g., http://localhost:8888/ on your local machine, you might also want to use localhost-to-public tunnel like ngrok)
• A local web server running on (e.g., http://localhost:8888/)

And here is a sample code for creating Facebook App (index.html):

Resources

• Facebook for developers: Register and Configure an App
• FB Hello World

Google Chrome Extensions

Google Chrome Extensions are browser extensions that are capable to modify the vanilla Google Chrome browser. These extensions are able to be written using web technologies like HTML, JavaScript, and CSS. Google Chrome Extensions are downloadable through the Chrome Web Store (formerly the Google Chrome Extensions Gallery).

How to Create a Chrome Extension

Developer can create new extensions for Chrome with core technologies from web development: HTML, CSS, and JavaScript. Here is step by step to create extension:

1. Create new folder (extension)
2. Add 1 image file for extension icon
3. Create file extension.html
4. Create file extension.js
5. Create file manifest.json

This is a sample extension to show a Hello World message and change the background color of an active tab body.

extensions.html

extension.js

manifest.json

This manifest is nothing more than a metadata file in JSON format that contains properties like your extension’s name, description, version number and so on. At a high level, we will use it to declare to Chrome what the extension is going to do, and what permissions it requires in order to do those things.

How to Load Extension

Here are step by step directions to load your extension or working directory for testing:

1. Visit chrome://extensions in your browser (or open up the Chrome menu by clicking the icon to the far right of the Omnibox (Address Bar) *. The menu’s icon is three horizontal bars. and select More Tools -> Extensions
2. Ensure that the Developer mode checkbox in the top right-hand corner is checked.
3. Click Load unpacked extension... to pop up a file-selection dialog.
4. Navigate to the directory in which your extension files live, and select it by clicking the OK button.
5. This extension will show up on the top right corner of the Chrome browser
6. Visit https://www.google.com/
7. Click the newly created Chrome extension and you will see the background color has been changed.

* Chrome Menu Icon

Alternatively, you can drag and drop the directory where your extension files live onto chrome://extensions in your browser to load it. If the extension is valid, it’ll be loaded up and active right away! If it’s invalid, an error message will be displayed at the top of the page. Correct the error, and try again.

Resources

• Getting Started: Building a Chrome Extension
• Manifest File Format Documentation
• Declare Permissions Documentation
• How to Make a Chrome Extension
• Wikipedia — Google Chrome extension

Firefox WebExtension

WebExtensions is a cross-browser system for developing browser add-ons. To a large extent the system is compatible with the extension API supported by Google Chrome and Opera.

According to an announcement, since the end of 2017, together with the release of Firefox 57, Firefox has moved to WebExtensions exclusively, and will stop loading any other extension types on desktop.

This means that any add-on not converted to WebExtensions by that time will no longer be available regardless of whether it is already installed in Firefox or discovered on Mozilla’s add-ons repository.

Creating a WebExtension

The followings are steps to create a simple WebExtension that modifies DOM by adding a welcoming “Hello World” paragraph and decorating the web page with a red border:

• Prepare a directory with the following structure:

• manifest.json

• manifest_version, name, and version, are mandatory. It contains basic metadata for the add-on.
• description is optional and displayed in the Add-on Manager.
• content_scripts tells Firefox to load a script into Web pages whose URL matches a specific pattern. In above example, we're asking Firefox to load a script called "helloworld.js" into all HTTP or HTTPS pages
• helloworld.js

How to Load WebExtension

1. Type and go to about:debugging in Firefox’s address bar
2. Click Load Temporary Add-on and select any file in your add-on directory. The add-on will now be installed, and will stay until you restart Firefox.
3. Try visiting any page that starts with http:// or https://

Resources

• Firefox will only support WebExtensions by the end of 2017
• What are WebExtensions
• Your first WebExtension
• Testing and Publishing a Simple WebExtension

Google Docs

Add-On

Extension for Google Docs is called Add-on. It provides a way for us to extend the functionality of a Google Docs document. The primary language is JavaScript but we can add HTML files. Moreover, Google also provides some built-in services to interact with various Google APIs. We can also communicate with our own REST API endpoint using a specialized JavaScript library provided by Google.

In this example, we will add a URL shortener add-on (using URL Shortener API from Google). The purpose is to easily shorten the URL while we are editing our Google Docs document without having to switch windows.

The steps:

• Create a new Google Docs document (by going to https://docs.google.com/)
• Select menu item Tools > Script editor
• We need to enable a url shortener service by Google. Select menu item Resources > Advanced Google services…
• From the list, look for URL Shortener API, turn it on by clicking the switch

• We also need to enable the service in Google Developers Console. The link to the console is provided below the list. Afterwards, look for URL Shortener API. On the next page, enable it by clicking the button ENABLE

• Back to script editor window, if a file named code.gs is not already created, create one then type in the code below

• Create a new HTML file by selecting menu item File > New > HTML file. Name the file Sidebar and type in the code below

• Save both files
• Click on project title, rename it as URL Shortener

We can now try our script. Follow the steps below:

• Switch back to your document and reload the page. The script editor window will be closed automatically
• After a few seconds, a URL Shortener sub-menu will appear under the Add-ons menu. Click Add-ons > URL Shortener > Start
• A dialog box will appear and tell you that the script requires authorization. Click Continue. A second dialog box will then request authorization for specific Google services. Read the notice carefully, then click Allow
• A sidebar will appear. To test it, type a URL into the upper input text. Then click Shorten button. The shortened URL will be shown in the bottom input text
• Below is the screenshot for final result. The sidebar on the right corresponds to the HTML file we created earlier

Conclusion

Example above shows each platforms expose their functionality-extending interface according to its unique use cases. However these interface leads to the same goal: giving flexibility to users to add new use cases or improve current use cases. The capability of the platform grows linearly with the number of its developers. In the end the goal of building ecosystem is achieved.

Resources

• Quickstart: Add-on for Google Docs