The Blog of shadowmyst

Por cuestiones de un proyecto que me dejaron he vuelto a la programación, bueno realmente nunca he dejado de programar, nada mas que he estado muy ocupado en los últimos meses desde que me mude y solo me he podido enfocar en poquitas cosas.

Por cuestiones de que tengo que desenvolver el proyecto lo mas rápido posible he decidido usar el framework NextJS 13 que funciona junto con React y para no perder el tiempo con el backend todo lo voy a englobar en Firebase. Ya hace un año que les llegue a hablar de firebase, que en resumen es una herramienta de Google para que puedas tener un servicio de base de datos a tiempo real y sistemas de autentificación seguros sin tantos problemas y en pocos pasos, así puedo facilitarme las cosas rápido.

Como tengo que hacer el proyecto prácticamente en un mes, les estaré compartiendo mis avances y al mismo tiempo explicando como funciona NextJS por si en algún momento les interesa armarse un proyecto de esta forma.

La gran ventaja de usar React es que toda sección de tu web la puedes dividir en componentes y con ello hasta un simple boton puede ser un componente y lo puedes configurar como tú quieras, por ejemplo para este momento ando haciendo un Navbar como componente y aunque apenas lo estoy haciendo esta es su estructura principal.

import Link from 'next/link'

const Navbar = () => {

  return (
    <nav className="navbar" role="navigation" aria-label="main navigation">
      <div className="navbar-brand">
        <Link href='/' className='navbar-item'>Agropek</Link>

        <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="mainNavbar">
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </a>
      </div>
    </nav>
  )
}

export default Navbar

¿Por qué esto de los componentes es muy bueno?, porque al final te evitas construir un buen de código repetitivo, si creas un componente de un botón que vas a utilizar en diferentes lados te terminas ahorrando reescribirlos en todos lados y solo importas el componente creado en el lugar donde lo llegues a necesitar.

¿Y por qué usar NextJS?

Existen varios frameworks que integran bien a React; sin embargo, NextJS no lleva mucho que saco la versión 13, prácticamente un año, donde facilita la estructuración de toda una web de forma sencilla, además que es donde he encontrado mucho mas documentación sobre este framework, que ahorita no puedo arriesgar a investigar la poca documentación de otros frameworks.

Por ultimo quiero mencionar que con Firebase, implementar las bases de datos y usarlas es muy facil y rapida, por ejemplo en el siguiente codigo estoy pidiendo los campos a la base datos de la "colección" "anuncios".

const q = query(collection(db, 'anuncios'), where('estado', '==', 'Activo'))
  const querySnapshot = await getDocs(q)
  querySnapshot.forEach((doc) => {
    data.push([doc.id, doc.data()])
  })

Tengo que mencionar que Firebase usa una base de datos noSQL, así que sería bueno que te empaparas un poco del tema, pero realmente no es difícil de comprender. Además, que quiero mostrarles que desde la web de firebase puedes consultar tu base de datos de forma gráfica.

Espero que les gusten los próximos post y que si les llega a interesar el tema pueden consultarme. Además, esta es una forma en que intento revivir mi comunidad de @developspanish y animar a que mas gente se anime a compartir su conocimiento de programación