image
Software Development 7 MINUTE

Complete Guide: How To Build Apps For Jio Phone?

author

Adam Davidson

Adam Davidson is the Sr. Business Analyst of Codersera, a leading freelance platform that caters to the mobile app development technology. Adam loves writing and researching on business leadership practices, start-up advice. He has a flair for writing and often shares his insights on various topics through his blogs.
image
Reading Time: 7 minutes

Building apps for Jio Phone is extremely easy if you already know some web development. The first thing you need to know is that Jio phones run on the Kaios platform which is forked from B2G (Boot to Gecko), a successor of the discontinued Firefox OS. In this blog, we’ll learn some core concepts and We’ll Build Apps For Jio Phone.

Why?

The total number of feature phone users in India is about 300–350 million and Jio is soon going to capture most of them. It already has 25–30 million users and the number will only increase. So it makes sense to build apps for Jio phones capturing a massive audience.

About KaiOS

KaiOS is a web-based mobile operating system that enables a new category of smart feature phones.
KaiOS brings support of 4G/LTE, GPS, and Wi-Fi, as well as HTML5-based apps and longer battery life, to non-touch devices. It has an optimized user interface for smart feature phones, needs little memory, and consumes less energy than other operating systems. It also comes with the KaiStore, which enables users to download applications in categories like social media, games, navigation, and streaming entertainment.

kaios

KaiOS apps are based on web technologies — HTMLCSS, and JavaScript and are run by Gecko runtime. If you have written a web page you already know the basics.

Rendering is done by parsing HTML/CSS and painted using graphic APIs. JavaScript is executed by the JS engine SpiderMonkey and connected to C++ components by XPConnect and WebIDL bindings. Applications and the core process communicate only through IPC protocols defined by IPDL.

Additionally, a set of core components including file and memory management, threads and data structures, etc. are provided through the XPCOM component object model.

Requirements:

  1. Firefox version 59.
  2. ADB for running app on Jio phone.
  3. Jio phone.
  4. A simple web app.
  5. manifest.wepapp file in your web app’s root directory.

You can reference os-env-setup for setting up the environment.

Manifest

The manifest.webapp file provides important information about the app, such as version, name, description, icon location, locale strings, domains the app can be installed from, and much more. Most importantly, it contains a list of APIs that your app needs. This allows users to make informed decisions about apps before installing them.

Your app’s manifest.webapp file should be placed in the root of your app directory, and contain a simple JSON structure. A simple App Manifest JSON looks like this:

{
"version": "1.0.0",
"name": "KaiOS App",
"description": "A file simple example manifest.webapp",
"type": "web",
"launch_path": "/your/repository/index.html",
"icons": {
"56": "/your/repository/icons/ic_Appname_56.png",
"112": "/your/repository/icons/ic_Appname_112.png"
},
"developer": {
"name": "Your Name",
"url": "http://yourawesomeapp.com"
},
"locales": {
"en-US": {
"name": "KaiOS App",
"subtitle": "Short description for the user",
"description": "Brief description of your app"
}
},
"default_locale": "en-US"
}

You may reference the manifest for more information on the manifest file.

Some important things to consider

Softkeys

The software key appears at the bottom of the screen, which corresponds to the center, right, and left hardware keys. Each key may or may not appear depending on the availability of features. In this case, the softkeys are:- Menu, View, and Back respectively. You can use these keys by adding event listeners on the document object for these key presses. Additionally, you can use Up/Down/Left/Right and any other key as per your requirement. You can read more about implementation on the documentation.

softkeys

D-Pad Navigation

On non-touch devices, the preferred method of app navigation is to use the available hardware keys.

KaiOS feature phones generally come up with 4 directional arrow keys and confirmation keys. In the image below, the second item is highlighted with blue color. you can easily navigate through these items with up/down/left/right arrows and select them with the OK(center) key. You can play around with this example on http://jio.changa.in/app/search. More information on implementation can be found in the documentation.

d-pad navigation

The Menu

Suppose you have 5–6 routes in your app. How’s the user supposed to navigate through these routes? Here comes the menu route, you can route the user to the menu page by clicking the SoftRight key. In this example, we can easily navigate to all the pages from this menu page.

the menu(Build Apps For Jio Phone)

Multiple Resolutions

Applications on KaiOS should adapt to different resolutions. Current KaiOS devices support QVGA resolutions in portrait (240×320 pixels) or landscape (320×240 pixels). So while building your application, make sure that it looks good on the said resolutions(I personally got into a lot of trouble due to this😶).

Push Notifications

Push notifications in Kaios can be implemented with W3C Push API. You can also use service workers with notifications to allow notifications while the app is not running(This thing is really cool😍).

Note: You can’t use firebase cloud messaging(FCM) here as of now.

App Permissions

The permissions field in the app manifest controls the app’s access to various sensitive APIs on the device (sometimes called WebAPIs) e.g. audio-capture, camera, contacts, nfc-share(This is something really amazing😉). The permissions are described in the following tables. The three levels of permission, in brief, are:

  • Web apps: These only have a basic level of permissions, and don’t have access to privileged or internal APIs.
  • Privileged apps: These have all the permissions of web apps plus more. Hosted apps can’t be privileged — they must be packaged apps.

Design Guide

The app we’re building is for a low-end feature phone. Having a consistent design across the application is really important. To do so, you can go through the design guide provided by Kaios.

Building a sample timer app

  1. Make a file index.html and paste this code.
<body id="app">
<style>
* {
margin: 0;
padding: 0;
}
nav {
background: violet;
color: white;
position: fixed;
width: 100vw;
display: flex;
justify-content: center;
height: 30px;
}
footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: red;
color: white;
text-align: center;
display: flex;
justify-content: space-around;
}
#content {
font-size: 30px;
color: black;
background-color: lightgrey;
display: flex;
justify-content: center;
}
</style>
<nav>Timer app</nav>
<div
style=" display: flex; justify-content: center; flex-direction: column; height: 100vh; background-color: lightgrey;">
<div id="content">
</div>
</div>
<footer class="softkey">
<div id="softkey-left"></div>
<div id="softkey-center">Play/Pause</div>
<div id="softkey-right">Reset</div>
</footer>
<script>
let ref = { time: 0, interval: null };
const reset = () => {
if (ref.interval) {
ref.time = 0;
clearInterval(ref.interval);
ref.interval = null;
document.getElementById("content").innerHTML = ref.time;
}
}
const increment = () => {
console.log(ref.time);
ref.time += 1;
document.getElementById("content").innerHTML = ref.time;
}
const play = () => {
if (ref.interval) {
clearInterval(ref.interval);
ref.interval = null;
} else {
ref.interval = setInterval(increment, 1000);
}
}
play();
const softkeyCallback = {
left: function () {
console.log('You click on SoftLeft')
},
center: play,
right: reset
};
function handleKeyDown(evt) {
switch (evt.key) {
case 'SoftLeft':
// Action case press left key
softkeyCallback.left();
break;
case 'SoftRight':
// Action case press right key
softkeyCallback.right();
break;
case 'Enter':
// Action case press center key
softkeyCallback.center();
break;
}
};
document.addEventListener('keydown', handleKeyDown);
</script>
</body>

2. Insert manifest.webapp file in the same directory as index.html.

Install your first app(Windows)

  1. Open Firefox Web IDE and make sure you have connected your device and executed the commands. To start the WebIDE open up Firefox and click on the icon in the top right that looks like a globe behind a pencil or simply press shift+F8 and the WebIDE will open in a new window.
$ adb root
$ adb forward tcp:6000 localfilesystem:/data/local/debugger-socket
command prompt

2. If you have packaged app stored on your laptop, click “Open Packaged App” on the left side and select your project folder.

3. Your project folder must have a manifest.webapp file. Otherwise, the IDE cannot open your app. Check here to create manifest.webapp file.

4. After selecting your app, you should be able to see your app.

Console(Build Apps For Jio Phone)

5. Install the app on your device with the RUN button and Debugger button to debug the top center of WebIDE.

6. Install the app.

7. Then, you are available to use the basic tools in the web IDE for development, such as Inspector, Console, JavaScript Debugger, Style Editor, Scratchpad.

timer app(Build Apps For Jio Phone)

8. Note: While running the app, you might see a black or white screen showing nothing on the mobile. Run the app a couple more times and that should work fine. If it doesn’t, you might want to check the console on WebIDE.

Jio Phones(Build Apps For Jio Phone)

Conclusion

Building apps for Jio phones is really easy and worth it. If marketed well, you can gain a massive audience and in turn, good money. Hope you have learned something from this blog. We, at Codersera aims to provide you with quality solutions and information that may come in handy to you each time.

How do you make an app for KaiOS?

For the initial launch, you can also use Firefox Emulator 2.2 (stable). It is now time to upload your first application to kaiOS. You can build your app in any client-side JS framework, such as Angular, React, or even plain javascript, but the most important thing is that it has a manifest.

Which app format does Jio phone support?

The OS has an HTML5-based app store and is designed for non-touch phones. The KaiOS will be available for the first time on the JioPhone in India.

Does KaiOS support APK?

KaiOS does not support Android apps. These apps need to be adapted to HTML5-based apps that can run on the KaiOS platform.

Is KaiOS open source?

KaiOS is an open-source platform and the world’s first mobile operating system for feature phones, complete with a marketplace for common apps and locally relevant content.

How useful was this post?

How useful was this post?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

Please do Rate Us and Share!

Related Blogs

  • author
    Kela Casey

    TabView in React Native

    Reading Time: 4 minutes React Native is a JavaScript framework that rites actual, natively rendering mobile apps for iOS and Android. It is based on React, Facebook’s JavaScript library for developing user interfaces and it is solely made for mobile devices. React Native allows you...

  • author
    Adam Davidson

    How to Monitor and Scale your Supply Chain Performance

    Reading Time: 7 minutes Supply Chain performance is a critical business method, not just a business purpose. The main trends in the business right now are low-cost country sourcing, outsourcing, customization, globalization— all of these create tremendous complexities in a supply chain. It refers to...

  • author
    Thomas Wilfred

    Bootstrap Vs Material UI | Which Is Best For Next Web App?

    Reading Time: 7 minutes Bootstrap vs Material UI has been a trending topic for a long time amongst developers. The excellent user interface has become particularly significant for companies as it aids in user engagement and brand recognition. Front-end website and app development systems, such...

image

About The Author

Adam Davidson is the Sr. Business Analyst of Codersera, a leading freelance platform that caters to the mobile app development technology. Adam loves writing and researching on business leadership practices, start-up advice. He has a flair for writing and often shares his insights on various topics through his blogs.

Try our One-Week Risk Free Trial for Hiring a Coder

Know more Hire a Coder

Hire Top 1% Remote Developers, Free For The First Week

Connect with quality remote developers and code your ideas away.

X