JavaScript HTML CSS
Switch branches/tags
Nothing to show
Clone or download
Latest commit 5aa6db2 Jul 15, 2016
Permalink
Failed to load latest commit information.
app Update to Ember 2.3 Feb 25, 2016
config Add Firebase and create the model Jan 21, 2016
public Default app Jan 19, 2016
tests Add Firebase and create the model Jan 21, 2016
vendor Default app Jan 19, 2016
.bowerrc Default app Jan 19, 2016
.editorconfig Default app Jan 19, 2016
.ember-cli Default app Jan 19, 2016
.gitignore Default app Jan 19, 2016
.jshintrc Default app Jan 19, 2016
.travis.yml Default app Jan 19, 2016
.watchmanconfig Default app Jan 19, 2016
README.md Update readme Jul 15, 2016
bower.json Update to Ember 2.3 Feb 25, 2016
ember-cli-build.js Default app Jan 19, 2016
firebase.json Deployment Jan 24, 2016
package.json Update to Ember 2.3 Feb 25, 2016
testem.json Default app Jan 19, 2016

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