Mi primera aplicación

Antes de comenzar a trabajar con el siguiente tutorial, deberás instalar los programas:

Utilizamos Git en la versión 2.20.1 y Node.js en la versión 12.3.1, pero te recomendamos utilizar las más actualizadas. Todos los comandos en líneas que lanzamos son genéricos y se ejecutan en sistemas operativos basados en Unix como en Windows.

Contenidos

→Introducción
→Configuración del proyecto
→Crea una aplicación en Mercado Libre
→Inicio del desarrollo
→Deploy para Heroku
→Ajustes en Mercado Libre
→Configuraciones de ruta
→Actualizaciones


Introducción

En este tutorial, construiremos una aplicación integrada a Mercado Libre y protegida con contraseña para que puedas publicar y recuperar ítems.

Para facilitar nuestro trabajo, en Mercado Libre tenemos kits de desarrollo de software (SDKs) en diferentes lenguajes. En este caso, utilizaremos el SDK de Mercado Libre para Node.js. Conoce las herramientas de Mercado Libre.

Pantalla de login

Formulario de envío de ítems

Listado de ítems


Configuración del proyecto

Para iniciar el proyecto, descarga los archivos y directorios.

Ingresa a la herramienta de línea de comando en el directorio de tu proyecto y corre el comando npm install, para instalar las dependencias del proyecto. Utilizaremos las siguientes dependencias:

  • mercadolibre: es el SDK de Mercado Libre que te ayudará para desarrollar tu integración.
  • express: facilitará el desarrollo de nuestra aplicación en Node.js.
  • ejs: itrabajará de forma express y servirá como view engine para que crear nuestros templates.
  • dotenv: permitirá insertar variables de ambiente definidos en un archivo .env en nuestro código local.
  • multer: facilitará el upload de archivos que usaremos para la disposición de fotos en Mercado Libre.
  • helmet: creará una capa de protección para tu aplicación Node.js.
  • cookie-session: será responsable de la administración de los datos de sesión. Por ejemplo, para validar un usuario logueado.

Crea una aplicación en Mercado Libre

Una vez que tienes un proyecto en Node.js, necesitarás crear una aplicación dentro de Mercado Libre para trabajar con la integración. Para esto:

  1. Accede a nuestro DevCenter.
  2. Haz clic en “Crear una aplicación”.
  3. Completa todos los datos obligatorios. En “URI de redirect" completa la raíz del dominio:
  4. Nota:
    Es importante que completes este campo con una URL adecuada, válida y configurada para recibir notificaciones.


  5. En "Tópicos", podrás seleccionar cuáles son los intereses que tienes en recibir notificaciones y en “Notificaciones callbacks URL” configuraremos una ruta para recibir notificaciones sobre los tópicos.



  6. Ten en cuenta que completamos la URL de devolución de llamada de notificación con la URL base de nuestra aplicación (en este caso, http://localhost:3000) más una ruta que llamamos /notifications. Mercado Libre realizará solicitudes para esta ruta siempre que ocurra algo relevante entre los temas seleccionados. Obtén más información consultando la documentación de notificaciones. Guarda el proyecto y serás redirigido a la página de inicio donde incluiremos tu aplicación. Puedes ver el ID y la clave secreta que tu aplicación ha expuesto. Con estos valores, podemos comenzar nuestra integración.
 

Recuerda que "localhost" es una URL temporal que será reemplazada tan pronto como la implementemos.

Inicio del desarrollo

Ahora que tienes el proyecto instalado y una aplicación creada en Mercado Libre, crea un archivo con el nombre .env, que utilizarás para insertar nuestras variables de información confidencial en el código sin tener que compartir plataformas de control de versiones y colaboración de código, como GitHub, GitLab, Bitbucket, etc.

Copia el contenido del archivo .env.example, pégalo en el archivo que acabas de crear y completa las variables. Deberás obtener un resultado como el siguiente:

       
  CLIENT_ID={O ID da sua aplicação no Mercado Livre}
  CLIENT_SECRET={A key da sua aplicação no Mercado Livre}
  REDIRECT_URI=http://localhost:3000
  SYS_PWD={A senha que você quer uso no seu sistema}
     

¡Tu aplicación está lista para uso local! En tu herramienta de línea de comandos, ejecuta el comando npm start e acesse a URL http://localhost:3000. y ve a la URL http://localhost:3000. Ahora que tenemos nuestra aplicación en ejecución, podemos continuar con la fase de implementación.

 

Puede detener la ejecución en cualquier momento presionando Ctrl+C.

Deploy para Heroku

Heroku es una plataforma como un servicio (PaaS) que soporta diferentes lenguajes y le permite a los desarrolladores crear y cargar sus aplicaciones en la nube.

Para implementar en Heroku, primero necesitamos conocer la versión de Node.js con la que estamos trabajando. Ejecuta el comando node --version en su herramienta de línea de comando y copie los números que aparezcan.

Abra el archivo package.json y, al final del archivo, modifica la propiedad "engines" para tener sus números de versión.

Una vez realizado esto, deberás instalar el CLI de Heroku. Podrás hacer esto accediendo a la página de Heroku y descargándolo.

Usaremos Git para enviar el proyecto a Heroku. Ejecute el comando git init. Luego ejecute el comando git add. git add . y, por último, el comando git commit -m "first commit". Puedes intercambiar el mensaje "first commit" por cualquier mensaje que desee.

Para crear su aplicación en Heroku, siga estos pasos:

  1. Inicie sesión en Heroku con el comando heroku login.
  2. Cuando haya iniciado sesión, ejecuta heroku create my-meli-application. Puedes cambiar "my-meli-application" a cualquier nombre que desees. El nombre de la aplicación definirá la URL que usará para acceder a su aplicación. Para obtener más información, consulta la documentación de Heroku.
  3. Para cargar los archivos al servidor Heroku, ejecute el comando git push heroku master. Las variables del archivo .env no deben ir directamente al servidor. Hay una manera de crear variables de configuración directa desde la línea de comandos. Ejecute los comandos:
    • heroku config:set CLIENT_ID={ID DE LA APLICACIÓN EN MERCADO LIBRE}
    • heroku config:set CLIENT_SECRET={SECRET KEY DE LA APLICACIÓN EN MERCADO LIBRE}
    • heroku config:set REDIRECT_URI=https://{NOMBRE-DE-LA-APLICACION}.herokuapp.com
    • heroku config:set SYS_PWD={CONTRASEÑA QUE UTILIZARÁS EN EL SISTEMA}

Finalmente, para ver tu aplicación funcionando, ejecuta el comando heroku open. Se abrirá una ventana del navegador en el sitio web de su aplicación en Heroku.


Ajustes en Mercado Libre

Ahora que publicaste tu primera aplicación, la URL dejará de ser "localhost". Deberás volver al DevCenter de Mercado Libre para realizar los ajustes necesarios.

  1. Accede nuevamente a nuestro DevCenter.
  2. Haz clic en los tres puntos y luego "editar" para editar la aplicación:


  3. Modifica el "URI de redireccionamiento" a una nueva URL proporcionada por Heroku. Esta URL debe ser la misma que la que figura en las variables de configuración, es decir, debería ser similar a https://{NOMBRE-DE-LA-APLICACION-HEROKU}.herokuapp.com.


  4. Modifica también la “URL de retornos de llamada de notificación”:


Configuraciones de ruta

Para entender mejor el sistema de rutas de esta pequeña integración, vamos a preparar una pantalla con la lista de itens.

Abra el archivo app.js y agregue el siguiente código antes de module.exports = app:

       
app.get('/posts', validateToken, async (req, res) => {
  try {
    const meliObject = new meli.Meli(CLIENT_ID, CLIENT_SECRET, res.locals.access_token);    
    const user = await meli_get(meliObject, '/users/me');
    const items = (await meli_get(meliObject, `/users/${user.id}/items/search`)).results || [];
    if (items.length) {
      const result = [];
      const promises = items.map(item_id => meli_get(meliObject, `/items/${item_id}`));
      for await (item of promises) {
        result.push(item);
      }
      res.render('posts', { items: result });
    } else {
      res.status(404).send('no items were found :(');
    }
  } catch(err) {
    console.log('Something went wrong', err);
    res.status(500).send(`Error! ${err}`);
  }
});
     

La línea de código res.render('posts', { items: result }) menciona el código a renderizar en una página, llamada posts.ejs en el directorio views.

Crea esta página posts.ejs en el directorio views y agrega el siguiente código:

       
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Posts - My Meli Application</title>
  <link rel="stylesheet" type="text/css" href="/css/style.css" />
</head>
<body>
  <div class="container">
    <div class="items-list">
      <% for (item of items) { %>
        <a target="_blank" rel="noopener noreferrer nofollow" href="<%= item.permalink %>">
          <div>
            <img src="<%= item.secure_thumbnail %>" />
            <h3><%= item.title %></h3>
          </div>
        </a>
      <% } %>
    </div>
  </div>
</body>
</html>
     

Actualizaciones

A medida que implementes nuevas funcionalidades en tu desarrollo, ten en cuenta, que deberás subir estas actualizaciones en Heroku.

Para realizar este proceso, repite los pasos realizamos anteriormente:

  1. Corre el comando git add . para agregar los archivos en stage.
  2. Corre el comando git commit -m "agrega pantalla de listado de ítems". Puedes cambiar el mensaje para poder encontrarlo mejor pero es recomendable mantener siempre un texto corto, limpio y relacionado a los cambios realizados.
  3. Para subir los archivos y reiniciar el servidor, deberás utilizar el comando git push heroku master.