https://github.com/zoltan-nz/chat-app-v2
Shorter Chat App Demo
https://github.com/zoltan-nz/chat-app-v2
ember emberjs tutorial
Last synced: about 1 year ago
JSON representation
Shorter Chat App Demo
- Host: GitHub
- URL: https://github.com/zoltan-nz/chat-app-v2
- Owner: zoltan-nz
- Created: 2016-01-27T09:47:53.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2016-07-21T15:40:51.000Z (almost 10 years ago)
- Last Synced: 2025-03-24T08:55:38.206Z (about 1 year ago)
- Topics: ember, emberjs, tutorial
- Language: JavaScript
- Homepage: https://meetup-chat-app.firebaseapp.com
- Size: 15.6 KB
- Stars: 15
- Watchers: 0
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](http://localhost:4200)
- Ember Inspector
$ ember g template application
## 2. Add bootstrap and some css
Searching bootstrap package: [http://www.emberaddons.com](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`
```html
WDC Mini Chat
Let's talk about Ember
{{#link-to "index"}}Home{{/link-to}} |
{{outlet}}
```
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
```
Index
```
```
$ 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`
```html
{{input class='form-control input-lg' placeholder="Enter your name." value=name}}
{{#if name}}
Please join to the chat {{name}}!
{{#link-to 'chat' name class="btn btn-lg btn-success"}}Join{{/link-to}}
{{else}}
Please enter your nickname and click the join button.
{{/if}}
```
## 7. Setup our backend (Firebase)
[Firebase](http://www.firebase.com)
```
$ 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`
```html
```
`app/routes/chat.js`
Create the action:
```javascript
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`
```html
{{#each model as |message|}}
{{message.user}} {{message.text}}
{{/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`
```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