20. Implementación de la aplicación cliente/servidor en un servicio de alojamiento
A continuación, ofrecemos 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 mostrar que nuestra aplicación se adapta bien a esta 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.
Tenemos que modificar:
- los archivos de configuración [1];
- los controladores [AdminDataController] y [CalculerImpotController] para tener en cuenta que no hay 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] evoluciona de la siguiente manera:
{
"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 identificadores de su propietario, cambiarán;
El controlador [AdminDataController] evoluciona 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 una matriz [$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) {
// Ha salido mal
// Devolución del resultado con error al controlador principal
$état = 1051;
return [Response::HTTP_INTERNAL_SERVER_ERROR, $état,
["réponse" => utf8_encode($ex->getMessage())], []];
}
}
// envío del resultado al controlador principal
$état = 1000;
return [Response::HTTP_OK, $état, ["réponse" => $taxAdminData], []];
}
}
Comentarios
- línea 31: ahora se comprueba si se dispone o no de un servidor [Redis];
- líneas 32-34: si es así, se retoma el código anterior en su totalidad;
- líneas 35-46: en caso 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.
Hecho. 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 han generado 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
-- Hora 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;
--
-- Volcado de datos de 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 hecho todo esto, se han adaptado 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 [http://machine/apps/impot/client-vuejs/]. Esto supuso los siguientes cambios:
En la raíz de [workspace] de [VSCode] se ha creado el siguiente archivo [vue.config.js]:
El archivo [vue.config.js] es el siguiente:
// vue.config.js
module.exports = {
// el URL del servicio de atención al cliente [vuejs] del servidor de cálculo de impuestos
publicPath: '/apps/impot/client-vuejs/'
}
El archivo [router.js] [3] también se ha modificado:
// importaciones
import Vue from 'vue'
import VueRouter from 'vue-router'
...
// complemento de enrutamiento
Vue.use(VueRouter)
// 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 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] causa 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 indicando 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 utilizar 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 min = 300 s = 300 000 ms
duréeSession: 300000
}
Comentarios
- línea 10: se introduce el URL del servidor de cálculo de impuestos;
La versión de producción del proyecto se ha generado 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, a continuación, renombrado como [client-vuejs] para que el código del cliente se encontrara en la carpeta [/.../apps/impot/client-vuejs/] tal y como estaba previsto. A continuación, en esta carpeta hemos descargado 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. No obstante, la nueva versión aporta una mayor comodidad al usuario. Puede navegar introduciendo URL. La aplicación le propone entonces la vista que mejor se adapta al estado actual (la sesión) de la aplicación. Por otra parte, la versión [vuejs-22] aporta mejoras para la visualización de la aplicación en dispositivos móviles.