Cloud widgets development guide

Updated: Sep 2, 2024

Introduction

Cloud Phone is a cloud-based platform allowing users to access popular web services on feature phones. Developers can create cross-platform widgets (web apps) using web technology compatible with various feature phones.

This guide describes the rules and tips for developing widgets on the Cloud Phone feature phone platform.

Technical basis

All widgets are written in modern HTML5. Developers can follow the W3C Standards to use HTML, CSS, and JavaScript to design their own. If your web app works well on modern web browsers, it can run on the Cloud Phone platform.

Output display

A feature phone has a small screen as output. The screen could have the following different resolutions:

  • 240x320 pixels (QVGA)
  • 128x160 pixels (QQVGA)

Please ensure that widgets can display correctly under such viewport sizes.

Input keypad

The feature phone uses a keypad for user input. Most of the keys are mapped to corresponding keyboard events:

  • 4 arrow keys and Enter: arrow keys and Enter of a keyboard
  • 0-9, *, #: corresponding keys of a keyboard

A widget should handle the key events described above on its own to give users the best experience.

The right soft key (RSK) is not treated as a keyboard event. Instead, it acts as "go back" or "close page" according to the following rules:

  • When there is a previous entry in the navigation history array, RSK acts like the "go back" button of a modern browser (similar to history.back()).
  • When there is no previous entry in the navigation history array, RSK acts like the "close this page" button of a modern browser (similar to window.close()).

Although a widget can define LSK/RSK for any purpose, to avoid confusing users, behaviors of these two keys should be consistent across all widgets:

  • LSK: menu, options, settings, or other similar functions.
  • RSK: go back, quit, exit, or other similar functions.

Deployment preparation

Once the widget is ready to go live, it has to be deployed to a URL endpoint like a general website. Cloud Phone servers will then access the URL endpoint through the standard HTTPS protocol and process the HTML like a modern browser.

The developer should also provide metadata describing the widget, including:

  • A name: a short name for this widget. It is suggested to use less than 10 characters for the best display quality.
  • A URL: an HTTPS URL pointing to the homepage of the widget. It should be available for access through a public network.
  • A icon: an image in PNG format. The design should be simple, as the final rendered size will be about only 40x40 or 80x80 pixels.

Development tips in local environments

Since widgets are all based on HTML/CSS/JS, it is possible to develop/test efficiently on a modern browser. The latest Google Chrome browser is recommended. Here are the steps to run a widget on Chrome:

  1. Open dev tools by F12 or the button in the context menu.
  2. Toggle the device toolbar by the button on the top-left corner of dev tools.
  3. Change dimensions to "Responsive".
  4. Change width and height to 240x320 or 128x160, according to the target screen size for debugging.
  5. Navigate to the widget page by entering the widget URL in the URL bar.
  6. Use "go back" or "close page" button to simulate RSK. Use arrow keys, Enter, 0-9, *, #, and Esc to simulate the rest keys.