Cómo generar nombres de proyectos aleatorios con JavaScript

Cómo generar una cadena de nombre de proyecto aleatoria y con guión a partir de una lista de adverbios y animales para usar con contenido generado por el usuario.

Para este tutorial, vamos a utilizar el marco JavaScript de pila completa de CheatCode, Joystick. Joystick reúne un marco de interfaz de usuario de front-end con un back-end de Node.js para crear aplicaciones.

Para comenzar, querremos instalar Joystick a través de NPM. Asegúrese de estar usando Node.js 16+ antes de instalar para garantizar la compatibilidad (lea este tutorial primero si necesita aprender a instalar Node.js o ejecutar varias versiones en su computadora):

Terminal

npm i -g @joystick.js/cli

Esto instalará Joystick globalmente en su computadora. Una vez instalado, vamos a crear un nuevo proyecto:

Terminal

joystick create app

Después de unos segundos, verá un mensaje desconectado de cd en su nuevo proyecto y ejecute joystick start :

Terminal

cd app && joystick start

Después de esto, su aplicación debería estar ejecutándose y estamos listos para comenzar.

Recopilación de datos de origen

Para generar un nombre de proyecto aleatorio, necesitaremos algunos datos aleatorios para usar como fuente de nombres. Si bien puede usar cualquier nombre que desee, para este tutorial vamos a obtener dos listas de este útil repositorio en Github:una lista de adverbios y una lista de animales. También hay algunas otras listas en ese repositorio, así que siéntete libre de experimentar o crear la tuya propia.

Una vez que haya elegido las listas que desea usar, suponiendo que esté usando las listas del enlace anterior, querremos incluirlas en nuestro proyecto y formatearlas para usarlas en nuestro código. En el proyecto que acabamos de crear con joystick app , queremos crear dos archivos en el /lib carpeta:/lib/adverbs.js y /lib/animals.js :

/lib/adverbs.js

export default [
  'abnormally',
  'absentmindedly',
  'accidentally',
  'acidly',
  'actually',
  ...
];

/lib/animales.js

export default [
  'Aardvark',
  'African Elephant',
  'African Tree Pangolin',
  'Albatross',
  'Alligator',
  ...
];

Aquí, hemos truncado las listas debido a su longitud, pero querrá ingresar las listas completas para sus archivos. Los dos archivos anteriores se pueden encontrar formateados como los bloques de código anteriores aquí.

Una vez que tenga esos archivos en su /lib carpeta, podemos pasar al generador de nombres.

Escribiendo una función generadora de nombres

Nuestra función de generador de nombres constará de tres pasos:

  1. Seleccionar un adverbio y un nombre de animal al azar de nuestras listas.
  2. Dando formato a ambos nombres, cambiándolos a minúsculas y reemplazando cualquier espacio con - guiones.
  3. Concatenar o unir las versiones en minúsculas y con guión en un solo nombre.

Echemos un vistazo a la función completa y paso a paso (será más fácil de entender ya que vamos a componer juntas las llamadas de función).

/lib/generarNombreProyecto.js

import adverbs from "./adverbs";
import animals from "./animals";

const lowercaseAndSlugify = (string = '') => {
  return string.toLowerCase().replace(/ /g, '-').replace('--', '-').trim();
};

const getRandomArrayItem = (array = []) => {
  return array[Math.floor(Math.random() * (array.length - 1))];
};

export default () => {
  const adverb = lowercaseAndSlugify(getRandomArrayItem(adverbs));
  const animal = lowercaseAndSlugify(getRandomArrayItem(animals));
  return `${adverb}-${animal}`;
};

Comenzando en la parte superior, agregamos dos importaciones a nuestro archivo:una para nuestro adverbs.js archivo y uno para nuestro animals.js archivo en la misma carpeta. Abajo, en la parte inferior de nuestro archivo, agregamos una exportación predeterminada de nuestra función.

En el interior, comenzando con nuestro adverb , componemos dos llamadas de función definidas anteriormente de nuestra función principal. En JavaScript, las llamadas a funciones funcionan de manera similar a un problema matemático, la evaluación desde el interior primero hasta el exterior al final.

Aquí, nuestra llamada más interna es a una función getRandomArrayItem() , que, como su nombre lo indica, está diseñado para obtener un elemento aleatorio de una matriz que le pasamos. En este caso, estamos pasando el adverbs list que importamos arriba. Mirando eso getRandomArrayItem() función, tomamos nuestro array y devolver una línea que dice "seleccione el elemento en el array pasado en este índice aleatorio array[someRandomIndex] ."

Para obtener ese índice aleatorio, llamamos a Math.random() lo que nos da un número aleatorio entre 0 y 1 y luego multiplíquelo por la longitud de nuestro array , restando 1. Hacemos esto porque obtendremos un número como 0.5121 de Math.random() que cuando se multiplica por la longitud de nuestra matriz, nos dará un número entre 0 y la longitud de nuestra matriz (es decir, un índice aleatorio de un elemento en esa matriz). Por ejemplo, si nuestro array la longitud era 25 y regresamos 0.5121 de Math.random() , nuestro número final sería 12.2904 (24 * 0.5121 ).

Como queremos un entero plano y no un número decimal o "flotante", tomamos el resultado de esta multiplicación y lo pasamos a Math.floor() que redondeará el número resultante al número entero más cercano, o en el ejemplo anterior, 12 . Pasando esto como array[12] , esperaríamos recuperar el valor en el índice 12 en la matriz pasada.

Una vez que recuperemos nuestro valor aleatorio, la siguiente parte del trabajo que debemos hacer para que el valor se pueda utilizar en el nombre de nuestro proyecto (buscaremos un nombre como advantageous-advark ), queremos ponerlo en minúsculas y luego reemplazar cualquier espacio con un - .

Arriba en el lowercaseAndSlugify función, hacemos esto tomando el string pasado como argumento y luego llamar inmediatamente a .toLowerCase() en él, encadenando una llamada a .replace(/ /g, '-') para decir "globalmente en esta cadena, reemplace todos los espacios con un - carácter" seguido inmediatamente por un .replace() por cualquier -- accidental guiones dobles creados a partir de espacios dobles en nombres con un solo - guión. Finalmente, encadenamos una última llamada al final a .trim() para asegurarnos de que hemos eliminado los espacios innecesarios.

Eso es todo para formatear. Volviendo a nuestra función exportada, repetimos esta cadena de eventos para obtener nuestro animal , pasando el animals array para obtener un valor aleatorio y formatearlo. Con nuestros adverb aleatorios y animal , devolvemos una cadena concatenada de nuestra función, uniendo las dos variables con un - guión utilizando la interpolación de cadenas de JavaScript.

¡Eso es todo por generar nuestro nombre! Ahora, conectémoslo a nuestra interfaz de usuario y pongámoslo en uso.

Poner el generador en uso

Esta parte es bastante simple. Para probar nuestra función, vamos a conectar un componente Joystick. Para hacerlo, vamos a reemplazar el código existente en /ui/pages/index/index.js (este archivo se generó automáticamente cuando ejecutamos joystick create app anterior) con lo siguiente:

/ui/pages/index/index.js

import ui from '@joystick.js/ui';
import generateProjectName from '../../../lib/generateProjectName';

const Index = ui.component({
  state: {
    projectName: null,
  },
  events: {
    'click button': (event, component) => {
      component.setState({ projectName: generateProjectName() });
    },
  },
  render: ({ when, state }) => {
    return `
      <div>
        <button>Generate a Project Name</button>
        ${when(state.projectName, `
          <h1>${state.projectName}</h1>
        `)}
      </div>
    `;
  },
});

export default Index;

Arriba, importamos el ui objeto de @joystick.js/ui lo que nos da acceso al ui.component() método para crear nuestro componente junto con nuestro generateProjectName función de nuestro /lib carpeta. Debajo de esto, creamos nuestro componente y lo almacenamos en una variable Index que se exporta desde nuestro archivo en la parte inferior (este archivo ya está conectado al enrutador en nuestra aplicación, por lo que no necesitamos hacer nada más para que funcione).

Centrándose en el componente en sí, abajo en el render() función devolvemos una cadena de HTML para representar nuestro componente. En el interior, devolvemos un <div></div> etiqueta con un <button></button> y una llamada especial al when() una función pasada al render() función de los componentes de Joystick (conocidos como when "función de renderizado").

Esa función está diseñada para representar algo de HTML when se cumple alguna condición. Aquí, verificamos si el state.projectName se define el valor. Aquí, state se extrae de la instancia del componente pasada al render() del componente función (el mismo lugar donde arrancamos when() de). Ese estado se puede configurar de forma predeterminada en nuestro componente a través del state propiedad establecida en el objeto pasado a ui.component() .

Arriba, lo hacemos de forma predeterminada configurando projectName en estado a null . En otras palabras, cuando nuestro componente se carga por primera vez state.projectName es igual a null , entonces nuestra llamada a when() abajo en nuestro render() la función no representará el HTML pasado como segundo argumento (nuestro state.projectName valor envuelto en un <h1></h1> etiqueta).

Para cambiar este valor, necesitamos llamar al .setState() de nuestro componente método. Aquí, lo hacemos en respuesta a un click evento en el button dentro de nuestro componente. Arriba en el events objeto pasado a las opciones para ui.component() , hemos definido un detector de eventos para un click evento en todos los button elementos en nuestro componente (solo uno en este caso).

Dentro de la función pasada a la definición de oyente click button , esperamos obtener el DOM event como primer argumento y luego el component ejemplo como segundo argumento. En ese component instancia, tenemos acceso a una función .setState() al que podemos llamar para actualizar valores en el state de nuestro componente objeto. Al .setState() pasamos un objeto con todos los valores que queremos actualizar como propiedades. Aquí, queremos establecer projectName igual a un nombre de proyecto aleatorio, por lo que lo establecemos igual a una llamada a generateProjectName() .

El resultado final es que ahora, cada vez que hagamos clic en nuestro botón, estableceremos projectName a un nuevo nombre aleatorio y nuestro when() mostrará ese nombre en la pantalla. ¡Eso es!

Terminando

En este tutorial, aprendimos cómo generar un nombre de proyecto aleatorio en JavaScript. Aprendimos a escribir una función que puede seleccionar valores aleatorios de una matriz, así como una función para formatear el valor aleatorio seleccionado para que esté todo en minúsculas y en forma de cadena. A continuación, aprendimos cómo concatenar nuestros valores aleatorios en una sola cadena y devolverlos desde una función. Finalmente, aprendimos cómo llamar a nuestra función y usar su valor para mostrar dentro de un componente Joystick.