[R09M App] 알림 - 기능 구현 방법 문의 이슈

내용

저희가 만든 “공구룸” 웹앱 서비스에서 알림 기능을 구현하려고 합니다.

포켓베이스 리얼타임 기능을 활용하면 푸시 알림 기능을 구현할수 있을것 같은데 푸시알림에 대한 자료를 검색하면 firebase 관련 자료밖에 나오지 않아서 알림 기능 구현 방법에 대해 문의합니다.

적용할 알림 기능 정리
1. 관심상품 체크를 하면 관심상품이 새롭게 등록되었을 때 알림을 해주는 기능
2. 내가 공동구매에 참여하겠다고 한 상품의 진행상태가 변경되었을 때 알림을 해주는 기능
3. 새로운 알림이 있을때 빨간 점으로 아이콘에 표시 / 읽은 뒤 빨간점은 사라짐
4. (채팅 기능 구현 시, 채팅이 왔을때 알림 기능 구현 예정)
관심 상품 등록
1. 원하는 상품의 키워드를 태그 형식으로 등록
2. 해당 태그 글자가 포함된 상품의 이름이 새롭게 등록되면 알림을 날릴 예정 filter : ~ 상품이름 포함

찾아본 푸시 알림 자료

카카오 api 를 사용한 푸시 알림 기능

[Kakao Developers](https://developers.kakao.com/docs/latest/ko/push/rest-api)

Push Notification Custom Hook 만들어서 알림 구현

[React에서 Browser Notification (푸시 알림) 구현하기](https://mingule.tistory.com/68)

Notification API 의 공식 문서

[Notifications API Standard](https://notifications.spec.whatwg.org/)

chat GPT 에게 물어본 결과 코드


import React, { useState } from 'react';

function NotificationSender() { const [message, setMessage] = useState('');

const sendNotification = async () => { try { const response = await fetch('YOUR_POCKETBASE_API_URL/send-notification', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer YOUR_AUTH_TOKEN', }, body: JSON.stringify({ message }), });

  if (response.ok) {
    console.log('Notification sent successfully');
    // 여기에서 필요한 처리를 수행하세요.
  } else {
    console.error('Error sending notification:', response.statusText);
  }
} catch (error) {
  console.error('Error sending notification:', error);
}

};

return (

Send Notification

setMessage(e.target.value)}
      />
      <button onClick={sendNotification}>Send</button>
    </div>
<p>);
}</p>
<p>export default NotificationSender;</p>
<pre><code>

## 참고 이미지 (선택)

### 시안 이미지
![MainDelivery](https://github.com/FRONTENDSCHOOL6/ready-act/assets/74365275/e9f49bba-4e19-4cb6-a366-ea41be9b5ac3)

`※ 댓글에 이슈 해결 완료 후 결과 또는 해결 과정 이미지 첨부`</code></pre>            </div>
        </div>
    
            <div class="comment">
            <div class="user">
                <a rel="noreferrer nofollow" target="_blank" href="https://github.com/jellyjoji"><img src="https://avatars.githubusercontent.com/u/74365275?v=4" />jellyjoji</a>
                commented
                <strong> 1 year ago</strong>            </div>
            <div class="markdown-body">
                <h2>PocketBase는 현재 Notification API를 지원하지 않습니다.</h2>
<p>PocketBase가 지원하는 것은 실시간 데이터베이스(realtime database) 기능입니다. 현재 알림 푸시(Push Notification) 기능을 지원하지는 않습니다.</p>
<h2>Knock은 알림 API 서비스를 제공하는 플랫폼입니다.</h2>
<p>알림 API 서비스를 직접 구현하는 것은 매우 어려운 일입니다. 그러므로 유연하고 안정적인 알림 API를 제공하는 <a href="https://knock.app/">[Knock](https://knock.app/)</a>과 같은 서비스를 활용하는 것을 권장합니다. 게다가 Knockd은 Next.js 프레임워크를 만든 Vercel에서 선택한 알림 API입니다. (<a href="https://vercel.com/blog/building-a-powerful-notification-system-for-vercel-with-knock-app">[참고](https://vercel.com/blog/building-a-powerful-notification-system-for-vercel-with-knock-app)</a>)</p>
<p><img src="https://github.com/FRONTENDSCHOOL6/ready-act/assets/74365275/c46700fc-821d-4db6-a011-3a9b214ad509" alt="Untitled" /></p>
<p>Knock은 소규모 앱 또는 개발자 테스트 용도인 경우 무료 사용이 가능합니다. (최대 10,000건/월)</p>
<p><img src="https://github.com/FRONTENDSCHOOL6/ready-act/assets/74365275/57e6b6e6-6edf-4d05-8732-823c1cd1314d" alt="image" /></p>
<h2>Knock 서비스를 시작하는 방법 가이드</h2>
<p>아래 공식문서는 Knock을 백엔드 앱과 통합하고 Knock을 사용하여 첫 번째 알림을 보내는 방법을 안내합니다. Knock 서비스에 먼저 가입한 다음, PocketHost처럼 대시보드를 통해 설정해야 합니다.</p>
<p><a href="https://docs.knock.app/getting-started/quick-start">[Get started with Knock | Knock Docs](https://docs.knock.app/getting-started/quick-start)</a></p>
<aside>
⚠️ 알림 API 서비스는 백엔드 개발 환경 구성이 필요하며 프론트엔드 개발만으로 작동하지는 않습니다.

</aside>
<h2>React와 통합하는 방법 가이드</h2>
<p><code>[@knocklabs/react-notification-feed](https://github.com/knocklabs/react-notification-feed)</code> 라이브러리를 사용하면 Knock의 알림 피드 API를 사용하여 알림 환경을 만들 수 있습니다. 제품의 모든 기능을 갖춘 알림 피드 환경을 쉽게 시작하고 실행하는데 사용 가능한 미리 구축된 UI 컴포넌트 또한 함께 제공됩니다.</p>
<p>아래는 React 앱으로 구성된 라이브 데모입니다. Message 입력 필드에 메시지를 입력한 다음 <code>Send notification</code> 버튼을 누르면 Knock 서비스를 통해 알림 요청 후 잠시 뒤 알림이 도착합니다.</p>
<p><a href="https://knock-in-app-notifications-react.vercel.app/">https://knock-in-app-notifications-react.vercel.app/</a></p>
<p>자세한 사용법은 아래 공식 문서를 참고하세요.</p>
<p><img src="https://github.com/FRONTENDSCHOOL6/ready-act/assets/74365275/6bb1472c-4fca-4c6b-9cb4-e537bd8f8ff9" alt="image" /></p>
<h2>Knock 설정 영상 가이드</h2>
<p><a href="https://docs.knock.app/in-app-ui/react/overview">[Building in-app UI in React | Knock Docs](https://docs.knock.app/in-app-ui/react/overview)</a></p>
<p>아래 5분 영상 데모로 Knock을 사용하여 인앱, 이메일, Slack 등 여러 제품에 알림을 제공하는 것을 보여줍니다.</p>
<p><a href="https://www.youtube.com/watch?v=Q5bPuNV6KXY">https://www.youtube.com/watch?v=Q5bPuNV6KXY</a></p>            </div>
        </div>
    
    <div class="page-bar-simple">
            </div>

<div class="footer">
        <ul class="body">
            <li>© <script>
                    document.write(new Date().getFullYear())
                </script> Githubissues.</li>
            <li>Githubissues is a development platform for aggregating issues.</li>
        </ul>
    </div>

</html>

FRONTENDSCHOOL6 / ready-act

[R09M App] 알림 - 기능 구현 방법 문의 이슈 #55

내용

찾아본 푸시 알림 자료

Send Notification