Fork me on GitHub

WhatsApp Clone with Meteor CLI and Ionic

https://github.com/Urigo/Ionic-MeteorCLI-WhatsApp
navigate_beforePrevious searchCode Diff Nextnavigate_next
mode_editImprove This Tutorial

Realtime Meteor server

Note: If you skipped ahead to this section, click here to download a zip of the tutorial at this point.

In this step we are going to add several features to our project:

  • Create a server and initialize some static data in it.
  • Connect the client to the server.

So let’s start by creating some Mongo collections which will be used to store our data.

Mongo collections need to be available in both client and server in order to share data, so we will declare our collections in a folder named lib under the project’s root (lib/collections.js).

2.1 Add meteor collections lib/collections.js 
1
2
3
4
import { Mongo } from 'meteor/mongo';
 
export const Chats = new Mongo.Collection('chats');
export const Messages = new Mongo.Collection('messages');
Improve this code

Now we need to create our server's first file, so let's create a directory named server and create the server's startup file named bootstrap.js (server/bootstrap.js).

This file should be run first because we want to run some initialization code there, so we can use Meteor.startup() to define our logic:

2.2 Create server bootstrap server/bootstrap.js 
1
2
3
Meteor.startup(function() {
 
});
Improve this code

Our next step is to move the static data to the server, so let’s add it in the bootstrap.js file we just created, we also want this code to run only once when there is no data at all inside the collections.

2.3 Add chats collection data stub server/bootstrap.js 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
import Moment from 'moment';
import { Meteor } from 'meteor/meteor';
import { Chats, Messages } from '../lib/collections';
 
Meteor.startup(function() {
  if (Chats.find().count() !== 0) return;
 
  Messages.remove({});
 
  const messages = [
    {
      text: 'You on your way?',
      timestamp: Moment().subtract(1, 'hours').toDate()
    },
    {
      text: 'Hey, it\'s me',
      timestamp: Moment().subtract(2, 'hours').toDate()
    },
    {
      text: 'I should buy a boat',
      timestamp: Moment().subtract(1, 'days').toDate()
    },
    {
      text: 'Look at my mukluks!',
      timestamp: Moment().subtract(4, 'days').toDate()
    },
    {
      text: 'This is wicked good ice cream.',
      timestamp: Moment().subtract(2, 'weeks').toDate()
    }
  ];
 
  messages.forEach((m) => {
    Messages.insert(m);
  });
 
  const chats = [
    {
      name: 'Ethan Gonzalez',
      picture: 'https://randomuser.me/api/portraits/thumb/men/1.jpg'
    },
    {
      name: 'Bryan Wallace',
      picture: 'https://randomuser.me/api/portraits/thumb/lego/1.jpg'
    },
    {
      name: 'Avery Stewart',
      picture: 'https://randomuser.me/api/portraits/thumb/women/1.jpg'
    },
    {
      name: 'Katie Peterson',
      picture: 'https://randomuser.me/api/portraits/thumb/women/2.jpg'
    },
    {
      name: 'Ray Edwards',
      picture: 'https://randomuser.me/api/portraits/thumb/men/2.jpg'
    }
  ];
 
  chats.forEach((chat) => {
    const message = Messages.findOne({ chatId: { $exists: false } });
    chat.lastMessage = message;
    const chatId = Chats.insert(chat);
    Messages.update(message._id, { $set: { chatId } });
  });
});
Improve this code

Now we need to remove the static data from the client and get it from the server.

So let's use angular-meteor's API for this. We will define a helper named data, and we will return the Mongo collection cursor.

2.4 Add chats collection helper to chats controller client/scripts/controllers/chats.controller.js 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { Controller } from 'angular-ecmascript/module-helpers';
import { Chats } from '../../../lib/collections';
 
export default class ChatsCtrl extends Controller {
  constructor() {
    super(...arguments);
 
    this.helpers({
      data() {
        return Chats.find();
      }
    });
  }
 
  remove(chat) {
Improve this code

Now that the data comes from the server, we need to modify the remove() method in order to use Mongo Collection API that removes the object from both client and server:

2.5 Update delete button logic to use controller helper client/scripts/controllers/chats.controller.js 
13
14
15
16
17
18
19
  }
 
  remove(chat) {
    Chats.remove(chat._id);
  }
}
Improve this code


navigate_beforePrevious searchCode Diff Nextnavigate_next
mode_editImprove This Tutorial