https://github.com/monkeymars/meteor-whatsapp

Code for meteor blog post - Whatsapp clone with meteor and ionic
https://github.com/monkeymars/meteor-whatsapp

Last synced: 3 months ago
JSON representation

Code for meteor blog post - Whatsapp clone with meteor and ionic

• Host: GitHub
• URL: https://github.com/monkeymars/meteor-whatsapp
• Owner: monkeymars
• Fork: true (idanwe/meteor-whatsapp)
• Created: 2015-10-18T10:21:14.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2015-09-28T10:35:16.000Z (about 9 years ago)
• Last Synced: 2023-04-01T16:02:43.896Z (over 1 year ago)
• Language: JavaScript
• Homepage:
• Size: 313 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
 Meteor Whatsapp

==============

### Step 1 - Create the project

1. Install meteor `$ curl https://install.meteor.com/ | sh`

2. Create meteor project `$ meteor create whatsapp`

3. Add angular and ionic `$ meteor add angular driftyco:ionic`

4. Create project structure

    * /client

        - /scripts

            + /lib

                + app.js

        - /styles

        - /templates

        - index.html

    * /server

    * /public 

### Step 2 - Mock chats view

1. Add tabs and routes

    * Add `tabs.ng.html`

    * Add `routes.ng.js`

2. Mock chats view

    * Add ChatsCtrl

    * Add `chats.ng.html`

    * Add calendar filters

        - Add moment `$ meteor add momentjs:moment`

3. Setup sass

    * Add sass `$ meteor add fourseven:scss`

    * Add `chats.scss`

### Step 3 - Add Collections

1. Add Messages and Chats collections 

    * Add /lib/collections.js

2. Add /server/boostrap.js

3. Use angular meteor collection and remove() function

### Step 4 - Add chat view

1. Add chat detail view

    * Add `chat-details.ng.html`

    * Add `chat-details.scss`

    * Add pictures: `chat-background.png`, `message-other.png`, `message-mine.png`

        - images paths are absolute from the `public` folder

    * Add angular moment 

        - `$ meteor add jasonaibrahim:angular-moment`

        - Add `'angularMoment'` to the app dependencies

    * Add `input` directive for better mobile experience - `directives/input.directive.ng.js`

2. Add `'newMessage` method

    * Add `lib/methods.js`

    * `$ meteor add check`

### Step 5 - Add users

1. Add login with phone number

    * `$ meteor add okland:accounts-phone`

    * Add `server/sms.js` and `settings.json`

2. Add login flow:

    * Add `'login'`, `'confirmation'`, `'profile'` states

    * Server: Add `'updateName'` method 

    * Add 'login', 'profile' style files

3. Ensure that user is logged in:

    * Ensure user before 'tab', 'profile' states - resolve `$meteor.requireUser()`

    * Redirect to login route - `auth.js`

    * Server: Ensure that user logged in before preform methods

4. Server: Add `userId` to message 

5. Add `'settings'` tab with logout button

    * Add controller and template

### Step 6 - Create and remove chat

1. Add new chat modal view - add controller and template

2. Add `'newChat'` method and stub

3. Add `chatName` and `chatPicture` filters to get data by user _id

4. `$ meteor remove insecure`

5. Add `'removeChat'` method and change in `ChatsCtrl`

### Step 7 - Publish and subscribe

1. `$ meteor remove autopublish`

2. Add `'chats'` publish 

    * `$ meteor add reywood:publish-composite`

    * `$ touch publications.js`

    * Subscribe at the 'tab' state - resolve `$meteor.subscribe('chats');`

3. Add `'users'` publish

    * Subscribe at new chat controller

### Step 8 - Add profile picture

1. `$ meteor add okland:camera-ui`

2. Add `'updatePicture'` method

3. Add link to profile in settings

### Step 9 - Send picutre

1. Refactor `'sendMessage'` function to picture message

2. Add `message.type`

    * Run `db.messages.update({ type: { $exists: false } }, { $set: { type: 'text' } }, { multi: true })`

3. Adjust `chats` and `chat-detail` templates and style