We will look into the
index.html file that is loaded first in the Web app.
This page defines these three steps in the listed order:
Loading the scripts and the style sheet
Initializing the SDK
Generating the contents
Each file is embedded as below:
login-page-callback.js file and the
list-page-callback.js file are configured.
Note that the Kii Cloud SDK is also loaded with the
<script> tag. Even when you develop your own Web app, you need to distribute or publish the downloaded Kii Cloud SDK as a part of your Web app.
The below script is defined in the
<head> element. This script is automatically executed when the HTML page is loaded because it is set as the handler of the
window.onload event. The Kii Cloud SDK is initialized here.
Kii.initializeWithSite() method initializes the SDK. It has three parameters: AppID, AppKey (an arbitrary value), and the server location of the application in order.
There are many applications created by numerous developers on Kii Cloud. To distinguish the applications, Kii Cloud uses the AppID. This value is generated when you create your application on the developer portal.
As illustrated in the figure below, the AppID is to be set in the initialization process of the mobile app. By setting the same AppID, application data and users can be shared across multiple platforms; in the figure, the Android and iOS applications are sharing the same application data and users by using the same AppID 1111.
When you download Hello Kii application from the developer portal, the unique AppID and AppKey for you are assigned and embedded in the ZIP file automatically. When you open the project, you will find the initialization code, like the one shown at the top of this page, is already embedded.
If you are creating a new project, you need to embed the AppID and AppKey by yourself. To check the AppID, click the gear icon at the upper-right corner of the developer portal to expand the menu icons and click the key icon. The AppID will pop up as follows:
It is not possible to attack your application by knowing its AppID. If a malicious user obtains your application's ClientID and ClientSecret, however, they will be able to access all of your application data as the app administrator. The ClientID and ClientSecret, therefore, need to be secured just like the login password of the developer portal.
Be careful when you paste your codes in your posts in places like support communities. Make sure to hide the ClientID and ClientSecret. When you are sending a question to Kii support team, you only need to provide the AppID and server location.
Finally, the HTML page is defined in the
In this tutorial, both of the login and data listing screens are written in the
<div> elements. Screen transition is achieved by switching the
display property of the
style attribute of each
The below outlines the defined contents. Each of the three
<div> elements respectively defines the header part, the login screen, and the data listing screen. Transition between the
login-page division and the
list-page division is achieved by switching the
display property of the
<body> <div class="app-header"> Hello Kii </div> <div id="login-page" class="app-body"> ...... contents of the user login screen ...... </div> <div id="list-page" class="app-body" style="display: none"> ...... contents of the data listing screen ...... </div> </html>
This mechanism for screen transition is simplified to explain Hello Kii. It would not address requirements of general Web services. Perform page transition by using frameworks in your development of a real-world Web app.
Let's check how the login screen is implemented. We will explain how the APIs are used.
Go to Login Screen Implementation.