Proyectos y Ejemplos Desarrollados en Clase

Tabla de Contenido

1. Sobre Este Repo
   • Ejemplos Cargados
2. Antes de Iniciar
   • Herramientas
3. Documentación Adicional
4. Contacto

Sobre Este Repo

En este repo encontrarás todos los proyectos y ejemplos que desarrollaremos en clase. Te invito a que busques dentro de la lista de branches para que puedas ubicar con facilidad el contenido de la clase de tu interés. A continuación te dejo un pequeño gráfico donde te ubicarás mejor para encontrar cada branch:

Ejemplos cargados:

• HTML CSS Ejemplo1
• HTML CSS Ejemplo2 - Desarrollo de Página Web Club de Ark
• VUE.js Ejemplo1
• VUE.js Ejemplo2
• VUE.js Ejemplo3 Lista de Pokemons
• VUE.js Ejemplo1 Captura la Pokéball
• VUE.js y Vuetify Ejemplo2 Pokemon Trainers Wiki
• Pokemon Trainers Wiki - Frontend
• Pokemon Trainers Wiki - Backend

Antes de Iniciar

Antes de que inicies aségurate de leer lo siguiente, con el fin de que tengas seguridad sobre qué herramientas necesitarás para poder usar los ejercicios de este Repo.

Herramientas

• Visual Studio Code (Gratis). Descárgalo aquí

  Te recomiendo las siguientes extensiones de Visual Studio Code:

  • HTML CSS Support
  • HTML Snippets
  • Javascript (ES6) code snippets
  • Live Server
  • Prettier - Code Formatter
  • GitHub Pull Requests and Issues
  • Vetur

• Google Chrome (Consola de Desarrollador).

• Git. Descárgalo aquí

• NodeJs (Current). Descárgalo aquí

• Vue.js. Para instalarlo deberás seguir el siguiente procedimiento:

  1. Instalas vue-cli, que corresponde a la línea de comandos de Vue.

     npm install vue-cli

  2. Creas un proyecto nuevo.

     vue create <Nombre del Proyecto>

  3. Seleccionas las opciones que mejor se ajusten a tu necesidad: Vue 2, Vue 3, opciones avanzadas, etc.

• Vuetify: Solo necesitarás correr el siguiente comando en la raiz del proyecto que estés creando:

  vue add vuetify
  

• MongoDB Community Edition. Descárgalo aquí

• Librerías para NodeJs: Express, Nodemon, Mongoose y Morgan).

• Heroku Cli. Descárgalo aquí

• Para cargar una App Vue a Heroku necesitarás seguir el siguiente tutorial Referencia:

  1. Instala Heroku-cli, que corresponde a la línea de comandos de Heroku.
  2. Agrega a la raíz de tu proyecto Vue un archivo de nombre static.json con el siguiente contenido:

     {
       "root": "dist",
       "clean_urls": true,
       "routes": {
         "/**": "index.html"
       }
     }

  3. Agregar el archivo static.json al repositorio git local:

      git add static.json
      git commit -m "static.json Agregado"

  4. Crear la Aplicación Heroku:

        heroku login
        heroku create
        heroku buildpacks:add heroku/nodejs
        heroku buildpacks:add https://github.com/heroku/heroku-buildpack-static
        git push heroku main

Links de nuestras clases

• Introducción Inicial (Aclaración de dudas generalizadas - Introducción a la Programación Web) - 13/09/21
• HTML y CSS (Clase práctica básica) - 14/09/21
• Aplicando HTML y CSS en una primera página web (Club de Ark). Intruducción a Vue.js - 16/09/21
• Aplicaciones básicas de Vue.js y su utilidad. (Lista de Pokemons Parte 1) - 20/09/21
• Aplicaciones básicas de Vue.js y su utilidad. (Lista de Pokemons Parte 2) - 21/09/21
• Juego en Vue, Temporizador - Atrapa la Pokeball (Parte 1) - 23/09/21
• Juego en Vue, Temporizador - Atrapa la Pokeball (Parte 2) - Vuetify Página Pokémon Trainers Wiki - 27/09/21
• Vue y Vuetify Página Pokémon Trainers Wiki (Parte 2) - 30/09/21
• Vue y Vuetify Página Pokémon Trainers Wiki (Parte 3) - 04/10/21
• CRUD y funcionalidades básicas de MongoDB - 05/10/21
• Conceptos básicos NodeJs - 07/10/21
• NodeJs (Express, Mongoose, Morgan y Nodemon). Breve tutorial de Heroku - 11/10/21

Documentación Adicional

También te recomiendo la documentación oficial y no oficial de las temáticas tratadas en clase:

• HTML
• CSS
• JavaScript
• Vue.js
• Vuetify
• Express
• Mongoose
• Heroku
• HerokuVueApp

Y a continuación te comparto el Stack tecnológico que trabajaremos para el desarrollo de todas las clases del ciclo 3:

Contacto

Nadim M. Téllez B. - telleznadim@gmail.com