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.
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:
- Web App Extension
- Native Mobile App Extension
- 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.
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:
- Facebook App
- Google Chrome Extensions
- Firefox’s WebExtensions
- Google Docs
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):
Google Chrome Extensions
How to Create a Chrome Extension
- Create new folder (extension)
- Add 1 image file for extension icon
- Create file extension.html
- Create file extension.js
- 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.
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:
chrome://extensionsin 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
- Ensure that the Developer mode checkbox in the top right-hand corner is checked.
Load unpacked extension...to pop up a file-selection dialog.
- Navigate to the directory in which your extension files live, and select it by clicking the OK button.
- This extension will show up on the top right corner of the Chrome browser
- Visit https://www.google.com/
- Click the newly created Chrome extension and you will see the background color has been changed.
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.
- Getting Started: Building a Chrome Extension
- Manifest File Format Documentation
- Declare Permissions Documentation
- How to Make a Chrome Extension
- Wikipedia — Google Chrome extension
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:
version, are mandatory. It contains basic metadata for the add-on.
descriptionis optional and displayed in the Add-on Manager.
content_scriptstells 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
How to Load WebExtension
- Type and go to
about:debuggingin Firefox’s address bar
- 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.
- Try visiting any page that starts with
- Firefox will only support WebExtensions by the end of 2017
- What are WebExtensions
- Your first WebExtension
- Testing and Publishing a Simple WebExtension
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.
- 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
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.