#Node.js
· #nodejs
· handlebars
· nestjs
· Technical Articles
· template
· typescript
TypeScript: Plantillas usando el marco NestJS en SAP BTP
By s4pcademy
Introducción
A menudo nos encontramos con el requisito de que necesitamos generar una plantilla HTML dinámica pero con un código minimalista y sin tener ningún componente de interfaz de usuario diferente. Para lograrlo, necesitamos tener una forma sofisticada de hacerlo y, para resumir, podemos concluir en el debajo de la declaración
Los motores de plantillas son la columna vertebral del desarrollo web y proporcionan una forma potente y flexible de crear páginas web dinámicas. NestJS facilita la integración de su motor de plantillas favorito, lo que le permite concentrarse en crear la lógica de su aplicación en lugar de preocuparse por los detalles esenciales de la representación de HTML. Con NestJS y su motor de plantillas preferido, puede crear páginas web atractivas y funcionales que deleitarán a sus usuarios y harán que regresen por más: ChatGPT
Por lo tanto, NestJS es un marco poderoso para crear aplicaciones del lado del servidor escalables y mantenibles en Node.js. Una de las funciones que ofrece NestJS es la compatibilidad con motores de plantillas, que le permiten generar contenido HTML dinámico para sus páginas web. Un motor de plantillas es una herramienta que le permite crear plantillas HTML que contienen marcadores de posición para contenido dinámico. Estos marcadores de posición se reemplazan con contenido real en tiempo de ejecución, lo que le permite generar contenido HTML dinámico en el servidor.
Requisito previo
Instale el paquete y cree un proyecto como se menciona a continuación en el fragmento de código
$ npm i -g @nestjs/cli
$ nest new nestJsTemplate
$ cd nestJsTemplate
$ nest generate module reports
$ nest generate controller reports
$ nest generate service reportsHasta ahora ha creado los artefactos del proyecto y la plantilla, ahora a continuación se encuentran los pasos para el fragmento de código mencionado que necesita implementar para construir el nestJsTemplate
Pasos de implementación del código
Primero vamos a escribir la clase de controlador como se menciona en el fragmento de código para la clase ReportsController.ts
import { Controller, Get, Param, Res } from '@nestjs/common';
import { ReportsService } from './reports.service';
import * as empData from 'src/data/sample.json';//static json file
import { Response } from 'express';
@Controller('reports')
export class ReportsController {
constructor(private reportsService: ReportsService) { }
@Get()
getEmployeeReports(): any {
// return [{id : 0}];
return this.reportsService.findAll();
}
@Get(':id')
getEmployeeReportsById(@Param('id') id: string): any {
return this.reportsService.findById(id);
}
@Get('emp/:id')
async getEmpReports(@Param('id') empId: string): Promise<Object> {
var report = empData;
return report;
}
@Get('emps/:id') // method to process the html template content
async getEmpReportsAsTemplate(@Param('id') empId: string, @Res() res: Response) {
var report = empData;
return res.render(
"report.hbs", { emp: empData.employeeDtls, dept: empData.departments },
);
}
}Listado 1.1: Fragmento de código para la clase de controlador
Como puede ver en el fragmento de código anterior (Listado 1.1), tiene cuatro métodos, de los cuales los primeros tres son el método normal para obtener la identificación del empleado y obtener los detalles de todos los empleados y proporcionar la respuesta en formato JSON, una vez que intente ejecutar la API.
Pero para el último método, si observa que teníamos el nombre de archivo «report.hbs», vamos a definir el fragmento de código. y este método se usa para leer el contenido del archivo estático como definimos la información estática JSON, que estamos leyendo en este método y asignando al objeto, y el mismo objeto, si podemos observar, se está usando en el informe.hbs archivo como se muestra a continuación
<body>
<h1>Employees - Reporting Info</h1>
<table id="reports">
<tr>
<th>Employee Id </th>
<th>First Name </th>
<th>Last Name </th>
<th>email </th>
<th>Hired Date</th>
</tr>
{{#each emp}}
<tr>
<td>{{employeeId}}</td>
<td>{{firstName}}</td>
<td>{{lastName}}</td>
<td>{{email}}</td>
<td>{{hireDate}}</td>
</tr>
{{/each}}
</table>
<h2>Department Details</h2>
<table id="reports">
<tr>
<th>Department Id </th>
<th>Department Name </th>
<th>Email </th>
<th>Department Manager </th>
</tr>
{{#each dept}}
<tr>
<td>{{id}}</td>
<td>{{deptName}}</td>
<td>{{email}}</td>
<td>{{departmenttManager}}</td>
</tr>
{{/each}}
</table>
</body>Listado 1.2: Fragmento de código del archivo report.hbs
Aquí estamos escribiendo solo el fragmento de código y para conocer el otro contenido, puede consultar el enlace de git, que compartiría al final de este blog.
Ahora bien, si observan aquí en el <#cada> etiquetas hay variables emp y dept, que se asignan al objeto en el método del controlador «getEmpReportsAsTemplate”
Ahora, el HTML dinámico y el método están definidos, necesitamos definir la configuración, que debería hacer la magia real y esto está sucediendo en el archivo main.ts, cuyo fragmento de código se muestra a continuación.
import { NestFactory } from '@nestjs/core';
import { ValidationPipe } from '@nestjs/common';
import { NestExpressApplication } from '@nestjs/platform-express';
import { resolve } from 'path';
import { AppModule } from './app.module';
async function bootstrap() {
const app = await NestFactory.create<NestExpressApplication>(
AppModule);
app.useStaticAssets(resolve('./src/public'));
app.setBaseViewsDir(resolve('./src/views'));
app.setViewEngine('hbs');
app.useGlobalPipes(new ValidationPipe({ whitelist: true, transform: true }));
app.setGlobalPrefix('api/v1');
await app.listen(process.env.PORT || 3000);
}
bootstrap();
Listado 1.3: Fragmento de código del archivo del módulo principal
En el código anterior, estamos configurando las vistas y definiendo desde dónde tiene que leer el archivo hbs e importando la biblioteca de plataforma rápida, que básicamente ayuda a representar el contenido HTML en el navegador.
Junto con eso, el JSON de muestra que estamos usando para renderizar en la interfaz de usuario se puede mostrar a continuación.
{
"employeeDtls": [
{
"employeeId": 100,
"firstName": "John",
"lastName": "Chen",
"email": "john.chen@###.com",
"hireDate": "2008-10-16"
},
{
"employeeId": 101,
"firstName": "Ameya",
"lastName": "Job",
"email": "ameya.job@$###.com",
"hireDate": "2013-03-06"
},
{
"employeeId": 102,
"firstName": "Pat",
"lastName": "Fay",
"email": "pat.fey@###.com",
"hireDate": "2001-03-06"
}
],
"departments": [
{
"id": "1",
"deptName": "Payroll",
"email": "payroll@###.com",
"departmenttManager":"Adam Liser"
},
{
"id": "2",
"deptName": "Admininstrator",
"email": "admin@###.com",
"departmenttManager":"Riner Saw"
}
]
}Listado 1.4: Datos de ejemplo de JSON
Despliegue a BTP
Para implementar en BTP, primero debemos seguir lo siguiente requisito previo pasos como se menciona a continuación
Hasta ahora, desarrollamos y ejecutamos la aplicación para probar cómo funciona la API localmente. Ahora probará la misma lista de pruebas de API implementándola en SAP BTP. Para continuar con la implementación de la aplicación employeedtsApp, hay algunos pasos de requisitos previos, que debemos seguir paso a paso, como se menciona a continuación.
- Creación de una cuenta de prueba en SAP BTP: inicie sesión en la cuenta de prueba de SAP y cree una cuentaespacio de desarrollo como se menciona en (https://developers.sap.com/tutorials/hcp-create-trial-account.html)
- Instalación de Cloud Foundry CLI: consulte la documentación para instalar cf cli en su computadora portátil y, en caso de instalación de MAC-OS, use el comando brew instalar fundición en la nube/tap/cf-cli@8 al ejecutarlo en la terminal de su computadora portátil, puede consultar los documentos oficiales de SAP para el enlace de instalación de CF-CLI ( https://help.sap.com/docs/BTP/65de2977205c403bbc107264b8eccf4b/4ef907afb1254e8286882a2bdef0edf4.html).
- Instalación de complementos MultiApps CF CLI: Instale el cf cli multi-app como se menciona en el git enlace (https://github.com/cloudfoundry/multiapps-cli-plugin). Instalación de la herramienta de creación de MTA en la nube: siga las enlace (https://sap.github.io/cloud-mta-build-tool/download/) para instalar la herramienta de compilación MTA para crear un proyecto de archivo mta que podemos usar como un archivo compilado que se implementará en los ya creados espacio para desarrolladores en SAP BTP.
- Modificación del archivo mta.yml: como se trata de una aplicación basada en mecanografiado, debe modificar el .yml para que la aplicación se pueda implementar en el espacio de desarrollo de SAP BTP, por lo que se muestra a continuación el Listado 1.5 que contiene el fragmento de código de mta. yml también se muestra en la Figura 1.10, si notó a continuación en el archivo mta.yml que hemos agregado como comandos personalizados que son específicos de la aplicación basada en mecanografiado, ayuda a construir la aplicación antes de implementarla en el espacio de desarrollo de SAP BTP.
_schema-version: 3.3.0
ID: my-sample-nestjs
version: 0.0.1
modules:
- name: my-sample-nestjs
type: nodejs
path: .
build-parameters:
builder: custom
commands:
- npm ci
- npm run build
- npm prune --include=dev
parameters:
buildpack: nodejs_buildpack
command: node dist/main
memory: 128M
routes:
- route: my-sample-nestjs-${space}.${default-domain}
- route: my-sample-nestjs-${space}.cert.${default-domain}Listado 1.5: Fragmento de código del archivo mta.yml
Ahora, para compilar e implementar la aplicación, ejecute la siguiente declaración en la terminal
$ cf login
$ mbt build -t ./
$ cf deploy my-sample-nestjs_0.0.1.mtar
Listado 1.6: Comando para construir e implementar la aplicación en SAP BTP
Resultado/Salida
Ahora navegue al navegador, después de la implementación exitosa de la aplicación para ver el resultado, ya que todas las llamadas API son CONSEGUIRpor lo que podemos ejecutarlo en el propio navegador.
Fig-1: Capturas de pantalla de la respuesta de la API
Como puede ver en la figura 1 anterior, podemos generar la información del empleado en forma de tabla, que nuevamente es contenido HTML, y tampoco teníamos ningún componente de interfaz de usuario específico para hacer en la interfaz de usuario. De esta forma, podemos renderizar cualquier contenido HTML en el navegador. La API termina los puntos que se establecen en el archivo main.ts como “/api/v1/informes/emps/1”. Si nota, intentamos completar dos conjuntos de tablas, uno con la información del empleado y otro con la información del empleado, para que podamos entender cómo podemos mostrar diferentes conjuntos de datos en la interfaz de usuario.
Conclusión
NestJS es un marco potente y flexible para crear aplicaciones del lado del servidor escalables y mantenibles. Una de las fortalezas clave de NestJS es su compatibilidad con una variedad de motores de plantillas, incluidos Handlebars, EJS, Pug y más. Con la capacidad de integrar fácilmente estos motores en su aplicación NestJS, puede crear páginas web hermosas y dinámicas que atraigan a sus usuarios y ayuden a que su negocio crezca. Ya sea que esté creando un prototipo pequeño o una aplicación empresarial a gran escala, NestJS y su ecosistema de motor de plantillas lo tienen cubierto. Con el ejemplo anterior, de alguna manera puede crear el contenido HTML basado en la plantilla
Sugerencias y comentarios son bienvenidos!!!
