This sample shows how to develop a to-do hybrid mobile app using Google Chrome APIs in Telerik AppBuilder. You can clone this sample in Telerik AppBuilder, explore and modify the code, and build and run it on Android or iOS devices.
This sample lets you create, edit, complete, and remove tasks, export them to Google Drive and set alarms for your tasks. You can filter the list of currently shown task by their status.
Google provides an Apache Cordova-based toolchain that lets developers wrap a Chrome App in a native container to make it available for Android and iOS devices. For a list of the Chrome Apps APIs that are currently supported for mobile development, click here.
Google provides each API as a custom Apache Cordova plugin that you can import in Telerik AppBuilder. For more information about how to work with custom Apache Cordova in Telerik AppBuilder, click here.
Each Chrome API might depend on another Chrome API or a core Apache Cordova plugin. Telerik AppBuilder automatically resolves Apache Cordova core plugins dependencies but cannot resolve Chrome APIs dependencies. When you develop apps with Chrome APIs and Telerik AppBuilder, always make sure to import all interdependent Chrome APIs. The plugin.xml
for the Chrome API lists all dependencies.
The Telerik AppBuilder team has modified the existing Chrome TodoMVC mobile sample to make it compatible with Telerik AppBuilder. You can find the source Chrome TodoMVC mobile sample here. This sample lets you create, edit, complete, and remove tasks, export them to Google Drive and set alarms for your tasks. You can filter the list of currently shown task by their status.
The sample is initialized as a Chrome app. For more information about the development of Chrome apps, including the app container, click here.
All required Chrome APIs, including mobile and desktop APIs on which the app relies, are added as custom plugins.
The sample shows how to use the following methods and objects of the mobile Google Chrome APIs.
- storage: Lets you manage todo tasks in the local storage.
- alarms: Lets you manage alarms for your tasks.
- identity: Lets you authenticate with Google to export tasks to Google Drive.
- syncFileSystem: Lets you access the file system of the device to export your tasks as a
txt
file to Google Drive. - notifications: Lets you manage reminders for your tasks.
You can clone this sample in Telerik AppBuilder, explore and modify the code, and build and run it on Android or iOS devices.
- Log in the Telerik Platform at https://platform.telerik.com.
- Navigate to the workspace in which you want to clone the sample.
- Click Create project and select AppBuilder.
- Select Clone repository.
- In the Repository Uri text box, paste
https://github.com/Icenium/sample-chrome-todomvc.git
. - Provide a project name.
- (Optional) Provide a project description.
- Click Create project.
- Run the Windows client and log in.
- In the Dashboard, click Clone.
- From the Workspace drop-down list, select the workspace in which you want to clone the sample.
- In the Repository Uri text box, paste
https://github.com/Icenium/sample-chrome-todomvc.git
. - Provide a project name.
- Click Clone.
- In your browser, navigate to https://github.com/Icenium/sample-chrome-todomvc.
- Click Download ZIP, store the archive on your local file system and extract it.
- In {{ms-vs}}, create a new project from the Blank template.
- In the Solution Explorer, select the
css
,img
,js
, andApp_Resources
folders, and theindex.html
file. - Press
Delete
and confirm that you want to delete the selected files and folders. - In Windows Explorer, go to the folder where you extracted the sample app and navigate to the subfolder that contains
index.html
. - Select all files and folders except
*.proj
andcordova.*.js
. - Drag the selection to the Solution Explorer in {{ms-vs}} and drop it on your project node.
- If prompted, confirm that you want to replace the existing files.
- In your browser, navigate to https://github.com/Icenium/sample-chrome-todomvc.
- Click Download ZIP, store the archive on your local file system and extract it.
- Run a command prompt, log in, and navigate to the folder that contains the
PROJ
file for the sample app. - Run
$ appbuilder init
.
The command-line interface shows the following message: Successfully initialized project in the folder!
You can run this sample on iOS 7.0 and later devices and Android 4.0 and later devices. You cannot run this sample in the Telerik AppBuilder companion apps or the Telerik AppBuilder device simulator.
With Telerik AppBuilder, you can deploy apps on device wirelessly or via cable connection. For more information about running apps on devices, click here.
This sample is licensed under the Apache License, Version 2.0. For more information, see License.