Telegram api를 SvelteKit과 통합합니다.

다음과 같은 경우에 읽으십시오:

SvelteKit의 작동 방식을 알고 있습니다.

누군가 SvelteKit 웹사이트에 양식을 제출하면 텔레그램으로 알림을 받고 싶습니다.

소개

내 프로젝트 중 하나를 작업 중이었고 사용자가 데이터를 제출하자마자 데이터에 대한 알림을 받고 싶었습니다.
당시 저는 이메일, WhatsApp, SMS, 텔레그램을 생각했습니다.
하지만 하루에 두 번 이메일을 확인하기 때문에 WhatsApp 및 SMS 서비스를 위해 지불해야 하는 동안 이메일을 삭제했습니다. 그래서 저는 텔레그램을 남겼습니다.
이제 텔레그램은 그들의 api's에 대한 꽤 좋은 문서를 제공합니다.

그래서 먼저 NPM에서 사용할 수 있는 일부 오픈 소스 라이브러리를 시도했지만 그 중 어느 것도 내가 원하는 방식으로 작동하지 않았기 때문에 이를 위한 리소스를 만들기 시작했습니다. 나는 텔레그램으로 SvelteKit을 확인했고, 노드에 대한 텔레그램은 나를 위해 운동하지 않았습니다.

그래서 저는 직접 작업을 시작했고 텔레그램 문서를 살펴보았습니다.

내가 필요한 유일한 기능은 봇 API를 사용하는 sendMessage였습니다.
"https://api.telegram.org/bot${Token}/sendMessage?chat_id=${chatId}&text=${botMessage}"API를 찾았습니다.

토큰은 텔레그램에서 봇을 만들 때 BotFather에서 얻을 수 있는 봇 토큰입니다.

chatId는 RawDataBot에서 얻을 수 있는 텔레그램 서버의 사용자 이름 ID입니다.

botMessage는 봇에 보내야 하는 메시지이며 채팅에 표시됩니다.

이제 통합 부분을 시작하겠습니다.

SvelteKit 앱 만들기

src/routes/index.svelte 파일에서 HTML 양식을 만듭니다.

<form on:submit|preventDefault={onSubmit} method="Post">
<label for="name">Name</label>
<input type="text" id="name" name="name"/>
<label for="email">Email</label>
<input type="email" id="email" name="email"/>
<label for="contact">Contact</label>
<input type="tel" id="contact" name="contact"/>
<button type="submit">Submit</button>
</form>

이제 on:submit 이벤트에 할당한 onSubmit 핸들러를 추가합니다.

<script>
function onSubmit(e) {
await fetch('/contact', {
method: 'post',
headers: {accept: 'application/json'},
body: new FormData(e.target as HTMLFormElement)
});
}
</script>

원하는 대로 경로index.ts 또는 index.js에 새 파일을 만듭니다. index.ts는 그림자/페이지 끝점입니다( click here for docs ).

import type { RequestHandler } from '@sveltejs/kit';

export const post: RequestHandler = async ({ request }) => {
    const form = await request.formData();
    const name = String(form.get('name'));
    const email = String(form.get('email'));
    const contact = String(form.get('contact'));
    const botMessage = `This is a test notification %0A Name: ${name} %0A Email: ${email} %0A Contact: ${contact}`;
// %0A is url encoded '\n' which is used for new line.
    try {
        const Token = import.meta.env.VITE_TELEGRAM_BOT_TOKEN;
        const chatId = import.meta.env.VITE_TELEGRAM_CHAT_ID;
        const url = `https://api.telegram.org/bot${Token}/sendMessage?chat_id=${chatId}&text=${botMessage}`;
        const res = await fetch(url);
        return await res.json();
    } catch (err) {
        console.error(err);
        return null;
    }
};

이 방법은 보안상의 이유로 chatId와 봇 토큰을 사용하고 싶기 때문에 서버 측 서버에서 수행해야 합니다. 브라우저 요청을 하면 API 호출에서 누출됩니다.

감사합니다. 여기 내 첫 번째 게시물입니다. 오류를 발견하면 수정하겠습니다.

이것은 내가 당신을 위해 쓰는 것입니다. 묻고 싶은 것이나 제안하고 싶은 것이 있다면 댓글에 적어주세요.