angularangular 2Angular Bindingsapollobackendbrowserbuild apps fastbuild collaborative appscompletely realtimegraphqlmeteormobilereal-timerealtimerealtime syncwebsockets
WhatsApp Clone with Meteor CLI and Ionic :1. Bootstrapping
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:$ meteor add-platform ios
Or
$ meteor add-platform android
You can find more information about
Meteor
CLI and build tool here:
For now, let’s remove unnecessary files:
$ rm -rf server client
Next, we will replace
Blaze
(Meteor
's default templating engine) with AngularJS
's template engine:$ meteor remove blaze-html-templates
$ meteor add angular-templates
We also need to make sure
Ionic
is installed along with its dependencies:$ meteor add dab0mb:ionic-assets
$ meteor npm install angular@^1.5.8 --save
$ meteor npm install angular-animate@^1.5.8 --save
$ meteor npm install angular-sanitize@^1.5.8 --save
$ meteor npm install angular-ui-router@^0.3.1 --save
$ meteor npm install ionic-scripts --save
$ meteor npm install babel-runtime --save
If you're an iOS user you might encounter some issues related to double tapping not being submitted correctly. This is caused due to a package automatically included by
Meteor
and it is called mobile-experience
so we can have a more native feeling for our app once running on a mobile device, which is not always right across the board. This package is simply a cluster of the following packages:fastclick
- Avoid the 300ms touch delay.mobile-status-bar
- Avoid the status bar information covering up your app content.launch-screen
- Cover the app with a launch image so that people don’t have to see things loading.
You can already figure out that the
fastclick
is a potential basis for our issue. So we will install the same packages mobile-experience
provides us with, with an exception of fastclick
:$ meteor add mobile-status-bar
$ meteor add launch-screen
And finally, we will install
angular-meteor
, of which this tutorial is all about:$ meteor npm install angular-meteor --save
0 comments