Code Monkey home page Code Monkey logo

ionic-whatsapp's Introduction

Step 1 - Start

  1. Install ionic $ npm install -g ionic
  2. Start ionic tabs template $ ionic start whatsapp tabs

Step 2 - Mock Whatsapp chats view, coding style and structure

  1. Apply John Papa coding style
    • Seperate components to their own files:
      • config.js
      • routes.js
      • controllers/chats.controller.js
      • controllers/chat-detail.controller.js
  2. Mock Whatsapp tabs
  3. Mock Whatsapp chats view
    • Add timestamp to lastMessage
    • Add filters/calendar.filter.js
    • Add moment.js - $ bower install moment --save
  4. Setup sass:
    • $ npm install
    • $ ionic setup sass
  5. Add chats.scss
  6. Change data scheme:
    • id -> _id
    • face -> picture
    • lastText -> lastMessage { text, timestamp }

Step 3 - Connect to Meteor server

  1. Create server:
    • $ meteor create server
    • $ rm server.*
    • $ mkdir lib && touch lib/collection.js
    • Define Chats, Messages collections
    • $ touch bootstrap.js
    • Move the bootstrap data from Chats service to initiate the Chats collection.
    • $ meteor add momentjs:moment
  2. $ bower install meteor-client-side angular-meteor --save
  3. Define collections at the client in collections.js
  4. Change the controllers to work with the Meteor Collection and Object:
    • Use $scope.$meteorCollection
    • Use $scope.$meteorObject
    • Remove Chats service

Step 4 - Add chat view

  1. Imitate Whatsapp's chat ui:
  • Add chat-detils.html
  • Add chat-detils.scss
  • Add pictures: chat-background.png, message-other.png, message-mine.png
  • Add angular-moment $ bower install angular-moment --save
  1. Add input.directive.js to better mobile experience
  2. Server: Add 'newMessage' method
    • $ meteor add check
    • Add methods.js
  3. Client: Add 'newMessage' stub
    • Add stubs.js

Step 5 - Add users

  1. Add accounts-phone
    • Server:
      • $ meteor add okland:accounts-phone
      • Add sms.js and settings.json
    • Client:

      • $ bower install accounts-phone --save

      • Require the scripts in index.html

        <script src="lib/accounts-base-client-side/dist/accounts-base-client-side.bundle.min.js"></script>
<script src="lib/accounts-phone/dist/accounts-phone.bundle.min.js"></script>
  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

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 - Add publish and subscription

  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

ionic-whatsapp's People

Contributors

idanwe avatar

Watchers

avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.