Create a Web App

First, let us create a new web app and integrate the Kii Cloud SDK. Let us also do a quick test to see if the SDK is integrated correctly.

Creating a new web app

Save a HTML file and a JS file in a directory at your choice. The target web app consists of these files.

Insert these lines which process nothing at this time. We enhance them in later steps.

index.html

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript" src="main.js"></script>
    <script type="text/javascript">
      window.onload = function() {
        execute();
      }
    </script>
  </head>

  <body>
    JavaScript MQTT Push Notification Tutorial
  </body>
</html>

main.js

function execute() {
}

The web app just executes the execute function at this time. The below page is displayed when you open the index.html in the browser.

Switch the browser to the developer mode so that you can see the console and other information for future activities.

Integrating the Kii Cloud SDK

We will now prepare Kii Cloud SDK by following the steps described in the JavaScript Quick Start guide.

Follow the quick start guide link in each step to see the detailed procedures. Once you've followed the procedures in the quick start guide, come back to this page and proceed to the next step.

We will integrate the SDK in the following two steps:

  1. Create an application in Kii Cloud

    Log in to the Kii Cloud developer portal and create a new application. The push notification will be executed under this application.

    • Set an easy-to-remember application name, like "Push Notification".
    • Set the server location to the nearest region from where you are going to distribute the web app.

    After the application is created in Kii Cloud, you will get the AppID to identify the application.

    Open Creating a Kii Application and complete all the steps excluding the section "Adding collaborators". When you are done, come back to this page and proceed to the next step.

  2. Integrate the Kii Cloud SDK

    Integrate the Kii Cloud SDK in the web app you've created in the previous step.

    Open Adding the SDK to Your Web App and complete all the steps. When you are done, come back to this page and proceed.

You do not need to use the procedures covered in Enabling the Kii Push Notification Feature (MQTT). We will present the detailed procedures in this tutorial.

Now the index.html should look like the code sample below. Replace AppID and KiiSite for the Kii.initializeWithSite() with those of your application. Also, change the path of the JS file with the actual file path.

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript" src="KiiSDK.js"></script>
    <script type="text/javascript" src="main.js"></script>
    <script type="text/javascript">
      window.onload = function() {
        Kii.initializeWithSite("11111111", "22222222222222222222222222222222", KiiSite.JP);
        execute();
      }
    </script>
  </head>

  <body>
    JavaScript MQTT Push Notification Tutorial
  </body>
</html>

Testing the Kii Cloud feature

At this moment, you should be able to call Kii Cloud APIs in your web app. To test if the SDK is integrated correctly, we will now create a new user.

The user we create here will be used later. In Kii Cloud, the destination of push notifications is a user, so we need to create a user beforehand. We will create a new user with the following fixed username and password for now (in the real web app, you will most likely want to create a user in more practical way; check the implementation tips at the end of this tutorial):

  • Username: user1

  • Password: 123ABC

Add these lines to the main.js file:

function execute() {
  var username = "user1";
  var password = "123ABC";
  var user = KiiUser.userWithUsername(username, password);
  user.register().then(
    function(theUser) {
      alert("Succeeded");
    }
  ).catch(
    function(error) {
      var errorString = error.message;
      alert("Error: " + errorString);
    }
  );
}

Here is what is happening in the sample code:

  • Execute the register method to create a new Kii Cloud user with the fixed username and password.
  • Receive the user registration result with the Promise functions and display a message with the alert.

See topics in the Hello Kii tutorial and the JavaScript Programming Guide for implementation with Promise.

Test run

Now, let's launch and run the web app. The user registration is successful if the message "Succeeded" pops up after the web app is launched.

If you launch the application more than once, the "USERALREADYEXISTS" error will show up since the web app will attempt to register the duplicating user. You can ignore the error in this case because the user has already been created.

If you see another error message, double-check all steps again. For example, make sure that the Kii.initialize method is correctly executed to integrate the SDK. Also, make sure that the correct AppID, AppKey, and server location are set. In addition, check the browser console for errors.

Deleting the user creation process

Once a user is created, the above sample code is no longer needed. Delete or comment out the code.

Let us go to the next step: Integrate a Library

<< JavaScript (Web) Push Notification Tutorial Integrate a Library >>