Como empezar

Este proyecto utilizaremos tecnologias web generales bastantes conocidas, para empezar asegurate de poder usar javascript.

Puedes instalarlo de manera manual yendo a https://nodejs.org/en (opens in a new tab)

Si prefieres usarlo de manera mas controlada, dinamica o avanzada, podrias optar por instalar NVM https://github.com/nvm-sh/nvm (opens in a new tab)

Planeemos las herramientas que vamos a usar

Usaremos principalmente las siguientes herramientas

• Yarn: (opens in a new tab) - Este sera nuestro gestor de paquetes elegido para los ejemplos, sin embargo sientete libre de usar npm o pnpm si deseas
• NextJS@13.4.9: (opens in a new tab) Para usar react y crear la pagina web de forma moderna
• React@18.2.0: (opens in a new tab) Como herramienta para gestionar y crear los componentes web
• CSS: (opens in a new tab) Para darle estilos y forma a nuestra pagina web
• google-spreadsheet@4.0.2: (opens in a new tab) Como libreria para manejar los datos de nuestra hoja de calculo
• google-auth-library@8.9.0: (opens in a new tab) Libreria recomendada por google para manejar la authentificacion con sus tecnologias
• encoding@0.1.13: (opens in a new tab) Libreria exigida para gestionar funciones de google en el plano de servidor

Creando el proyecto desde cero

Para este ejemplo los pasos que vamos a realizar van a ser realizados en un sistema de comandos unix, es decir que estos pasos podrian cambiar si estan en un sistema windows, por lo cual es conveniente que si estas en windows tengas habilitado un sub-sitema linux (opens in a new tab)

Dicho eso podemos comenzar abriendo nuestra terminal y escribir el siguiente comando para instalar NextJS

yarn create next-app # Recuerda que puedes usar tu gestor de paquetes preferido

Te saldran secuencialmente varias opciones para inicializar tu proyecto, para el ejemplo nosotros usamos las siguientes

✔ What is your project named? … proyecto
✔ Would you like to use TypeScript? … Yes
✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … No
✔ Would you like to use `src/` directory? … No
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to customize the default import alias? … Yes
✔ What import alias would you like configured? … @/*

Una vez se terminen de instalar las dependencias ingresamos a la carpeta creada en donde esta disponible nuestro proyecto, para instalar nuestra ultimas dependencias y poder empezar a crear codigo

cd proyecto
yarn add google-spreadsheet encoding google-auth-library google-spreadsheet