/meteor-whatsapp

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

Primary LanguageJavaScript

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