Sony Arouje

This post is an introduction to Meteor and intended to developers who are new to Meteor.

So what is Meteor?

Yes Meteor is a java script web framework that can do wonders with less line of code. Watch this Screen cast before you proceed. One of the feature that I really liked is the real time pushing of changed data set to all the connected clients in real time, without any complex code from developers.

Installing Meteor

I use Windows as my development environment, so we need to use the Meteor msi installer. We can get the latest installer from http://win.meteor.com/. Download the setup and install it. After installation we need to start CMD / Bash as administrator or reboot for it to catch the environment changes.

Developing Meteor App

Open the command prompt and change directory to your desired folder, say f:\sony\tracers\meteor. Then issue the create command as shown below.

>meteor create helloworld

Here ‘helloworld’ is my application name. You can give any name for your application. The command creates a folder with the application name with a .meteor folder and sample html and js file. To check whether the application created correctly, type ‘meteor’ in the command prompt as shown below.

As you can see our application is running in localhost, we can fire any browser to that url and can see your first meteor app running. I am leaving the screen shot, see it your self.

Explore Meteor in Detail

It’s time to see some of the cool features of Meteor. I created a small application called pointofsale. Rest of the post will be around this application. It’s a small application I started in Meteor with below functionality.

• Product Entry
• Order entry

I completed only Product Entry and Listing.

Disclaimer: I am very bad in Web UI development, so you will see a very ugly UI

Folder Structure

You can find more details about file structuring here. My app’s folder structure is shown below

I use meteor Knockout as my MVVM framework.

Templates

Templates are like User controls in ASP.NET. That has set of controls and logic. Meteor has a nice documentation about Templates, check it out before you move on.

Let’s see the Product Entry Template to get some insight.

<template name="productEntry">
    <table> 
        <tr>
            <td><Label >Product Code</Label></td>
            <td><label>Product Name</label></td>
        </tr>
        <tr>
            <td><input type="text" id="prodCode" data-bind="value: productCode" placeholder="Code"/></td>
            <td><input type="text" id="prodName" data-bind="value: productName" placeholder="Name"/></td>
            <td><input type="button" value="Add" id="addProduct"/></td>
        </tr>
    </table>
    <br>
</template>

As I said I use knockout js, so for data binding I added knock out attribute data-bind=”value: productCode” to input text.

Let’s see the java script of Product Entry.

if(Meteor.is_client)
{
  var productCode= ko.observable();
  var productName= ko.observable();

  var viewModel={
    productCode:productCode,
    productName:productName
  };

  Meteor.startup( function() {ko.applyBindings(viewModel); });

  Template.productEntry.events={
      "click #addProduct": function(){
            var id=Products.insert({prodCode:this.productCode(), prodName:this.productName()});
      }
  };

}

Meteor.is_client will return true if the code is running in client, based on this condition we can add client specific codes. As you can see, some of the code above are knockout specific and am not going in detail, except the event handling. You can learn knockout from http://learn.knockoutjs.com/.

Template.productEntry.events={
    "click #addProduct": function(){
          var id=Products.insert({prodCode:this.productCode(), prodName:this.productName()});
    }
};

The above code means, capture all the events in productEntry template. Right now productEntry template has only one button named addProduct and we need to handle the click event. That’s what we are doing in the above code. Leave the Products.Insert now, will come back to that later. So how do we handle a click event of another button, it’s very simple as shown below, just separate two functions with a comma.

Template.productEntry.events={     "click #addProduct": function(){         var id=Products.insert({prodCode:this.productCode(), prodName:this.productName()});     },     "click #showAlert": function(){         alert ("Hellow world");     }
};

Meteor Collection

In the above code we are referring an object called Products, what is it? It’s a Meteor collection, meteor uses collection to handle data storage and manipulations. Where is it declared? as this Products collection may require in Server side as well. So I created a file in the root called dbRef.js and declared the collection there as shown below.

Products =  new Meteor.Collection("product");

We can use this Products collection to add, remove or search products to display in the client. Have a look at the product listing template to see how to use Products collection to display as list.

<template name="productListing">
    <label>Product Listing</label>
        {{#each products}}
            {{>product}}
        {{/each}}
</template>

<template name="product">
    <div class="product {{selected}}">
        <span class="code">{{prodCode}}</span>
        <span class="name">{{prodName}}</span>
        <span><input type="button" value="Delete" id="delete"></input> </span>
    </div>
</template>

Below is the js file of the template.

if(Meteor.is_client)
{
    Template.productListing.products=function (){
        return Products.find();
    };

    Template.product.events ={
        'click': function(){
            Session.set("selected_product", this._id);
        },

        "click #delete": function(){
            Products.remove({_id:Session.get("selected_product")});
        }
    };

    Template.product.selected = function () {
        return Session.equals("selected_product", this._id) ? "selected" : '';
    };

}

The highlighted ‘products’ function uses the Products collection to return all the products entered. Rest of the code is for deleting and selecting the item in the list.

I think I covered the basics of Meteor, will cover more in coming days. You all can download the source code of pointOfSale from Google Drive