Chap App v2
1. Install CLI and create the app
$ npm install -g ember-cli
$ ember new chat-app
$ cd chat-app
$ ember server
- http://localhost:4200
- Ember Inspector
$ 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)
$ ember install [email protected]
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