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:

Conociendo a Maria Laura Gonzalez

Bienvenidos a otra entrevista de la serie Conoce a nuestro equipo Geek. En esta ocasión conversamos con Maria Laura Gonzalez, quien es la persona encargada de encontrar el talento de 4Geeks en todo el mundo. La mayoría de nuestros ingenieros y talentos están aquí gracias a ella. Ella es de Venezuela.

Conozcamos a Maria Laura quien respondió algunas preguntas sobre ella y sus gustos:

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

Me describo como una persona muy organizada, no me gusta la improvisación y siempre me esfuerzo por hacer el bien. Tengo como filosofía vivir en paz con los demás.

¿Qué te gusta hacer en tu tiempo libre?

Me gusta escuchar música, ir a ensayar con mi coro, leer libros y ver series y películas.

¿Cuáles son tus series favoritas?

  1. Black
  2. American Crime Story
  3. How I Met Your Mother

¿Montaña o playa?

Playa, definitivamente playa. Me encanta el sonido relajante del mar y nadar.

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

Actualmente no practico ningún deporte. Solo canto en mi coro.

¿Qué tipo de música te gusta?

La mejor de la música rock, reggae, ritmos tropicales, música clásica, instrumental, jazz, blues.

¿Cuáles son tus 5 libros favoritos?

  1. Rebelión en la granja.
  2. Harry Potter.
  3. Cien años de soledad.
  4. La tregua.
  5. La meta.

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

  1. Star Wars.
  2. Whiplash.
  3. 12 Years a Slave.
  4. Obsessed.
  5. Finding Nemo.

¿Cuál es la parte más emocionante de ser consultor Consultor Talent Acquisition?

Conocer personas de todas partes del mundo.

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

En una oportunidad, proporcioné información distorsionada a un candidato, porque no estaba familiarizado con las leyes de Costa Rica. Afortunadamente, la situación no pasó a mayores y fue resuelta.

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

Me encanta la metodología de trabajo y los compañeros de trabajo porque siempre están dispuestos a ayudar. Desafortunadamente no puedo participar en muchas de las actividades que se realizan. (ella está en Venezuela).

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

  1. Disfrutar de unos días de vacaciones con mi familia en la Isla de Margarita.
  2. Comprar un carro,
  3. Emigrar.

Si 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

¿Alguna vez se ha preguntado, cómo funciona Internet?

Si usted está leyendo este artículo, es porque tiene conexión a Internet (o un poder muy especial que debería compartir con el mundo). Sabemos que los datos van a viajar desde nuestros dispositivos a Internet y luego regresan, pero, ¿qué es internet?.

Popularmente se conoce Internet como una “network of networks” (red de redes), lo que significa que todos los dispositivos con acceso a internet están enlazados a una empresa que sirve esa conexión. A esas empresas las llamamos Proveedor de Servicios de Internet (ISP).

Los ISP se conectan entre sí para que los datos viajen de un lugar a otro. Como se pueden imaginar, hay muchos ISP y algunos de ellos cuentan con una gran infraestructura. Dependiendo de sus características, tenemos niveles que nos permiten clasificarlos en el Nivel 1, Nivel 2 y Nivel 3.

El ISP de nivel 1 solo permiten conexión entre ellos. No brindan servicios al usuario final (usted y yo), y sus infraestructuras son más grandes que otros niveles. Pueden ocupar grandes extensiones de tierra, por ejemplo, continentes, y permite el intercambio de datos a través de cables marítimos.

El ISP de nivel 2 está a cargo de conectar el nivel 1 con el nivel 3 mediante acuerdos. Su tamaño es menor que el Nivel 1 y pueden incluso ser parte de él.

El Nivel 3 cumple con el Nivel 1 y el Nivel 2 y brinda los diferentes servicios al usuario final.

Ahora que conocemos los diferentes niveles, surge una gran pregunta: ¿cómo funciona esa comunicación entre ellos?

El Sistema Autónomo (AS)

Hasta este punto solo conocemos la definición del ISP, pero hay otro concepto importante que abordaremos: un Sistema Autónomo (AS). Básicamente, un AS es un sistema que podría cambiar su comportamiento en respuesta a un evento inesperado. A nivel de red, es una colección de dispositivos donde su comportamiento se encuentra bajo control administrativo común. Podría ser una empresa, una universidad, un ISP, una organización o una mezcla de ellos.

El intercambio de datos funciona bajo el Border Gateway Protocol (BGP). Este protocolo no es automático y calcula la mejor manera de que los datos lleguen de un punto a otro, Una característica de éste, es que depende de diferentes aspectos que pueden ser políticos o económicos.

Muchos AS tienen contratos que permiten que otro AS usen sus redes para transmitir datos sin costo, esta práctica se llama Peering. Por otro lado, cuando un AS carga para transmitir datos a través de sus redes se llama Transit. Estos contratos obligan a un AS a elegir una ruta que puede que no sea la más óptima.

Pensemos en un pequeño ejemplo. AS C se encuentra en Brasil y necesita intercambiar datos con AS Z en Australia. AS C no sabe qué ruta tiene que usar. Tiene dos posibles opciones: enviar los datos a través de AS I que está lejos de AS Z, los datos tienen que viajar a otro AS T antes de que llegue a Z, y es muy caro, u optar por AS M, quien realmente se encuentra más cerca de AS Z y es la mejor opción. ¿Cuál crees que sea la mejor opción que debe usar AS C para enviar datos?,  ¿AS M ?. No es así, decide enviarlo a través de AS I.

Visual representation from our example.

Los datos que pasan por AS también necesitan viajar a través de AS T antes de llegar a su destino. En el gráfico de vectores diseñado por  Freepik  se muestra. 

AS I no era la mejor opción, pero no sabíamos que la organización a cargo AS C tiene un acuerdo económico, que exige que todos los datos deben viajar a través de  AS I. En caso de que AS I llegara a desplomarse, los datos viajarán a través de AS M  (el AS C necesita enviar los datos, si el otro AS está disponible, ¿por qué no enviar los datos a través de AS M?)

En la vida real los, AS se identifican por números. La Internet Assigned Numbers Authority (IANA) es la organización sin fines de lucro encargada de asignar estos números a cada sistema. Cada región en el mundo lleva un registro (miembro de IANA) que contiene un grupo de números disponibles para ser asignados de acuerdo a sus necesidades.

Ya se conoce entonces cómo se transmiten los datos de un lado a otro. Como habrán notado, tenemos un gran problema político: algunos AS podrían bloquear la transmisión de información de un AS específico, muchos lugares, incluso países, podrían ser excluidos del servicio de Internet aplicando estas restricciones. Pero ese es otro tema el cual abordaremos en otro artículo.

El Dropshipping podría ponerte nuevamente en el ruedo

El Comercio Electrónico no para de crecer, y es cada vez más y más grande, lo cual pone a gigantes actores en el plano de juego. Los podrías ver como competencia directa, o como aliados estratégicos. Esta publicación trata de cómo convertir a los grandes competidores en aliados, que impulsarán las ventas de tu tienda en línea: dropshipping.

El Dropshipping es una técnica bastante flexible, que se resumen en: vender un producto de un proveedor; éste se encarga de producir, entregar y resolver cualquier inconveniente con devoluciones por desperfecto.

 

Conociendo a Erifranck Nuñez

Bienvenido a otra entrevista de la serie Conoce a nuestro equipo Geek. En esta ocasión conversamos con Erifranck Núñez, quien es Software Engineer en 4Geeks. 4Geeks. Erifranck es una persona proactiva y autodidacta. Él siempre se encuentra explorando nuevas tecnologías y trabaja diariamente en su meta de convertirse en un excelente ingeniero

Él cuenta con un youtube channel donde se encarga de brindar ayuda a los developers y a mejorar sus destrezas demostrando así que está dispuesto a ayudar a la comunidad de desarrolladores.

Conozcamos pues a Erifranck quien respondió algunas preguntas:

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

Desarrollador frontend apasionado y creativo.

¿Qué te gusta hacer en tu tiempo libre?

Dibujar, escuchar sonidos de Disney, aprender otros lenguajes de programación o paradigmas relacionados a la programación, leer acerca de la productividad, grabar videos para mi canal y enseñar sobre el desarrollo.

¿Cuáles son tus series favoritas?

  1. Stranger things.
  2. How to train your dragon.
  3. Sense8

¿Montaña o playa?

Playa, porque soy de la costa de Venezuela.

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

Solo voy al gimnasio.

¿Qué tipo de música te gusta?

La música rock.

¿Cuáles son tus 5 libros favoritos?

  1. JavaScript elocuente.
  2. No sabes javascript.
  3. Scala para los impacientes
  4. Los 7 hábitos de personas altamente efectivas.
  5. Papá rico, pobre papá.

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

5 libros favoritos?

  1. A beautiful mind.
  2. Infinite war.
  3. The internship.
  4. Hercules
  5. Mulan

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

Aprender todos los días acerca de JavaScript y demás lenguajes de programación.

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

Aprender sobre react y flux y además migrar de migrate a react redux.

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

Son muy divertidos y siempre aprendo algo nuevo del equipo.

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

Aprender aún más sobre la arquitectura de software y aprender ilustrator para crear mis propios contenidos.

Puedes seguir a Erifranck en sus redes sociales como Instagram, LinkedIn, Twitter y echarle un vistazo a sus contenidos.

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

Blockchain 101 y las Industrias

El Blockchain solo hace una cosa: mediante pruebas matemáticas reemplaza la confianza de terceros.

– Adam Draper.

 

No hay palabras que puedan describan el Blockchain, debido a que es una nueva tecnología que poco a poco se está convirtiendo en un tema de tendencia en el ecosistema tecnológico.

Creo que hoy en día el término Blockchain está cada vez más separado del Bitcoin, lo cual es algo muy bueno, pero es importante aclarar que el Bitcoin es el resultado de aplicar tecnología Blockchain.

Blockchain es básicamente la concatenación de ilimitados bloques los cuales a su vez son inmutables, en otras palabras, podemos modificar un bloque dentro de la cadena donde básicamente solo podemos agregar datos.

Cada bloque tiene su propio valor hash que se construye a partir de sus propios datos. Este hash no puede ser cambiado. Cuando se agrega un nuevo bloque, se crea una referencia del bloque anterior. Si un bloque cambia su propio valor hash inicial, no coincidirá con la referencia anterior, esto hará que el bloque se elimine y se restaure a la versión anterior, inmutable.

El Blockchain se basa en la confianza, siempre se desea ratificar que la información es confiable y que no necesita de un sistema o terceras personas que informe cuándo algo es correcto o no. Blockchain desea generar confianza manteniendo un enlace bidireccional.

La descentralización es una palabra clave acá y es porque primeramente debemos olvidarnos del comportamiento normal de las aplicaciones. Las aplicaciones que son centralizadas contienen toda su tienda de datos (base de datos) en un solo lugar (Google, AWS, host propio, etc.). Ellas cuentan con una copia descentralizada de los datos separados en nodos que se encuentran en todas partes del mundo.

Con esta organización descentralizada podemos garantizar que los datos sean confiables, aplicando pruebas de trabajo, lo cual es básicamente obtener la aprobación de todos los nodos que interactúan con el Blockchain, y sería lo mismo si un bloque cambia su propio hash, el resto de los nodos recibirán notificaciones y éste devuelve el bloque al valor / estado real.

Privado vs Publico vs Híbrido

Hasta ahora, existen tres diferentes tipos de Blockchain, público, privado e híbrido.

Público: es como el Bitcoin, así que puedes ser parte de esto solo descargando una copia de la cadena de bloques y ejecutándola en tu pc.

Privado: este solo atiende partes específicas, como por ejemplo un grupo de hospitales, instituciones, entre otros.

Híbrido: es la combinación de público y privado. Así que, básicamente, algunos componentes pueden ser para todo el mundo, como por ejemplo la información personal principal, pero otros pueden ser privados por razones específicas (historial médico, por ejemplo)

Industrias dispuestas a adoptar el Blockchain

El Blockchain no es una tecnología estable aún, si embargo todas las industrias que enumeraré a continuación están abiertas a millones de posibilidades para adoptar esta ciencia.

La Banca

Existen algunos bancos trabajando y experimentando con Blockchain en sus procesos internos. La idea es eliminar el fax, los documentos y todos los procesos que no son de confianza. Sin embargo, la mayoría de los bancos están invirtiendo en finanzas comerciales con Blockchain.

Seguridad

Dado que Blockchain basó su tecnología en la seguridad, él mismo explica por sí solo cómo la cadena de bloques afectará esta área. Ahora podemos asegurarnos de que nuestros datos se manejan de la mejor manera y nos mantiene como verdaderos dueños de ellos.

Cadena de suministro

Desde mi punto de vista, este es el punto más álgido y el de mayor impacto. Usando IoT (Internet of thing) podremos rastrear todas las fases en una cadena de suministro. Por ejemplo comprueba si nuestra fruta es 100% orgánica o si nuestro café cumple con todos los estándares en el mercado. A decir verdad, Starbucks ya se encuentra trabajando en ello.

Existen muchas otras áreas en las que podemos explorar y comenzar a trabajar con Blockchain. Lo cierto es que Blockchain ya se encuentra acá y podemos usarlo para explorar nuevas funcionalidades y nuevas formas de mejorar el mundo.

Si tienes alguna idea grandiosa y deseas comenzar a usar Blockchain, no dudes en comunicarte con nosotros por nuestro correo electrónico sales@4geeks.io.

 

Conociendo a Alí Guillén

Bienvenidos a otra entrevista de la serie Conoce a nuestro equipo Geek. En esta oportunidad conversamos con Alí Guillén, quien es Software Engineer en 4Geeks. Alí ha mostrado un grandioso deseo de crecer y obtener mayor conocimiento. Él ha entregado más de un producto a distintos clientes de 4Geeks, lo que es un claro ejemplo de su gran enfoque de trabajo.

Alí siempre está dispuesto a ayudar compartir su opinión sobre diferentes temas y le encanta aprender. Él es emprendedor. Alí creó en 4Geeks su propio sistema para conectarse con el Ministerio de Hacienda de Costa Rica (similar al Departamento del Tesoro).

Pero conozcamos a Alí:

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

Como a una persona a la que le encanta aprender y ayudar a los demás a mejorar.

¿Qué haces en tu tiempo libre?

Me gusta escuchar música, ir al cine, comer hamburguesa y salir a tomar un café. Conocer gente nueva, hacer nuevos amigos y todo lo que tenga que ver con la interacción social.

¿Cuáles son tus series favoritas?

  1. Death Note
  2. WestWorld
  3. Neon Genesis Evangelion
  4. The Big Bang Theory

¿Playa o montaña?

Playa. La vista del mar es impresionante, y la gente siempre parece estar relajada.

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

¡No, en absoluto, solo realizo los desafíos 4Geeks!

¿Qué tipo de música te gusta?

El Rock, reggae, ritmos tropicales, música clásica, instrumental, jazz, blues.

¿Cuáles son tus 5 libros favoritos?

  1. El Origen perdido
  2. The picture of Dorian Grey
  3. Needful Things
  4. Los árboles mueren de pie
  5. The Double

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

  1. Inception
  2. Iron Man
  3. The Mask
  4. Powder
  5. Point Break

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

Hacer lo que más me gusta: ser un programador y encontrar nuevas formas de dar soluciones a los problemas.

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

Las nuevas tecnologías requeridas para un gran proyecto.

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

Trabajo con un equipo con alto nivel profesional, aprendo todos los días sobre nuevos temas y encuentro nuevas soluciones para el proyecto que estoy desarrollando.

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

Mejorar mi nivel como programador y lograr ver en línea mis proyectos personales.

 

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

 

Ciclo de desarrollo de productos 4Geeks

Uno de los desafíos más importantes cuando se construye un producto digital (producto de software) es encontrar el equilibrio adecuado, porque tal vez existan millones de personas trabajando en productos similares, y luego se desea obtener pequeñas versiones en corto tiempo.

Hemos tenido un gran incremento en nuestra experiencia de desarrollo de productos participando en proyectos / productos pasados y lidiando con problemas muy grandes en diferentes industrias. En nuestra experiencia siempre tomamos en cuenta cada una de las soluciones que aplicamos en el pasado para convertirlas en un producto real.

¿Conocemos a Uber, verdad? Nosotros creamos la misma plataforma con la misma tecnología 4 años antes de que Uber se lanzara en los Estados Unidos. Voy a hablar un poco más sobre esto en otro momento, sin embargo, en esta publicación, me gustaría conversar sobre cómo resolver un ciclo de productos pasados aplicando 4Geeks Product Development Cycle. Incluye habilidades comerciales y técnicas.

 

He aquí el secreto:

#1. Brainstorming:

Este primer paso es muy importante, porque es la clave del éxito de su producto.

Si necesita ayuda para compilar ideas, les sugiero documentarse y crear su propio modelo de modelo de negocio Business Model Canvas. Le ayudará a centrarse en algunos aspectos importantes tales como socios, competidores, propuesta de valor, entre otros. Así que tómese su tiempo en esto.

Completé el primer Business Model Canvas, en un Start Weekend Costa Rica, y descubrí el modelo comercial de Mall4G 🙂 se convirtió en nuestra la  plataforma de comercio electrónico. Si tiene curiosidad sobre la plataforma, puede visitarla utilizando el sitio web.

Cuando se tienen las ideas correctas y se logran enfocarse en esta primera etapa, el siguiente paso consistirá solo en darle forma a esa idea. En pocas palabras, maquillar el rostro.

#2. UX:

La experiencia del usuario se trata de la comodidad que sientan los clientes y la participación que éste tenga, no se trata de códigos. UX no se trata de un producto final, como una aplicación móvil o un sitio web.

#3. MVP:

Si usted no conoce el término MVP (Producto mínimo viable) Minimum Viable Product en inglés, se puede dirigir a nuestro blog, donde podrá encontrar un post con mayor información del tema. Como fundador de la compañía, un MVP puede ayudarlo enormemente, ya que podrá delimitar y enfocarse en la  primera versión del producto.

MVP no se trata de obtener ganancias, se trata de obtener retroalimentación de los usuarios.

Como se indicó,  en el blog se encuentra una publicación que trata el tema de MVP, y a  manera general se puede decir que el MVP está diseñado para compilar y posteriormente aplicar las observaciones que los clientes puedan tener. Por tanto, el responsable del startup debe reconocer y aceptar el hecho de que pueden existir reacciones negativas por parte de usuarios desconocidos. En coclusión, es fundamental recibir retroalimentación de los usuarios y para luego colocar en una balanza el potencial del startup.

#4. UI:

Algunas veces se confunde la interfaz de usuario (User Interface) y UX (User Experience). Permítanme explicar: la interfaz de usuario tiene que ver con la apariencia del producto y los diseñadores lo que realizan es crear escenarios y prototipos, por wireframing.

#5. Codificación:

A los Geek le encanta este paso, porque en este punto, los ingenieros de 4Geeks crean las funcionalidades y toda la lógica comercial. Puede llegar a convertirse en el momento de mayor placer o el convertirse en un infierno.

En la mayoría de los casos, nuestros ingenieros discuten con el equipo sobre lo que será el producto final con la finalidad de   encontrar la mejor tecnología, servidores y demás asuntos correspondientes al producto.

#6. Testing:

Si planeas lanzar un producto potencial, los “Testing” serán tu aliado por mucho tiempo ya que hoy en día, muchas compañías crean productos de alto nivel.

Básicamente, en esta etapa, el equipo de prueba se asegurará de que el producto funcione perfectamente.

#7. Lanzamiento del producto:

Este es el paso más excitante dentro del ciclo de desarrollo. Aquí el producto ya desarrollado se publicará.

Normalmente esta tarea la realizará un ingeniero de DevOps.

Reflexión final:

Particularmente (o cualquier otro Geek en la oficina puede decir lo mismo) he ido descubriendo cada vez más y más en cada etapa del 4Geeks Product Development Cycle (Ciclo de Desarrollo de Productos 4Geeks).

Suscríbase a nuestra lista de correo  para que de esta manera sea notificado en cuanto este post se publique.

Coméntenos, ¿cómo hacen para enfrentar los problemas en el ciclo de desarrollo de software?. Leo sus comentarios, me encantaría conocer en qué están trabajando en este momento.

Si actualmente se encuentran construyendo un producto de software pero necesitan ayuda para resolver problemas comunes, mi equipo gustosamente puede brindarles el apoyo que requieran. ¿Preguntas? Dejen sus comentarios.

Conociendo a Ivan Arroyo

Bienvenidos a otra entrevista de la serie Conoce a nuestro equipo Geek. En esta ocasión conversamos con Ivan Arroyo, quien es Software Engineer en 4Geeks. Ël es una persona proactiva y siempre dispuesto a ayudar. Él es alguien a quien puedes acudir si requieres de ayuda.

Él es de la capital de Costa Rica y le encanta bailar. De hecho le está impartiendo clases de baile al resto del equipo… ¡o al menos intentándolo! :)

van esta a cargo de un proyecto basado en una tecnología que le apasiona, A Ivan también le interesa todo lo que tiene que ver con servidores.

Ivan comenzó un proyecto de reciclaje en la oficina y es algo de lo que todos disfrutamos y apreciamos. Con pequeñas acciones ayudamos a la construcción de un mundo mejor.

Conozcamos a Ivan:

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

Soy una persona sencilla y con gran oratoria. Me encanta ayudar a los demás y siempre trato de ser feliz (para mí, lo más importante).

¿Qué haces en tu tiempo libre?

La mayoría de las veces me gusta bailar, cocinar, jugar videojuegos, escuchar y tocar música.

¿Cuáles son tus series favoritas?

  1. Merlí
  2. How I met you mother
  3. Breaking Bad

¿Montaña o playa?

Montaña. El clima frío me encanta.

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

Nop pero me gusta mucho caminar, ¿cuenta como deporte? :)

¿Qué tipo de música te gusta?

Todo tipo de música, solo depende de la canción. Cada pieza tiene una esencia así que me gusta siempre escucharla primero antes de juzgar.

¿Cuáles son tus libros favoritos?

  1. Mamita Yunai.
  2. El nombre del viento.
  3. El miedo del sabio.
  4. El Príncipe Feliz y La Sombra del Viento.

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

  1. The Shawshank Redemption
  2. Schindler’s List 
  3. The Help
  4. El Rey León.
  5. About Time.

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

Las diferentes cosas que siempre creamos y que siempre tenemos algo nuevo que aprender. Constantemente sostenemos conversaciones con clientes y socios y eso me hace sentir siempre en expectativa.

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

Recuerdo una oportunidad en que el desarrollo de uno de los proyectos en los que trabajo salió terriblemente mal. Los cambios ya estaban en producción y los servidores eran un caos.. ¡Fue un desastre! Afortunadamente se logró resolver el inconveniente, pero el resto del día se tornó súper pesado.

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

Las personas y el ambiente. Me encanta la forma en que realizan las cosas y eso me reconforta porque ha sido una de las mejores cosas que he encontrado.

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

lo deseo no estresarme.

Ahora bien, con respecto a mis objetivos a largo plazo (no tienen un orden específico): quisiera comenzar a estudiar para llegar a ser un excelente líder de proyectos. . También deseo escalar una montaña, mejorar mi inglés y llegar a casarme.

Ivan siempre está dispuesto a ayudar no solo a sus compañeros, sino a todos, no dude en ponerse en contacto con él si necesita orientación sobre cualquier tecnología.

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

La mejor manera de obtener sus primeros clientes

He visto morir miles de productos digitales, debido a múltiples razones de muchos tipos, pero la razón principal es porque no pueden atraer a suficientes clientes que paguen por el producto. Por tanto, usted sabe… ese producto morirá muy muy pronto.

Mi rol en 4Geeks es ayudar a compañías o individuos a construir productos digitales que den ganancias. Mi propia experiencia en proyectos anteriores (incluyendo éxitos y un montón de errores) me está permitiendo aconsejar a otras compañías de la manera apropiada. Ohh!! Además es importante mencionar que mi equipo en 4Geeks es muy talentoso.

Les proporcionaré algunas fabulosas  técnicas que me ayudaron a obtener nuestros primeros clientes. Espero que también puedan ayudarles:

#1. Ellos necesitan confiar en usted:

Nadie le dará dinero si no confía en usted. Las personas allá afuera no le dará dinero si no pueden confiar en usted, como persona honesta y valiosa. Entonces, el primer paso para tener la confianza de otras personas es ayudar.

¿Ayudar? Correcto. Usted necesita proporcionar la mayor cantidad de valor a su comunidad. Las ventas ocurrirán después.

Entonces, si usted está distribuyendo un producto digital, enfóquese en crear una comunidad y aliméntela con buenos contenidos todas y cada una de las semanas. Aquí puede obtener soporte en Facebook, LinkedIn, Twitter, YouTube, Instagram y demás.

Recuerde: valor, valor, valor… luego venta.

En otros post los guiaré con algunas pistas sobre cómo construir una comunidad sólida y fuerte en redes sociales.

#2. Revele las experiencias de sus clientes:

Las ventas sociales son tan poderosas y esto  quizás no se sabía. La gente está tomando decisiones importantes con base en las experiencias de otras personas. Si usted entiende esto, su negocio puede crecer.

Si usted gerencia un producto de software, la forma más sencilla de obtener opiniones de los clientes está en vuestra página de Facebook. Entonces, los usuarios pueden escribir una revisión justo allí, 100% pública. Dele una mirada a la siguiente captura de pantalla:

Si necesita ayuda para configurar revisiones y calificaciones en su página de Facebook, por favor consulte esta página de soporte  y exponga las experiencias de sus clientes. Pan comido.

#3. Prepara un plan:

Después de comenzar a captar clientes en vuestra compañía, necesita un plan. Este plan necesita ser muy congruente con sus metas y presupuesto, y puede ayudarle. No es necesario que sea el plan perfecto. Use las opiniones de sus familiares y amigos para afinar su plan.

Un plan robusto le ayudará en una segunda o tercera etapa, cuando necesite crear procesos automáticos y agilizar las operaciones.

La internet es un arma poderosa que le permite llegar a millones de personas en un minuto, ¿Cuál es vuestro plan?

Quisiera sugerirle que lea Crush It!, de Gary Vaynerchuck. A continuación una muestra:

#4. Enfóquese en los clientes:

Vuestro producto o compañía quizás sea muy brillante, pero su producto no es nada sin clientes que lo paguen. Ello significa que usted necesita clientes que paguen para tener un negocio verdadero. Entonces, por favor, por favor, por favor enfóquese en construir un fuerte compromiso con los clientes.

En este punto, el servicio a los clientes es muy crucial.

Puede utilizar algunas herramientas de mercadeo automático tales como conversaciones en su página web, noticieros, contenido exclusivo, foros, grupos de FaceBook. En 4Geeks Payments, por ejemplo, mantenemos una sala de conversación para desarrolladores, documentación de API, guías y demás.

En otros posts les comentaré cómo utilizar una herramienta de mercadeo por correo electrónico y chatbot para conducir vuestra atención hacia los clientes, automáticamente.

#5. No tenga miedo de solicitar pagos:

 

Sabe cuál es la razón principal por la cual las compañías no están cobrando a los usuarios? Es porque no les están solicitando pagos. ¿Porqué? Debido a que no confían en su solución o servicio. Suena muy raro, pero es verdad. No entre en pánico. Es un error común cuando se es un emprendedor novato.

Para corregir esto, tiene que aprender cómo lograr un acuerdo, pero antes de eso necesita confiar en su equipo, en su producto o servicio… y necesita construir empatía con sus clientes. Las metas de vuestra compañía se apoyan en usted.

Si ya tiene un plan y necesita ayuda para construir su producto digital, quizás mi equipo en 4Geeks pueda apoyarle. Solo complete  este formulario de contacto y uno de nuestros expertos le asesorará.