Automatisation d’un flux de travail complexe dans votre application Next.js avec Inngest

Nous créerons une demande de prêt simple avec Next.js et Inngest, et passerons en revue les outils qui étaient utilisés pour orchestrer des flux de travail complexes avant Inngest.

Inngest facilite la création de flux de travail complexes dans vos applications. Un flux de travail complexe est un processus structuré en plusieurs étapes qui implique plusieurs équipes, outils et étapes d’approbation. Il comporte souvent des dépendances et des transferts interfonctionnels entre les tâches.

Ingérer est un moteur de workflow durable et piloté par événements qui vous permet d’exécuter du code fiable sur n’importe quelle plateforme, y compris sans serveur. L’intégration d’Inngest dans votre application vous permet d’exécuter des processus complexes, de réduire les retards et de gérer les échecs, ce qui rend les processus complexes modulaires, fiables et plus faciles en vous permettant d’écrire votre flux de travail sous forme de code.

Dans cet article, nous verrons comment simplifier une application complexe à l’aide d’Inngest. Pour ce faire, nous allons construire une demande de prêt simple avec Suivant.js et Ingérer. Nous passerons également en revue les outils utilisés pour orchestrer des flux de travail complexes avant Inngest.

Condition préalable

Pour continuer, vous aurez besoin d’une connaissance de base de Réagir, Suivant.js, Manuscrit et Vent arrière. Il faut aussi savoir utiliser npm et Noeud.js.

Avant d’ingérer

Avant Inngest, les développeurs devaient orchestrer les flux de travail manuellement ou automatiquement à l’aide de configurations complexes. Quelques exemples de ces configurations incluent les files d’attente de messages et les exécuteurs de tâches. Les tâches cron, les fonctions sans serveur, les moteurs de flux de travail et une approche DIY sont moins courants. Les files d’attente de messages (par exemple, RabbitMQ, Apache Kafka et Amazon SQS) géraient la « livraison du courrier » entre différentes sources.

Les courtiers devaient être installés, surveillés et maintenus en bonne santé, et si une augmentation soudaine du trafic se produisait, cela entraînerait des coûts plus élevés. De plus, dans la plupart des cas de gestion d’un système complexe, une configuration hybride de courtiers de messages (par exemple, RabbitMQ) et d’une plate-forme de streaming d’événements (par exemple, Apache Kafka) serait nécessaire, car un seul outil suffisait rarement pour gérer la charge de travail massive. Ainsi, ce qui a commencé comme une configuration propre est lentement devenu un réseau de connexions désordonné.

Fondamentalement, Inngest peut être utilisé pour éviter ces configurations complexes, facilitant ainsi la gestion d’un flux de travail complexe.

Le diagramme ci-dessus montre une approche hybride de l’utilisation d’outils de gestion de flux de travail dans une architecture distribuée. L’application client envoie une demande à la passerelle API, qui est traitée et envoyée à l’orchestrateur de workflow approprié. En fonction des exigences de la requête, un orchestrateur spécifique est déclenché.

Ainsi, par exemple, si l’exigence nécessite une interaction avec les services Amazon, Amazon SQS peut être utilisé pour gérer cette demande. Ou si la demande est une action événementielle comme le streaming vidéo, Apache Kafka sera utilisé pour gérer la demande. Cet orchestrateur achemine ensuite la demande vers le service spécifique chargé de finaliser la demande, qui peut être un service interne ou externe.

Qu’est-ce qu’Inngest ?

Inngest est un système de workflow en tant que code piloté par les événements qui vous permet d’orchestrer des processus d’application hautement fiables sans avoir à gérer une infrastructure, des files d’attente et l’état des applications complexes.

Vous définissez essentiellement votre flux de travail dans le code, et la plate-forme Inngest s’occupe de l’infrastructure, de la file d’attente, de l’observabilité et de la mise à l’échelle, le tout alimenté par des tâches planifiées et en arrière-plan écrites en TypeScript, Python ou Go.

Caractéristiques d’Inngest

• Événements et déclencheurs: Cela permet aux fonctions Inngest de s’exécuter de manière asynchrone en réponse à des événements provenant de diverses sources. Ces déclencheurs peuvent être personnalisés via le filtrage, le retardement de l’exécution, le regroupement d’événements ou la gestion de plusieurs types d’événements dans une seule fonction.
• Fonction d’intégration: Cela permet aux développeurs d’exécuter une logique d’arrière-plan fiable, des tâches simples aux flux de travail complexes. Il prend en charge les tentatives, la planification et l’orchestration.
• Intergiciel: Cela vous permet d’exécuter du code à différents moments du cycle de vie d’un client Inngest, par exemple pendant l’exécution d’une fonction ou l’envoi d’un événement.
• Temps réel (aperçu développeur): Realtime vous permet de diffuser les mises à jour des fonctions Inngest directement aux utilisateurs, permettant des interfaces utilisateur en direct et des flux de travail bidirectionnels (par exemple, humain dans la boucle). Il est intégré à Inngest, aucune infrastructure supplémentaire n’est donc nécessaire. Innges gère le serveur WebSocket et les connexions utilisateur.

Inngest propose deux options pour une utilisation en production : Inngest Cloud ou le logiciel open source Inngest. L’option open source est gratuite, personnalisable et évite la dépendance vis-à-vis d’un fournisseur, mais vous oblige à gérer l’infrastructure sous-jacente. Inngest Cloud propose des niveaux flexibles allant d’un niveau gratuit à plusieurs forfaits payants en fonction de vos besoins d’utilisation, et gère la gestion de l’infrastructure pour vous.

Créez une demande de prêt avec Next.js et Inngest

Maintenant que nous comprenons ce qu’est Inngest et ses principales fonctionnalités, voyons-le en action. Dans ce projet, nous simulerons un workflow de demande de prêt qui comprend la vérification KYC, la détection des fraudes, la logique de décision de prêt, les notifications des utilisateurs et les mises à jour de la base de données. Cela montre comment Inngest simplifie les processus complexes en plusieurs étapes qui doivent s’exécuter de manière fiable et séquentielle.

Configuration du projet

Pour configurer une application Next.js, exécutez la commande suivante dans votre terminal. Nous utiliserons TypeScript, Tailwind CSS, le src répertoire et la configuration du routeur d’application pour notre projet.

npx create-next-app@latest my-inngest-app
cd my-inngest-app

Ensuite, exécutez la commande suivante pour installer le SDK Inngest dans notre projet :

npm install inngest

Configuration de votre environnement de développement

Pour ce tutoriel, nous utiliserons le mode de développement local d’Inngest, qui s’exécute entièrement sur votre machine et ne nécessite pas de compte. Le serveur de développement local fournit un tableau de bord sur http://localhost:8288 où vous pouvez voir vos fonctions, événements et journaux.

Pour le déploiement en production, vous devez soit vous inscrire à Inngest Cloud à l’adresse https://www.inngest.com (niveau gratuit disponible) ou auto-hébergez la version open source

Créez un nouveau fichier appelé client.ts dans le src/inngest/ répertoire de notre répertoire racine et ajoutez-y ce qui suit pour initialiser notre client Ingest :

import { Inngest } from "inngest";

export const inngest = new Inngest({
  id: "my-inngest-app", 
});

Dans le code ci-dessus, nous avons instancié la classe Inngest (client) et transmis l’ID unique de notre application en tant que paramètre au constructeur de classe. Considérez le client comme la connexion entre votre application et Inngest. L’ID est comme un espace de noms qui vous aide à distinguer les événements et les fonctions si vous disposez de plusieurs applications. Vous utiliserez ce client à la fois pour définir des fonctions et pour envoyer des événements.

Construire les caractéristiques du prêt

Pour mettre en œuvre les fonctionnalités de prêt, nous procéderons comme suit :

• Création d’une orchestration de workflow à l’aide de la fonction Ingest
• Synchroniser notre application avec Inngest
• Création d’une API qui déclenche le workflow en envoyant un événement
• Création d’une interface utilisateur avec un bouton pour lancer le processus (demande de prêt)

Créer une orchestration de workflow à l’aide de la fonction Ingest

Créez un autre fichier appelé loanApplication.ts dans votre src/inngest/functions/ répertoire et ajoutez-y ce qui suit :

import { inngest } from "../client";



async function verifyKYC(userId: string) {
  console.log(`Verifying KYC for user ${userId}...`);
  return { status: "verified" }; 
}
async function detectFraud(userId: string) {
  console.log(`Running fraud detection for user ${userId}...`);
  return { risk: "low" }; 
}
async function decideLoan(kyc: any, fraud: any) {
  console.log("Deciding loan status...");
  if (kyc.status === "verified" && fraud.risk === "low") {
    return "approved";
  }
  return "rejected";
}
async function notifyUser(userId: string, decision: string) {
  console.log(`Notifying user ${userId}: Loan ${decision}`);
  return true;
}
async function updateDatabase(userId: string, decision: string) {
  console.log(`Updating DB for user ${userId} with loan: ${decision}`);
  return true;
}


export const loanApplicationFn = inngest.createFunction(
  { id: "loan-application" }, 
  { event: "app/loan.submitted" }, 
  async ({ event, step }) => {
    const userId = event.data.userId;
    
    const kyc = await step.run("verify-kyc", () => verifyKYC(userId));
    
    const fraud = await step.run("fraud-detection", () => detectFraud(userId));
    
    const decision = await step.run("loan-decision", () =>
      decideLoan(kyc, fraud)
    );
    
    await step.run("notify-user", () => notifyUser(userId, decision));
    
    await step.run("update-db", () => updateDatabase(userId, decision));

    return { message: `Loan ${decision} for user ${userId}` };
  }
);

Dans l’extrait de code ci-dessus, nous avons créé un workflow pour notre demande de prêt en utilisant le inngest.createFunction() fonction. Nous avons transmis un objet de métadonnées {id: "loan-application"}qui est un identifiant unique pour la fonction. Nous avons également transmis une définition d’événement qui déclenche la fonction, qui est un objet appelé {event: "app/loan.submitted"}. Ceci est utilisé par l’API de notre application pour déclencher notre workflow de prêt écrit dans le loanApplicationFn fonction.

La première action de notre flux de travail est la verifyKYC fonction, qui vérifie l’authenticité de l’utilisateur soit à l’aide d’une solution interne, soit d’un fournisseur KYC externe. Vient ensuite notre detectFraud fonction qui gère les activités frauduleuses et vérifie que la demande de prêt est exempte d’actions douteuses.

Ensuite, nous avons lancé le decideLoan fonction, qui gère les exigences pour décider si le prêt doit être approuvé ou non. Le notifyUser La fonction s’exécute ensuite pour effectuer toutes les mises à jour client nécessaires, comme les mises à jour de l’interface utilisateur, les notifications par e-mail, etc. Enfin, nous mettons à jour la base de données avec toutes les informations nécessaires à la persistance des données en utilisant le updateDatabase fonction.

Enfin, nous exécutons les fonctions appropriées qui contiennent les exigences métier à l’aide du step.run() fonction. Dans notre loanApplicationFnle step.run() la fonction est utilisée pour exécuter toutes les fonctions de verifyKYC à updateDatabasequi permet ensuite à la plateforme Inngest de suivre les progrès, de gérer les tentatives, la journalisation et les échecs, pour que tout se déroule comme prévu.

Notez qu’une fonction exécutée dans le workflow peut partager des données en renvoyant simplement une valeur, qui peut être transmise à la fonction suivante pour être exécutée avec step.run().

Synchroniser notre application avec Inngest

Créer un route.ts fichier dans le src/api/inngest répertoire et ajoutez-y ce qui suit :

import { serve } from "inngest/next";
import { inngest } from "@/inngest/client";
import { loanApplicationFn } from "@/inngest/functions/loanApplication";
export const { GET, POST, PUT } = serve({
  client: inngest,
  functions: [loanApplicationFn],
});

Le code ci-dessus synchronise notre application Next.js avec Inngest.

Exécutez maintenant cette commande dans votre terminal pour démarrer notre serveur local Inngest :

npx inngest-cli@latest dev

Vous pourrez voir notre application dans le tableau de bord en accédant à Applications languette.

Dans l’image ci-dessus, vous pouvez voir le my-inngest-app application sous Applications synchronisées. Vous pourrez également voir les journaux, les tentatives et l’historique d’exécution dans le tableau de bord Inngest Dev en visitant http://localhost:8288.

Créer une API qui déclenche le workflow en envoyant un événement

Créez une route API dans ce chemin de répertoire : src/app/api/send-event/route.ts et ajoutez-y ce qui suit :

import { NextResponse } from "next/server";
import { inngest } from "../../../inngest/client";

export async function POST(request: Request) {
  const body = await request.json();
  await inngest.send({
    name: "app/loan.submitted",
    data: { userId: body.userId },
  });
  return NextResponse.json({ status: "ok" });
}

Dans le code ci-dessus, nous créons un POST point de terminaison qui peut être utilisé pour déclencher l’événement app/loan.submitted avec un objet de données d’événement contenant le userId du corps de la demande.

Le nom de l’événement app/loan.submitted est un signal qu’Inngest écoute. Lorsque nous avons configuré notre fonction plus tôt, nous avons essentiellement dit à Inngest : « Hé, chaque fois que vous interceptez un événement appelé app/loan.submittedallez-y et exécutez la fonction loanApplicationFn« .

Création d’une interface utilisateur avec un bouton pour lancer le processus (demander un prêt)

Ajoutez le code suivant à votre src/app/page.tsx déposer:

"use client";
export default function Home() {
  const sendEvent = async () => {
    await fetch("/api/send-event", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ userId: 125485 }),
    });
    alert("Event sent!");
  };
  return (
    <main className="p-8">
      <h1 className="text-xl">Inngest + Next.js</h1>
      <button onClick={sendEvent}>Apply for Loan</button>
    </main>
  );
}

Dans le code ci-dessus, nous créons un simple bouton appelé Apply for Loan. Lorsque ce bouton est cliqué, il appelle le send-event API avec un objet corps contenant l’ID utilisateur défini sur 125485, qui déclenche un événement qui est envoyé à Inngest et géré en arrière-plan.

Maintenant, exécutez la commande suivante dans votre terminal pour démarrer votre serveur Next.js :

npm run dev

Next.js sert vos routes d’application et d’API. Le serveur Inngest Dev se connecte à /api/inngest et veille à ce que vos événements et fonctions fonctionnent localement.

Vous pouvez cliquer sur le Demander un prêt bouton pour déclencher l’événement.

Vous devriez recevoir une alerte comme indiqué ci-dessus.

Lorsque vous accédez au Événements sur votre tableau de bord Inngest, vous devriez voir l’onglet app/loan.submitted l’événement a été ajouté à votre liste comme indiqué ci-dessus.

Conclusion

Dans cet article, nous avons exploré comment Inngest simplifie l’orchestration de workflows complexes en traitant les workflows comme du code. Les approches traditionnelles de gestion de flux de travail complexes peuvent devenir un enchevêtrement de connexions difficiles à faire évoluer et à gérer.

Inngest change cela en fournissant un moteur de workflow durable et piloté par événements qui gère automatiquement les problèmes d’infrastructure. Cela vous permet de vous concentrer sur l’écriture de votre logique métier pendant que la plateforme gère les tentatives, la reprise après échec, le suivi de l’exécution et la mise à l’échelle.