{"id":16721746,"url":"https://github.com/zoltan-nz/chat-app-v2","last_synced_at":"2025-04-10T10:07:29.415Z","repository":{"id":144596518,"uuid":"50497603","full_name":"zoltan-nz/chat-app-v2","owner":"zoltan-nz","description":"Shorter Chat App Demo","archived":false,"fork":false,"pushed_at":"2016-07-21T15:40:51.000Z","size":16,"stargazers_count":15,"open_issues_count":2,"forks_count":3,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-24T08:55:38.206Z","etag":null,"topics":["ember","emberjs","tutorial"],"latest_commit_sha":null,"homepage":"https://meetup-chat-app.firebaseapp.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zoltan-nz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-01-27T09:47:53.000Z","updated_at":"2024-05-30T03:04:39.000Z","dependencies_parsed_at":null,"dependency_job_id":"711dd64b-6303-4043-a6b9-8df5421c76cb","html_url":"https://github.com/zoltan-nz/chat-app-v2","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zoltan-nz%2Fchat-app-v2","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zoltan-nz%2Fchat-app-v2/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zoltan-nz%2Fchat-app-v2/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zoltan-nz%2Fchat-app-v2/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zoltan-nz","download_url":"https://codeload.github.com/zoltan-nz/chat-app-v2/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248198882,"owners_count":21063628,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ember","emberjs","tutorial"],"created_at":"2024-10-12T22:32:07.095Z","updated_at":"2025-04-10T10:07:29.406Z","avatar_url":"https://github.com/zoltan-nz.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Chap App v2\n\n## 1. Install CLI and create the app\n\n```\n$ npm install -g ember-cli\n\n$ ember new chat-app\n\n$ cd chat-app\n\n$ ember server\n```\n- [http://localhost:4200](http://localhost:4200)\n- Ember Inspector\n\n$ ember g template application\n\n## 2. Add bootstrap and some css\n\nSearching bootstrap package: [http://www.emberaddons.com](http://www.emberaddons.com)\n\n```\n$ ember install ember-bootstrap\n```\n\nSome extra style in `app/styles/app.css`\n\n```\nbody {\n  padding-bottom: 70px;\n}\n\n.message-bar {\n  height: 70px;\n  padding-top: 13px;\n}\n\n.alert-chat {\n  padding: 5px;\n}\n\n.label-user {\n  font-size: 100%;\n  font-weight: normal;\n}\n\n.nav-links {\n  padding: 10px;\n}\n\n.nav-links a.active {\n  text-decoration: underline;\n}\n```\n\n## 3. Add header to the main template\n\n`/app/templates/application.hbs`\n\n```html\n\u003cdiv class=\"container\"\u003e\n  \u003cdiv class=\"page-header\"\u003e\n    \u003ch1\u003eWDC Mini Chat\n      \u003csmall\u003eLet's talk about Ember\u003c/small\u003e\n    \u003c/h1\u003e\n    \u003cdiv class=\"pull-right nav-links\"\u003e\n      {{#link-to \"index\"}}Home{{/link-to}} |\n    \u003c/div\u003e\n  \u003c/div\u003e\n\n  {{outlet}}\n\u003c/div\u003e\n```\n\nCreate an extra About route:\n\n```\n$ ember g route about\n```\nAdd the link to the header\n\n```\n{{#link-to \"about\"}}About{{/link-to}}\n```\n\n## 4. Create two pages: index and chat\n\n```\n$ ember generate template index\n```\n\nAdd content to index\n\n```\n\u003ch1\u003eIndex\u003c/h1\u003e\n```\n\n```\n$ ember generate route chat\n```\n\n## 5. Add dynamic segment to `chat` route\n\n`app/router.js`\n\n```\nthis.route('chat', { path: '/chat/:user_name' } );\n```\n\n## 6. Input box with condition on index page\n\n`app/templates/index.hbs`\n\n```html\n\u003cdiv class=\"jumbotron text-center\"\u003e\n    \u003cdiv class=\"container\"\u003e\n        \u003cdiv class=\"col-md-4 col-md-offset-4\"\u003e\n          {{input class='form-control input-lg' placeholder=\"Enter your name.\" value=name}}\n        \u003c/div\u003e\n\n        \u003cdiv class=\"col-md-4 col-md-offset-4\"\u003e\n          {{#if name}}\n              \u003ch2\u003ePlease join to the chat {{name}}!\u003c/h2\u003e\n            {{#link-to 'chat' name class=\"btn btn-lg btn-success\"}}Join{{/link-to}}\n          {{else}}\n              \u003cp\u003ePlease enter your nickname and click the join button.\u003c/p\u003e\n          {{/if}}\n        \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n## 7. Setup our backend (Firebase)\n\n[Firebase](http://www.firebase.com)\n\n```\n$ ember install emberfire@1.6.5\n```\n\n`config/environment.js`\n\n```\nfirebase: 'https://meetup-chat-app.firebaseio.com/',\n```\n\n## 8. Let's create our model\n\n```\n$ ember generate model message user:string text:string\n```\n\nTest it in Ember Inspector and check on Firebase.\n\n## 9. Add create message field to the chat screen\n\n`app/templates/chat.hbs`\n\n```html\n\u003cdiv class=\"navbar navbar-default navbar-fixed-bottom message-bar\"\u003e\n    \u003cdiv class=\"container\"\u003e\n        \u003cform class=\"form-horizontal\"\u003e\n            \u003cdiv class=\"form-group\"\u003e\n                \u003cdiv class=\"col-xs-10\"\u003e\n                  {{input class='form-control input-lg input-block' placeholder='Your message' value=textMessageFromInput}}\n                \u003c/div\u003e\n                \u003cdiv class=\"col-xs-2\"\u003e\n                  \u003cbutton type=\"submit\" class=\"btn btn-primary btn-lg\" {{action 'createMessage' textMessageFromInput}}\u003eSend\u003c/button\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n        \u003c/form\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n`app/routes/chat.js`\n\nCreate the action:\n\n```javascript\n  actions: {\n    createMessage(message) {\n      let newRecord = this.store.createRecord('message', {\n        text: message,\n        user: 'Joe'\n      });\n\n      newRecord.save();\n\n      this.controller.set('textMessageFromInput', '');\n    }\n  }\n```\n\n## 10. Download chat messages from the server\n\n`app/routes/chat.js`\n\n```\n  userFromParams: null,\n\n  model(params) {\n    this.set('userFromParams', params.user_name);\n    return this.store.findAll('message');\n  }\n```\n\nIterate trough the downloaded model on chat page:\n\n`app/templates/chat.hbs`\n\n```html\n{{#each model as |message|}}\n    \u003cdiv class=\"alert alert-warning alert-chat\"\u003e\n        \u003cp\u003e\u003cspan class=\"label label-warning label-user\"\u003e{{message.user}}\u003c/span\u003e {{message.text}}\u003c/p\u003e\n    \u003c/div\u003e\n{{/each}}\n```\n\n## Build the production code\n\n```\n$ ember build --prod\n```\n\n### Deploy with Firebase\n\nUsing firebase tools for deployment\n\n```\n$ npm install -g firebase-tools\n```\n\n```\n$ firebase login\n```\n\n```\n$ firebase init\n```\n\nUpdate `firebase.json`\n\n```json\n{\n  \"firebase\": \"YOUR-APP-NAME-ON-FIREBASE\",\n  \"public\": \"dist\",\n  \"rewrites\": [{\n    \"source\": \"**\",\n    \"destination\": \"/index.html\"\n  }]\n}\n```\n\n```\n$ firebase deploy\n```\n\n### Deploy with Surge\n\n```\n$ cd ./dist\n$ cp index.html 200.html\n```\n\n```\n$ surge\n```\n\nMore details about surge: http://surge.sh\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzoltan-nz%2Fchat-app-v2","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzoltan-nz%2Fchat-app-v2","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzoltan-nz%2Fchat-app-v2/lists"}