├── .gitignore ├── app ├── firebase-config.js └── app.js ├── package.json └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | node_modules -------------------------------------------------------------------------------- /app/firebase-config.js: -------------------------------------------------------------------------------- 1 | define('firebase-config', function(){ 2 | return { 3 | apiKey: "AIzaSyCpObA1C8_CiPb_z3wSEab5FIn_RkBnmmU", 4 | authDomain: "vuejs-firebase-2fe23.firebaseapp.com", 5 | databaseURL: "https://vuejs-firebase-2fe23.firebaseio.com", 6 | storageBucket: "vuejs-firebase-2fe23.appspot.com", 7 | }; 8 | }); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vuejs-firebase-curso", 3 | "version": "0.0.1", 4 | "description": "Realtime com Vue.js e Firebase", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "blueimp-md5": "^2.3.0", 13 | "bootstrap": "^3.3.6", 14 | "jquery": "^2.1.4", 15 | "requirejs": "^2.2.0", 16 | "vue": "^1.0.25", 17 | "vue-fire": "^0.1.0", 18 | "vue-router": "^0.7.13", 19 | "vuefire": "^1.1.1" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Chat da School of Net 6 | 7 | 8 | 9 |
10 |
11 |
12 | 13 |
14 |
15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /app/app.js: -------------------------------------------------------------------------------- 1 | requirejs(['firebase-config'], function(config){ 2 | var firebaseApp = firebase.initializeApp(config); 3 | var db = firebaseApp.database(); 4 | var chatComponent = Vue.extend({ 5 | template: ` 6 | 31 |
32 |
Chat
33 |
34 | 46 |
47 |
48 |
49 | 51 | 52 | 53 | 54 |
55 |
56 |
57 | `, 58 | created: function(){ 59 | var roomRef = 'chat/rooms/' + this.$route.params.room; 60 | this.$bindAsArray('messages', db.ref(roomRef + '/messages')); 61 | }, 62 | data: function () { 63 | return { 64 | user: { 65 | email: localStorage.getItem('email'), 66 | name: localStorage.getItem('name'), 67 | photo: localStorage.getItem('photo') 68 | }, 69 | message: '' 70 | }; 71 | }, 72 | methods: { 73 | isUser: function (email) { 74 | return this.user.email == email; 75 | }, 76 | sendMessage: function(){ 77 | this.$firebaseRefs.messages.push({ 78 | name: this.user.name, 79 | email: this.user.email, 80 | text: this.message, 81 | photo: this.user.photo 82 | }); 83 | } 84 | } 85 | }); 86 | 87 | var roomsComponent = Vue.extend({ 88 | template: ` 89 |
90 |
91 |
92 | {{ o.name }} 93 |
94 |
95 | {{o.description}} 96 |
97 | Entrar 98 |
99 |
100 |
101 | 125 | `, 126 | firebase: { 127 | rooms: db.ref('chat/rooms') 128 | }, 129 | data: function(){ 130 | return { 131 | rooms: [ 132 | {id: "001", name: "PHP", description: "Entusiasta do PHP"}, 133 | {id: "002",name: "Java", description: "Developer experts"}, 134 | {id: "003",name: "C#", description: "Os caras do C#"}, 135 | {id: "004",name: "C++", description: "Fissurados por programação"}, 136 | {id: "005",name: "Javascript", description: "Olha a web aí!"}, 137 | {id: "006",name: "Vue.js", description: "Chat dos caras do data-binding"}, 138 | ], 139 | name: '', 140 | email: '', 141 | room: null 142 | }; 143 | }, 144 | methods: { 145 | login: function(){ 146 | localStorage.setItem('name', this.name); 147 | localStorage.setItem('email', this.email); 148 | localStorage.setItem('photo','http://www.gravatar.com/avatar/'+md5(this.email)+'.jpg'); 149 | $('#modalLoginEmail').modal('hide'); 150 | this.$route.router.go('/chat/'+this.room.id); 151 | }, 152 | openModal: function(room){ 153 | this.room = room; 154 | $('#modalLoginEmail').modal('show'); 155 | } 156 | } 157 | }); 158 | var rooms = [ 159 | {id: "001", name: "PHP", description: "Entusiasta do PHP"}, 160 | {id: "002",name: "Java", description: "Developer experts"}, 161 | {id: "003",name: "C#", description: "Os caras do C#"}, 162 | {id: "004",name: "C++", description: "Fissurados por programação"}, 163 | {id: "005",name: "Javascript", description: "Olha a web aí!"}, 164 | {id: "006",name: "Vue.js", description: "Chat dos caras do data-binding"}, 165 | ]; 166 | var roomsCreateComponent = Vue.extend({ 167 | template: ` 168 | 173 | `, 174 | firebase: { 175 | rooms: db.ref('chat/rooms') 176 | }, 177 | ready: function(){ 178 | var chatRef = db.ref('chat') 179 | var roomsChildren = chatRef.child('rooms'); 180 | rooms.forEach(function(room){ 181 | roomsChildren.child(room.id).set({ 182 | name: room.name, 183 | description: room.description 184 | }); 185 | }) 186 | } 187 | }); 188 | 189 | var appComponent = Vue.extend({}); 190 | 191 | var router = new VueRouter(); 192 | 193 | router.map({ 194 | '/chat/:room': { 195 | component: chatComponent 196 | }, 197 | '/rooms': { 198 | component: roomsComponent 199 | }, 200 | '/rooms-create': { 201 | component: roomsCreateComponent 202 | } 203 | }); 204 | 205 | router.start(appComponent,"#app"); 206 | }); 207 | 208 | --------------------------------------------------------------------------------