One place for hosting & domains

      Cómo usar EJS para crear una plantilla de su aplicación Node


      Introducción

      Cuando se crean aplicaciones Node rápidas en el momento, a veces es necesario una forma fácil y rápida de crear plantillas de nuestra aplicación.

      Jade llega como el motor de visualización para Express por defecto, pero la sintaxis de Jade puede ser demasiado compleja para muchos casos de uso. EJS es una alternativa que hace bien el trabajo y es fácil de configurar. Veamos cómo podemos crear una aplicación sencilla y usar EJS para incluir las partes repetibles de nuestro sitio (parciales) y pasar los datos a nuestras vistas.

      Configurar la aplicación demo

      Crearemos dos páginas para nuestra aplicación: una página con ancho completo y la otra con una barra lateral.

      Obtenga el código: puede encontrar un repositorio de git del código de demostración completo en GitHub aquí.

      Estructura del archivo

      Aquí están todos los archivos que necesitaremos para nuestra aplicación. Crearemos nuestra plantilla dentro de la carpeta de vistas y el resto son prácticas de Node bastante estándares.

      - views
      ----- partials
      ---------- footer.ejs
      ---------- head.ejs
      ---------- header.ejs
      ----- pages
      ---------- index.ejs
      ---------- about.ejs
      - package.json
      - server.js
      

      package.json albergará la información de nuestra aplicación de Node y las dependencias que necesitamos (express y EJS). server.jso albergará los ajustes de nuestro servidor Express, configuración. Definiremos nuestras rutas para nuestras páginas aquí.

      Configuración de Node

      Vamos a entrar en nuestro archivo package.json y configurar nuestro proyecto ahí.

      package.json

      {
        "name": "node-ejs",
        "main": "server.js",
        "dependencies": {
          "ejs": "^3.1.5",
          "express": "^4.17.1"
        }
      }
      

      Todo lo que necesitaremos es Express y EJS. Ahora tenemos que instalar las dependencias que acabamos de definir. Ejecute:

      Con todas nuestras dependencias instaladas, ahora configuraremos nuestra aplicación para que utilice EJS y fijaremos nuestras rutas para las dos páginas que necesitamos: la página “Índice” (ancho completo) y la página “Acerca de” (barra lateral). Haremos todo esto dentro de nuestro archivo server.js.

      server.js

      // load the things we need
      var express = require('express');
      var app = express();
      
      // set the view engine to ejs
      app.set('view engine', 'ejs');
      
      // use res.render to load up an ejs view file
      
      // index page
      app.get("https://www.digitalocean.com/", function(req, res) {
          res.render('pages/index');
      });
      
      // about page
      app.get('/about', function(req, res) {
          res.render('pages/about');
      });
      
      app.listen(8080);
      console.log('8080 is the magic port');
      

      Aquí definimos nuestra aplicación y la configuramos para que se muestre en el puerto 8080. También debemos configurar EJS como el motor de visualización de nuestra aplicación Express usando app.set('view engine', 'ejs');. Observe cómo enviamos una vista al usuario usando res.render(). Es importante tener en cuenta que res.render() buscará en una carpeta de vistas la vista. Solo tenemos que definir pages/index, ya que la ruta completa es views/pages/index.

      Iniciar nuestro servidor

      Inicie el servidor usando:

      Ahora podemos ver nuestra aplicación en el navegador en http://localhost:8080 y http://localhost:8080/about. Nuestra aplicación está configurada y tenemos que definir nuestros archivos de vista y ver cómo EJS funciona ahí.

      Cree los parciales de EJS

      Igual que muchas aplicaciones que creamos, hay mucho código que se reutiliza. A esos códigos los llamamos parciales y definen tres archivos que usaremos en todo nuestro sitio: head.ejs, header.ejs y footer.ejs. Vamos a crear esos archivos ahora.

      views/partials/head.ejs

      <meta charset="UTF-8">
      <title>EJS Is Fun</title>
      
      <!-- CSS (load bootstrap from a CDN) -->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
      <style>
          body { padding-top:50px; }
      </style>
      

      views/partials/header.ejs

      <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="https://www.digitalocean.com/">EJS Is Fun</a>
        <ul class="navbar-nav mr-auto">
          <li class="nav-item">
            <a class="nav-link" href="https://www.digitalocean.com/">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="http://www.digitalocean.com/about">About</a>
          </li>
        </ul>
      </nav>
      

      views/partials/footer.ejs

      <p class="text-center text-muted">© Copyright 2020 The Awesome People</p>
      

      Añada los parciales de EJS a Vistas

      Ahora tenemos nuestros parciales definidos. Lo único que debemos hacer es incluirlos en nuestras vistas. Ahora veremos index.ejs y about.ejs y usaremos la sintaxis include para añadir los parciales.

      Sintaxis para incluir un parcial de EJS

      Utilice <%- include('RELATIVE/PATH/TO/FILE') %> para integrar un parcial de EJS en otro archivo.

      • El guion <%- en vez de solo <% para indicar a EJS que renderice HTML sin formato.
      • La ruta al parcial es relativa al archivo actual.

      views/pages/index.ejs

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <%- include('../partials/head'); %>
      </head>
      <body class="container">
      
      <header>
          <%- include('../partials/header'); %>
      </header>
      
      <main>
          <div class="jumbotron">
              <h1>This is great</h1>
              <p>Welcome to templating using EJS</p>
          </div>
      </main>
      
      <footer>
          <%- include('../partials/footer'); %>
      </footer>
      
      </body>
      </html>
      

      Ahora podemos ver nuestra vista definida en el navegador en http://localhost:8080. node-ejs-templating-index

      Para la página de acerca de, también añadimos una barra lateral de bootstrap para demostrar cómo pueden estructurarse los parciales para que se reutilicen en diferentes plantillas y páginas.

      views/pages/about.ejs

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <%- include('../partials/head'); %>
      </head>
      <body class="container">
      
      <header>
          <%- include('../partials/header'); %>
      </header>
      
      <main>
      <div class="row">
          <div class="col-sm-8">
              <div class="jumbotron">
                  <h1>This is great</h1>
                  <p>Welcome to templating using EJS</p>
              </div>
          </div>
      
          <div class="col-sm-4">
              <div class="well">
                  <h3>Look I'm A Sidebar!</h3>
              </div>
          </div>
      
      </div>
      </main>
      
      <footer>
          <%- include('../partials/footer'); %>
      </footer>
      
      </body>
      </html>
      

      Si visitamos http://localhost:8080/about, podemos ver nuestra página de acerca de con una barra lateral node-ejs-templating-about

      Ahora podemos empezar a usar EJS para pasar datos desde nuestra aplicación Node a nuestras vistas.

      Pasar datos a Vistas y Parciales

      Vamos a definir algunas variables básicas y una lista para pasar a nuestra página de inicio. Vuelva a su archivo server.js y añada lo siguiente dentro de su ruta app.get("https://www.digitalocean.com/")

      server.js

      // index page
      app.get("https://www.digitalocean.com/", function(req, res) {
          var mascots = [
              { name: 'Sammy', organization: "DigitalOcean", birth_year: 2012},
              { name: 'Tux', organization: "Linux", birth_year: 1996},
              { name: 'Moby Dock', organization: "Docker", birth_year: 2013}
          ];
          var tagline = "No programming concept is complete without a cute animal mascot.";
      
          res.render('pages/index', {
              mascots: mascots,
              tagline: tagline
          });
      });
      

      Hemos creado una lista llamada mascots y una cadena sencilla llamada tagline. Vamos a entrar en nuestro archivo index.ejs para usarlas.

      Renderizar una variable única en EJS

      Para hacer eco de una variable, acabamos de usar <%= tagline %>. Vamos a añadir esto a nuestro archivo index.ejs:

      views/pages/index.ejs

      ...
      <h2>Variable</h2>
      <p><%= tagline %></p>
      ...
      

      Hacer bucle sobre los datos en EJS

      Para hacer bucle sobre nuestros datos usaremos .forEach. Vamos a añadir esto a nuestro archivo:

      views/pages/index.ejs

      ...
      <ul>
          <% mascots.forEach(function(mascot) { %>
              <li>
                  <strong><%= mascot.name %></strong>
                  representing <%= mascot.organization %>, born <%= mascot.birth_year %>
              </li>
          <% }); %>
      </ul>
      ...
      

      Ahora podemos ver en nuestro navegador la nueva información que hemos añadido.

      node-ejs-templating-rendered

      Pasar datos a un parcial en EJS

      El parcial EJS tiene acceso a todos los mismos datos que la vista principal. Pero tenga cuidado: si hace referencia a una variable en un parcial, debe definirse en cada vista que utilice el parcial o arrojará un error.

      También puede definir y pasar variables a un parcial EJS en la sintaxis include, de esta forma:

      views/pages/about.ejs

      ...
      <header>
          <%- include('../partials/header', {variant:'compact'}); %>
      </header>
      ...
      

      Pero de nuevo, debe tener cuidado y no asumir que una variable ha sido definida.

      Si desea referenciar una variable en un parcial que puede no definirse siempre, y darle un valor predeterminado, puede hacerlo de esta forma:

      views/partials/header.ejs

      ...
      <em>Variant: <%= typeof variant != 'undefined' ? variant : 'default' %></em>
      ...
      

      En la línea anterior, el código EJS se renderiza el valor de variant, si está definido, y de default si no lo está.

      Conclusión

      EJS nos permite generar aplicaciones rápidas cuando no necesitamos algo demasiado complejo. Al usar parciales y tener la capacidad de pasar variables fácilmente a nuestras vistas, podemos crear algunas aplicaciones geniales rápidamente.

      Para obtener más información sobre EJS, consulte los documentos oficiales aquí.



      Source link

      Cómo crear una API de REST con Prisma y PostgreSQL


      El autor seleccionó la organización Diversity in Tech Fund para que reciba una donación como parte del programa Write for DOnations.

      Introducción

      Prisma es un conjunto de herramientas para bases de datos de código abierto. Consta de tres herramientas principales:

      • Prisma Client: un generador de consultas con seguridad de tipos que se genera de forma automática para Node.js y TypeScript.
      • Prisma Migrate: un sistema de migración y modelado de datos declarativo.
      • Prisma Studio: una GUI para ver y editar datos en su base de datos.

      Estas herramientas pretenden aumentar la productividad de los desarrolladores de aplicaciones en los flujos de trabajo de sus bases de datos. Uno de los principales beneficios de Prisma es el nivel de abstracción que proporciona: en lugar de tener que resolver consultas SQL o migraciones de esquemas complejas, los desarrolladores de aplicaciones pueden razonar acerca de sus datos de forma más intuitiva al utilizar Prisma para trabajar con su base de datos.

      En este tutorial, creará una API de REST para una aplicación de blog pequeña en TypeScript usando Prisma y una base de datos PostgreSQL. Configurará su base de datos PostgreSQL de forma local con Docker e implementará las rutas de la API de REST utilizando Express. Al final del tutorial, tendrá un servidor web que puede responder a varias solicitudes HTTP y leer y escribir datos en la base de datos ejecutándose en su equipo de forma local.

      Requisitos previos

      Para seguir este tutorial, necesitará lo siguiente:

      Es útil, pero no un requisito de este tutorial, tener conocimientos básicos sobre TypeScript y las API de REST.

      Paso 1: Crear su proyecto de TypeScript

      En este paso, configurará un proyecto de TypeScript simple utilizando npm. Este proyecto será la base para la API de REST que creará en el transcurso de este tutorial.

      Primero, cree un directorio nuevo para su proyecto:

      Luego, diríjase al directorio e inicie un proyecto npm vacío. Tenga en cuenta que la opción -y se utiliza para omitir las solicitudes interactivas del comando. Para verlas, elimine -y del comando:

      Para obtener más información sobre estas solicitudes, siga el Paso 1 de Cómo usar módulos Node.js con npm y package.json.

      Obtendrá un resultado similar al siguiente con las respuestas predeterminadas:

      Output

      Wrote to /.../my-blog/package.json: { "name": "my-blog", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo "Error: no test specified" && exit 1" }, "keywords": [], "author": "", "license": "ISC" }

      Este comando crea un archivo package.json mínimo que utiliza como archivo de configuración de su proyecto npm. Con esto, está listo para configurar TypeScript en su proyecto.

      Ejecute el siguiente comando para realizar la instalación básica de TypeScript:

      • npm install typescript ts-node @types/node --save-dev

      Este comando instala tres paquetes como dependencias de desarrollo en su proyecto:

      • typescript: la cadena de herramientas de TypeScript.
      • ts-node: un paquete para ejecutar aplicaciones TypeScript sin compilar previamente a JavaScript.
      • @types/node: las definiciones de tipo de TypeScript para Node.js.

      Solo resta añadir un archivo tsconfig.json para garantizar que TypeScript esté configurado de forma adecuada para la aplicación que va a crear.

      Primero, ejecute el siguiente comando para crear el archivo:

      Agregue el siguiente código de JSON al archivo:

      my-blog/tsconfig.json

      {
        "compilerOptions": {
          "sourceMap": true,
          "outDir": "dist",
          "strict": true,
          "lib": ["esnext"],
          "esModuleInterop": true
        }
      }
      

      Guarde el archivo y ciérrelo.

      Esta es una configuración estándar y mínima para un proyecto de TypeScript. Puede encontrar información sobre las propiedades individuales del archivo de configuración en la documentación de TypeScript.

      Ha configurado su proyecto de TypeScript simple usando npm. A continuación, configurará su base de datos PostgreSQL con Docker y la conectará a Prisma.

      Paso 2: Configurar Prisma con PostgreSQL

      En este paso, instalará la CLI de Prisma, creará su archivo de esquema de Prisma inicial, configurará PostgreSQL con Docker y conectará Prisma a la base de datos. El archivo de esquema de Prisma es el archivo de configuración principal de su instalación de Prisma y contiene el esquema de su base de datos.

      Comience por instalar la CLI de Prisma con el siguiente comando:

      • npm install @prisma/cli --save-dev

      Se recomienda instalar la CLI de Prisma en el proyecto de forma local (en lugar de realizar una instalación global). Esto ayuda a evitar conflictos de versiones en caso de que tenga más de un proyecto de Prisma en su equipo.

      A continuación, configurará su base de datos PostgreSQL utilizando Docker. Cree un nuevo archivo de Docker Compose con el siguiente comando:

      Luego, añada el siguiente código al archivo nuevo:

      my-blog/docker-compose.yml

      version: '3.8'
      services:
        postgres:
          image: postgres:10.3
          restart: always
          environment:
            - POSTGRES_USER=sammy
            - POSTGRES_PASSWORD=your_password
          volumes:
            - postgres:/var/lib/postgresql/data
          ports:
            - '5432:5432'
      volumes:
        postgres:
      

      Este archivo de Docker Compose configura una base de datos PostgreSQL a la que se puede acceder a través del puerto 5432 del contenedor de Docker. Tenga en cuenta que estamos utilizando las credenciales de la base de datos sammy (usuario) y your_password (contraseña). Puede modificar estas credenciales y utilizar el nombre de usuario y la contraseña que desee. Guarde el archivo y ciérrelo.

      Ahora que estableció esta configuración, proceda a iniciar el servidor de la base de datos PostgreSQL con el siguiente comando:

      El resultado de este comando será similar al siguiente:

      Output

      Pulling postgres (postgres:10.3)... 10.3: Pulling from library/postgres f2aa67a397c4: Pull complete 6de83ca23e55: Pull complete . . . Status: Downloaded newer image for postgres:10.3 Creating my-blog_postgres_1 ... done

      Puede verificar que el servidor de la base de datos se esté ejecutando con el siguiente comando:

      Obtendrá un resultado similar al siguiente:

      Output

      CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES 8547f8e007ba postgres:10.3 "docker-entrypoint.s…" 3 seconds ago Up 2 seconds 0.0.0.0:5432->5432/tcp my-blog_postgres_1

      Ahora que el servidor de la base de datos está en ejecución, puede crear su instalación de Prisma. Ejecute el siguiente comando desde la CLI de Prisma:

      Esto imprimirá el siguiente resultado:

      Output

      ✔ Your Prisma schema was created at prisma/schema.prisma. You can now open it in your favorite editor.

      Tenga en cuenta que es recomendable prefijar todas las invocaciones de la CLI de Prisma con npx. Esto garantiza que se utilice su instalación local.

      Cuando ejecutó el comando, la CLI de Prisma creó una nueva carpeta denominada prisma en su proyecto. Contiene estos dos archivos:

      • schema.prisma: el archivo de configuración principal de su proyecto de Prisma (incluirá su modelo de datos).
      • .env: un archivo dotenv para definir la URL de conexión de su base de datos.

      Para asegurarse de que Prisma conozca la ubicación de su base de datos, abra el archivo .env y ajuste la variable de entorno DATABASE_URL.

      Primero, abra el archivo .env:

      Ahora, puede establecer la variable de entorno de la siguiente manera:

      my-blog/prisma/.env

      DATABASE_URL="postgresql://sammy:your_password@localhost:5432/my-blog?schema=public"
      

      Asegúrese de reemplazar las credenciales de la base de datos por las que especificó en el archivo de Docker Compose. Para obtener más información sobre el formato de la URL de conexión, consulte la documentación de Prisma.

      Cuando termine, guarde y cierre el archivo.

      En este paso, configuró su base de datos PostgreSQL con Docker, instaló la CLI de Prisma y conectó a la base de datos a través de una variable de entorno. En la siguiente sección, definirá el modelo de datos y creará las tablas de su base de datos.

      Paso 3: Definir el modelo de datos y crear tablas de datos

      En este paso, definirá el modelo de datos en el archivo de esquema de Prisma. Luego, asignará ese modelo de datos a la base de datos con Prisma Migrate, que generará y enviará las instrucciones SQL para crear las tablas correspondientes a su modelo de datos. Como está creando una aplicación de blog, las principales entidades de la aplicación serán usuarios y publicaciones.

      Prisma utiliza su propio lenguaje de modelado de datos para definir la forma de los datos de su aplicación.

      Primero, abra el archivo schema.prisma con el siguiente comando:

      • nano prisma/schema.prisma

      Luego, añada las siguientes definiciones del modelo allí. Puede colocar los modelos en la parte inferior del archivo, justo después del bloque generator client:

      my-blog/prisma/schema.prisma

      . . .
      model User {
        id    Int     @default(autoincrement()) @id
        email String  @unique
        name  String?
        posts Post[]
      }
      
      model Post {
        id        Int     @default(autoincrement()) @id
        title     String
        content   String?
        published Boolean @default(false)
        author    User?   @relation(fields: [authorId], references: tag:www.digitalocean.com,2005:/community/tutorials/how-to-build-a-rest-api-with-prisma-and-postgresql-es)
        authorId  Int?
      }
      

      Guarde el archivo y ciérrelo.

      Está definiendo dos modelos, denominados User y Post. Cada uno de ellos contiene varios campos que representan las propiedades del modelo. Los modelos se asignarán a las tablas de la base de datos; los campos representan las columnas individuales.

      Tenga en cuenta que hay una relación de uno a varios entre los dos modelos, especificada por los campos de relaciones posts y author en User y Post. Esto significa que se puede asociar un usuario a varias publicaciones.

      Ahora que estableció estos modelos, puede crear las tablas correspondientes en la base de datos utilizando Prisma Migrate. Ejecute el siguiente comando en su terminal:

      • npx prisma migrate save --experimental --create-db --name "init"

      Este comando crea una migración nueva en su sistema de archivos. A continuación, se presenta una descripción general de las tres opciones que se proporcionan al comando:

      • --experimental: se requiere porque, actualmente, Prisma Migrate está en estado experimental.
      • --create-db: permite a Prisma Migrate crear la base de datos denominada my-blog especificada en la URL de conexión.
      • --name "init": especifica el nombre de la migración (se utilizará para dar nombre a la carpeta de migración que se crea en su sistema de archivos).

      El resultado de este comando será similar al siguiente:

      Output

      New datamodel: // This is your Prisma schema file, // learn more about it in the docs: https://pris.ly/d/prisma-schema datasource db { provider = "postgresql" url = env("DATABASE_URL") } generator client { provider = "prisma-client-js" } model User { id Int @default(autoincrement()) @id email String @unique name String? posts Post[] } model Post { id Int @default(autoincrement()) @id title String content String? published Boolean @default(false) author User? @relation(fields: [authorId], references: tag:www.digitalocean.com,2005:/community/tutorials/how-to-build-a-rest-api-with-prisma-and-postgresql-es) authorId Int? } Prisma Migrate just created your migration 20200811140708-init in migrations/ └─ 20200811140708-init/ └─ steps.json └─ schema.prisma └─ README.md

      Puede ver los archivos de migración que se crearon en el directorio prisma/migrations.

      Para ejecutar la migración de su base de datos y crear las tablas para sus modelos de Prisma, ejecute el siguiente comando en su terminal:

      • npx prisma migrate up --experimental

      Obtendrá el siguiente resultado:

      Output

      . . . Checking the datasource for potential data loss... Database Changes: Migration Database actions Status 20200811140708-init 2 CreateTable statements. Done 🚀 You can get the detailed db changes with prisma migrate up --experimental --verbose Or read about them here: ./migrations/20200811140708-init/README.md 🚀 Done with 1 migration in 206ms.

      Ahora, Prisma Migrate generará las instrucciones SQL necesarias para la migración y las enviará a la base de datos. Estas son las instrucciones SQL que crearon las tablas:

      CREATE TABLE "public"."User" (
        "id" SERIAL,
        "email" text  NOT NULL ,
        "name" text   ,
        PRIMARY KEY ("id")
      )
      
      CREATE TABLE "public"."Post" (
        "id" SERIAL,
        "title" text  NOT NULL ,
        "content" text   ,
        "published" boolean  NOT NULL DEFAULT false,
        "authorId" integer   ,
        PRIMARY KEY ("id")
      )
      
      CREATE UNIQUE INDEX "User.email" ON "public"."User"("email")
      
      ALTER TABLE "public"."Post" ADD FOREIGN KEY ("authorId")REFERENCES "public"."User"("id") ON DELETE SET NULL ON UPDATE CASCADE
      

      En este paso, definió su modelo de datos en el esquema de Prisma y creó las respectivas tablas de bases de datos con Prisma Migrate. En el siguiente paso, instalará Prisma Client en su proyecto para poder consultar la base de datos.

      Paso 4: Explorar consultas de Prisma Client en una secuencia de comandos simple

      Prisma Client es un generador de consultas con seguridad de tipos de generación automática que puede utilizar para leer y escribir datos mediante programación en una base de datos desde una aplicación Node.js o TypeScript. Lo utilizará para acceder a la base de datos con las rutas de su API de REST, en lugar de usar ORM tradicionales, consultas SQL simples, capas de acceso a datos personalizadas o cualquier otro método de comunicación con una base de datos.

      En este paso, instalará Prisma Client y se familiarizará con las consultas que puede enviar. Antes de implementar las rutas de su API de REST en los siguientes pasos, analizaremos algunas consultas de Prisma Client en una secuencia de comandos ejecutable simple.

      Primero, para instalar Prisma Client en su proyecto, abra su terminal e instale el paquete npm de Prisma Client:

      • npm install @prisma/client

      A continuación, cree un directorio nuevo denominado src para alojar sus archivos de origen:

      Ahora, cree un archivo de TypeScript en el directorio nuevo:

      Todas las consultas de Prisma Client devuelven promesas con las que puede usar await en su código. Para hacerlo, deberá enviar las consultas dentro de una función async.

      Añada el siguiente código reutilizable con una función async que se ejecute en su secuencia de comandos:

      my-blog/src/index.ts

      import { PrismaClient } from '@prisma/client'
      
      const prisma = new PrismaClient()
      
      async function main() {
        // ... your Prisma Client queries will go here
      }
      
      main()
        .catch((e) => console.error(e))
        .finally(async () => await prisma.disconnect())
      

      A continuación, se presenta una descripción general del código reutilizable:

      1. Se importa el constructor PrismaClient del paquete npm @prisma/client previamente instalado.
      2. Se inicia PrismaClient al invocar al constructor y se obtiene una instancia denominada prisma.
      3. Se define una función async denominada main en la que, a continuación, añadirá las consultas de Prisma Client.
      4. Se invoca la función main y, a la vez, se detectan posibles excepciones y se garantiza que Prisma Client cierre cualquier conexión con bases de datos abierta al invocar prisma.disconnect().

      Ahora que estableció la función main, puede comenzar a añadir consultas de Prisma Client a la secuencia de comandos. Ajuste index.ts para que tenga el siguiente aspecto:

      my-blog/src/index.ts

      import { PrismaClient } from '@prisma/client'
      
      const prisma = new PrismaClient()
      
      async function main() {
        const newUser = await prisma.user.create({
          data: {
            name: 'Alice',
            email: 'alice@prisma.io',
            posts: {
              create: {
                title: 'Hello World',
              },
            },
          },
        })
        console.log('Created new user: ', newUser)
      
        const allUsers = await prisma.user.findMany({
          include: { posts: true },
        })
        console.log('All users: ')
        console.dir(allUsers, { depth: null })
      }
      
      main()
        .catch((e) => console.error(e))
        .finally(async () => await prisma.disconnect())
      

      En este código, está utilizando dos consultas de Prisma Client:

      • create: crea un nuevo registro de User. Tenga en cuenta que, en realidad, está utilizando una escritura anidada, lo que significa que está creando un registro de User y uno de Post en la misma consulta.
      • findMany: lee todos los registros de User existentes de la base de datos. Está proporcionando una opción include, que, adicionalmente, carga los registros de Post relacionados de cada registro de User.

      A continuación, ejecute la secuencia de comandos con el siguiente comando:

      Obtendrá el siguiente resultado en su terminal:

      Output

      Created new user: { id: 1, email: 'alice@prisma.io', name: 'Alice' } [ { id: 1, email: 'alice@prisma.io', name: 'Alice', posts: [ { id: 1, title: 'Hello World', content: null, published: false, authorId: 1 } ] }

      Nota: Si está utilizando una GUI de base de datos, puede verificar que los datos se hayan creado al revisar las tablas User y Post. De forma alternativa, puede consultar los datos de Prisma Studio al ejecutar npx prisma studio --experimental.

      Ha aprendido a utilizar Prisma Client para leer y escribir datos en su base de datos. En los siguientes pasos, aplicará sus conocimientos nuevos para implementar las rutas de una API de REST de muestra.

      Paso 5: Implementar su primera ruta de la API de REST

      En este paso, instalará Express en su aplicación. Express es un marco web popular para Node.js que utilizará para implementar sus rutas de la API de REST en este proyecto. La primera ruta que implementará le permitirá obtener todos los usuarios de la API utilizando una solicitud GET. Obtendrá los datos de los usuarios de la base de datos utilizando Prisma Client.

      Instale Express con el siguiente comando:

      Como está utilizando TypeScript, también le convendrá instalar los respectivos tipos como dependencias de desarrollo. Para hacerlo, ejecute el siguiente comando:

      • npm install @types/express --save-dev

      Ahora que estableció las dependencias, puede configurar su aplicación Express.

      Comience por volver a abrir su archivo de origen principal:

      A continuación, elimine todo el código de index.ts y sustitúyalo por el siguiente para iniciar su API de REST:

      my-blog/src/index.ts

      import { PrismaClient } from '@prisma/client'
      import express from 'express'
      
      const prisma = new PrismaClient()
      const app = express()
      
      app.use(express.json())
      
      // ... your REST API routes will go here
      
      app.listen(3000, () =>
        console.log('REST API server ready at: http://localhost:3000'),
      )
      

      A continuación, se presenta una descripción breve del código:

      1. Se importan PrismaClient y express de sus respectivos paquetes npm.
      2. Se inicia PrismaClient al invocar al constructor y se obtiene una instancia denominada prisma.
      3. Su aplicación Express se crea al invocar express().
      4. Se añade el software intermedio express.json() para garantizar que Express pueda procesar correctamente los datos de JSON.
      5. Se inicia el servidor en el puerto 3000.

      Con esto, puede implementar su primera ruta. Agregue el siguiente código entre las invocaciones a app.use y app.listen:

      my-blog/src/index.ts

      . . .
      app.use(express.json())
      
      app.get('/users', async (req, res) => {
        const users = await prisma.user.findMany()
        res.json(users)
      })
      
      app.listen(3000, () =>
      console.log('REST API server ready at: http://localhost:3000'),
      )
      

      Una vez que lo haya añadido, guarde y cierre su archivo. A continuación, inicie su servidor web local utilizando el siguiente comando:

      Recibirá el siguiente resultado:

      Output

      REST API server ready at: http://localhost:3000

      Para acceder a la ruta /users, puede apuntar su navegador a http://localhost:3000/users o a cualquier otro cliente HTTP.

      En este tutorial, probará todas las rutas de la API de REST utilizando curl, un cliente HTTP basado en terminal.

      Nota: Si prefiere usar un cliente HTTP basado en GUI, puede usar alternativas como Postwoman o el cliente REST avanzado.

      Para probar su ruta, abra una ventana o una pestaña de terminal nueva (para que su servidor web local pueda seguir en ejecución) y ejecute el siguiente comando:

      • curl http://localhost:3000/users

      Obtendrá los datos de User que creó en el paso anterior:

      Output

      [{"id":1,"email":"alice@prisma.io","name":"Alice"}]

      Tenga en cuenta que la matriz posts no se incluye en este momento. Esto se debe a que no está pasando la opción include a la invocación de findMany en la implementación de la ruta /users.

      Ha implementado su primera ruta de la API de REST en /users. En el siguiente paso, implementará las rutas restantes de la API de REST para añadir más funcionalidad a su API.

      Paso 6: Implementar las rutas restantes de la API de REST

      En este paso, implementará las rutas restantes de la API de REST para su aplicación de blog. Al final, su servidor web proporcionará diversas solicitudes GET, POST, PUT y DELETE.

      A continuación, se presenta una descripción general de las diferentes rutas que implementará:

      Método HTTP Ruta Descripción
      GET /feed Obtiene todas las publicaciones publicadas.
      GET /post/:id Obtiene un publicación específica por su ID.
      POST /user Crea un usuario nuevo.
      POST /post Crea una publicación nueva (como borrador).
      PUT /post/publish/:id Establece el campo published de una publicación en true.
      DELETE post/:id Elimina una publicación por su ID.

      Primero, proceda a ejecutar e implementar las rutas GET restantes.

      Abra index.ts con el siguiente comando:

      A continuación, añada el siguiente código después de la implementación de la ruta /users:

      my-blog/src/index.ts

      . . .
      
      app.get('/feed', async (req, res) => {
        const posts = await prisma.post.findMany({
          where: { published: true },
          include: { author: true }
        })
        res.json(posts)
      })
      
      app.get(`/post/:id`, async (req, res) => {
        const { id } = req.params
        const post = await prisma.post.findOne({
          where: { id: Number(id) },
        })
        res.json(post)
      })
      
      app.listen(3000, () =>
        console.log('REST API server ready at: http://localhost:3000'),
      )
      

      Guarde y cierre su archivo.

      Este código implementa las rutas de la API para dos solicitudes GET:

      • /feed: devuelve una lista de las publicaciones publicadas.
      • /post/:id: devuelve una publicación específica por su ID.

      Se utiliza Prisma Client en ambas implementaciones. En la implementación de la ruta /feed, la consulta que envía con Prisma Client filtra todos los registros de Post en los que la columna published contiene el valor true. Además, la consulta de Prisma Client utiliza include para obtener la información relacionada de author de cada publicación que se devuelve. En la implementación de la ruta /post/:id, pasa la ID que se obtiene de la ruta de la URL para poder leer un registro de Post específico de la base de datos.

      Puede detener el servidor al pulsar CTRL+C en el teclado. A continuación, reinicie el servidor utilizando lo siguiente:

      Para probar la ruta /feed, puede usar el siguiente comando curl:

      • curl http://localhost:3000/feed

      Como aún no se ha publicado ninguna publicación, la respuesta es una matriz vacía:

      Output

      []

      Para probar la ruta /post/:id, puede usar el siguiente comando curl:

      • curl http://localhost:3000/post/1

      Este comando devolverá la publicación que creó inicialmente:

      Output

      {"id":1,"title":"Hello World","content":null,"published":false,"authorId":1}

      A continuación, ejecute las dos rutas de POST. Añada el siguiente código a index.ts después de las implementaciones de las tres rutas de GET:

      my-blog/src/index.ts

      . . .
      
      app.post(`/user`, async (req, res) => {
        const result = await prisma.user.create({
          data: { ...req.body },
        })
        res.json(result)
      })
      
      app.post(`/post`, async (req, res) => {
        const { title, content, authorEmail } = req.body
        const result = await prisma.post.create({
          data: {
            title,
            content,
            published: false,
            author: { connect: { email: authorEmail } },
          },
        })
        res.json(result)
      })
      
      app.listen(3000, () =>
        console.log('REST API server ready at: http://localhost:3000'),
      )
      

      Cuando termine, guarde y cierre el archivo.

      Este código implementa las rutas de la API para dos solicitudes POST:

      • /user: crea un usuario nuevo en la base de datos.
      • /post: crea una publicación nueva en la base de datos.

      Al igual que anteriormente, se utiliza Prisma Client en ambas implementaciones. En la implementación de la ruta /user, pasa los valores del cuerpo de la solicitud HTTP a la consulta create de Prisma Client.

      La ruta /post es un poco más compleja: como no puede pasar los valores del cuerpo de la solicitud HTTP directamente, primero, deberá extraerlos de forma manual para pasarlos a la consulta de Prisma Client. Esto se debe a que la estructura de JSON en el cuerpo de la solicitud no coincide con la que espera Prisma Client, por lo tanto, debe crear la estructura esperada de forma manual.

      Puede probar las rutas nuevas al detener el servidor con CTRL+C. A continuación, reinicie el servidor utilizando lo siguiente:

      Para crear un usuario nuevo a través de la ruta /user, puede enviar la siguiente solicitud POST con curl:

      • curl -X POST -H "Content-Type: application/json" -d '{"name":"Bob", "email":"bob@prisma.io"}' http://localhost:3000/user

      Con esto, se creará un usuario nuevo en la base de datos y se imprimirá el siguiente resultado:

      Output

      {"id":2,"email":"bob@prisma.io","name":"Bob"}

      Para crear una publicación nueva a través de la ruta /post, puede enviar la siguiente solicitud POST con curl:

      • curl -X POST -H "Content-Type: application/json" -d '{"title":"I am Bob", "authorEmail":"bob@prisma.io"}' http://localhost:3000/post

      Con esto, se creará una publicación nueva en la base de datos que se conectará al usuario con el correo electrónico bob@prisma.io. Se imprime el siguiente resultado:

      Output

      {"id":2,"title":"I am Bob","content":null,"published":false,"authorId":2}

      Por último, puede implementar las rutas PUT y DELETE.

      Abra index.ts con el siguiente comando:

      A continuación, después de la implementación de las dos rutas de POST, añada el código resaltado:

      my-blog/src/index.ts

      . . .
      
      app.put('/post/publish/:id', async (req, res) => {
        const { id } = req.params
        const post = await prisma.post.update({
          where: { id: Number(id) },
          data: { published: true },
        })
        res.json(post)
      })
      
      app.delete(`/post/:id`, async (req, res) => {
        const { id } = req.params
        const post = await prisma.post.delete({
          where: { id: Number(id) },
        })
        res.json(post)
      })
      
      app.listen(3000, () =>
        console.log('REST API server ready at: http://localhost:3000'),
      )
      

      Guarde y cierre su archivo.

      Este código implementa las rutas de la API para una solicitud PUT y una DELETE:

      • /post/public/:id (PUT): publica una publicación por su ID.
      • /post/:id (DELETE): elimina una publicación por su ID.

      Nuevamente, se utiliza Prisma Client en ambas implementaciones. En la implementación de la ruta /post/public/:id, se obtiene la ID de la publicación que se va a publicar de la URL y se pasa a la consulta update de Prisma Client. La implementación de la ruta /post/:id para eliminar una publicación de la base de datos también obtiene la ID de la publicación de la URL y la pasa a la consulta delete de Prisma Client.

      Vuelva a detener el servidor pulsando CTRL+C en el teclado. A continuación, reinicie el servidor utilizando lo siguiente:

      Puede probar la ruta PUT con el siguiente comando curl:

      • curl -X PUT http://localhost:3000/post/publish/2

      Con esto, se publicará la publicación con un valor de ID de 2. Si reenvía la solicitud /feed, ahora, esta publicación se incluirá en la respuesta.

      Por último, puede probar la ruta DELETE con el siguiente comando curl:

      • curl -X DELETE http://localhost:3000/post/1

      Con esto, se eliminará la publicación con un valor de ID de 1. Para confirmar que la publicación con esta ID se haya eliminado, puede reenviar una solicitud GET a la ruta /post/1.

      En este paso, implementó las rutas restantes de la API de REST para su aplicación de blog. Ahora, la API responde a diversas solicitudes GET, POST, PUT y DELETE e implementa la funcionalidad para leer y escribir datos en la base de datos.

      Conclusión

      En este artículo, creó un servidor para la API de REST con diversas rutas para crear, leer, actualizar y eliminar datos de usuarios y publicaciones para una aplicación de blog. Está utilizando Prisma Client dentro de las rutas de la API para enviar las consultas respectivas a su base de datos.

      Como próximo paso, puede implementar rutas de la API adicionales o ampliar el esquema de su base de datos utilizando Prisma Migrate. Asegúrese de consultar la documentación de Prisma para obtener más información sobre los distintos aspectos de Prisma y explorar algunos proyectos de ejemplo listos para ejecutar en el repositorio prisma-examples utilizando herramientas como GraphQL o API de grPC.



      Source link

      Cómo crear un bot de Discord con Node.js


      El autor seleccionó Free and Open Source Fund para recibir una donación como parte del programa Write for DOnations.

      Introducción

      Discord es una aplicación de chat que permite a millones de usuarios de todo el mundo transmitir mensajes y voz en línea en comunidades llamadas gremios o servidores. Discord también proporciona una amplia API que los desarrolladores pueden usar para crear potentes bots de Discord. Los bots pueden realizar diversas acciones, como enviar mensajes a servidores, mensajes directos a usuarios, moderar servidores y reproducir audio en los chats de voz. Esto permite a los desarrolladores crear bots potentes que incluyen funciones avanzadas y complejas como herramientas de moderación o, incluso, juegos. Por ejemplo, el bot de utilidad Dyno sirve a millones de gremios y contiene características útiles como la protección contra spam, un reproductor de música y otras funciones útiles. Aprender a crear bots de Discord le permite implementar muchas posibilidades, con las que miles de personas podrían interactuar cada día.

      En este tutorial, creará un bot de Discord desde cero, usando Node.js y la biblioteca de Discord.js, que permite a los usuarios interactuar directamente con la API de Discord. Configurará un perfil para un bot de Discord, obtendrá tokens de autenticación para el bot y lo programará con la capacidad de procesar comandos con argumentos, desde los usuarios.

      Requisitos previos

      Para comenzar, necesitará lo siguiente:

      Paso 1: Configurar un bot de Discord

      En este paso, utilizará la GUI de desarrolladores de Discord para configurar un bot de Discord y obtener el token de bot, que pasará a su programa.

      Para registrar un bot en la plataforma Discord, utilice el panel de aplicación de Discord. Aquí los desarrolladores pueden crear aplicaciones de Discord incluyendo bots de Discord.

      Imagen del panel de aplicación de Discord después de visitar https://discord.com/developers/applications primero

      Para comenzar, haga clic en Nueva aplicación. Discord le solicitará que introduzca un nombre para su nueva aplicación. A continuación, haga clic en Crear para crear la aplicación.

      Imagen del mensaje para crear una aplicación, con

      Nota: El nombre de su aplicación es independiente del nombre del bot, y el bot no tiene el mismo nombre que la aplicación.

      Ahora, abra el panel de su aplicación. Para agregar un bot a la aplicación, diríjase a la pestaña Bot en la barra de navegación a la izquierda.

      Imagen de la pestaña bot del panel de aplicación

      Haga clic en el botón Añadir bot para agregar un bot a la aplicación. Haga clic en el botón Sí, ¡hazlo! cuando le pida la confirmación. A continuación, estará en un panel que contiene detalles sobre el nombre de su bot, el token de autenticación y la imagen de perfil.

      Panel que contiene detalles de su bot

      Puede modificar el nombre o la imagen de su bot, aquí, en el panel. También necesita copiar el token de autenticación del bot haciendo clic en Haga clic para mostrar Token y copiando el token que aparece.

      Advertencia: Nunca comparta ni suba su token de bot, ya que permite a cualquier persona iniciar sesión en su bot.

      Ahora, necesita crear una invitación que le permita agregar los gremios de Discord del bot donde puede probar el bot. Primero, vaya a la pestaña OAuth2 del panel de aplicación. Para crear una invitación, desplácese hacia abajo y seleccione bot en alcances. También debe establecer permisos para controlar las acciones que puede realizar su bot en los gremios. A los efectos de este tutorial, seleccione Administrador, que le dará a su bot permiso para realizar casi todas las acciones en los gremios. Copie el enlace con el botón Copiar.

      Pestaña OAuth2, con el alcance configurado en

      A continuación, añada el bot a un servidor. Siga el enlace de invitación que acaba de crear. Puede agregar el bot a cualquier servidor que posea, o en el que tenga permisos de administrador, desde el menú desplegable.

      Página desde el siguiente enlace de invitación, que permite a los usuarios agregar el bot a los servidores

      Ahora haga clic en Continuar. Asegúrese de tener marcada la casilla junto a Administrador: esto concederá los permisos de administrador de bot. A continuación, haga clic en Autorizar. Discord le solicitará que resuelva un CAPTCHA antes de que el bot se una al servidor. Ahora, tendrá el bot de Discord en la lista de miembros en el servidor al que añadió el bot debajo de sin conexión.

      Lista de miembros de un servidor de Discord con el bot recientemente creado en la sección

      Ha creado correctamente un bot de Discord y lo ha añadido a un servidor. A continuación, escribirá un programa para iniciar sesión en el bot.

      Paso 2: Crear su proyecto

      En este paso, configurará el entorno de codificación básico donde creará su bot e iniciará sesión en el bot de forma programática.

      Primero, debe configurar una carpeta de proyecto y los archivos de proyecto necesarios para el bot.

      Cree su carpeta de proyecto:

      Vaya a la carpeta de proyecto que acaba de crear:

      A continuación, utilice su editor de texto para crear un archivo llamado config.json para almacenar el token de autenticación de su bot:

      A continuación, añada el siguiente código al archivo config, sustituyendo el texto resaltado por el token de autenticación de su bot:

      config.json

      {
          "BOT_TOKEN": "YOUR BOT TOKEN"
      }
      

      Guarde el archivo y ciérrelo.

      A continuación, creará un archivo package.json que almacenará los detalles de su proyecto e información sobre las dependencias que utilizará para el proyecto. Creará un archivo package.json ejecutando el siguiente comando npm:

      npm le solicitará varios datos sobre su proyecto. Si desea obtener información sobre cómo completar las preguntas, puede leer sobre ellos en Cómo usar módulos Node.js con npm y package.json.

      Ahora, instalará el paquete discord.js que utilizará para interactuar con la API de Discord. Puede instalar discord.js a través de npm con el siguiente comando:

      Ahora ha configurado el archivo de configuración y ha instalado la dependencia necesaria, está listo para comenzar a crear su bot. En una aplicación en el mundo real, un bot grande se dividiría en muchos archivos, pero a efectos de este tutorial, el código para su bot estará en un solo archivo.

      Primero, cree un archivo llamado index.js en la carpeta discord-bot para el código:

      Comience a codificar el bot pidiendo la dependencia de discord.js y el archivo config con el token de bot:

      index.js

      const Discord = require("discord.js");
      const config = require("./config.json");
      

      A continuación, añada las siguientes dos líneas de código:

      index.js

      ...
      const client = new Discord.Client();
      
      client.login(config.BOT_TOKEN);
      

      Guarde y cierre su archivo.

      La primera línea de código crea un nuevo Discord.Client y lo asigna a la constante client. Este cliente es en parte cómo interactúa con la API de Discord y cómo le notificará eventos como mensajes nuevos. El cliente, en efecto, representa el bot de Discord.

      La segunda línea de código utiliza el método login en client para iniciar sesión en el bot de Discord que creó, usando el token en el archivo config.json como contraseña. El token permite a la API de Discord saber para qué bot es el programa y que está autenticado para usar el bot.

      Ahora, ejecute el archivo index.js usando Node:

      El estado de su bot cambiará a “en línea” en el servidor de Discord al que lo añadió.

      Imagen del bot en línea

      Ha configurado correctamente un entorno de codificación y ha creado el código básico para iniciar sesión en un bot de Discord. En el siguiente paso, manejará los comandos de usuario y hará que su bot realice acciones, como enviar mensajes.

      Paso 3: Cómo manejar su primer comando de usuario

      En este paso, creará un bot que puede manejar los comandos de usuario. Implementará su primer comando de ping, que responderá con "pong" y el tiempo que toma para responder al comando.

      Primero, necesita detectar y recibir cualquier mensaje que los usuarios envíen, para que pueda procesar cualquier comando. Con el método on en el cliente de Discord, Discord le enviará una notificación sobre eventos nuevos. El método on toma dos argumentos: el nombre de un evento a esperar y una función a ejecutar cada vez que se produce ese evento. Con este método, puede esperar el evento message: se producirá cada vez que se envía un mensaje a un gremio donde el bot tiene permiso para ver mensajes. Por tanto, vamos a crear una función, que se ejecuta cada vez que se envía un mensaje, para procesar comandos.

      Primero, abra su archivo:

      Añada el siguiente código a su archivo:

      index.js

      ...
      const client = new Discord.Client();
      
      
      client.on("message", function(message) { 
                                               
      });                                      
      
      client.login(config.BOT_TOKEN);
      

      Esta función, que se ejecuta en el evento message, toma message como un parámetro. message tendrá el valor de una instancia de mensaje de Discord.js, que contiene información sobre el mensaje enviado y los métodos para ayudar a responder al bot.

      Ahora, añada la siguiente línea de código a su función de manejo de comandos:

      index.js

      ...
      client.on("message", function(message) {
        if (message.author.bot) return;
      });
      ...
      

      Esta línea comprueba si el autor del mensaje es un bot y, si es así, deja de procesar el comando. Esto es importante, ya que generalmente no quiere procesar o responder a los mensajes de bots. Por lo general, los bots no necesitan o no quieren usar nuestro bot, por lo que ignorar sus mensajes ahorra potencia de procesamiento y ayuda a evitar respuestas accidentales.

      Ahora, escribirá un controlador de comandos. Para ello, es bueno entender el formato habitual de un comando de Discord. Normalmente, la estructura de un comando de Discord contiene tres partes en el siguiente orden: un prefijo, un nombre de comando y (a veces) argumentos de comandos.

      Una imagen de un comando típico de Discord que se lee

      • Prefijo: el prefijo puede ser cualquier cosa, pero, por lo general, es un signo de puntuación o una frase abstracta que normalmente no estaría al principio de un mensaje. Esto significa que, cuando incluya el prefijo al inicio del mensaje, el bot sabrá que la intención de este comando es para que un bot lo procese.

      • Nombre de comando: el nombre del comando que el usuario quiere usar. Esto significa que el bot puede soportar múltiples comandos con diferentes funciones y permitir a los usuarios elegir entre ellos al proporcionar un nombre de comando diferente.

      • Argumentos: a veces, si el comando requiere o utiliza información adicional del usuario, este puede proporcionar argumentos después del nombre de comando, con cada argumento separado por un espacio.

      Nota: No hay estructura de comandos forzada, y los bots pueden procesar los comandos como quieran, pero la estructura que se presenta aquí es una estructura eficiente que la gran mayoría de bots utilizan.

      Para comenzar a crear un analizador sintáctico de comandos que maneje este formato, añada las siguientes líneas de código a la función de manejo de mensajes:

      index.js

      ...
      const prefix = "!";
      
      client.on("message", function(message) {
        if (message.author.bot) return;
        if (!message.content.startsWith(prefix)) return;
      });
      ...
      

      Añada la primera línea de código para asignar el valor "!" a la constante prefix, que utilizará como prefijo del bot.

      La segunda línea de código que añade comprueba si el contenido del mensaje que el bot está procesando comienza con el prefijo que configuró y, si no lo hace, deja de procesarlo.

      Ahora, debe convertir el resto del mensaje en un nombre de comando y cualquier argumento que pueda existir en el mensaje. Añada las siguientes líneas resaltadas:

      index.js

      ...
      client.on("message", function(message) {
        if (message.author.bot) return;
        if (!message.content.startsWith(prefix)) return;
      
        const commandBody = message.content.slice(prefix.length);
        const args = commandBody.split(' ');
        const command = args.shift().toLowerCase();
      });
      ...
      

      Utilice la primera línea aquí para eliminar el prefijo del contenido de mensaje y asignar el resultado a la constante commandBody. Esto es necesario, ya que no quiere incluir el prefijo en el nombre de comando analizado.

      La segunda línea toma el mensaje con el prefijo eliminado y utiliza el método split en él, con un espacio como separador. Esto lo divide en una matriz de subcadenas y hace una división dondequiera que haya un espacio. Esto crea una matriz que contiene el nombre de comando y, por tanto, si se incluye en el mensaje, cualquier argumento. Asigna esta matriz a la constante args.

      La tercera línea elimina el primer elemento de la matriz de args (que será el nombre de comando que se proporciona), lo convierte en minúscula y, luego, lo asigna a la constante command. Esto le permite aislar el nombre de comando y dejar solo argumentos en la matriz. También utiliza el método toLowerCase, ya que los comandos no suelen distinguir entre minúsculas y mayúsculas en bots de Discord.

      Completó la construcción de un analizador de comandos, implementó un prefijo requerido y obtuvo el nombre de comando y cualquier argumento de los mensajes. Ahora, implementará y creará el código para los comandos específicos.

      Añada el siguiente código para comenzar a implementar el comando ping:

      index.js

      ...
        const args = commandBody.split(' ');
        const command = args.shift().toLowerCase();
      
        if (command === "ping") {
                                 
        }                        
      });
      ...
      

      Esta instrucción if comprueba si el nombre de comando que analizó (asignado a la constante command) coincide con "ping". Si lo hace, indica que el usuario quiere usar el comando "ping". Anidará el código para el comando específico dentro del bloque de instrucción if. Repetirá este patrón para otros comandos que desee implementar.

      Ahora, puede implementar el código para el comando "ping":

      index.js

      ...
        if (command === "ping") {
          const timeTaken = Date.now() - message.createdTimestamp;
          message.reply(`Pong! This message had a latency of ${timeTaken}ms.`);
        }
      ...
      

      Guarde y cierre su archivo.

      Añada el bloque de comandos "ping" que calcula la diferencia entre el tiempo actual, que se encuentra usando el método now en el objeto Date y la marca de tiempo cuando el mensaje se creó en milisegundos. Esto calcula cuánto tiempo tardó el mensaje en procesarse y el "ping" del bot.

      La segunda línea responde al comando del usuario usando el método reply en la constante message. El método reply avisa (que notifica al usuario e indica el mensaje para el usuario especificado) al usuario que invocó el comando, seguido por el contenido proporcionado como el primer argumento al método. Proporciona una plantilla literal que contiene un mensaje y el ping calculado como la respuesta que el método reply utilizará.

      Esto concluye la implementación del comando "ping".

      Ejecute su bot usando el siguiente comando (en la misma carpeta que index.js):

      Ahora puede usar el comando "! ping" en cualquier canal que el bot pueda ver y enviar un mensaje, lo que resulta en una respuesta.

      Imagen de bot replicando en Discord a

      Ha creado correctamente un bot que puede manejar los comandos de usuario y ha implementado su primer comando. En el siguiente paso, continuará desarrollando su bot implementando un comando sum.

      Paso 4: Cómo implementar el comando sum

      Ahora, extenderá su programa implementando el comando "! sum". El comando tomará cualquier número de argumentos y los agregará juntos, antes de devolver la suma de todos los argumentos al usuario.

      Si su bot de Discord aún se está ejecutando, puede detener su proceso con CTRL + C.

      Abra su archivo index.js de nuevo:

      Para comenzar a implementar el comando "! sum", usará un bloque else-if. Después de comprobar el nombre de comando ping, comprobará si el nombre de comando es igual a "sum". Usamos un bloque else-if, ya que solo un comando se procesará a la vez, de forma que si el programa coincide con el nombre de comando "ping", no tiene que verificar el comando "sum". Añada las siguientes líneas resaltadas a su archivo:

      index.js

      ...
        if (command === "ping") {
          const timeTaken = Date.now() - message.createdTimestamp;
          message.reply(`Ping! This message had a latency of ${timeTaken}ms.`);
        }
      
        else if (command === "sum") {
                                     
        }                            
      });
      ...
      

      Puede comenzar a implementar el código para el comando "sum". El código para el comando "sum" entrará en el bloque else-if que acaba de crear. Ahora, añada el siguiente código:

      index.js

      ...
        else if (command === "sum") {
          const numArgs = args.map(x => parseFloat(x));
          const sum = numArgs.reduce((counter, x) => counter += x);
          message.reply(`The sum of all the arguments you provided is ${sum}!`);
        }
      ...
      

      Utilice el método map de la lista de argumentos para crear una nueva lista usando la función parseFloat en cada elemento de la matriz de args. Esto crea una nueva matriz (asignada a la constante numArgs) en la que todos los elementos son números en vez de cadenas. Esto significa que más tarde puede encontrar correctamente la suma de los números sumándolos.

      La segunda línea utiliza el método reduce en la constante numArgs que proporcionan una función que suma todos los elementos de la lista. Asignó la suma de todos los elementos en numArgs a la constante sum.

      A continuación, utilice el método reply en el objeto de mensaje para responder al comando del usuario con una plantilla literal, que contiene la suma de todos los argumentos que el usuario envía al bot.

      Esto concluye la implementación del comando "sum". Ahora, ejecute su bot usando el siguiente comando (en la misma carpeta que index.js):

      Ahora, puede usar el comando "! sum" en cualquier canal que pueda ver el bot y enviar mensajes.

      Imagen del bot respondiendo

      A continuación, se muestra una versión completa de la secuencia de comandos del bot index.js:

      index.js

      const Discord = require("discord.js");
      const config = require("./config.json");
      
      const client = new Discord.Client();
      
      const prefix = "!";
      
      client.on("message", function(message) {
        if (message.author.bot) return;
        if (!message.content.startsWith(prefix)) return;
      
        const commandBody = message.content.slice(prefix.length);
        const args = commandBody.split(' ');
        const command = args.shift().toLowerCase();
      
        if (command === "ping") {
          const timeTaken = Date.now() - message.createdTimestamp;
          message.reply(`Pong! This message had a latency of ${timeTaken}ms.`);
        }
      
        else if (command === "sum") {
          const numArgs = args.map(x => parseFloat(x));
          const sum = numArgs.reduce((counter, x) => counter += x);
          message.reply(`The sum of all the arguments you provided is ${sum}!`);
        }
      });
      
      client.login(config.BOT_TOKEN);
      

      En este paso, ha desarrollado aún más su bot de Discord implementando el comando sum.

      Conclusión

      Ha implementado correctamente un bot de Discord que puede manejar varios comandos de usuario y argumentos de comandos. Si desea ampliar su bot, posiblemente pueda implementar más comandos o probar más partes de la API de Discord para crear un bot de Discord potente. Puede revisar la documentación de Discord.js o la documentación de la API de Discord para ampliar sus conocimiento de la API de Discord.

      Al crear bots de Discord, siempre debe tener en cuenta los términos de servicio de la API de Discord, que describe cómo los desarrolladores deben usarla. También puede leer este conjunto de directrices sobre cómo implementar mejor un bot de Discord y proporciona consejos sobre cómo diseñar bots de Discord. Si desea obtener más información sobre Node.js consulte nuestra serie Cómo crear códigos en Node.js.



      Source link