Build a reactive sales chart app with Meteor

27 June 2014
PDF (239 KB)
 

Sign up for IBM Bluemix
This cloud platform is stocked with free services, runtimes, and infrastructure to help you quickly build and deploy your next mobile or web application.

Meteor is a complete real-time application stack for JavaScript developers. Its unique reactive programming model makes it possible to quickly create single-page, highly interactive web applications that are updated in real time.

My developerWorks article "Instant web applications with Meteor" explores Meteor development and the Meteor architecture in depth. One of the coding examples in that article is an interactive sales chart produced as a single-page web app. I later realized that Bluemix could give me a great way to demo and share that application in the cloud. (The code you'll work with in this article was tested on the latest preview release of Meteor, V0.8.1.1. The code in "Instant web applications with Meteor" is based on an older Meteor version.) Because Bluemix wasn't quite ready for deployment of Meteor applications, I prepared a custom buildpack to simplify the deployment of Meteor apps on Bluemix.

I'll show you how to create your own Meteor real-time sales chart application on DevOps Services and deploy it to Bluemix for global web access. Meteor uses MongoDB on the server side to store data, so you'll use the predefined MongoDB service on Bluemix to store sales data for the app. After you have your own application up, you can explore Meteor's reactive programming model by changing the code.

READ:Instant web applications with Meteor

READ:Getting Started with Bluemix and DevOps Services using Node.js

What you need

 

I prepared a custom buildpack to make deployment of Meteor apps on Bluemix simple.

Step 1. Explore the existing app

 

Click this article's Run the app button and try interacting with the sales chart application:

  1. Open multiple instances of a desktop or mobile phone browser and point them all to the application URL (http://meteorsales.mybluemix.net/).
  2. Select and click (or tap) any of the sales figures in the table, change the number, and click OK to update. Observe that both the tables and the pie charts in all the application instances are updated instantly.
  3. Try updating sales figures from another browser instance or mobile device.

If other readers are trying out the app when you are, you will see their updates, too.

Step 2. Fork the project code

 
  1. Click this article's Get the code button.
  2. In my meteorsales project page on DevOps Services, click EDIT CODE in the upper right: Screenshot of the EDIT CODE button on the DevOps Services project page
    Log into DevOps Services with your IBM ID and password.
  3. Click FORK to create a new project:
    Screenshot of the FORK button in DevOps Services

    When deployed on Bluemix, your app should have the same name as your DevOps Services project. All Bluemix projects currently share the same namespace, so your project (app) name must be unique.

    Enter a project name other than meteorsales. Your project can be either public or private.
  4. Examine your project's directory structure:
    • manifest.yml— Manifest DevOps Services uses to deploy the application to Bluemix
    • sales.css— CSS styles for the sales chart application
    • sales.html— Meteor template file for the application
    • sales.js— Client-side and server-side JavaScript code for the application
    • client/*jQuery plugin libraries used by the application
    • client/css/*— CSS styles used by the jQuery plugin libraries

How the Meteor code works

 

You write client and server logic in JavaScript when working with Meteor. This app's client- and server-side code are both in sales.js. (Alternatively, client and server code can be in separate subdirectories.)

Meteor scans the client directory (and subdirectories) for CSS files to style the UI and scans for JS files, which is how it picks up jQuery plugins. For HTML files, it merges the <head> and <body> sections of the files it finds.

The UI is typically constructed using Spacebar, a Meteor-specific template system similar to Handlebars. In sales.html, the template code for the sales chart app is as follows.

<head>
<title>Sales by Region</title>
</head>

<body>
  <div id="title">
  	<h1>Global Sales 2014</h1>
  </div>
  <div id="container">
  	<div id="salestable">
    	{{> salesdata}}
  	</div>
        {{> piechart}}
  </div>
</body>

<template name="piechart">
  	<div id="chart">
    </div>
</template>

<template name="salesdata">
  <div class="salesdata">
    {{#each dataset}}
      {{> datapoint}}
    {{/each}}
  </div>
</template>

<template name="datapoint">
  <div class="datapoint {{selected}}">
    <span id="{{_id}}_region" class="region">{{region}}</span>
    <span id="{{_id}}_total" class="sales editable">{{total}}</span>
  </div>
</template>

The table of sales figures is rendered by the salesdata template, which contains an instance of a datapoint template for each row. The chart <div> is where the jqPlot plugin renders the pie chart. An instance of the jEditable plugin is created to enable in-place editing of the sales figures.

Whenever sales figures are changed in the UI, Meteor's client-side MongoDB implementation (mini-mongo) is called to update the number. Meteor's reactive engine then synchronizes with the server-side MongoDB instance. This change is propagated to all browser or mobile instances viewing the same page, and the Meteor engine updates the local view accordingly.

The only server-side code initializes the MongoDB instance with seed data:

if (Meteor.isServer) {
  Meteor.startup(function () {
      Sales2013.remove({});
      Sales2013.insert({region:"US East", total: 2032333});
      Sales2013.insert({region:"US Central", total: 150332});
      Sales2013.insert({region:"US West", total: 1202412});
      Sales2013.insert({region:"Asia Pacific", total: 701223});
                   
  });
}

Step 3. Deploy the app to Bluemix

 
  1. Click DEPLOY AS and select Deploy application from Web IDE to Bluemix. If you haven't deployed to Bluemix from DevOps Services previously, enter your Bluemix user ID and password.
  2. Select the dev space as the target Bluemix deployment space and click DEPLOY: Screenshot of the Configure Application Deployment dialog box
  3. Wait for deployment, watching for status messages that pop up at the top of the page.

Eventually, you'll see a failure message telling you that the Bluemix route called meteorsales is already in use by another application. The app name in the manifest — currently meteorsales — must be your own app's unique name. Also, the manifest currently points to my MongoDB service instance on Bluemix, which the meteorsales app uses for storage. Your application has no access to that instance. (You'll update the manifest in Step 5.)

Step 4. Create a Bluemix MongoDB service instance

 

Now create your own MongoDB service instance and bind it to your application:

  1. Log into Bluemix.
  2. Scroll down and click Add a service.
  3. Click mongodb from among the available Data Management services and click CREATE AND ADD TO APP.
  4. Select Do not associate for Add to: and give your service a name. Click Create.

A notification in the upper-right corner briefly shows the name of the new MongoDB instance. If you miss that notification, scroll through your list of service instances to find the named MongoDB instance.

Step 5. Update the deployment manifest

 

Open the manifest.yml file in your DevOps Services project for editing. Right now it's the same as the manifest.yml from my project.

Notice that the manifest uses a custom buildpack. This buildpack, modified specifically for deploying Meteor applications to Bluemix, is based on the Heroku Meteorite buildpack.

applications:
- services:
 - mongodb-bf
  host: meteorsales
  disk: 1024M
  name: meteorsales
  buildpack: https://github.com/Sing-Li/heroku-buildpack-meteorite
  path: .
  domain: mybluemix.net
  mem: 1024M
  instances: 1

Customize the manifest for your project:

  1. Change the host: and name: settings to reflect your project's unique name.
  2. Change the service instance name to that of the MongoDB service you created in Step 4.
  3. Save your changed manifest (File > Save).

Step 6. Redeploy to Bluemix

 
  1. Click the DEPLOY button. After a while, you'll see a deployment status message. This time the deployment succeeds.
  2. In the Manual Deployment Information section, you can see the application name followed by a large dot. If the dot is green, your Meteor app is running on Bluemix and you can skip the rest of this step. If the dot is red, click it, then click Start application: Screenshot of the Start Application button
    The red dot eventually turns green to indicate that the app is running. You also get a URL for the app and a link to the staging and deployment logs.
  3. Click the application URL to go your own copy of the running sales chart app.

Now you can experiment by modifying the code and redeploying at will.

Conclusion

 

You no longer need a fleet of expensive development workstations and staging servers to develop highly interactive, streaming-data-update web applications that run on desktop browsers and mobile devices. With new-generation, rapid-development, full-stack platforms such as Meteor — coupled with the cloud-based developer facilities offered by DevOps Services and Bluemix— you can realize your ideas using only a connected browser, from wherever you are.

Add a comment

Note: HTML elements are not supported within comments.


1000 characters left

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Web development, Cloud computing
ArticleID=970388
ArticleTitle=Build a reactive sales chart app with Meteor
publish-date=06272014