Skip to content
JavaScript HTML CSS
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
app
config
public
tests
vendor
.bowerrc
.editorconfig
.ember-cli
.gitignore
.jshintrc
.travis.yml
.watchmanconfig
README.md
bower.json
ember-cli-build.js
firebase.json
package.json
testem.json

README.md

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

You can’t perform that action at this time.