Application Quickstart

In this quickstart, you will build, deploy, and use an example IoT web-application with the following features:

Requirements

Hardware Setup

No hardware is required to complete this guide.

Software Setup

In order to complete this tutorial, you will need Git, Node.js and npm, and Ruby and RubyGems installed on your system.

NOTE: This is a technical tutorial. Some familiarity with your operating system’s terminal is necessary.

Getting Started

Create an application solution using the home automation example as a starting point here: https://www.exosite.io/business/solutions

NOTE: You may have to delete your previous application if you are on a free account.

image alt text

Notice, the Home Automation Example will pull-in a public GitHub repository. If you are using your own GitHub repository in the future, it will not be linked to your application (e.g., push to your GitHub repository and see changes on your application). It consumes the repository when creating the application, and you can push changes using Murano CLI.

image alt text

To verify the template worked, select your newly created application and click the ROUTES menu item -- you should see something like this:

image alt text

You have now created a custom API, owner and guest roles with device-level permissions, a responsive web app (which you will make changes to later), and an empty user database.

LINK YOUR PRODUCT WITH YOUR APPLICATION

NOTE: If you have not created a product yet, create one here: https://exosite.io/business/solutions

Products are linked to applications to expose the Product Data as a "Service".

1) In your Application, click on the SERVICES tab

2) Select Products

image alt text

3) Check the box next to your Product

4) Select EDIT SCRIPT

5) Write "device_event(event)" in the script area and SAVE. See Modules -> device for executing code.

image alt text

6) Click "SAVE"

Your product is now linked to your application. To control a device under this product from the web application, ensure that the device has written data since configuring it with your application in the steps above.

SIGN UP FOR A NEW ACCOUNT ON THE WEB APP

  1. Open your application solution URL.

    image alt text

  2. Sign up for an account on your new example app.

    NOTE: You will not be able to login with your Exosite Murano credentials.
    This is a totally separate application that you just deployed on the Murano platform, with a separate user database.

    If you used the Home Automation Example, it should look like this:

    image alt text

  3. After signing up, click on the email verification link, then log in.

  4. In the new web app, add a lightbulb using the identity of the device you added earlier (e.g., if you simulated a lightbulb using a Python script, your device identity would most likely be "000001"). Click "ADD."

    NOTE: If you have not added a device yet, it will throw an error.

    image alt text

    image alt text

  5. Click to open your device. You should see data from the lightbulb—current humidity, temperature, and whether it is on or off.

    NOTE: If you simulated a device using the Python Script, keep the script running so data will continue to flow into the application. It should look like this:

image alt text

Congratulations—you have connected a device to your web app and are seeing live data.

ADVANCED: DEPLOY CHANGES TO THE EXAMPLE APPLICATION SOLUTION

  1. Clone this GitHub repo:

    git clone https://github.com/exosite/home-automation-example
    
  2. CD to the directory:

    cd home-automation-example
    
  3. Install Murano CLI:

    gem install MuranoCLI
    
  4. Configure Murano CLI to use your account:

    murano config user.name <YOUR_EMAIL_ADDRESS>
    murano config application.id <APPLICATION_ID>
    murano business list
    

    The last command should result in a prompt for your account password. If you experience problems at this step, please visit the Murano CLI documentation for assistance.

  5. Once you have confirmed that Murano CLI was successfully installed and configured, run the following three commands:

    npm install
    
    npm run compile
    
    murano syncup -V --no-specs
    
  6. Make a change to home-automation-example > app > components > Login.js. Change the text from “Login” to “Login HERE” to make sure changes are deployed.

    image alt text

  7. Compile your code:

    npm run compile
    
  8. Deploy your application solution from the top-level directory (you may need to CD back up to home-automation-example directory):

    murano syncup -V --no-specs
    
  9. Navigate back to your deployed web application's login page to see the change!

    image alt text

SETTING UP LOCAL DEVELOPMENT

  1. To run the web application static assets locally, create an .env file in the root of the project with your application solution URL, like this (name it anything):

    API_BASE_URL=https://.apps.exosite-dev.io

    NOTE: The Chrome plugin in the next step may change the appearance of certain websites (e.g., GitHub.com) until you disable it. You can easily disable the plugin by going to Chrome > Preferences > Extensions > Disable ModHeader.

  2. Install this Google Chrome plugin and import this configuration:

    {"title":"Local Debugging","hideComment":true,"headers":  [{"enabled":true,"name":"","value":"","comment":""}],"respHeaders":[{"enabled":true,"name":"Access-Control-Allow- Origin","value":"http://localhost:8080","comment":""},{"enabled":true,"name":"Access-Control-Allow- Credentials","value":"true","comment":""}],"filters":[],"appendMode":""}
    

    image alt text

    image alt text

In your terminal:

  1. CD to the home-automation-example directory and paste this command:

    npm run start:dev
    
  2. Go to http://localhost:8080 in your browser.

  3. To push your application changes to Murano, simply run:

    npm run compile
    
  4. Deploy your application changes to Murano:

    murano syncup -V --no-specs
    

You can now develop locally, compile your app, and push to the cloud.

UP NEXT: BUILD OUT A COMPLETE SYSTEM WITH A TUTORIAL >>