안녕하세요.키로 블로그의 첫 번째 게시물에 오신 것을 환영합니다!
Qurrel은 오픈된 작업 줄 서기 서비스로 사용하기 쉽고 사람들의 흥미를 불러일으킨다.
이 강좌에서, 우리는 그것을 사용하여 식수 알림을 만들 것이다. 왜냐하면 당신이 나처럼 때로는 잊어버리기 쉽기 때문이다.

Check out the finished version here: water-reminder.quirrel.dev

이 강좌를 배우려면 Next에 대해 조금 알고 계실 것입니다.js.
만약 당신이 그것에 대해 완전히 낯설다면, 먼저 보십시오 Next tutorial.

시작합시다!

우리가 해야 할 첫 번째 일은 새로운 다음을 창조하는 것이다.js 프로젝트.

$ npx create-next-app water-reminder

가장 좋아하는 편집기에서 water-reminder 을 열고 npm run dev 를 실행하여 개발 환경을 시작합니다.
보기pages/index.js 및 다음 내용으로 대체합니다.

// pages/index.js
export default function Home() {
  return (
    <main>
      <h1>
        Water Drinking Reminder
      </h1>

      <p>
        I want to be reminded under the following e-mail:
      </p>

      <form
        onSubmit={(evt) => {
          evt.preventDefault();
          const formData = new FormData(evt.target);
          const email = formData.get("email");
          alert(email);
        }}
      >
        <input
          name="email"
          type="email"
          placeholder="E-Mail"
        />
        <button type="submit">
          Submit
        </button>
      </form>
    </main>
  );
}

알림을 위한 전자 메일을 제출할 수 있는 태그와 간단한 폼이 포함되어 있습니다.
현재 입력한 전자 메일만 알립니다.
브라우저에서 열기localhost:3000.
다음과 유사해야 합니다.

양식을 백엔드에 커밋

pages/api/setupReminder.js를 생성하고 다음 코드를 추가하여 새 API 라우팅을 설정합니다.

// pages/api/setupReminder.js
export default async (req, res) => {
  const email = req.body;
  console.log(`I'll setup the reminder for ${email}.`);
  res.status(200).end();
}

이제 양식 값은 alert-ing이 아닌 새로 만든 API 라우팅으로 게시합니다.
복귀 pages/index.js 및 교체:

// pages/index.js
onSubmit={(evt) => {
  evt.preventDefault();
  const formData = new FormData(evt.target);
  const email = formData.get("email");
- alert(email);
+ fetch("/api/setupReminder", { method: "POST", body: email });
}}

양식을 제출하면 개발 콘솔에 전자 메일이 인쇄됩니다.

이제 양식과 API 라우팅을 연결하여 키로와 이메일로 보냅니다.

괴원을 설치하다

Qurrel은 작업 대기열 서비스입니다.
"10분 안에/api/queue를 통해 전화해 주세요"라는 요청을 받아들여 저장하고 요청에 따라 전화해 주십시오 /api/queue.
키로의 가장 좋은 점은 키로 CLI를 사용하여 로컬에서 완전히 실행할 수 있다는 것입니다.

$ npm install -g quirrel
$ quirrel
🎉 Starting the Quirrel Dev Environment 🎉

이제 pages/api/queues/reminder.js 를 만들고 다음 내용을 입력하여 새 대기열을 만듭니다.

// pages/api/queues/reminder.js
import { Queue } from "quirrel/next";

export default Queue(
  "api/queues/reminder", // the route it's reachable under
  async (recipient) => {
    console.log(`Sending an E-Mail to ${recipient}`);
  }
);

Queue에는 두 가지 인자가 있습니다. 첫 번째는 API 루트 위치이고, 두 번째는worker 함수입니다.
작업을 실행할 때마다worker 함수를 호출합니다.
새로 만든 대기열을 사용하려면 API 라우팅에서 가져오기만 하면 됩니다.

// pages/api/setupReminder.js
+ import reminderQueue from "./queues/reminder";
// 👆 don't forget this

export default async (req, res) => {
  const email = req.body;
- console.log(`I'll setup the reminder for ${email}.`);
+ await reminderQueue.enqueue(
+   email,
+   {
+     id: email,
+     delay: "30min",
+     repeat: {
+       every: "30min",
+       times: 16, // 16 * 30min = 8h
+     },
+   }
+ );
  res.status(200).end();
};

전화.enqueue를 하면 새로운 일을 안배할 것이다.
첫 번째 매개변수는 작업의 유효 로드이고 두 번째 매개변수에는 다음과 같은 옵션이 있습니다.

id 동일한 이메일 주소에 대한 여러 알림 방지

repeat 작업을 시간당 2회, 8시간 지속

delay 초기 지연 시간이 30분 추가되어 첫 번째 작업이 즉시 실행되지 않습니다

유효한지 확인하려면 ui.quirrel.dev 키로 개발 UI를 엽니다.
로컬 Qurrel 인스턴스에 연결하고 모든 걸기 작업을 [마운트] 탭에 표시합니다.

If it doesn't connect, that may be because you're using Safari. Try a different browser instead.

전자 메일을 localhost:3000 에 제출한 양식은 사용자 인터페이스에 새 작업을 추가하고'호출'을 누르면 이 작업을 수행합니다.
현재 개발 로그에서 볼 수 있습니다 Sending an E-Mail to XYZ.
이것은 중복된 작업이기 때문에, 16번째 실행될 때까지 즉시 다시 스케줄링할 것이다.
우리가 본 강좌의 마지막 부분을 계속 공부하기 전에: 일어나서 주방에 가서 물 한 잔을 가져와라💧

전자 메일을 연결합시다!

이제 대기열이 작동하기 시작했습니다. 마지막 연결: 이메일!
실행npm install nodemailer 및 SMTP 설정 코드를 알림 대기열에 추가합니다.

// pages/api/queues/reminder.js
import { Queue } from "quirrel/next";
+ import { createTransport } from "nodemailer";

+ const mail = createTransport({
+   host: "smtp.ethereal.email",
+   port: 587,
+   auth: {
+     user: "[email protected]",
+     pass: "Dp5pzSVa52BJwypJQm",
+   },
+ });

...

SMTP 자격 증명이 없으면 프레젠테이션 자격 증명at ethereal.email을 얻을 수 있습니다.
그리고 console.log 호출을 전환하고 진정한 이메일을 보내기만 하면 됩니다.

...

export default Queue(
  "api/queues/reminder",
  async (recipient) => {
-   console.log(`Sending an E-Mail to ${recipient}`);
+   await mail.sendMail({
+     to: recipient,
+     from: "[email protected]",
+     subject: "Remember to drink some water!",
+     text: "..."
+   })
  }
);

그렇습니다!현재, 우리의 응용 프로그램은 완전히 정상적으로 작동한다.
이것은 아마도 가장 좋은 물 알림 서비스가 아닐 것이다. 그러나 그것은 너 자신의 것이다.
다음은 향상된 아이디어입니다.

알림 기간 및 간격 설정 가능

사용자가 전자 메일의 링크를 사용하여 구독을 취소할 수 있도록 허용

스타일 추가, 사용 가능Tailwind CSS

사용managed Quirrel service을 통해 운영 환경에 쉽게 배포할 수 있습니다.
다음 지침만 따르십시오.Deploying Quirrel to Vercel

결론

우리는 한 시간도 안 되는 시간에 작업수 알림 시스템을 세웠다.
여기서 완성된 프로젝트를 볼 수 있습니다: quirrel-dev/water-reminder-demo
Beanstalk나 SideKiq 등 유명한 작업 대기열 라이브러리에 경험이 있다면, Qurrel이 얼마나 사용하기 쉬운지 알 수 있습니다.
Qurrel은 유행하는 프레임워크에 사용되는 고도로 통합된 클라이언트 라이브러리와 사용할 수 있는 위탁 관리 솔루션으로 JAMstack 사용자에게 가장 좋은 선택입니다.
만약 네가 직접 키로를 진행하고 싶다면, 마성이공대학의 허가증은 네가 이렇게 하는 것을 허락한다.