4 claves para obtener sus primeros clientes

¡Hola chicos! Muchas gracias por estar ahí. En esta ocasión, quiero compartir con ustedes algunos puntos sobre cómo obtener sus primeros clientes.

Ya saben que se requieren habilidades de ingeniería para tener éxito con tu producto … ¡pero nos falta algo muy especial: las ventas! Puede ser el próximo Netflix, el próximo Facebook o cualquier cosa importante que desee. Si no tenemos clientes que paguen por el producto, en realidad tenemos un pasatiempo.

Estoy obsesionado con cultivar productos en todo el mundo, y tú también debes estarlo. “El éxito es nuestro deber”, dice Grant Cardone.

Entonces, en este post compartiré con ustedes 4 puntos a los cuales hay que prestar especial atención:

#1 Enfóquese en sus clientes, no en sus productos.

La mayoría de los fundadores no entienden esto. En su negocio, el cliente es el rey. Una vez más: concéntrese en sus clientes, no en su producto. Finalmente, su cliente hace que su producto sea real, así que, por favor, escúchelos.

Siempre ponga a su cliente primero.

#2 Obsesiónese con el análisis de datos.

“Lo que se mide, se maneja”. Si eres jefe de producto, debes amar los gráficos y análisis de datos.

Debe estar familiarizado con Google Analytics, Firebase Analytics, Kissmetrics, Google Data Studio o Microsoft BI.

#3 Tenga empatía con su comunidad.

Escuche, escuche, escuche. Cierre la boca y escucha de nuevo. No mueva un solo dedo antes de saber cómo eso puede ayudar a mejorar los objetivos de su comunidad.

Inicie un grupo de Facebook, un chat de WhatsApp, un canal de Slack o lo que sea que desee para mantenerse en contacto con los miembros de su comunidad. Responda públicamente a las preguntas frecuentes, tal vez en YouTube Live o Facebook Live.

Nótese que dije comunidad, no audiencia.

#4 No vender… compartir valor.

No quieres que te vendan una casa, pero quieres comprar una casa. Es un punto de vista diferente que usted necesita para insertar tanto valor como pueda. Exponga su tu talento, donde las personas pueden evaluar sus habilidades y experiencia. Ayude a las personas a resolver problemas.

Finalmente, me gustaría invitarlo a ver mi webinar donde hablo sobre cómo convertir a sus visitantes en clientes potenciales, en B2B. Es un ciclo simple que necesitas personalizar.

¿Cuál es tu mayor problema para crecer y hacer escalar tu producto? Escríbelo en los comentarios.

Si necesita ayuda con el diseño y desarrollo de su producto, hágamelo saber. Aquí en 4Geeks contamos con un equipo sólido y capacitado, listo para ayudarlo. ¿Quieres ver el portafolio? ¡Adelante! Contáctenos en cualquier momento.

4Geeks es reconocida como una empresa B2B líder en América Latina

Chicos, ya saben que nos encanta compartir nuestro mejor trabajo con ustedes y con los clientes en cada producto que construimos. Me complace anunciar que Clutch acaba de presentar a 4Geeks como la mejor compañía de desarrollo de software en Costa Rica.

Clutch acaba de publicar un comunicado de prensa sobre los principales proveedores de servicio de América Central y el Caribe . los principales proveedores de servicios en América Central y el Caribe. Más de 65 compañías fueron nombradas como los mejores proveedores de servicios empresariales en sus respectivos países en función de los comentarios de los clientes, la calidad del trabajo, los servicios ofrecidos y la presencia en el mercado.

Clutch es una compañía independiente de investigación ubicada en Washington, DC y se encarga de identificar empresas líderes de software que brindan servicios profesionales y que ofrecen los mejores resultados para sus clientes.

En el informe se presentó una variedad de segmentos de la industria, incluidos los servicios de marketing, diseño, desarrollo y TI. Clutch Analysts realizó una investigación a profundidad entrevistandose y verificando la información suministrada por cada cliente de la compañía para evaluar la calidad del trabajo y el feedback que le proporcionaba a sus clientes.

Uno de nuestros felices clientes, el CEO de SmarterSelect, Robert Davis, afirmó:

Estamos muy contentos con 4Geeks como nuestro equipo de desarrollo. Trabajan extremadamente bien con nuestro Gerente de Producto para cumplir con nuestros requerimientos. Ellos utilizan estándares muy profesionales para la codificación y documentación de desarrollo.

Si desea obtener más información sobre 4Geeks, le sugiero que se suscriba a nuestro boletín para recibir nuestro contenido más reciente, que incluye publicaciones en el blog, seminarios web, podcasts y más.

Si quieres convertirte en cliente, hablemos.

¡Feliz semana para todos!

E00: Introducción a 4Geeks Podcast en Español

Hola! Estamos muy emocionados por iniciar este podcast en español, donde pretendemos conectar con miles de emprendedores y empresarios en Latinoamérica.

En un inicio este podcast se llamó “Software 4 Growth”, ahora simplemente es “4Geeks Podcast Español“.

En este episodio de introducción, Raymundo Diaz y Allan Porras explican la temática de las conversaciones, futuros invitados, temas y retos. NO TE LO PUEDES PERDER!

Puedes encontrar este podcast en tu plataforma favorita, asi puedes nutrirte de estas conversaciones inclusive cuando vas al gimnasio, sales a caminar, etc.

Recuerda que siempre puedes comentar!

Conociendo a Kris Alvarado

Bienvenido a otra entrevista de la serie Conoce a nuestro equipo Geek. En esta ocasión conversamos con Kris Alvarado, quien se encarga del área de finanzas y de que éstas tengan sentido para la empresa.

Ella es de la costa sur de Costa Rica. Le gustan los nuevos desafíos así que además de siempre estar a cargo de todos numerillos, todos los días intenta aprender cosas nuevas. Ella es estudiante de enfermería, motivo por el cual nos sentimos muy orgullosos y tranquilos ya que contamos con una persona que sabe qué hacer para sentirnos mejor.

Conozcamos a Kris:

 

¿Cómo te describirías a ti mismo?

Me considero una persona tranquila y reservada, amable, un poco despistada, pero valiente. Con actitud de enfrentar desafíos tanto en el área laboral como en el ámbito personal.

 

¿Qué haces en tu tiempo libre?

En mi tiempo libre me gusta leer, ver una película o una serie con mi hija y también me gusta salir a caminar.

 

¿Cuáles son tus series favoritas?

  1. Safe
  2. Merlí
  3. Two and a half Men
  4. CSI
  5. Law and order
  6. The Big bang theory

 

¿Montaña o playa?

Prefiero la montaña. Me encanta el sonido que produce el viento cuando pasa entre los árboles, la humedad, el olor, los colores y los animales.

 

¿Practicas algún deporte de aventura, extremo o actividad de resistencia?

Actualmente estoy en el gimnasio, pero me gusta mucho andar en bicicleta.

 

¿Qué tipo de música te gusta?

No tengo cantantes o género favorito, me gusta de todo un poco.

 

¿Cuáles son tus 5 libros favoritos?

  1. One hundred years of solitude
  2. In memories of my sad whores
  3. Don Quijote

 

¿Cuáles son tus películas favoritas?

Me gustan mucho las películas de ciencia ficción y fantasía, así que mis favoritas son:

  1. Harry Potter,
  2. El señor de los anillos,
  3. El hobbit y
  4. todas las producciones de Marvel.

 

¿Cuál es la parte más emocionante de ser la Finances manager?

Además de hacer solo las finanzas, que realmente no es una posición muy emocionante. Realmente me encanta seleccionar nuevos colaboradores y organizar pequeños eventos para que el equipo permanezca unido.

 

¿Cuál ha sido el reto más desafiante al que has tenido que enfrentarte en tu puesto de trabajo?

Aprender un nuevo idioma.

 

¿Qué es lo que más te gusta de ser parte del equipo 4Geeks?

He conocido a personas excelentes que desempeñan diferentes roles, he puesto en práctica el conocimiento que he adquirido y gracias a esto he sido capaz de ayudar a los miembros de equipo.

 

¿Cuáles son tus metas para este año?

Entrenar y adquirir nuevos conocimientos en mi área y también en otras áreas.

 

Si a usted le gustaría conocer todo sobre cómo comenzar a hacer realidad las ideas a través de la tecnología, el equipo de 4Geeks está listo para ofrecer asistencia inmediata, solo comuníquese con nosotros al correo hello@4geeks.io

Comprar artículos utilizando el Asistente de Google

Actualmente los encargados de ofrecer los servicios de reconocimiento de voz están realizando un gran trabajo facilitándoles la vida a sus usuarios mediante la utilización de sus artículos, en particular Google.

Los proveedores del servicio se acercan cada vez más a las exigencias de sus clientes y comprenden que éstos no solo quieren conocer el pronóstico del tiempo, sino que buscan un valor agregado, soluciones inteligentes. En pocas palabras, encontrar una manera más fácil de realizar sus compras.

Recientemente (marzo de 2018), Google anunció que Shopping Actions le permitirá a sus usuarios ordenar productos directamente en las tiendas desde una simple búsqueda en la web, el Asistente Google o cualquier “lugar de Google”.

Adicionalmente, Shopping Actions utiliza un modelo de pago por venta, es decir, el usuario solo cancela cuando efectivamente la venta se haya realizado. Las Shopping Actions aparecerán dentro de la unidad de compras que se encuentran en la página de búsqueda de Google y en Google.com/Shopping. No afectando el SEO o ranking de las páginas web en Google.

Source: Google Blog

Hasta la fecha, Google está alentando a las empresas a verlo como un aliado contra Amazon. El presidente del sector retail and shopping de Google, Daniel Alegre agregó: “Hemos adoptado un enfoque diferente a los de Amazon, porque nuestro ideal es impulsar el comercio minorista… Nos vemos a nosotros mismos como parte de una solución y permitir a los minoristas conducir mejor sus transacciones”.

Google expresa que las principales características de las Shopping Actions para los minoristas y comercios electrónicos son:

  • Permitir ofrecer sus productos en plataformas nuevas, como el Asistente de Google.
  • Ayudar a sus clientes a comprar sin mayor complicación utilizando la plataforma Google. Permitir realizar una lista de compras que se pueda compartir y utilizar un carrito de compras universal, realizar pagos instantáneos con soporte de credenciales de pago en Google.com y utilizar el Asistente de Google, permitiendo así a los clientes realizar la búsqueda de productos ofrecidos sin problemas.
  • Incrementar la lealtad y el compromiso con sus clientes otorgando valor al proceso de compra.

 

En los últimos 6 meses, Target afirmó que la cantidad de artículos en las cestas de compras de Google Express aumentó en promedio casi un 20 por ciento. Esto como resultado de su vinculación con la compañía de internet.

A partir de ahora, todos los usuarios de Google (desde dispositivos móviles, computadoras o Google Home) pueden comprar productos utilizando los servicios de reconocimiento de voz.

Recuerde: según Juniper Research, los dispositivos inteligentes de reconocimiento de voz como Amazon Echo y Google Home para el año 2022 se instalarán en el 55 por ciento de los hogares estadounidenses. Esta es una gran oportunidad para aumentar las ventas y atraer a más usuarios.

Si usted forma parte de la industria del comercio electrónico o es usted minorita y desea llegar a un mayor número clientes en todo el país, contáctenos para remitirle el programa de Google Shopping Action.

Conociendo a Byron Hernandez

Hola comunidad 4Geeks! Cada lunes hemos venido compartiendo algunos post sobre nuestro equipo. Ya conoces a un gran porcentaje de los miembros del equipo. Hoy, me gustaría presentarles a Byron Hernandez. Les tengo una muy buena historia que contar.

Byron desempeña el cargo de Software Engineer en 4Geeks y se mudó desde San Carlos, su ciudad natal, a la capital, solo para estar con el equipo de 4Geeks. A Byron le encantan los carros, nadar, pero lo que más le gusta es codear y aprender las tecnologías de vanguardia.

Permítanme mostrarles una pequeña entrevista que sostuvimos con el sobre sus gustos y preferencias.

Conozcamos a Byron:

¿Cómo te describirías a ti mismo?

Me considero una persona proactiva, dinámica y creativa, con ganas de aprender todos los días y dar lo mejor de mí en cada actividad.

¿Qué haces en tu tiempo libre? 

Me gusta invertir mi tiempo libre en conocer nuevas tecnologías.

¿Cuáles son tus series favoritas?

  1. Dr. House,
  2. Two and a Half Men
  3. Friends
  4. The Walking Dead

¿Montaña o Playa?

Prefiero la montaña, no me siento cómodo con el calor y además también me gusta el aire fresco.

¿Practicas algún deporte de aventura, extremo o de resistencia?

Practico natación y me gusta jugar fútbol de vez en cuando.

¿Qué tipo de música te gusta?

Heavy Metal, Trash Metal, DeathCore, Symphonic Metal, Jazz.

¿Cuáles son tus 5 libros favoritos?

  1. Green Mile
  2. Cien años de Soledad
  3. Drácula
  4. Los Crímenes de la Calle Morgue

¿Cuáles son tus 5 películas favoritas?

  1. Van Helsing
  2. The Imitation Game
  3. The Avengers 2
  4. Hulk
  5. Underworld 2

¿Cuál es la parte más emocionante de ser un Software Engineer ?

La mejor parte de mi rol dentro de la empresa es poder aprender algo nuevo cada día, tener la libertad de crear y resolver problemas y estar al día con los aspectos más importantes en el área de la tecnología.

¿Cuál ha sido el reto más desafiante al que has tenido que enfrentarte en tu puesto de trabajo?

Aprender y desarrollar en momentos cruciales para el proyecto en el que estoy trabajando. Aprender nuevas tecnologías y realizar el seguimiento al proyecto.

¿Qué es lo que más te gusta de ser parte del equipo 4Geeks?

Definitivamente la calidad humana. Me siento como si estuviera en familia y tengo total libertad de preguntar y expresarse tal cual como soy.

¿Cuáles son tus metas para este año?

Especializarme en la tecnología en la que trabajo y obtener una certificación que lo demuestre.

Si a usted le gustaría conocer todo sobre cómo comenzar a hacer realidad las ideas a través de la tecnología, el equipo de 4Geeks está listo para ofrecer asistencia inmediata, solo comuníquese con nosotros al correo hello@4geeks.io

Cómo el Robotic Process Automation RPA, puede lograr impulsar su empresa

Industrias enteras en todo el mundo están buscando la manera de lograr mejores resultados con una inversión mínima en tiempo y dinero. Pero para la mayoría de las empresas encontrar ese camino no resulta una tarea fácil y esto se traduce en que el resto de las compañías que no le muestren miedo al cambio, las devoren.

Gracias a la tecnología de hoy, contamos con herramientas (o formas) para obtener un ROI ROI (Return Of Investment)  (retorno de inversión) con el mínimo esfuerzo. Este no es un llamado a adoptar una actitud ser indeterminado o algo por el estilo: por el contrario, el propósito es hacerle conocer nuevas formas más inteligentes de conseguir mejores negocios.

Robotic Process Automation (RPA) es la clave. Básicamente RPA es programar a la computadora para que realice tareas comunes, más rápido y más seguro. Y además puede adoptar este concepto para todas las áreas de la empresa. Considere a RPA como su nuevo empleado.

RPA es más que un simple chatbot, incluye Machine Learning para automatizar procesos de negocio. Por ejemplo, ingresar o actualizar datos en su ERP (y cualquier otro sistema interno que use) a medida que los nuevos clientes potenciales lleguen. Un chatbot desencadena un bot de RPA quien crea la firma.

Myths and Truths

Es 2018, pero incluso en estos tiempos siguen existiendo dueños de negocios con mentalidad conservadora lo cual es normal porque no cuentan la información adecuada.

Myth #1: RPA es para grandes empresas

Esta es una de las frases más comunes que se escucha en los propietarios de pequeñas empresas, porque históricamente las mejores y más poderosas herramientas de negocios solo fueron hachas para las grandes compañías. Esto representa un paradigma comprensible.

Gracias a la tecnología moderna, hoy en día las pequeñas y grandes empresas tienen acceso a los mismos beneficios. La diferencia está en las actitudes y emprendimiento que posean sus propietarios. El RPA no es solo para grandes empresas, en términos de dinero e infraestructura. La inversión es proporcional a la cantidad de clientes / empleados.

Myth #2: RPA es costoso 

Claro, RPA tiene costos iniciales de implementación. Estos incluyen el aprovisionamiento de la infraestructura TI, como bases de datos, servidores, redes, etc. Los costos de funcionamiento están en gran parte relacionados con los lapsos de entrega, el mantenimiento de los procesos, mantenimiento de la infraestructura y soporte.

Estamos al tanto de que una onerosa inversión es cuando su rendimiento es menor que la inversión inicial. Esta no es una condición, pero, en este caso se refiere a que usando las herramientas adecuadas, la consultoría podría ayudarlo a predecir el impacto final, a fin de medir el costo de la construcción e implementación.

Recuerde una cosa: RPA será su empleado las 24 horas, 7 días a la semana. No se cansará y no podrá excusas.

¿Su startup cuenta con un presupuesto limitado? Usted debe invertir a la medida de sus posibilidades.

Myth #3: RPA reemplazará a los humanos

Millones de personas, incluyendo directores ejecutivos e ingenieros, piensan que RPA los reemplazará y que eso aniquilará sus negocios. Se debe dejar de pensar de esa manera. ¡Olvídelo! ¡Deje ese pensamiento a un lado!

Cada vez es mayor la cantidad de personas que se interesan por el poder del bot para impulsar y hacer negocios más inteligentes.

Como se mencionó anteriormente: el bots será su empleado las 24 horas, los 7 días de la semana.

Los casos de RPA

Ya usted conoce los beneficios de implementar y usar las habilidades de RPA en su negocio y para analizar u operar procesos. A continuación, se describen algunos casos de uso de RPA … espero que logren inspirarlos.

 

En 4Geeks nos encanta impulsar a los negocios a adoptar procesos automatizados, que puedan traducirse en un mejor rendimiento en materia comercial, ahorro y crecimiento.

Si requieren nuestra ayuda, no duden en comunicarse con nosotros.

¡Nuestro nuevo logo ya está aquí!

Hola Mundo!!!. En 4Geeks nos sentimos sumamente emocionados de presentarles uno de nuestros pequeños pero impactantes cambios, ¡Nuestro nuevo logo ya está aquí!

Este sería nuestro primer paso en este camino de crecimiento y en la consolidación de 4Geeks como una marca tecnológica cada vez más sólida y confiable en el mercado.

Esta nueva imagen seguirá siendo parte del “slogan” 4Geeks Style (Talento Correcto – Experiencia Correcta & Tecnología Correcta) y parte de nuestra filosofía de hacer las cosas bien.

Siempre hemos apostado a nuestros productos y nos aseguramos de que nuestros clientes entiendan lo que 4Geeks significa y lo que ofrecemos. Creemos que es sumamente importante mantener una imagen fresca y una marca que describa lo que somos, así que esperamos ansiosamente leer sus críticas y observaciones sobre nuestra nueva imagen.

No duden en escribirnos vía correo electrónico para sus comentarios.

Conociendo a Diego Méndez

Bienvenidos a otra entrevista de la serie Conoce a nuestro equipo Geek. En esta ocasión conversamos con Diego Méndez, quien es Software Engineer en 4Geeks. Diego crea productos asombrosos bajo la marca 4Geeks, como por ejemplo mall4g, el cual es uno de nuestros productos internos.

Él es de Zarcero, un lugar muy agradable en Costa Rica. Allí producen muchos productos lácteos como leche, queso y crema agria. En Zarcero también podemos ubicar un parque realmente increíble donde podemos encontrar muchas figuras de árbol.

Pero conozcamos a Diego:

¿Cómo te describirías a ti mismo?

Me considero una persona amable, respetuosa, alegre y siempre estoy dispuesta a ayudar a las personas que lo necesitan, Soy una persona que ama su profesión y es por eso que siempre intento dar lo mejor de mí.

¿Qué haces en tu tiempo libre?

En mi tiempo libre me gusta jugar fútbol, ​​ir a la playa. Me encanta dar paseos por las montañas para aclarar mi mente. Adoro pasar tiempo mi familia y amigos y siempre invierto tiempo en aprender cosas nuevas sobre tecnología.

¿Cuáles son tus series favoritas?

  1. The Walking Dead
  2. La casa de Papel
  3. Vikings
  4. Marco Polo
  5. Game of thrones
  6. Z Nation
  7. West World

¿Montaña o playa?

Prefiero las dos opciones, ya que ambas son bastante agradables y son lugares para divertirse y desestresarse, además, ambas son paisajes naturales y son fabulosos para despejar la mente.

¿Practicas algún deporte (aventura, extremo, actividad de resistencia)?

Por el momento solo practico fútbol, ​​pero me encantaría practicar otros deportes, tanto extremos como de aventura. Si hablamos de deportes extremos, me gustaría el paracaidismo y el motocross, y en cuanto a deportes de aventura elegiría el ciclismo de montaña, el buceo y la escalada.

¿Qué tipo de música te gusta?

Me gusta la música electrónica, pop, rap y un poco de rock.

¿Cuáles son tus 5 libros favoritos?

  1. El señor de los anillos
  2. El Hobbit
  3. El arte de amar
  4. El desafío del amor
  5. El arte de la guerra

¿Cuáles son tus 5 películas favoritas?

  1. Titans of the pacific
  2. BattleShip
  3. The Avengers
  4. Saw
  5. The Purge

¿Cuál es la parte más emocionante de ser un Software Engineer?

Lo más emocionante es que cada día hay nuevos desafíos por resolver lo cual me encanta porque puedo aprender y adquirir mayor experiencia.

¿Cuál ha sido el reto más desafiante al que has tenido que enfrentarte en tu puesto de trabajo?

La más desafiante ha sido implementar diferentes diseños dentro del proyecto, y permitir a los usuarios la capacidad de seleccionar su UI preferida.

¿Qué es lo que más te gusta de ser parte del equipo 4Geeks?

Lo que más me gusta es que siempre están dispuestos a ayudar y aclarar cualquier duda que se le presente a algún miembro del equipo. Me encanta el entorno de trabajo, animado y con todas las ganas de emprender labores.

¿Cuáles son tus metas para este año?

Aprender más lenguajes de programación y adquirir experiencia. Además de certificarme en JavaScript. Por último, mejorar mi destreza en el inglés.

Si a usted le gustaría conocer todo sobre cómo comenzar a hacer realidad las ideas a través de la tecnología, el equipo de 4Geeks está listo para ofrecer asistencia inmediata, solo comuníquese con nosotros al correo hello@4geeks.io

Implementación de un proyecto ReactJS y NextJS en Firebase

Estamos en el mejor momento como desarrolladores, coexistiendo entre una amplia gama de tecnologías, herramientas y tendencias que cada día crecen y crecen. Si les apasiona aprender y aplicar tecnologías en su tiempo libre, hoy es el momento.

Hoy nos enfocaremos en ReactJS y en el rendimiento que podemos ofrecer a nuestras aplicaciones utilizando la escalabilidad de Firebase con Cloud Functions.

Además, utilizaremos el framework NextJS para la renderización desde el servidor, lo que nos ayudará a configurar y resolver fácilmente problemas de SEO pero, lo más importante, es disminuir al menor grado el período de respuesta entre el servidor y el cliente para ofrecer a los usuarios la mejor experiencia.

¡Así que empecemos!

Primero tenemos que instalar Next.js en nuestro entorno de trabajo:

 npm install -g create-next-app

Seguidamente creamos un proyecto llamado “firebase-nextjs”:

create-next-app firebase-nextjs: este comando creará el proyecto, pero también instalará react and react-dom dependencias, que se pueden ver en el archivo package.json

Ejecutamos run yarn dev y nuestro proyecto correrá por defecto en el puerto 3000 (localhost:3000).

NextJS buscará el archivo correspondiente en la carpeta de páginas para cada ruta, por ejemplo: la ruta “/” indica que se buscarán las páginas del archivo /index.js

El framework se basa en React, mantiene una estructura apropiada a él. Podremos observar una carpeta llamada “components”, donde se almacenará cada componente que queremos usar para nuestras vistas.

Entonces, si usamos NextJS y React, ¿por qué no agregar Material-UI?

Instalemos localmente Material-UI: npm install @material-ui/core.

Crearemos dos páginas muy simples para observar el comportamiento de estos tres frameworks creados para facilitar la vida.

En la carpeta pages creamos “page1.js” y “page2.js”.

Agregamos  el siguiente código  pages/page1.js:

import Card1 from ‘../components/card1’

 

const Page1 = () => (

 <div>

   <Card1 />

 </div>

)

Exportar por defecto Page1

En la carpeta components creamos “card1.js” y agregamos cualquiera de los ejemplos en Material-UI en la sección de cards  y lo personalizamos como querramos.

Para ver el contenido de la página page1.js  podemos ir a “http://localhost:3000/page1” o usar el enlace de NextJS para redireccionarnos.

Hacemos lo mismos para “page2” and “card2”.

Al llegar a este punto, deberíamos tener una aplicación NextJS corriendo perfectamente con los componentes de React.

En este punto ya estamos listos para ingresar a la parte más interesante de esta publicación. Vamos a estructurar nuestro proyecto siguiendo la guía de James Hegedus.

Por lo tanto, en la raíz de nuestro proyecto creamos una carpeta llamada “src”, dentro de esta carpeta encontraremos otra llamada “app”, donde estarán almacenados todos los archivos de la aplicación. Deberíamos poder mover todos los archivos de la carpeta “app”.

Luego iremos a la consola firebase y crearemos nuestro proyecto.

Se presentará el panel general del proyecto. Como se puede observar , Firebase nos proporciona Autenticación, Base de datos, Almacenamiento, Hosting, Funciones y ML Kit, cada uno de estos aspectos muy interesantes, pero nos centraremos solo en las Funciones.

¿Porqué Funciones? Si no usamos NextJS, y es suficiente que en nuestro código fuente de la aplicación solo veamos algunas etiquetas ‘<script>’ entonces la opción sería Hosting, pero queremos obtener server rendering y la magia de NextJS que es realmente increíble/asombroso.

A continuación, ejecutamos los siguientes comandos en el root de nuestro proyecto:

  • yarn global add firebase-tools
  • firebase login
  • firebase init

Cuando ejecutamos firebase init, se desplegaran una serie de preguntas:

  • ¿Qué caracteristica de Firebase CLI  desea configurar en esta carpeta? | Seleccione “Functions” y “Hosting”.
  • Seleccione el proyecto predeterminado de Firebase project para ese directorio: | Seleccione el proyecto que creó anteriormente en la consola de firebase.
  • ¿Qué lenguaje le gustaría usar para escribir Cloud Functions? | En nuestro caso “Javascript”.
  • ¿Desea utilizar ESLint para detectar posibles errores e implementar el estilo? | Escribimos “N”.
  • ¿Desea instalar dependencias con npm ahora? | No es necesario, escribir “n”.
  • ¿Qué tipo de directorio público desea usar? | Escribe “src/public”, se crearán dos archivos, los cuales fueron generados con la finalidad de mostrarse en primera plana en caso de no encontrar algún otro y que arroje un error. 
  • Configurar como una single-page app (volver a escribir todas las urls a /index.html)? Escariba “N”, en nuestro caso debería ser una aplicación más compleja.

¡Listo!

Encontraremos en el root de nuestro proyecto una carpeta llamada “functions”, simplemente muévala dentro de la carpeta “src” .

En nuestro archivo firebase.json eliminamos el código existente y lo actualizamos de la siguiente manera:

{

 “hosting”: {

   “public”: “src/public”,

   “rewrites”: [

     {

       “source”: “**/**”,

       “function”: “next”

     }

   ],

   “ignore”: [

     “firebase.json”,

     “**/.*”,

     “**/node_modules/**”

   ]

 },

 “functions”: {

   “source”: “src/functions”

 }

}

En el package.json de la carpeta functions agregamos las siguiente dependencias (después de varias pruebas, considero que son las versiones que presentan menos errores):

“@material-ui/core”: “^1.4.3”,

   “classnames”: “^2.2.6”,

   “firebase-admin”: “~6.0.0”,

   “firebase-functions”: “^2.0.0”,

   “next”: “^6.1.1”,

   “prop-types”: “^15.6.2”,

   “react”: “^16.4.2”,

   “react-dom”: “^16.4.2”

En el caso de las dependencias “classnames”  y “prop-types”,  son necesarios para este ejemplo que estamos desarrollando, y también como un consejo, que cada dependencia que requerimos para nuestro proyecto debe ir en este archivo, así como src/app/package.json , por lo tanto, también agrega las dependencias a src/app/package.json.

Para garantizar que NextJS se ejecute correctamente en Cloud Functions, eliminamos los contenidos de functions/index.js by:

const functions = require(“firebase-functions”)

const next = require(“next”)

 

var dev = process.env.NODE_ENV !== “production”

var app = next({ dev, conf: { distDir: “next” } })

var handle = app.getRequestHandler()

 

exports.next = functions.https.onRequest((req, res) => {

 console.log(“File: ” + req.originalUrl) // log the page.js file that is being requested

 return app.prepare().then(() => handle(req, res))

})

Ahora procedemos a instalar  las dependencias en las functions y en la app, dentro de src/functions y src/app ejecuta yarnnpm install dependiendo del administrador que uses.

Se crea .gitignore dentro de la carpeta de funciones y solo agregamos “next”.

Necesitamos que nuestros componentes de material-ui se muestren correctamente, gracias a NextJS solo deberíamos agregar lo siguiente a src/app/next.config.js:

const path = require(‘path’)

const glob = require(‘glob’)

 

module.exports = {

 distDir: “../functions/next”,

 webpack: (config, { dev }) => {

   config.module.rules.push(

     {

       test: /\.(ico|gif|png|jpg|jpeg|svg|webp)$/,

       use: [

         {

           loader: ’emit-file-loader’,

           options: {

             name: ‘dist/[path][name].[ext]’

           }

         },

         {

           loader: ‘file-loader’,

           options: {

             name: ‘dist/[path][name].[ext]’

           }

         }

       ]

     },

     {

       test: /\.(css|scss)/,

       loader: ’emit-file-loader’,

       options: {

         name: ‘dist/[path][name].[ext]’

       }

     },

     {

       test: /\.css$/,

       use: [‘babel-loader’, ‘raw-loader’, ‘postcss-loader’]

     },

     {

       test: /\.s(a|c)ss$/,

       use: [‘babel-loader’, ‘raw-loader’, ‘postcss-loader’,

         { loader: ‘sass-loader’,

           options: {

             includePaths: [‘styles’, ‘node_modules’]

               .map((d) => path.join(__dirname, d))

               .map((g) => glob.sync(g))

               .reduce((a, c) => a.concat(c), [])

           }

         }

       ]

     }

   )

   return config

 }

}

Actualicemos nuestro package.json que se encuentra en el root del proyecto con los scripts que manejaremos en la aplicación:

{

 “name”: “firebase-nextjs”,

 “version”: “1.0.0”,

 “license”: “MIT”,

 “scripts”: {

   “install”: “yarn build-all”,

   “next”: “yarn build-firebase && cd \”src/app\” && yarn && yarn dev”,

   “preserve”: “yarn build-all”,

   “serve”: “firebase serve”,

   “predeploy”: “yarn build-all”,

   “deploy”: “firebase deploy”,

   “build-all”: “yarn build-next && yarn build-firebase”,

   “build-next”: “cd \”src/app\” && yarn && yarn build”,

   “build-firebase”: “cd \”src/functions\” && yarn”

 }

}

Ahora, en el root del proyecto se ejecuta yarn init y luego se generan las siguientes opciones:

yarn next: Ejecutamos el proyecto localmente por el puerto 3000 que se encuentra predeterminado.

yarn build-all && firebase deploy –only functions: construimos nuestro proyecto y lo implementamos en firebase.

Con los pasos descritos anteriores, la aplicación debería ejecutarse correctamente. El proyecto de prueba se encontrará disponible en github, de modo que ya se puede puede comparar con la finalidad de obtener una mejor guía y comprensión del código.

Conclusión

Esta es una contribución que se basa en la propia experiencia, por lo que estamos dispuestos a responder todas las  inquietudes que se puedan generar sobre la tecnología y el proyecto.

Nos encanta estar al día con los frameworks y herramientas emergentes, así que pueden esperar más contenido valioso como este en nuestros próximos artículos.

¡Disfrútalo!

Support:

Recursos utilizados:

  • NextJS: 6.1.1
  • React: 16.4.2
  • Firebase functions: 2.0.0
  • Material-UI: v1.5.0

Referencias: