Version: Smart Feature Phone 2.5

Sample code

Let's use a simple to-do app, using only JavaScript (Vanilla), React, Vue.js and Angular.

Vanilla

In Vanilla development, we use only the main technologies without any framework or library to aid development.

Note: You can use the ArrowRight key to simulate the SoftRight key

To run this application on your KaiOS device or simulator, follow these steps:

  • Clone the project with the follow command:
$ git clone https://github.com/kaiostech/sample-vanilla.git
  • Install the project's dependencies with the command npm install or yarn

To finish, execute the command npm run build or yarn build in your terminal, and test your application by sending the contents of the build folder to the device by WebIDE or load the contents of the build folder by Simulator.

You can consult the source code of this project and other projects consulted the KaiOS Workspace in GitHub

React

Create React App (CRA) is a template with all the basic settings to start a project in React.

First you need to have the create-react-app installed on your computer as a global package, in your terminal run the command:

$ npm install -g create-react-app

or with yarn

$ yarn global add create-react-app

Now you can run the following command to start your project using the official react template

$ create-react-app my-first-kaios-react-app

Open the folder created in your IDE or text editor of your preference.

Now, you can look at the following app made by the create-react-app template

Note: You can use the ArrowRight key to simulate the SoftRight key

To run this application on your KaiOS device or simulator, follow these steps:

  • Clone the project with the follow command:
$ git clone https://github.com/kaiostech/sample-react.git
  • Install the project's dependencies with the command npm install or yarn

To finish, execute the command npm run build or yarn build in your terminal, and test your application by sending the contents of the build folder to the device by WebIDE or load the contents of the build folder by Simulator.

You can consult the source code of this project and other projects consulted the KaiOS Workspace in GitHub

Vue

Vue CLI is a template with all the basic settings to start a project in Vue.

First you need to have the Vue CLI installed on your computer as a global package, in your terminal run the command:

$ npm install -g @vue/cli

or with yarn

$ yarn global add @vue/cli

Now you can run the following command to start your project using the official react template

$ vue create my-first-vue-app-kaios

Open the folder created in your IDE or text editor of your preference.

Now, you can look at the following app made by the Vue CLI template

Note: You can use the ArrowRight key to simulate the SoftRight key

To run this application on your KaiOS device or simulator, follow these steps:

  • Clone the project with the follow command:
$ git clone https://github.com/kaiostech/sample-vue.git
  • Install the project's dependencies with the command npm install or yarn

To finish, execute the command npm run build or yarn build in your terminal, and test your application by sending the contents of the build folder to the device by WebIDE or load the contents of the build folder by Simulator.

You can consult the source code of this project and other projects consulted the KaiOS Workspace in GitHub

Angular

Angular CLI is a template with all the basic settings to start a project in Angular.

First you need to have the Angular CLI and TypeScript installed on your computer as a global package, in your terminal run the command:

$ npm install -g @angular/cli typescript

or with yarn

$ yarn global add @angular/cli typescript

Now you can run the following command to start your project using the official react template

$ ng new my-first-angular-app-kaios

Open the folder created in your IDE or text editor of your preference.

Now, you can look at the following app made by the Angular CLI template

Note: You can use the ArrowRight key to simulate the SoftRight key

To run this application on your KaiOS device or simulator, follow these steps:

  • Clone the project with the follow command:
$ git clone https://github.com/kaiostech/sample-angular.git
  • Install the project's dependencies with the command npm install or yarn

To finish, execute the command npm run build or yarn build in your terminal, and test your application by sending the contents of the build folder to the device by [WebIDE]/docs/development/build-your-first-package-app/test-your-apps#webide-with-real-device) or load the contents of the build folder by Simulator.

You can consult the source code of this project and other projects consulted the KaiOS Workspace in GitHub

Apps which use indexedDB

IndexedDB is a low-level API for client-side storage of significant amounts of structured data, including files/blobs. This API uses indexes to enable high-performance searches of this data. While Web Storage is useful for storing smaller amounts of data, it is less useful for storing larger amounts of structured data.

In this next example we will use the example of the app made with React and add the indexedDB to persist the to-do list

Note: You can use the ArrowRight key to simulate the SoftRight key

If you reload this page you will see that the tasks you added were stored.

To run this application on your KaiOS device or simulator, follow these steps:

  • Clone the project with the follow command:
$ git clone https://github.com/kaiostech/sample-react.git -b indexedDB
  • Install the project's dependencies with the command npm install or yarn

To finish, execute the command npm run build or yarn build in your terminal, and test your application by sending the contents of the build folder to the device by WebIDE or load the contents of the build folder by Simulator.

You can consult the source code of this project and other projects consulted the KaiOS Workspace in GitHub

Theme apps

App themes give the user a better experience, giving her the ability to choose the best theme of her choice.

In this next example, we will use the example of the application made with Vanilla and we will add the light and dark themes.

Note: You can use the ArrowRight key to simulate the SoftRight key and the ArrowLeft key to simulate the SoftLeft key.

To run this application on your KaiOS device or simulator, follow these steps:

  • Clone the project with the follow command:
$ git clone https://github.com/kaiostech/sample-vanilla.git -b theme
  • Install the project's dependencies with the command npm install or yarn

To finish, execute the command npm run build or yarn build in your terminal, and test your application by sending the contents of the build folder to the device by WebIDE or load the contents of the build folder by Simulator.

You can consult the source code of this project and other projects consulted the KaiOS Workspace in GitHub

Apps with translation - l10n

Currently KaiOS uses a modified version of the L10n.js library to localize the default apps that are available in KaiOS.

In this next example, we will use the example of the application made with React and add the translations in en-US and pt-BR.

Note: You can use the ArrowRight key to simulate the SoftRight key

To run this application on your KaiOS device or simulator, follow these steps:

  • Clone the project with the follow command:
$ git clone https://github.com/kaiostech/sample-react.git -b l10n
  • Install the project's dependencies with the command npm install or yarn

To finish, execute the command npm run build or yarn build in your terminal, and test your application by sending the contents of the build folder to the device by WebIDE or load the contents of the build folder by Simulator.

You can consult the source code of this project and other projects consulted the KaiOS Workspace in GitHub