Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Generando comentarios en tu proyecto

10/28
Recursos

Aportes 14

Preguntas 5

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Para todos mis amigos que al igual que yo no son frontends les dejo el codigo, a mi me funciona perfectamente, si tienen problemas por lo menos les puede servir de atajo para no escribir tanto codigo ya que pienso que no estamos aca para aprender vue.

  1. Codigos de Consola:
sudo npm install -g @vue/cli
vue create fabrica-memes
vue add vuetify
npm i firebase vue-router vuefire
npm run serve

Home.vue

<template>
  <v-container>
    <v-layout >
      <v-flex xs12 pl-2>
        <input type="file" ref="fileIput" 
        id="file" @change="processFile($event)">
      </v-flex>
    </v-layout>
    <v-layout xs12 pb-3>
      <v-flex>
        <v-btn color="primary" @click="uploadFile">Enviar</v-btn>
      </v-flex>

    </v-layout>
    <v-divider></v-divider>
      <v-layout row wrap align-center>
        <v-flex xs12>
          <v-container fluid class="pl-0 pr-0">
            <v-layout row wrap>
              <v-flex xs12 sm6 lg3 v-for="image in images" v-bind:key="image.id">
                <v-card>
                  <v-img
                    class = "white --text"
                    height="200px"
                    :src="image.url">
                  </v-img>
                  <v-card-title>
                    <div>
                      <span class="grey--text">{{image.name}}</span>
                      <v-chip>{{image.scorePromedio}}</v-chip>
                      <br>
                    </div>
                  </v-card-title>
                  <v-card-actions>
                    <v-btn flat @click="goToImageDetail(image.id)">Explore</v-btn>
                  </v-card-actions>
                </v-card>
              </v-flex> 
            </v-layout>
          </v-container>
        </v-flex>
      </v-layout>
  </v-container>
</template>

<script>
import{firestore} from '@/main'
import{storage} from '@/main'

  export default {
    data: () => ({
      file:'',
      images: [],
      content: 'Content'
    }),
    methods:{
      processFile: function(event){
        this.file= event.target.files[0]
      },
    uploadFile: function(){
      let name = (+new Date ())+ '-' + this.file.name
      let metadata = {contentType: this.file.type}
      storage.child(name).put(this.file, metadata)
      .then(snapshot => snapshot.ref.getDownloadURL())
      .then ( url=>{
        let image= {
          url:url,
          name: name,
          cretedAt : (+new Date()),
          scorePromedio: 0
        }
        firestore.collection('images').add(image)
      })
    },
    goToImageDetail: function(id){
      this.$router.push({path:`/image/${id}`})
    }
  },
  firestore(){
    return {
      images: firestore.collection('images')
    }
  }
  
  }
</script>

ImageDetail.vue

  <template>
    <v-container>
      <v-layout xs12 pl-2>
        <v-flex xs12 sm6 md6 lg6>
          <v-card>
            <v-img
              class = "white--text"
              :src="image.url"
              height="200px"
            ></v-img>
            <v-card-title>
              <div>
                <span class="grey--text">{{image.name}}</span>
                <v-chip>{{image.scorePromedio}}</v-chip>
                <br>
              </div>
            </v-card-title>
          </v-card>
        </v-flex>
      </v-layout>
      <v-layout>
        <v-flex xs12>
          <v-text-field 
            label="Que te parece esta foto"
            v-model="comentario">
          </v-text-field>
          <v-layout>
            <v-layout>
                <v-flex xs12 pt-5>
                <v-btn primary @click="enviarComentario">Enviar</v-btn>
              </v-flex>
            </v-layout>
            <v-flex xs12pt-5>
              <h1>Otros comentarios</h1>
            </v-flex>
          </v-layout>
          <v-layout v-for="comentario in comentarios" v-bind:key="comentario.id">
            <v-flex xs12>
              <v-text-field
                :value="comentario.texto"
                :label="comentario.score"
                readonly></v-text-field>
            </v-flex>
          </v-layout>
        </v-flex>
      </v-layout>
    </v-container>
  </template>

  <script>  
    import { firestore } from'@/main'
    //import { storage } from '@/main'

    export default {
      name: 'ImageDetail',
      data() {
        return{
          id: this.$route.params.id,
          image: '',
          comentario: '',
          comentarios: []
        }      
      },
      methods:{
        enviarComentario: function(){
          let comentario = {
            imageId: this.id,
            texto: this.comentario,
            createdAt: (+new Date()),
            score: 0
          }
          firestore.collection('comentarios').add(comentario)
        }
      },
      firestore(){
        return{
          image: firestore.collection('images').doc(this.id),
          comentarios: firestore.collection('comentarios').where("imageId", "==", this.id)
        }
      }
    }
  </script>

main.js


import Vue from 'vue'
import App from './App.vue'
import {firestorePlugin} from 'vuefire'  
import *as firebase from 'firebase/app';
import 'firebase/firestore'
import 'firebase/storage'
import router from './router/index'
import vuetify from './plugins/vuetify';

Vue.config.productionTip = false


var firebaseConfig = {
  apiKey: "",
  authDomain: "",
  databaseURL: "",
  projectId: "f",
  storageBucket: "",
  messagingSenderId: "",
  appId: ""
};

const firebaseApp = firebase.initializeApp(firebaseConfig)
export const firestore = firebaseApp.firestore()
export const storage = firebase.storage().ref('/images')

Vue.use(firestorePlugin)


new Vue({
  vuetify,
  render: h => h(App),
  router,
  components: {App} 
}).$mount('#app')

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import ImageDetail from '@/components/ImageDetail'

Vue.use(Router)

const router = new Router ({
  mode: 'history',
  routes: [
    {
      path: '/',
      mame: 'Home',
      component: Home
    },{
        path:'/image/:id',
        component: ImageDetail
    }
  ]

})

export default router

esto se debería llamar curso profesional de vuetify y no de ML

A mí también me dió error en esta parte del proyecto y no me agrado que hayan hecho el “Skip” de esa parte.

Bueno estos pasos hice yo y funciona bien:
Primero borrar la versión actual de vuefire

npm remove vuefire

Instalar la más nueva

npm install [email protected]

Después, en el main.js
En vez de importar el vuefire tal cuál, sólo se importa así:

import { firestorePlugin } from 'vuefire'

Y en donde se agrega a Vue:

Vue.use(firestorePlugin)

De cara al component en donde cargamos las imágenes no varía tanto, solo hay que agregarlo así:

  data() {
    return {
      file: '',
      images: [],
      content: 'Content',
    }
  },
  //Here we are using firestore imported    
  firestore() {
    return {
      images: database.collection('images')
    }
  }

Esa parte no es exactamente igual ya que no estoy siguiendo el curso tal cuál, estoy tuneando uno que ya tenía xD. Pero igual si a alguien le sirve… (Y)

Gente para nuevas versinoes de vue, para dar color al boton seria.

<v-btn color="primary" @click="enviarComentario">Enviar</v-btn>

Este es el código del componente ImageDetail.vue:

<template>
  <v-container>
    <v-layout xs12 pl-2>
      <v-flex xs12 sm6 md6 lg6>
        <v-card>
          <v-img
            :src="image.url"
            height="200px"
          ></v-img>
          <v-card-title>
            <div>
              <span class="grey--text">{{image.name}}</span>
              <v-chip> {{image.scorePromedio}}</v-chip>
              <br>
            </div>
          </v-card-title>
        </v-card>
      </v-flex>
    </v-layout>
    <v-layout>
      <v-flex xs12>
        <v-text-field label="Que te parece esta foto"
          v-model="comentario">
        </v-text-field>
        <v-layout>
          <v-layout>
              <v-flex xs12 pt-5>
              <v-btn primary @click="enviarComentario">
                Enviar
              </v-btn>
            </v-flex>
          </v-layout>
          <v-flex xs12 pt-5>
            <h1>Otros comentarios</h1>
          </v-flex>
        </v-layout>
        <v-layout v-for="comentario in comentarios" v-bind:key="comentario.id">
          <v-flex xs12>
            <v-text-field
              :value="comentario.texto"
              :label="comentario.score"
              readonly
            ></v-text-field>

          </v-flex>
        </v-layout>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>  
  import { firestore } from '@/main'
  //import { storage } from '@/main'

  export default {
    name: 'ImageDetail',
    data() {
      return{
        id: this.$route.params.id,
        image: '',
        comentario: '',
        comentarios: []
      }      
    },
    methods:{
      enviarComentario: function(){
        let comentario = {
          imageId: this.id,
          texto: this.comentario,
          createdAt: (+new Date()),
          score: 0
        }
        firestore.collection('comentarios').add(comentario)
      }
    },
    firestore(){
      return{
        image: firestore.collection('images').doc(this.id),
        comentarios: firestore.collection('comentarios').where("imageId", "==", this.id)
      }
    }
  }
</script>```

Que alguien me corrija si me equivoco, estas últimas clases son de desarrollo Front-end, no?
¿Por qué en ese caso no usar Flask o Django para no salirnos mucho de Python? Particularmente no sé nada de JS ni de Vue. 😦

Dos detalles que encontré:

  1. El siguiente import debe ser comentado ya que no se necesita.
import {storage} from '@/main'
  1. Me salia un error en la consola de tipo invalid prop, el cual removi la etiqueta :label=“comentario.score” del tag v-text-field
<v-text-field
                            :value="comentario.texto"
                            readonly></v-text-field>

Con eso ya me funciono sin errores

¿Cuál es el procedimiento para “actualizar” la version de ‘vuefire’ en el package.json? lo hice manual pero al ejecutar la app de nuevo no veo la tarjeta. Nota: no hay error en el código.

Hola les dejo el código de la solución que implemente, hay muchas formas pero el objetivo es avanzar y aprender temas de Machine Learning espero les sirva.

<template>
  <v-container>
    <v-layout text-center wrap>
      <v-flex xs="12" pb-3>
        <input type="file" ref="fileInput" id="file" @change="processFile($event)" />
      </v-flex>
    </v-layout>
    <v-layout text-center wrap>
      <v-flex xs="12" pb-3>
        <v-btn color="primary" @click="uploadFile">Enviar</v-btn>
      </v-flex>
    </v-layout>
    <v-divider />
    <v-layout align-center row wrap>
      <v-flex xs="12" pb-3>
        <v-container fluid class="pl-0 pr-0">
          <v-layout>
            <v-flex xs12 sm6 lg3 v-for="image in images.docs" v-bind:key="image.id">
              <v-card>
                <v-img class="white--text" heigth="200" :src="image.data().url"></v-img>
                <v-card-title>
                  <div>
                    <span class="grey--text">{{image.data().name}}</span>
                    <v-chip>{{image.data().scorePromedio}}</v-chip>
                    <br />
                  </div>
                </v-card-title>
                <v-card-actions>
                  <v-btn text @click="goToImageDetail(image.id)">Ver Detalle</v-btn>
                </v-card-actions>
              </v-card>
            </v-flex>
          </v-layout>
        </v-container>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
import { firestore } from "@/main";
import { storage } from "@/main";

export default {
  data: () => ({
    file: "",
    images: []
  }),
  methods: {
    processFile(event) {
      console.log("Event", event.target.files[0]);
      this.file = event.target.files[0];
    },
    uploadFile() {
      const name = +new Date() + "-" + this.file.name;
      const metadata = { contentType: this.file.type };
      console.log(name, metadata);
      storage
        .child(name)
        .put(this.file, metadata)
        .then(snapshot =>
          snapshot.ref.getDownloadURL().then(url => {
            let image = {
              url: url,
              name: name,
              createdAt: +new Date(),
              scorePromedio: 0
            };
            firestore.collection("images").add(image);
            this.getImagesDB();
          })
        );
    },
    async getImagesDB() {
      let listImages = [];
      listImages = await firestore.collection("/images").get();
      /* .then(function(querySnapshot) {
          listImages = querySnapshot;
          querySnapshot.forEach(function(doc) {
            
            console.log(doc.id, " => ", doc.data());
          });
        }); */
      this.images = listImages;
    },
    goToImageDetail(id) {
      this.$router.push({ path: `/image/${id}` });
    }
  }
};
</script>

el curso mas se orienta a utilizar el software vue.js y firebase ???

Comparto el ImageDetail.vue … Ojo con los espacios :
![](
![](

Al leer los comentarios, me doy cuenta la falta que hace un Curso Profesional de Paciencia en el Debugging.
Compañeros, la realidad es que depurar es una tarea de mucha paciencia, cualidad que se debe desarrollar y practicar mucho durante el aprendizaje, ya que hace parte del día a día de cualquier profesional que escriba código, llámese Ingeniero de Software, Ingeniero de Machine Learning o Data Scientist.

Muchas gracias Juan Silva, por la información.

Sin entender nada, y nadie explica, hay un ítem de preguntas perova a otras cosas 😦. en fin.