Skip to content

zoltan-nz/chat-app-v2

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
app
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Chap App v2

1. Install CLI and create the app

$ npm install -g ember-cli

$ ember new chat-app

$ cd chat-app

$ ember server

$ ember g template application

2. Add bootstrap and some css

Searching bootstrap package: http://www.emberaddons.com

$ ember install ember-bootstrap

Some extra style in app/styles/app.css

body {
  padding-bottom: 70px;
}

.message-bar {
  height: 70px;
  padding-top: 13px;
}

.alert-chat {
  padding: 5px;
}

.label-user {
  font-size: 100%;
  font-weight: normal;
}

.nav-links {
  padding: 10px;
}

.nav-links a.active {
  text-decoration: underline;
}

3. Add header to the main template

/app/templates/application.hbs

<div class="container">
  <div class="page-header">
    <h1>WDC Mini Chat
      <small>Let's talk about Ember</small>
    </h1>
    <div class="pull-right nav-links">
      {{#link-to "index"}}Home{{/link-to}} |
    </div>
  </div>

  {{outlet}}
</div>

Create an extra About route:

$ ember g route about

Add the link to the header

{{#link-to "about"}}About{{/link-to}}

4. Create two pages: index and chat

$ ember generate template index

Add content to index

<h1>Index</h1>
$ ember generate route chat

5. Add dynamic segment to chat route

app/router.js

this.route('chat', { path: '/chat/:user_name' } );

6. Input box with condition on index page

app/templates/index.hbs

<div class="jumbotron text-center">
    <div class="container">
        <div class="col-md-4 col-md-offset-4">
          {{input class='form-control input-lg' placeholder="Enter your name." value=name}}
        </div>

        <div class="col-md-4 col-md-offset-4">
          {{#if name}}
              <h2>Please join to the chat {{name}}!</h2>
            {{#link-to 'chat' name class="btn btn-lg btn-success"}}Join{{/link-to}}
          {{else}}
              <p>Please enter your nickname and click the join button.</p>
          {{/if}}
        </div>
    </div>
</div>

7. Setup our backend (Firebase)

Firebase

$ ember install emberfire@1.6.5

config/environment.js

firebase: 'https://meetup-chat-app.firebaseio.com/',

8. Let's create our model

$ ember generate model message user:string text:string

Test it in Ember Inspector and check on Firebase.

9. Add create message field to the chat screen

app/templates/chat.hbs

<div class="navbar navbar-default navbar-fixed-bottom message-bar">
    <div class="container">
        <form class="form-horizontal">
            <div class="form-group">
                <div class="col-xs-10">
                  {{input class='form-control input-lg input-block' placeholder='Your message' value=textMessageFromInput}}
                </div>
                <div class="col-xs-2">
                  <button type="submit" class="btn btn-primary btn-lg" {{action 'createMessage' textMessageFromInput}}>Send</button>
                </div>
            </div>
        </form>
    </div>
</div>

app/routes/chat.js

Create the action:

  actions: {
    createMessage(message) {
      let newRecord = this.store.createRecord('message', {
        text: message,
        user: 'Joe'
      });

      newRecord.save();

      this.controller.set('textMessageFromInput', '');
    }
  }

10. Download chat messages from the server

app/routes/chat.js

  userFromParams: null,

  model(params) {
    this.set('userFromParams', params.user_name);
    return this.store.findAll('message');
  }

Iterate trough the downloaded model on chat page:

app/templates/chat.hbs

{{#each model as |message|}}
    <div class="alert alert-warning alert-chat">
        <p><span class="label label-warning label-user">{{message.user}}</span> {{message.text}}</p>
    </div>
{{/each}}

Build the production code

$ ember build --prod

Deploy with Firebase

Using firebase tools for deployment

$ npm install -g firebase-tools
$ firebase login
$ firebase init

Update firebase.json

{
  "firebase": "YOUR-APP-NAME-ON-FIREBASE",
  "public": "dist",
  "rewrites": [{
    "source": "**",
    "destination": "/index.html"
  }]
}
$ firebase deploy

Deploy with Surge

$ cd ./dist
$ cp index.html 200.html
$ surge

More details about surge: http://surge.sh

Releases

No releases published

Packages

No packages published