How to build a Whatsapp-clone using Ionic 2 and Meteor

.editorconfig

@@ -0,0 +1,17 @@
+# EditorConfig helps developers define and maintain consistent coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+
+# We recommend you to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.gitignore

@@ -0,0 +1,34 @@
+# Specifies intentionally untracked files to ignore when using Git
+# http://git-scm.com/docs/gitignore
+
+*~
+*.sw[mnpcod]
+*.log
+*.tmp
+*.tmp.*
+log.txt
+*.sublime-project
+*.sublime-workspace
+.vscode/
+npm-debug.log*
+
+.idea/
+.sass-cache/
+.tmp/
+.versions/
+coverage/
+dist/
+node_modules/
+tmp/
+temp/
+hooks/
+platforms/
+plugins/
+plugins/android.json
+plugins/ios.json
+www/
+$RECYCLE.BIN/
+
+.DS_Store
+Thumbs.db
+UserInterfaceState.xcuserstate

LICENSE

@@ -0,0 +1,21 @@
+The MIT License
+
+Copyright (c) 2016 Uri Goldshtein
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

README.md

@@ -0,0 +1,56 @@
+# How to build a Whatsapp-clone using Ionic 2 and Meteor
+
+[![bitHound Overall Score](https://www.bithound.io/github/Urigo/Ionic2CLI-Meteor-WhatsApp/badges/score.svg)](https://www.bithound.io/github/Urigo/Ionic2CLI-Meteor-WhatsApp) [![bitHound Dependencies](https://www.bithound.io/github/Urigo/Ionic2CLI-Meteor-WhatsApp/badges/dependencies.svg)](https://www.bithound.io/github/Urigo/Ionic2CLI-Meteor-WhatsApp/master/dependencies/npm)
+
+- [Start the tutorial @ angular-meteor.com](https://angular-meteor.com/tutorials/whatsapp2/ionic/setup)
+
+Facing your next mobile app project, you want to choose the best solutions to start fast while also solutions that will stay relevant when your project grows and scales.
+
+The two companies that took the concept of creating a platform with a complete set of tools for your development needs and not just another Framework to the furthest are Meteor and Ionic.
+
+**Ionic** - Ionic has become one of the most popular solutions to develop hybrid mobile apps fast across different platform.
+
+The Ionic platform includes solutions for prototyping, build, testing, deploying apps, a market of starter apps, plugins and themes, CLI integration and push notifications service. (Further writing by an Ionic person)
+
+**Meteor** - But your app needs a full stack solution.
+
+Meteor has become the only open source Javascript platform that supply the complete set of solutions you need to create a real time mobile connected apps.
+
+The Meteor platform is reliable, fast and easy to develop and deploy and it will also handle all the complexities of your app when it grows and scales with time.
+
+### So which one should you choose?
+
+Your best option is to use them both!
+
+With angular-meteor, Meteor became the best backend for Angular and Ionic apps.
+
+Both companies made the steps needed to support each other:
+
+- [Meteor now has official support for Angular with it's 3rd party libraries!](http://info.meteor.com/blog/official-angular-support-with-angular-meteor-1.0.0?__hstc=219992390.d5a12b08bbf681831d288088f2c1b55f.1476117688291.1482430169317.1482433129287.88&__hssc=219992390.2.1482433129287&__hsfp=2355228760)
+- [Ionic added official support for Meteor's packaging system](https://github.com/driftyco/ionic/pull/3133)
+
+So now you we can use the strengthnesses of each of those platform combined the create the ultimate stack for your mobile apps.
+
+In this post, we will create a full WhatsApp clone, using Angular and the Ionic Framework, using Meteor's realtime collections for the chat and Meteor's simple Authentication packages for SMS based authentication.
+
+Both platform has their own CLI and build process solutions.
+
+You can choose the CLI and build process that you prefer.
+
+So I've decided to create to two versions of that blog post, one, on Ionic's blog, using the Ionic CLI and one, on Meteor's blog, using the Meteor CLI and build process.
+
+#### Chapters
+
+- Installing the platform and creating a base app
+- Layout, coding style and structure
+- Creating a realtime Meteor server and connect to our existing app
+- Chat view and send messages
+- Users and (SMS) authentication
+- Create and remove chats
+- Privacy and publish/subscribe
+
+[{]: <helper> (nav_step ref="https://angular-meteor.com/tutorials/whatsapp2/ionic/1.0.0/setup")
+| [Begin Tutorial >](https://angular-meteor.com/tutorials/whatsapp2/ionic/1.0.0/setup) |
+|----------------------:|
+[}]: #
+

config.xml

@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<widget id="com.ionicframework.ionic2climeteormessenger476527" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
+  <name>Ionic2CLI-Meteor-Whatsapp</name>
+  <description>An awesome Ionic/Cordova app.</description>
+  <author email="hi@ionicframework" href="http://ionicframework.com/">Ionic Framework Team</author>
+  <content src="index.html"/>
+  <access origin="*"/>
+  <allow-intent href="http://*/*"/>
+  <allow-intent href="https://*/*"/>
+  <allow-intent href="tel:*"/>
+  <allow-intent href="sms:*"/>
+  <allow-intent href="mailto:*"/>
+  <allow-intent href="geo:*"/>
+  <platform name="android">
+    <allow-intent href="market:*"/>
+  </platform>
+  <platform name="ios">
+    <allow-intent href="itms:*"/>
+    <allow-intent href="itms-apps:*"/>
+  </platform>
+  <preference name="webviewbounce" value="false"/>
+  <preference name="UIWebViewBounce" value="false"/>
+  <preference name="DisallowOverscroll" value="true"/>
+  <preference name="android-minSdkVersion" value="16"/>
+  <preference name="BackupWebStorage" value="none"/>
+  <preference name="SplashMaintainAspectRatio" value="true"/>
+  <preference name="FadeSplashScreenDuration" value="300"/>
+  <feature name="StatusBar">
+    <param name="ios-package" onload="true" value="CDVStatusBar"/>
+  </feature>
+  <plugin name="ionic-plugin-keyboard" spec="~2.2.1"/>
+  <plugin name="cordova-plugin-whitelist" spec="1.3.1"/>
+  <plugin name="cordova-plugin-console" spec="1.0.5"/>
+  <plugin name="cordova-plugin-statusbar" spec="2.2.1"/>
+  <plugin name="cordova-plugin-device" spec="1.1.4"/>
+  <plugin name="cordova-plugin-splashscreen" spec="~4.0.1"/>
+</widget>

ionic.config.json

@@ -0,0 +1,6 @@
+{
+  "name": "Ionic2CLI-Meteor-Whatsapp",
+  "app_id": "",
+  "v2": true,
+  "typescript": true
+}

manuals/templates/root.md.tmpl

@@ -0,0 +1,50 @@
+[![bitHound Overall Score](https://www.bithound.io/github/Urigo/Ionic2CLI-Meteor-WhatsApp/badges/score.svg)](https://www.bithound.io/github/Urigo/Ionic2CLI-Meteor-WhatsApp) [![bitHound Dependencies](https://www.bithound.io/github/Urigo/Ionic2CLI-Meteor-WhatsApp/badges/dependencies.svg)](https://www.bithound.io/github/Urigo/Ionic2CLI-Meteor-WhatsApp/master/dependencies/npm)
+
+- [Start the tutorial @ angular-meteor.com](https://angular-meteor.com/tutorials/whatsapp2/ionic/setup)
+
+Facing your next mobile app project, you want to choose the best solutions to start fast while also solutions that will stay relevant when your project grows and scales.
+
+The two companies that took the concept of creating a platform with a complete set of tools for your development needs and not just another Framework to the furthest are Meteor and Ionic.
+
+**Ionic** - Ionic has become one of the most popular solutions to develop hybrid mobile apps fast across different platform.
+
+The Ionic platform includes solutions for prototyping, build, testing, deploying apps, a market of starter apps, plugins and themes, CLI integration and push notifications service. (Further writing by an Ionic person)
+
+**Meteor** - But your app needs a full stack solution.
+
+Meteor has become the only open source Javascript platform that supply the complete set of solutions you need to create a real time mobile connected apps.
+
+The Meteor platform is reliable, fast and easy to develop and deploy and it will also handle all the complexities of your app when it grows and scales with time.
+
+### So which one should you choose?
+
+Your best option is to use them both!
+
+With angular-meteor, Meteor became the best backend for Angular and Ionic apps.
+
+Both companies made the steps needed to support each other:
+
+- [Meteor now has official support for Angular with it's 3rd party libraries!](http://info.meteor.com/blog/official-angular-support-with-angular-meteor-1.0.0?__hstc=219992390.d5a12b08bbf681831d288088f2c1b55f.1476117688291.1482430169317.1482433129287.88&__hssc=219992390.2.1482433129287&__hsfp=2355228760)
+- [Ionic added official support for Meteor's packaging system](https://github.com/driftyco/ionic/pull/3133)
+
+So now you we can use the strengthnesses of each of those platform combined the create the ultimate stack for your mobile apps.
+
+In this post, we will create a full WhatsApp clone, using Angular and the Ionic Framework, using Meteor's realtime collections for the chat and Meteor's simple Authentication packages for SMS based authentication.
+
+Both platform has their own CLI and build process solutions.
+
+You can choose the CLI and build process that you prefer.
+
+So I've decided to create to two versions of that blog post, one, on Ionic's blog, using the Ionic CLI and one, on Meteor's blog, using the Meteor CLI and build process.
+
+#### Chapters
+
+- Installing the platform and creating a base app
+- Layout, coding style and structure
+- Creating a realtime Meteor server and connect to our existing app
+- Chat view and send messages
+- Users and (SMS) authentication
+- Create and remove chats
+- Privacy and publish/subscribe
+
+{{{nav_step ref="https://angular-meteor.com/tutorials/whatsapp2/ionic/1.0.0/setup"}}}

manuals/views/root.md

@@ -0,0 +1 @@
+../../README.md

package.json

@@ -0,0 +1,41 @@
+{
+  "name": "ionic-hello-world",
+  "author": "Ionic Framework",
+  "homepage": "http://ionicframework.com/",
+  "private": true,
+  "scripts": {
+    "ionic:build": "ionic-app-scripts build",
+    "ionic:serve": "ionic-app-scripts serve"
+  },
+  "dependencies": {
+    "@angular/common": "2.2.1",
+    "@angular/compiler": "2.2.1",
+    "@angular/compiler-cli": "2.2.1",
+    "@angular/core": "2.2.1",
+    "@angular/forms": "2.2.1",
+    "@angular/http": "2.2.1",
+    "@angular/platform-browser": "2.2.1",
+    "@angular/platform-browser-dynamic": "2.2.1",
+    "@angular/platform-server": "2.2.1",
+    "@ionic/storage": "1.1.6",
+    "ionic-angular": "2.0.0-rc.4",
+    "ionic-native": "2.2.11",
+    "ionicons": "3.0.0",
+    "rxjs": "5.0.0-beta.12",
+    "zone.js": "0.6.26"
+  },
+  "devDependencies": {
+    "@ionic/app-scripts": "0.0.47",
+    "typescript": "2.0.9"
+  },
+  "cordovaPlugins": [
+    "cordova-plugin-whitelist",
+    "cordova-plugin-statusbar",
+    "cordova-plugin-console",
+    "cordova-plugin-device",
+    "cordova-plugin-splashscreen",
+    "ionic-plugin-keyboard"
+  ],
+  "cordovaPlatforms": [],
+  "description": "Ionic2CLI-Meteor-Whatsapp: An Ionic project"
+}

src/app/app.component.ts

@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+import { Platform } from 'ionic-angular';
+import { StatusBar, Splashscreen } from 'ionic-native';
+
+import { TabsPage } from '../pages/tabs/tabs';
+
+
+@Component({
+  templateUrl: 'app.html'
+})
+export class MyApp {
+  rootPage = TabsPage;
+
+  constructor(platform: Platform) {
+    platform.ready().then(() => {
+      // Okay, so the platform is ready and our plugins are available.
+      // Here you can do any higher level native things you might need.
+      StatusBar.styleDefault();
+      Splashscreen.hide();
+    });
+  }
+}

src/app/app.html

@@ -0,0 +1 @@
+<ion-nav [root]="rootPage"></ion-nav>

src/app/app.module.ts

@@ -0,0 +1,30 @@
+import { NgModule, ErrorHandler } from '@angular/core';
+import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
+import { MyApp } from './app.component';
+import { AboutPage } from '../pages/about/about';
+import { ContactPage } from '../pages/contact/contact';
+import { HomePage } from '../pages/home/home';
+import { TabsPage } from '../pages/tabs/tabs';
+
+@NgModule({
+  declarations: [
+    MyApp,
+    AboutPage,
+    ContactPage,
+    HomePage,
+    TabsPage
+  ],
+  imports: [
+    IonicModule.forRoot(MyApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    MyApp,
+    AboutPage,
+    ContactPage,
+    HomePage,
+    TabsPage
+  ],
+  providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
+})
+export class AppModule {}

src/app/app.scss

@@ -0,0 +1,16 @@
+// http://ionicframework.com/docs/v2/theming/
+
+
+// App Global Sass
+// --------------------------------------------------
+// Put style rules here that you want to apply globally. These
+// styles are for the entire app and not just one component.
+// Additionally, this file can be also used as an entry point
+// to import other Sass files to be included in the output CSS.
+//
+// Shared Sass variables, which can be used to adjust Ionic's
+// default Sass variables, belong in "theme/variables.scss".
+//
+// To declare rules for a specific mode, create a child rule
+// for the .md, .ios, or .wp mode classes. The mode class is
+// automatically applied to the <body> element in the app.

src/app/main.ts

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

src/declarations.d.ts

@@ -0,0 +1,14 @@
+/*
+  Declaration files are how the Typescript compiler knows about the type information(or shape) of an object.
+  They're what make intellisense work and make Typescript know all about your code.
+
+  A wildcard module is declared below to allow third party libraries to be used in an app even if they don't
+  provide their own type declarations.
+
+  To learn more about using third party libraries in an Ionic app, check out the docs here:
+  http://ionicframework.com/docs/v2/resources/third-party-libs/
+
+  For more info on type definition files, check out the Typescript docs here:
+  https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html
+*/
+declare module '*';