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.
Now, we can modify our index.html file as shown below.
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:
Let’s take a look at what we have right now in Monaca Debugger.
Implementing Login Process
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.
Now that we are successfully logged in, we can get data. Add the following code:
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.
$scope.items in a very beginning of the
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.
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.