Create your Kintone app using Monaca

Kintone by Cybozu lets you quickly and easily build your own customized business applications such as daily reports, minutes, time-card, and surveys. It also lets you create applications using Excel or CSV files to satisfy your own needs.

Kintone provides a lot of features in the web browser but here we focus on developing using Kintone API and Monaca to transform your custom business application into a hybrid mobile application.

What you need

Creating Sales Records Management System

In this blog post, we are creating sales records management system. Let’s go ahead and create minimum template project in Monaca IDE.

Next, navigate your cursor to “Config” and select “Manage JS/CSS Components”

Then, add Onsen UI into the project. At the time of writing this, the most recent version of Onsen UI is 1.3.11.

Modify HTML

Now, we can modify our index.html file as shown below.

We added myApp module for AngularJS as well as Onsen UI.

We will also create login.html to show our app’s landing page.

We used Onsen UI components to make our life easier in the above code. In order to access Kintone API, what we really need in this page are:

  • domain
  • loginName
  • loginPass

Let’s take a look at what we have right now in Monaca Debugger.

Implementing Login Process

It’s time to make the back-end login process. First of all, we need a Base64 library to use Kintone API. For this demo we use BASE64 (RFC2045) Encode/Decode for string in JavaScript by MIZUTANI Tociyuki. Download and upload into the project under “js” folder (by creating new folder). Also, we will make kintone.js file for later modification.

Include those files in index.html.

When you tap Login button we want to show records of sales report. The code below defines a showList function that will make a HTTP request to get data from the Kintone API.

To make sure this is working, try logging in with your account information. You will see “Start login process” and “Successfully logged in” messages in a console window. Kintone’s server will reject if you access from a desktop browser.

Receiving Data

Now that we are successfully logged in, we can get data. Add the following code:

list.html

The content of list.html is as follows.

Final Touch in kintone.js

We use items variable to store list of records in list.html so we will modify js/kintone.js slightly.

First, reset $scope.items in a very beginning of the showList function.

Then, we will store returned data into the variable in the success call we defined earlier.

Finally, define MainController.

And that’s about it.

Let’s Try it Out

If we didn’t make any mistake we should be able to see list of records.

Further Practice

Changing the appearance or adding a detailed page to the app will make look and feel much nicer and richer.

The good thing about Kintone is that we are able to have control over data not only through their nice desktop application but also their rich Web API. Furthermore, using Monaca this is how easy a custom business application is made so take advantage of the Monaca and Kintone to create your own hybrid application.


Originally published at onsen.io on October 19, 2015.