2 minutos de lectura

¿Cómo crear un webservice en Magento 2?

Por Christopher Liddell | 12/08/2022

Magento Adobe Commerce Comercio Electrónico

2 minutos de lectura

¿Cómo crear un webservice en Magento 2?

Por Christopher Liddell | 12/08/2022

Magento Adobe Commerce Comercio Electrónico

Los webservices son mecanismos vitales para que dos o más sistemas se comuniquen, ya que permiten transferir información, ejecutar procedimientos o capturar datos de los usuarios.

Imagina que llenas un formulario con tus datos personales, luego estos son enviados a un servidor y procesados, puede ser para participar en un sorteo, para solicitar un servicio particular o realizar un reclamo. En este artículo se abarcará una guía sencilla para crear un webservice en Magento 2, el cual se utilizará como ejemplo para capturar los datos de un cliente que está llenando un formulario de contacto.

Primero se debe crear el formulario para el lado del cliente, para esto vamos a utilizar la herramienta para crear un formulario HTML de forma rápida y sencilla:

Formulario_Magento

Se debe copiar el código HTML del formulario y pegarlo en donde se desee mostrársele al usuario. Para este ejercicio se creará una página "contact":

Contact_Magento

Adicionalmente, se usará el siguiente código de javascript para enviar el formulario cuando el usuario presione el botón de Submit (te invitamos a agregar mayor funcionalidad como validaciones o un captcha, ya que este ejemplo es sólo una demostración básica):

<script type="text/javascript" defer>
require(['jquery','jquery/ui'], function($) {
$('#submit').on('click', function(){
var formData = new FormData($("#contact-form")[0]);
formData = JSON.stringify(Object.fromEntries(formData));
$('body').trigger('processStart');
$.ajax({
type: "POST",
url: "/rest/V1/custom/contact-form/",
data: formData,
success: function(){
$('body').trigger('processStop');
alert("Success");
},
error: function (xhr, ajaxOptions, thrownError) {
$('body').trigger('processStop');
alert("Error");
},
dataType: 'json',
contentType: 'application/json',
});
});
});
</script>Del código javascript anterior, debes remplazar "contact-form" por el nombre que le quieras dar a la ruta de tu webservice. Con esto terminamos nuestro formulario, ahora vamos a crear el API y la ejecución del lado del servidor.

En la carpeta, app/code de nuestro directorio de Magento, vamos a crear un módulo, en este ejemplo se nombrará "Imagineer_Contact" (crear la carpeta app/code/Imagineer/Contact).

Dentro de nuestro módulo agregaremos los siguientes archivos (remplaza "Imagineer" y "Contact" para que corresponda con el nombre de tu módulo):

registration.php :

<?php

\Magento\Framework\Component\ComponentRegistrar::register(

\Magento\Framework\Component\ComponentRegistrar::MODULE,

'Imagineer_Contact',

__DIR__

);

etc/module.xml :

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">

<module name="Imagineer_Contact" setup_version="1.0.0" />

</config>

etc/di.xml :

<?xml version="1.0"?>

</config>

etc/webapi.xml (debes remplazar "contact-form" con el mismo nombre que asignaste en el código javascript anterior):

<?xml version="1.0"?>

</resources>

</route>

</routes>

Api/Contact.php (Aquí se deben indicar los parámetros que recibe el webservice, en este caso sólamente son 2, el nombre y la información de contacto, ambas son hileras y sus nombres deben coincidir con los nombres de los campos del formulario HTML):

<?php

namespace Imagineer\Contact\Api;

interface Contact

{

/**

* GET for Post api

* @param string $name

* @param string $info

* @return string

*/

public function getPost($name, $info);

}

Model/Api/Contact.php (Aquí vamos a colocar la funcionalidad de nuestro método getPost, debemos conservar los mismos parámetros y nombres que en el api que se definió en la interfaz anterior):

<?php

namespace Imagineer\Contact\Model\Api;

use Psr\Log\LoggerInterface;

class Contact

{

protected $logger;

public function __construct(

LoggerInterface $logger

)

{

$this->logger = $logger;

}

/**

* @inheritdoc

*/

public function getPost($name, $info);

{

$response = ['success' => false];

try {

// Your Code here

$response = ['success' => true, 'message' => $name . " " . $info];

} catch (\Exception $e) {

$response = ['success' => false, 'message' => $e->getMessage()];

$this->logger->info($e->getMessage());

}

return json_encode($response);

}

Dentro de la función getPost, puedes agregar el comportamiento deseado, como guardar la información en una base de datos, enviar un correo electrónico o lo que quieras hacer. De cualquier forma, siempre te recomendamos que hagas validaciones de seguridad tanto del lado del cliente como del lado del servidor, para evitar ataques de inyección de código o simplemente limpiar formatos de datos inválidos.

Una vez que tenemos estos archivos listos en nuestro módulo, solamente falta instalarlo y compilar, para esto se deben correr los comandos:

bin/magento setup:upgrade

bin/magento setup:di:compile

bin/magento cache:flush

Ahora prueba ingresando los datos en el formulario, te recomiendo abrir la consola de inspección de tu navegador (en el caso de Chrome, presionando F12 o clic derecho > inspeccionar). Luego navega a la pestaña de Network y revisa lo que sucede cuando realizas el Submit del formulario.

Formulario_Magento

Deberías ver un código 200 con el mensaje de respuesta. Si el código de error es 400, revisa la sintaxis de tu javascript, y si es error 500, revisa los archivos ubicados en:

var/log/system.log

var/log/exception.log

/var/log/apache2/error.log (si usas apache)

/var/log/nginx/nginx_error.log (si usas nginx)

Espero que esta guía haya sido útil para crear un webservice básico en Magento, si deseas más información o tienes algún comentario al respecto, puedes contactarme y con gusto intentaré responderte. Si quieres descargar el código utilizado en esta guía, visita el siguiente enlace: