How to build a Whatsapp-clone using Ionic 2 CLI 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

.tortilla/manuals/templates/root.tmpl

@@ -0,0 +1,44 @@
+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!
+
+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 we can use the strengthnesses of each of those platform combined to create the ultimate stack for your mobile apps.
+
+In this tutorial, we will create a full `WhatsApp` clone using Angular and `Ionic` framework as a client platform and `Meteor`'s reactive collections and authentication packages as our back-end.
+
+#### Chapters
+
+- **[Step 1](.tortilla/manuals/views/step1.md)** - Bootstrapping
+- **[Step 2](.tortilla/manuals/views/step2.md)** - Chats Page
+- **[Step 3](.tortilla/manuals/views/step3.md)** - RxJS
+- **[Step 4](.tortilla/manuals/views/step4.md)** - Realtime Meteor Server
+- **[Step 5](.tortilla/manuals/views/step5.md)** - Folder Structure
+- **[Step 6](.tortilla/manuals/views/step6.md)** - Messages Page
+- **[Step 7](.tortilla/manuals/views/step7.md)** - Users & Authentication
+- **[Step 8](.tortilla/manuals/views/step8.md)** - Chats Creation & Removal
+- **[Step 9](.tortilla/manuals/views/step9.md)** - Privacy & Subscriptions
+- **[Step 10](.tortilla/manuals/views/step10.md)** - Filter & Pagination
+- **[Step 11](.tortilla/manuals/views/step11.md)** - Google Maps & Geolocation
+- **[Step 12](.tortilla/manuals/views/step12.md)** - File Upload & Images
+- **[Step 13](.tortilla/manuals/views/step13.md)** - Native Mobile
+
+{{{navStep ref="https://angular-meteor.com/tutorials/whatsapp2/ionic/setup"}}}

.tortilla/manuals/views/medium/root.md

@@ -0,0 +1,51 @@
+# How to build a Whatsapp-clone using Ionic 2 CLI and Meteor
+
+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!
+
+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 we can use the strengthnesses of each of those platform combined to create the ultimate stack for your mobile apps.
+
+In this tutorial, we will create a full `WhatsApp` clone using Angular and `Ionic` framework as a client platform and `Meteor`'s reactive collections and authentication packages as our back-end.
+
+#### Chapters
+
+- **[Step 1](.tortilla/manuals/views/step1.md)** - Bootstrapping
+- **[Step 2](.tortilla/manuals/views/step2.md)** - Chats Page
+- **[Step 3](.tortilla/manuals/views/step3.md)** - RxJS
+- **[Step 4](.tortilla/manuals/views/step4.md)** - Realtime Meteor Server
+- **[Step 5](.tortilla/manuals/views/step5.md)** - Folder Structure
+- **[Step 6](.tortilla/manuals/views/step6.md)** - Messages Page
+- **[Step 7](.tortilla/manuals/views/step7.md)** - Users & Authentication
+- **[Step 8](.tortilla/manuals/views/step8.md)** - Chats Creation & Removal
+- **[Step 9](.tortilla/manuals/views/step9.md)** - Privacy & Subscriptions
+- **[Step 10](.tortilla/manuals/views/step10.md)** - Filter & Pagination
+- **[Step 11](.tortilla/manuals/views/step11.md)** - Google Maps & Geolocation
+- **[Step 12](.tortilla/manuals/views/step12.md)** - File Upload & Images
+- **[Step 13](.tortilla/manuals/views/step13.md)** - Native Mobile
+
+[{]: <helper> (navStep ref="https://angular-meteor.com/tutorials/whatsapp2/ionic/setup")
+
+<b>║</b> <a href="https://angular-meteor.com/tutorials/whatsapp2/ionic/setup">BEGIN TUTORIAL</a> ⟹
+
+[}]: #
+

.tortilla/manuals/views/root.md

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

README.md

@@ -0,0 +1,52 @@
+# How to build a Whatsapp-clone using Ionic 2 CLI and Meteor
+
+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!
+
+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 we can use the strengthnesses of each of those platform combined to create the ultimate stack for your mobile apps.
+
+In this tutorial, we will create a full `WhatsApp` clone using Angular and `Ionic` framework as a client platform and `Meteor`'s reactive collections and authentication packages as our back-end.
+
+#### Chapters
+
+- **[Step 1](.tortilla/manuals/views/step1.md)** - Bootstrapping
+- **[Step 2](.tortilla/manuals/views/step2.md)** - Chats Page
+- **[Step 3](.tortilla/manuals/views/step3.md)** - RxJS
+- **[Step 4](.tortilla/manuals/views/step4.md)** - Realtime Meteor Server
+- **[Step 5](.tortilla/manuals/views/step5.md)** - Folder Structure
+- **[Step 6](.tortilla/manuals/views/step6.md)** - Messages Page
+- **[Step 7](.tortilla/manuals/views/step7.md)** - Users & Authentication
+- **[Step 8](.tortilla/manuals/views/step8.md)** - Chats Creation & Removal
+- **[Step 9](.tortilla/manuals/views/step9.md)** - Privacy & Subscriptions
+- **[Step 10](.tortilla/manuals/views/step10.md)** - Filter & Pagination
+- **[Step 11](.tortilla/manuals/views/step11.md)** - Google Maps & Geolocation
+- **[Step 12](.tortilla/manuals/views/step12.md)** - File Upload & Images
+- **[Step 13](.tortilla/manuals/views/step13.md)** - Native Mobile
+
+[{]: <helper> (navStep ref="https://angular-meteor.com/tutorials/whatsapp2/ionic/setup")
+
+| [Begin Tutorial >](https://angular-meteor.com/tutorials/whatsapp2/ionic/setup) |
+|----------------------:|
+
+[}]: #
+

config.xml

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<widget id="com.ionicframework.whatsapp638504" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
+  <name>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-navigation href="http://ionic.local/*"/>
+  <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"/>
+  <preference name="SplashShowOnlyFirstTime" value="false"/>
+  <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": "whatsapp",
+  "app_id": "",
+  "v2": true,
+  "typescript": true
+}

package.json

@@ -0,0 +1,55 @@
+{
+  "name": "ionic-hello-world",
+  "author": "Ionic Framework",
+  "homepage": "http://ionicframework.com/",
+  "private": true,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Urigo/Ionic2CLI-Meteor-WhatsApp.git"
+  },
+  "scripts": {
+    "clean": "ionic-app-scripts clean",
+    "build": "ionic-app-scripts build",
+    "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.7",
+    "ionic-angular": "2.0.0-rc.5",
+    "ionic-native": "2.2.11",
+    "ionicons": "3.0.0",
+    "rxjs": "5.0.0-beta.12",
+    "zone.js": "0.6.26",
+    "sw-toolbox": "3.4.0"
+  },
+  "devDependencies": {
+    "@ionic/app-scripts": "1.0.0",
+    "typescript": "2.0.9"
+  },
+  "cordovaPlugins": [
+    "cordova-plugin-whitelist",
+    "cordova-plugin-console",
+    "cordova-plugin-statusbar",
+    "cordova-plugin-device",
+    "ionic-plugin-keyboard",
+    "cordova-plugin-splashscreen"
+  ],
+  "cordovaPlatforms": [
+    "ios",
+    {
+      "platform": "ios",
+      "version": "",
+      "locator": "ios"
+    }
+  ],
+  "description": "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);