20. Implementación de la aplicación cliente/servidor en un servicio de alojamiento
A continuación, presentamos las líneas generales de la implementación de la aplicación cliente/servidor que hemos desarrollado en un servidor OVH [https://www.ovh.com/fr/]. La implementación en otros proveedores de alojamiento no debería ser muy diferente. Simplemente queremos demostrar que nuestra aplicación se adapta bien a este tipo de implementación.
20.1. Implementación del servidor
El alojamiento OVH al que nos referimos es un alojamiento básico:
- un entorno PHP 7.3;
- un SGBD MySQL;
- sin servidor [Redis];
El tercer punto nos obliga a modificar la versión 14 de nuestro servidor de cálculo de impuestos.
Debemos modificar:
- los archivos de configuración [1];
- los controladores [AdminDataController] y [CalculerImpotController] para tener en cuenta que no existe el servidor [Redis];
El archivo [config.json] cambia de la siguiente manera:
{
"databaseFilename": "Config/database.json",
"corsAllowed": false,
"redisAvailable":false,
"rootDirectory": "/.../www/apps/impot/serveur-php7",
"relativeDependencies": [
"/Entities/BaseEntity.php",
...
"/Controllers/AdminDataController.php"
],
"absoluteDependencies": [
"/.../vendor/autoload.php",
"/.../vendor/predis/predis/autoload.php"
],
"users": [
{
"login": "admin",
"passwd": "admin"
}
],
...
}
Comentarios
- línea 4: se introduce un valor booleano [redisAvailable] para indicar si se tiene acceso o no a un servidor [Redis];
- líneas 5, 13 y 14: las rutas absolutas cambiarán;
El archivo [database.json] queda así:
{
"dsn": "mysql:host=...;dbname=...",
"id": "...",
"pwd": "...",
"tableTranches": "dbimpots_tbtranches",
"colLimites": "limites",
"colCoeffR": "coeffr",
"colCoeffN": "coeffn",
"tableConstantes": "dbimpots_tbconstantes",
"colPlafondQfDemiPart": "plafondQfDemiPart",
...
}
Comentarios
- líneas 2-4: la identidad de la base de datos, así como los datos de identificación de su propietario, cambiarán;
El controlador [AdminDataController] cambia de la siguiente manera:
<?php
namespace Application;
// dependencias de Symfony
use \Symfony\Component\HttpFoundation\Response;
use \Symfony\Component\HttpFoundation\Request;
use \Symfony\Component\HttpFoundation\Session\Session;
// alias de la capa [dao]
use \Application\ServerDaoWithSession as ServerDaoWithRedis;
class AdminDataController implements InterfaceController {
// $config es la configuración de la aplicación
// procesamiento de una solicitud Request
// utiliza la sesión Session y puede modificarla
// $infos son datos adicionales específicos de cada controlador
// devuelve un array [$statusCode, $état, $content, $headers]
public function execute(
array $config,
Request $request,
Session $session,
array $infos = NULL): array {
// debe tener un único parámetro GET
$method = strtolower($request->getMethod());
...
// se puede trabajar
// Redis
if ($config["redisAvailable"]) {
\Predis\Autoloader::register();
...
} else {
try {
// vamos a buscar los datos fiscales en la base de datos
$dao = new ServerDaoWithRedis($config["databaseFilename"], NULL);
// taxAdminData
$taxAdminData = $dao->getTaxAdminData();
} catch (\Throwable $ex) {
// salió mal
// se devolvió el resultado con un error al controlador principal
$état = 1051;
return [Response::HTTP_INTERNAL_SERVER_ERROR, $état,
["réponse" => utf8_encode($ex->getMessage())], []];
}
}
// se envía el resultado al controlador principal
$état = 1000;
return [Response::HTTP_OK, $état, ["réponse" => $taxAdminData], []];
}
}
Comentarios
- línea 31: ahora se verifica si existe o no un servidor [Redis];
- líneas 32-34: si es así, se retoma el código anterior en su totalidad;
- líneas 35-46: de lo contrario, los datos de la administración tributaria se obtienen de la base de datos;
El controlador [CalculerImpotController], que también necesita los datos de la administración tributaria, funciona de la misma manera.
Listo. La implementación en el servidor OVH consistió en crear FTP. Se descargó en OVH:
- la versión [vuejs-14-without-redis];
- la carpeta [vendor], que contiene todas las dependencias del servidor [vuejs-14-without-redis];
Una vez realizada la transferencia FTP, se generaron las tablas necesarias para el servidor con el siguiente script SQL:
-- phpMyAdmin SQL Volcado
-- versión 4.8.5
-- https://www.phpmyadmin.net/
--
-- Host: localhost:3306
-- Fecha de generación: 12 de octubre de 2019 a las 07:45 AM
-- Versión del servidor: 5.7.24
-- PHP Versión: 7.2.11
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET AUTOCOMMIT = 0;
START TRANSACTION;
SET time_zone = "+00:00";
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;
--
-- Estructura de la tabla `dbimpots_tbconstantes`
--
CREATE TABLE `dbimpots_tbconstantes` (
`id` int(11) NOT NULL,
`plafondQfDemiPart` decimal(10,2) NOT NULL,
`plafondRevenusCelibatairePourReduction` decimal(10,2) NOT NULL,
`plafondRevenusCouplePourReduction` decimal(10,2) NOT NULL,
`valeurReducDemiPart` decimal(10,2) NOT NULL,
`plafondDecoteCelibataire` decimal(10,2) NOT NULL,
`plafondDecoteCouple` decimal(10,2) NOT NULL,
`plafondImpotCelibatairePourDecote` decimal(10,2) NOT NULL,
`plafondImpotCouplePourDecote` decimal(10,2) NOT NULL,
`abattementDixPourcentMax` decimal(10,2) NOT NULL,
`abattementDixPourcentMin` decimal(10,2) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
--
-- Volcado de datos de la tabla `dbimpots_tbconstantes`
--
INSERT INTO `dbimpots_tbconstantes` (`id`, `plafondQfDemiPart`, `plafondRevenusCelibatairePourReduction`, `plafondRevenusCouplePourReduction`, `valeurReducDemiPart`, `plafondDecoteCelibataire`, `plafondDecoteCouple`, `plafondImpotCelibatairePourDecote`, `plafondImpotCouplePourDecote`, `abattementDixPourcentMax`, `abattementDixPourcentMin`) VALUES
(8, '1551.00', '21037.00', '42074.00', '3797.00', '1196.00', '1970.00', '1595.00', '2627.00', '12502.00', '437.00');
-- --------------------------------------------------------
--
-- Estructura de la tabla `dbimpots_tbtranches`
--
CREATE TABLE `dbimpots_tbtranches` (
`id` int(11) NOT NULL,
`limites` decimal(10,2) NOT NULL,
`coeffR` decimal(10,2) NOT NULL,
`coeffN` decimal(10,2) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
--
-- Generando volcado de datos para la tabla `dbimpots_tbtranches`
--
INSERT INTO `dbimpots_tbtranches` (`id`, `limites`, `coeffR`, `coeffN`) VALUES
(36, '9964.00', '0.00', '0.00'),
(37, '27519.00', '0.14', '1394.96'),
(38, '73779.00', '0.30', '5798.00'),
(39, '156244.00', '0.41', '13913.69'),
(40, '0.00', '0.45', '20163.45');
--
-- Índices de las tablas volcadas
--
--
-- Índices de la tabla `dbimpots_tbconstantes`
--
ALTER TABLE `dbimpots_tbconstantes`
ADD PRIMARY KEY (`id`);
--
-- Índices para la tabla `dbimpots_tbtranches`
--
ALTER TABLE `dbimpots_tbtranches`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT para tablas volcadas
--
--
-- AUTO_INCREMENT para la tabla `dbimpots_tbconstantes`
--
ALTER TABLE `dbimpots_tbconstantes`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=9;
--
-- AUTO_INCREMENT para la tabla `dbimpots_tbtranches`
--
ALTER TABLE `dbimpots_tbtranches`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=41;
COMMIT;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
Una vez completado todo esto, se adaptaron los archivos [config.json, database.json] a su nuevo entorno.
20.2. Implementación del cliente [Vue.js]
Se decidió implementar el cliente [Vue.js] en URL y [http://machine/apps/impot/client-vuejs/]. Esto implicó los siguientes cambios:
En la raíz de [workspace] de [VSCode] se creó el siguiente archivo [vue.config.js]:
El archivo [vue.config.js] es el siguiente:
// vue.config.js
module.exports = {
// el servicio de atención al cliente URL del servidor de cálculo de impuestos [vuejs]
publicPath: '/apps/impot/client-vuejs/'
}
El archivo [router.js] [3] también se modificó:
// importaciones
import Vue from 'vue'
import VueRouter from 'vue-router'
...
// complemento de enrutamiento
Vue.use(VueRouter)
// las rutas de la aplicación
const routes = [
...
]
// el enrutador
const router = new VueRouter({
// las rutas
routes,
// el modo de visualización de URL
mode: 'history',
// la base de la aplicación URL
base: '/apps/impot/client-vuejs/'
})
// verificación de las rutas
router.beforeEach((to, from, next) => {
...
})
// exportación del enrutador
export default router
Comentarios
- línea 21: se ha modificado la base de URL;
El archivo [config.js] se modifica de la siguiente manera:
// uso de la biblioteca [axios]
const axios = require('axios');
// tiempo de espera de las solicitudes HTTP
axios.defaults.timeout = 5000;
// la base de datos del servidor de cálculo de impuestos
// el esquema [https] presenta problemas en Firefox porque el servidor de cálculo
// de impuestos envía un certificado autofirmado. Funciona bien con Chrome y Edge. No se ha probado con Safari.
// con Firefox es posible solicitando el URL que aparece a continuación directamente e indicándole a Firefox
// que aceptas el riesgo de un certificado no firmado. Entonces el cliente [vuejs] funcionará.
axios.defaults.baseURL = 'http://.../apps/impot/servidor-php7';
// vamos a usar cookies
axios.defaults.withCredentials = true;
// exportación de la configuración
export default {
// objeto [axios]
axios: axios,
// tiempo máximo de inactividad de la sesión: 5 minutos = 300 s = 300 000 ms
duréeSession: 300000
}
Comentarios
- línea 10: se incluye el archivo URL del servidor de cálculo de impuestos;
La versión de producción del proyecto se generó con el comando [build] del siguiente archivo [package.json] [5]:
{
"name": "vuejs",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve vuejs-22/main.js",
"build": "vue-cli-service build vuejs-22-ovh-withBootstrapVue/main.js",
"lint": "vue-cli-service lint"
},
...
}
Una vez hecho esto, la carpeta [dist], que contenía la versión de producción generada, se «subió» al servidor OVH en la carpeta [/.../apps/impot] y luego se le cambió el nombre a [client-vuejs] para que el código del cliente quedara en la carpeta [/.../apps/impot/client-vuejs/], tal como estaba previsto. Luego, en esa carpeta, descargamos el siguiente archivo [.htaccess]:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /apps/impot/client-vuejs/
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /apps/impot/client-vuejs/index.html [L]
</IfModule>
Esto se debe a que el servidor web de OVH utilizado aquí es un servidor Apache. Para otros tipos de servidores, consulte la documentación |https://cli.vuejs.org/guide/deployment.html|.
La aplicación de servidor PHP 7 se puede probar |aquí|.
El cliente [Vue.js] se puede probar |aquí|.
20.3. Conclusion
La versión [vuejs-21] no era imprescindible. Se había comprobado que la versión [vuejs-20] respondía correctamente a las entradas URL realizadas por el usuario. Sin embargo, la nueva versión brinda mayor comodidad al usuario. Puede navegar al escribir URL. La aplicación le sugiere entonces la vista que mejor se adapta al estado actual (la sesión) de la aplicación. Además, la versión [vuejs-22] incluye mejoras en la visualización de la aplicación en dispositivos móviles.