Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Configurando el proyecto

7/28
Recursos

Aportes 48

Preguntas 23

Ordenar por:

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

Creo que la Interfaz de Firebase cambio un poco y ahora el botón “Web Setup” esta en la parte inferior derecha.

Si no les aparece el boton WEB SETUP deben hacer lo siguiente
1 ir a parte de project overview como aparece en la imagen y darle en donde dice web

una vez echo eso, deben seguir los pasos registras la app, esto no se ve en curso debido a la “antiguedad” del mismo, pero es lo mismo en si.

Una vez echo eso, si quieren acceder a la configuracion del sitio web debe ir otra vez a project interview le va a aparecer esto le dan sobre el proyecto como se ve la imagen y le dan a configuración o settings:

luego se van hasta abajo y seleccionan la pestaña config como se ve en en la imagen y copiar y listo.

ESPERO HAYA QUEDADO CLARO 🛸

En casi de que alguien este perdido con la configuración de firebase, at dia de hoy 28 de Abril, la opcion de web setup se encuentra en la parte inferior con un simbolo como el siguiente:

Una vez ahi, registran con un nombre la app y les dara el codigo que menciona en el video

Si te sale la pagina en blanco y estas haciendo el curso en el 2021, es porque la importación de firebase cambió. Ahora es

import firebase from 'firebase/app'

Gente, si no encuentran el boton “WEB SETUP”, siguan los pasos de registar una APP mediante el boton del engranaje -> general -> your apps.
Luego ahi ya les aparecera el codigo para integrar firebase a la su APP.

Para los que tengan problemas configurando VueFire, en las nuevas versiones el codigo de inicializacion es .

import { firestorePlugin } from 'vuefire'
Vue.use(firestorePlugin)```

Sino en la consola de VUE se genera el error. 

```export default (imported as VueFir’) was not found in vuefire```

Deberían hacer un update del video, en verdad se pierde mucho tiempo configurando!!! Me toco repetir el proceso desde cero!! y teniendo en cuenta los comentarios publicados!!

No saben cuanto hubiera valorado que alguien me hubiera pasado esto

me daba error, se desplegaba el servidor pero no mostraba nada

import { firestorePlugin } from 'vuefire'

Vue.use(firestorePlugin)

Para los que no les sale la vista de Home, que les aparece en blanco deben ir al Home.vue y la parte de abajo deben cambiar el name de ‘HelloWorld’ por ‘Home’

Para las personas que están perdidas, por favor instarla node.js y ya de ahi empieza el video

Configuración del proyecto en setiembre de 2021

(Implementación en WSL Ubuntu 20.04)

.

1. Requisitos previos:

  • Instalar node.js sudo apt-get update && sudo apt install nodejs
  • Instalar el manejador de paquete npm sudo apt install npm

2. Instalación de Vue:

  • sudo npm install -g @vue/cli
  • Seleccionar la versión 2 Default ([Vue 2] babel, eslint)
    Esto debido a que vuetify no se puede instalar adecuadamente en la versión 3 de Vue
    .

3. Creación del proyecto:

  • vue create fabrica-memes
  • Ingresa a la carpeta creada cd fabrica-memes
    .

4. Instalación de Vuetify:

  • vue add vuetify
    Seleccionar el default Default (recomended)
    .

5. Instalación de firebase:

  • Crear la carpeta router en ‘/fabrica-memes/src/router’ (todo es más fácil desde VS code code .)
  • Dentro de la carpeta creada (router) crear el archivo index.js
  • npm install firebase vue-router vuefire --save
    .

6. Creación del proyeto en https://firebase.google.com/

  • Seguir las instrucciones de creación del profesor
  • Extraer la configuración del SKD (lo que el profesor llama configuración web), como se muestra en la imagen

7. Configuración de archivos del proyecto (en VS Code)

  • Editar el archivo src/main.js
import Vue from 'vue'
import App from './App.vue'
import { firestorePlugin } from 'vuefire'
import firebase from 'firebase/compat/app'
import 'firebase/compat/firestore'
import 'firebase/compat/storage'

import router from './router/index'
import vuetify from './plugins/vuetify'

Vue.config.productionTip = false

const firebaseConfig = {
  apiKey: "AIzaSyAvRG8BAcAT9PoG5tTtSmEmTS3dZrWERa0",
  authDomain: "fabrica-memes-d896f.firebaseapp.com",
  projectId: "fabrica-memes-d896f",
  storageBucket: "fabrica-memes-d896f.appspot.com",
  messagingSenderId: "190901213269",
  appId: "1:190901213269:web:0edbd3c7dd417a827b1cdc",
  measurementId: "G-WX11TCBKPY"
};


// Initialize Firebase
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')

Notar que hay varios cambios con respecto a lo del profesor, uno de los más importantes es lo referente a la actualización del web SKD del 8 al 9 en agosto de 2021, ahora se incluye /compat/ para las instalaciones del firebase.
.

  • Editar el archivo src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'

Vue.use(Router)
const router = new Router({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'Home',
            component: Home
        }
    ]
})

export default router
  • Editar el archivo src/App.vue
  <v-app>
    <v-app-bar
      app
      color="primary"
      dark
    >
      <div class="d-flex align-center">
        <v-img
          alt="Vuetify Logo"
          class="shrink mr-2"
          contain
          src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png"
          transition="scale-transition"
          width="40"
        />

        <v-img
          alt="Vuetify Name"
          class="shrink mt-1 hidden-sm-and-down"
          contain
          min-width="100"
          src="https://cdn.vuetifyjs.com/images/logos/vuetify-name-dark.png"
          width="100"
        />
      </div>

      <v-spacer></v-spacer>

      <v-btn
        href="https://github.com/vuetifyjs/vuetify/releases/latest"
        target="_blank"
        text
      >
        <span class="mr-2">Latest Release</span>
        <v-icon>mdi-open-in-new</v-icon>
      </v-btn>
    </v-app-bar>

    <v-main>
      <router-view/>
    </v-main>
  </v-app>
</template>

<script>

export default {
  name: 'App',
  data: () => ({
    //
  }),
};
</script>```

# Espero les sirva :)

Hola a [email protected]! Por aquí les comparto mi proceso para configurar el proyecto de ML actualizado 2021 funcional, espero les sea de gran ayuda.

https://muddy-trombone-364.notion.site/Platzi-Configurando-el-proyecto-ML-ca24212c2cd24086a7456d60895dbf66

Hola a [email protected],
Este es el código que me ha funcionado

<import Vue from 'vue';
import App from './App.vue';
import { firestorePlugin } from 'vuefire';
import firebase from 'firebase/app';
import 'firebase/firestore';
import 'firebase/storage';

import router from './router/index';
import vuetify from './plugins/vuetify';>
<// Initialize Firebase
const firebaseApp = firebase.initializeApp(firebaseConfig);
const firestore = firebaseApp.firestore();
const storage = firebase.storage().ref('/images');
export default (firestore, storage);


Vue.use(firestorePlugin);

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

Hola para los que utilizan Visual Code puden descargar Firebase CLI, es una forma más fácil para pasar el proyecto

De esta forma logré que funcionara

import Vue from 'vue’
import vuetify from './plugins/vuetify’
import App from './App.vue’
import firebase from 'firebase’
import router from './router/index’
import { firestorePlugin } from ‘vuefire’

Vue.config.productionTip = false

var firebaseConfig = {
apiKey: “AIzaSyBWiRUxVL_1_cLbZ_n0jjAevPJkE_uNTR4”,
authDomain: “",
databaseURL: "
",
projectId: "
",
storageBucket: "
*********”,
messagingSenderId: “51480507259”,
appId: “1:51480507259:web:bbcc019db08deda35003de”,
measurementId: “G-6JWRSXMCDM”
};

const firebaseApp = firebase.initializeApp(firebaseConfig)
export const firestore = firebaseApp.firestore()
export const storage = firebase.storage().ref(’/Images’)

firebase.analytics();

Vue.use(firestorePlugin)

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

para detener la aplicación se utiliza CRTL + C

este video me ayudo a la instalacion de vue CLI https://youtu.be/e8xBCik4fIk

Intentando instalar por primera vez vue:

Unhandled rejection Error: EISDIR: illegal operation on a directory, open ‘/Users/jguillenbarrios/.npm/_cacache/tmp’

npm ERR! cb() never called!

npm ERR! This is an error with npm itself. Please report this error at:
npm ERR! https://npm.community

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/jguillenbarrios/.npm/_logs/2019-04-11T18_24_39_582Z-debug.log

Después de revisar un poco, y al cambiar el ownership para evitar el uso de sudo, pude instalar sin problemas:
Cambiar el ownerhip de:

sudo chown -R $(whoami) ~/.npm
sudo chown -R $(whoami) /usr/local/lib
sudo chown -R $(whoami) /usr/local/bin

me funcionó

Pésimo la desactualización del curso, ahí estamos batallando con otras cosas, ni hablar, no es la primera vez que pasa, espero eso se mejore.

no me gusta mucho que esté tan orientado a GCP

parece ser que de nuevo cambio

import Vue from 'vue';
import App from './App.vue';
import { firestorePlugin } from 'vuefire';
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

import router from './router/index';
import vuetify from './plugins/vuetify';


Vue.config.productionTip = false

var firebaseConfig = {
 COPIA TU DICCIONARIO DE FIREBASE
};

// Initialize Firebase
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');

Es una lástima que esté tan desactualizado el curso y el profesor pase todo por arriba y no explique como instalar las cosas porque además de que no todos sabemos Vue, han cambiado muchas cosas desde que se subió el curso a ahora.

Okey, dejar el curso de machine learning en espera e ir a aprender js.

Para empezar necesitas saber lo siguiente VUE
Vue.js es un framework de JavaScript de código abierto para la construcción de interfaces de usuario y aplicaciones de una sola página. Fue creado por Evan You, y es mantenido por él y por el resto de los miembros activos del equipo central que provienen de diversas empresas como Netlify y Netguru.

pero lo que no dice el curso para los que usamos Windows es que para instalarlo primero debe de tener instalado Node.JS de la ruta https://nodejs.org/es/
abrir una ventana de símbolo de sistema y correr los comandos c:\Windows\system32\nove -v y te mostrara la versión de node y después el comando npm-v y te mostrara la version de node
y desde la linea de comando ejecutar lo siguiente
npm install -g @vue/cli

Viendo los comentarios , este curso tiene 2 años y no lo han actualizado, no se han corregido los errores,

Como puedo desactivar los nuevos subtítulos automáticos?

Al final de tanto así me funcionó a mi:

import Vue from 'vue'
import vuetify from './plugins/vuetify'
import App from './App.vue'
import firebase from 'firebase'
import { firestorePlugin } from 'vuefire'
import router from './router/index'

Vue.config.productionTip = false

var firebaseConfig = {
    apiKey: "AIzaSyCrnA5zy38qxGqDUz4EJxP7MXlb3qZ9Ib8",
    authDomain: "fabrica-memes-899af.firebaseapp.com",
    databaseURL: "https://fabrica-memes-899af-default-rtdb.firebaseio.com",
    projectId: "fabrica-memes-899af",
    storageBucket: "fabrica-memes-899af.appspot.com",
    messagingSenderId: "1068654515110",
    appId: "1:1068654515110:web:827ae4336d4d6840b9f567",
    measurementId: "G-BT25VTZT16"
  };

// Initialize Firebase
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')
import { firestorePlugin } from 'vuefire'
Vue.use(firestorePlugin)

¿Alguien sabe como puedo arreglar este error?

 ERROR  Failed to compile with 1 errors                                                                                                                                                                                                                                        8:58:48 PM

This dependency was not found:

* @/components/Home in ./src/router/index.js

To install it, you can run: npm install --save @/components/Home


npm ERR! code ENOLOCAL
npm ERR! Could not install from "@/components/Home" as it does not contain a package.json file.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/computerscience/.npm/_logs/2019-04-12T02_00_06_528Z-debug.log
MacBook-Pro-de-Oscar:fabrica-memes computerscience$ 

me sale un error de warning in .src/main.js
export default (imported as VueFire was not found in vuefire
alguien me podria ayudar porfavor

estimado profesor. podrias compartir el proyecto que estas explicando en tu clase?

Este es un curso de introducción a Vue o ML para análsis predictivo?

seria bueno un manual de firebase practico ?

¿Como solvento este error?

hola me sale el siguiente error en con sola
main.js?56d7:27 Uncaught TypeError: firebase__WEBPACK_IMPORTED_MODULE_7___default.a.storage(…).red is not a function
at eval (main.js?56d7:27)
at Module…/src/main.js (app.js:1017)
at webpack_require (app.js:786)
at fn (app.js:151)
at Object.1 (app.js:1055)
at webpack_require (app.js:786)
at checkDeferredModules (app.js:46)
at app.js:862
at app.js:865

Quisiera saber como llegó a esa ruta, creo que va demasiado rápido…Alguien me puede ayudar?

Donde encuentro el codigo??

Si ya lo crearon y se les olvido como obtener el codigo, se van a donde dice Project Overview en la parte superior izquierda, luego el el icono de gear (o engranaje) y click en project settings en la pestaña General al final de la pagina viene el codigo tambien.

Esto no esta actualizado, donde puedo ver el codigo?

Hola, no logro instalar @vue/cli. Todo me aparece deprecated y cuando acciono “vue create ___” no me reconoce la comanda vue. Que debo hacer? Por favor ayuda

Hasta aquí llegué con este tema. 😦

`import Vue from 'vue’
import router from 'vue-router’
import Home from '@/components/Home’
import { component } from ‘vue/types/umd’

Vue.use(Router)

const router = new Router ({
mode: ‘history’,
routes: [
{
path: ‘/’,
name: ‘Home’,
component: Home
}
]
})
export default router`

Para los que tengan el error: Error: ENOSPC: System limit for number of file watchers reached, watch…
La solución es la siguiente: ¡El significado de este error es que el número de archivos monitoreados por el sistema ha alcanzado el límite!

Solución:

Modificar la cantidad de archivos de monitoreo del sistema.

Ubuntu

$ sudo gedit /etc/sysctl.conf

Agrega una línea en la parte inferior

fs.inotify.max_user_watches=524288

¡Entonces guarda y sal!

sudo sysctl -p

para comprobarlo

¡Entonces está resuelto!
Fuente: https://stackoverflow.com/questions/55763428/react-native-error-enospc-system-limit-for-number-of-file-watchers-reached

Espero les sirva.
Un abrazo!

Hola a todos, para los que tienen ubuntu 18.04, a mi me funcionó lo siguiente para instalar Vue.

  1. Instalar Yarn: link
  2. Instarlar Node.js: link
  3. Usar los comandos:

Instalación

sudo yarn global add @vue/cli

Checkear si se instaló

vue --version

Upgrading

sudo yarn global upgrade --latest @vue/cli

Documentación: https://cli.vuejs.org/guide/installation.html

Espero les sirva.
Un abrazo!

Recuerden que Platzi ya tiene un curso de Vue con firebase 😃

https://platzi.com/clases/vuejs-avanzado/

Ha sido una gran odisea instalar vue en windows, para los que tengan problemas con VueFire en main.js deben importar lo siguiente:

import { firestorePlugin } from 'vuefire'
Vue.use(firestorePlugin);

Siempre hay que saber algunas cosas a la brava!! 😄

Para los que no saben como instalar vue en windows aqui esta un link que es muy util
https://platzi.com/tutoriales/1541-analisis-predictivo/4812-instalacion-de-vue-en-windows/