Congratulations!

You’ve created a Whatsapp app!

Thanks a lot to Idan Wender, Dotan Simha and Eytan Manor who helped me (Urigo) a lot with this post.

Please also check out the Meteor version of the same blog which also includes adding a profile picture and send a picture in the chat.

Compare the two solutions yourself and choose what’s best for you.

You are welcome to add more features and extend this tutorial by pull requesting this repository.

Creating a full stack real time mobile app has never been so fast and easy.

And the most important thing - the tools we used (Meteor, Ionic) are good not only for simple use cases but also for a full production scale apps.

You can safely start with those solutions knowing that you won't have to switch to different solutions when your app will scale and add features.

Next steps:

If you'd like to deploy this app to a production server, we recommend you check out Meteor Galaxy, the cloud service for https://www.meteor.com/hosting.
Check out https://www.meteor.com/ for many more resources
Go to http://angular-meteor.com/ and check out the advanced tutorial

No comments

Our last step would be implementing image messages support. We will use the same package from the previous step to achieve that.

So we will use the same logic of taking the picture in the controller, and call the same newMessage() server method:

No comments

So now we will add an ability to add a user profile image using the device's camera (e.g. phone or laptop).

The first part is to add the Meteor package that provides us this ability:

$ meteor add okland:camera-ui

We will add now a server method for updating the user's profile image, which is just like updating any other string field of the user's profile:

No comments

Right now all the chats are published to all the clients which is not very safe for privacy. Let's fix that.

First thing we need to do in order to stop all the automatic publication of information is to remove the autopublish package from the Meteor server. Type in the command line:

$ meteor remove autopublish

We will add now the publish-composite package, which we will use later.

$ meteor add reywood:publish-composite

Now we need to explicitly define our publications. Let's start by sending the users' information.

Create a file named publications.js under the server folder and define the query we want to send to our clients:

No comments

Our next step is about adding new chats. So far we have the chats list implemented and user management, we just need to connect the two.

We will open the new chat view using Ionic's modal dialog, so first let's add a button that opens this dialog to the chats list:

5.1 Add new chat buttonclient/templates/chats.html

<ion-view view-title="Chats">

  <ion-nav-buttons side="right">

    <button ng-click="chats.showNewChatModal()" class="button button-clear button-positive button-icon ion-ios-compose-outline"></button>

  </ion-nav-buttons>

  <ion-content>

    <ion-list>

      <ion-item ng-repeat="chat in chats.data | orderBy:'-lastMessage.timestamp'"

This button calls a controller method, which we will implement now in the controller:

No comments

On this step we will authenticate and identify users in our app.

Before we go ahead and start extending our app, we will add few packages which will make our lives a bit less complex when it comes to authentication and users management.

First we will add a Meteor package called accounts-phone which gives us the ability to verify a user using an SMS code:

$ meteor add npm-bcrypt@0.8.7
$ meteor add mys:accounts-phone

And second, we will add angular-meteor-auth which provides us with authentication related functions:

$ meteor npm install angular-meteor-auth

Of course, don't forget to load the relevant modules:

No comments

In this step we will add the chat view and the ability to send messages.

We still don't have an identity for each user, we will add it later, but we can still send messages to existing chats.

So just like any other page, first we need to add a route and a state.

Let's call it chat and we will load a template and a controller which we will add later.

No comments

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).

No comments

We will start by creating the project’s folder structure, Meteor has a special behavior for certain folders:

client - These files will be available only in the client side.
server - These files will be available only in the server side.
public - These files will be served as is to the client e.g. assets like images, fonts, etc.
lib - Any folder named lib (in any hierarchy) will be loaded first.
Any other folder name will be included in both client and server and will be used for code-sharing.

No comments

Bootstrapping

Start by installing the Meteor platform if you haven't already (See reference).

Create a new project by running these commands in your command line:

$ meteor create whatsapp
$ cd whatsapp

Your app now contains a live and ready example. To run our app simply type the following on the command line:

$ meteor

We can also run our app inside the iOS simulator or Android emulator, we just need to add the platform so Meteor will build the project for the new platform:

No comments

Older Posts

Ionic App Framework Development

Bootstrapping

Follow Us