Meteor Tutorial for Web and Mobile App Development

By | March 24, 2017

Meteor is one of the most popular JavaScript platform for web and mobile application development. Just like Ionic (we covered in previous Mobile App Development Tutorial), we will explore various features of Meteor as a web and mobile app development platform.Meteor Mobile App Development

Understanding Meteor Web and Mobile App Development

Web and Mobile App Development with Meteor

Meteor is currently most popular full-stack JavaScript platform for developing modern web as well as mobile applications.

  • Its basic advantage is it can be incorporated with all the existing popular front end JavaScript libraries such as Angularjs, Reactjs, Nodejs and so on. In addition, it has its own front end library. Therefore, the whole community of JavaScript could easily enjoy developing Meteor application.
  • Another reason for the rapid improvement in the popularity of Meteor is that using meteor, it can be possible to develop an application using only one language.
  • This also provides full stack reactivity, allowing the UI to seamlessly reflect the true state of the object with minimal development effort.
  • It has MongoDB configuration already available for any application.

Back to top

How to Install Meteor?

Download Meteor.exe file from the following location and install it

Installing Meteor

On OS X or Linux? Install the latest official Meteor release from your terminal:

Back to top

Meteor Learning Material

  1. The place to get started with Meteor is the official tutorial.
  2. Stack Overflow is the best place to ask (and answer!) technical questions. Be sure to add the meteor tag to your question.
  3. Visit the Meteor discussion forums to announce projects, get help, talk about the community, or discuss changes to core.
  4. The Meteor docs is the best place to find the core API documentation of the platform.
  5. Atmosphere is the repository of community packages designed especially for Meteor.
  6. Awesome Meteor is a community-curated list of packages and resources.

Back to top

Creating a basic Meteor Application?

We can follow the below steps to create a basic Meteor Application:

  • On the workspace open command prompt and run the following command:
    Meteor Mobile App

    Therefore if you want to create a full scaffolding application use the following command:

  • Get inside the project folder, lets the project name is meteortodo

  • The folder structure for a minimal application for the project would look like:Meteor App File Structure
    For a full scaffolding app, the folder structure would be as following:Full Scaffolding App
  • Install all the dependencies by running the following command:

  • Run the application locally under localhost

    Start MongoDB and Application
    This will start proxy, MongoDb server as well as the application.

  • From browser if we run ‘localhost:3000’Meteor Web App Running

Back to top

Using ECMAScript package, ESLint in Coding Meteor Application

While Angularjs and Reactjs is mainly focusing on Typescript, Meteor mainly recommends to use ES2015+ which is the ECMAScript package. ECMAScript is the replacement for CommonJS and AMD, therefore, it makes the application development more smooth and more object-oriented fashion.

However, if developers feel more comfortable with Typescript, ECMAScript can be removed and application can be customized for Typescript. Running following command will remove ECMAScript and install Typescript.

It would be also necessary to configure tsconfig.ts file for typescript compiler.

How to use Eslint in coding Meteor Application?

To setup ESLint in the  application, it need to install the following npm packages:

It is also configurable in  the eslintConfig section to the package.json file of the project in order to specify that application to use the Airbnb config, and to enable ESLint-plugin-Meteor.

Finally in order to run theeslint , the following meteor command need to be executed

  • Atom
  • Webstorm

Atom:

Install these three following packages and restart Atom:

Webstorm:

WebStorm provides its won set of instructure for using EsLint here. Therefore the steps are

  • install the ESLint Node packages
  • enable ESLint and click “Apply”Webstorm Preferences

Back to top

Collections in Meteor

What is Collection in Meteor?

Meteor has its own configuration for MongoDB. Therefore, it usually store the data in the MongoDB and Collections are the store for data in Meteor in the same concept as MongoDB. In MongoDB, a set of related data is referred to as a “collection”. In Meteor the application access MongoDB data through collections. Therefore, collection is the persistence mechanism for the app data.

How many types of MongoDB Collection are available in Meteor?

The collections could be in server, client or even locally.

Server-side collections:

Let’s create a server side collection as following in api/books.js’ file.

Following action will be taken for the above line

  • A collection with name books will be created in MongoDB
  • An interface to access the new collection will be initiated
  • Following synchronous API can manipulate the collection
Client-side collections:

Let’s write the same line for client side:

Following action will be taken for the above line in client side

  • There is no direct connection to the MongoDB database from clientside, therefore it is not possible to actually create a new Mongo collection by this line. However, this line will initiate a cache In-memory database with name books in client side.
  • Following synchronous API can manipulate the in-memory cache.
  • As Meteor uses PUB-SUB module. Therefore, it may be possible that the client contains an up-to-date copy of some subset of the full MongoDB collection. As a result, it need to necessary to write this latest version to actual MongoDb using methods article.
Local collections:

It stays on the client or server, while creating a collection it pass null instead of a name:

Following action will be taken for the above line

  • creates a local collection, which is a Minimongo collection that has no database connection
  • The main purpose of this collection is to use the Minimongo library for in-memory storage

What is Schema?

MongoDB is a schema-less database, however, in real world it is necessary while writing to the db the structure of the data is consistent, otherwise it would cost too much in consistencies on rendering the data or even reading them from database. Therefore, schema is used as a known data format to constrain the contents of the collection to conform to that format.

How to define Schema?

Firstly, we have to add a package that could help us to define the schema. Any of the following package can be added to the application in order to create schema for data model.

  • aldeed:simple-schema: an expressive, MongoDB based schema
  • jagi:astronomy: a full Object Model (OM) layer offering schema definition, server/client side validators, object methods and event handlers

Secondly, we have a Lists ‘Books’. Lets use simple-schema, to create a new instance of the SimpleSchema class and attach it to the Lists object:

This above lines define a schema with a few simple rules:

  1. The fields can be defined either required or ooptional.
  2. It is possible to put default value e.g rating is a number, which on insertion is set to 0 if not specified.
  3. For more validation rule, it is possible to define the regEx.

Use of Schema for validation

To validate a document against a schema is pretty straightforward.

In the above example, as description is optional, it would be validated successfully. However if we perform the following:

Here _id is missing and myFeedback is not in schema. Therefore, it would return Validation error. Therefore it is a good practice that every time there is call for any database operation e.g.  Lists.insert(),  Lists.update(),  Lists.upsert(), first the document or modifier will be automatically checked against the schema. In rder to do so, we just have to add the following line:

Back to top

How to Read and Write Collection and Connect to MongoDB Client?

How to Load Data from Collection?

We just need to import the file where books collection has been created.

How to Save Data to Collection?

We have start Mongo db. In a new terminal tab, go to the app root directory and execute the following command:

In the command prompt we can direct connect to the Collection as following:

This will add a book in the books collection.

Client Side of Meteor Mobile App Development

From client side application, we have to save data to a collection in a number of steps as following:

  • Create a new template for adding books as following in /pages/books/new_book.html.
  • Initiate the date picker in the new_book.js file  and also add the new book to Books collection.
  • In order to load the book from the collection, we just need to add the following method on the onrender method and update the template to show the list.
  • In order to update or delete any of the book from the database we have to add the following method.
    Mobile Application Development

Back to top

An example of View Rendering in Meteor Application

At this moment inside imports/ui folder a number of folder has been generated as follows:View Rendering in Meteor Mobile App

Here, hello and info are two different component those have been defined inside components folder and home page has been defined inside pages/home folder.

Creating Component:

Inside components folder, every new component is created. Each page or component has a HTML template and a corresponding .js file. For example, in hello.html a template with name hello has been defined.

In hello.js file, hello.html has been imported. On loading the component template, helloOnCreated() method is being called. Therefore, all related initialization task need to be performed inside this folder.

The next important thing is evetry time an event is triggered, Template.hello.events({}) listen for event and execute corresponding action.

Each component has its own instance in order access the object of the class.

Template.hello.helpers() , this helper section controls all the necessary helping method.

Creating Page:

Inside pages folder each page would have its own folder. This structure is not mandatory, however for large scale project this is a suitable code structure. Each page would have a HTMl template file and a corresponding js file.

For example, in home.html:

Here , hello component has been rendered inside App_hoem template.

And in home.js

It just need to import the necessary js file for each used component and the template file for corresponding page.

Now if from meteor command line tool we run the following command:

And from browser we run ‘localhost:3000’, we can see the following:

Welcome Mobile App

Dynamic Template Render:

The main page of the application is body inside layout:Dynamic Template Render in Meteor App

Inside body.html

Therefore, the main template is changed y any other template dynamically.Meteor App Logo

Currently the home template has been loaded, however if we want to load the register template.

Add Route:

Therefore we have to add a new route in routes.js in ‘\mylibrary\imports\startup\client\routes.js’  as following:

Add Login UI:

  • Add account-ui using following command:

  • There are a number of functionality for login in order to use password, facebook login twitter login and so one. We have to pick one of the following package and add that to  the application.

    For example,Login Meteor App
    It is also possible to add multiple one from the above package.

  • Adding loginButtons component in any place will render the login windows

Add Register Template:

We have add the form for register as following in \mylibrary\imports\ui\pages\register\register.html.

And then in register.js the following function need to be added

Back to top

How to make External HTTP request in Meteor?

For example if we want to get data from the api called http://api.randomuser.me.

  • Add  HTTP in order to make HTTP call.
  • Add Method in server.
    We need to add the following method in server/methods file as following:
  • Call getFriends method from the cardlist template as following:
  • Add cardlist Template as following:

Back to top

How to communicate between nested template?

Take a look at the cardlist Template as following:

Here cardlist component has rendered card component in a loop and for each item in the loop it pass the friend variable as a parameter to card component/template:

As session been added the package so we need to add session to the app using following command:

Back to top

This was part-1 in Developing Web and Mobile Application using Meteor Framework. Following parts in this series will contain more practical examples.  So, keep in touch.

More Mobile App Development and Related Articles: