Self HostedWebRealtime

Deploy In-App notification system NextJS & Appwrite

Dec 27, 2023, 20:22

View on Discord

Votes

Replies

Participants

Unknown

Messages

D5Original post

Moderator

Jul 25, 2023, 17:07

Yes, but I recommend handling that with a funcion anyways

Summary

The user wants to know if there is a way to translate notifications in NextJS & Appwrite. A solution is mentioned that it is not currently possible but it is on the roadmap. The user also asks about adding the Novu library to the Appwrite function and setting the API key. There is confusion about the API key and it is suggested to set it for cloud usage. The user then shares their Novu code for NextJS and asks for help with an error in the console. A solution is mentioned that FCM tokens can be omitted and a link to an example using Firebase for notifications is shared. The user asks for a tutorial

loup

Rank 3: Container

Jul 25, 2023, 17:42

do u know a tutorial or an example for that with appwrite ? Because ive no idea how to make communicate firebase and appwrite especially to target specific user for specific notification

Moderator

Jul 25, 2023, 18:04

Here you have an example: https://github.com/open-runtimes/examples/tree/main/dart/send_push_notification
Just send a request to firebase to send the notification. No needed integrating anything with Appwrite

loup

Rank 3: Container

Jul 25, 2023, 18:33

But if for example in the user setting there a notification panel where user can disable in-app notification, we have to make communicate user pref (in appwrite) with firebase right ?

Moderator

Jul 25, 2023, 18:53

You can ommit fcm tokens

loup

Rank 3: Container

Jul 27, 2023, 14:53

@Guille im trying novu with nextjs and novu in cloud, but I got this error in console in my NextJS app :

loup

Rank 3: Container

Jul 27, 2023, 14:53

My novu.tsx look like :

import { NovuProvider, PopoverNotificationCenter, NotificationBell } from "@novu/notification-center"

export default function Novu( { userId } : { userId: string }) {
    console.log(userId)
    return (
        <NovuProvider subscriberId={userId} applicationIdentifier={'on-boarding-notification'}>
            <PopoverNotificationCenter colorScheme={'dark'}>
                {({ unseenCount }) => <NotificationBell unseenCount={unseenCount} />}
            </PopoverNotificationCenter>
        </NovuProvider>
    )
}

loup

Rank 3: Container

Jul 27, 2023, 14:55

that weird everything look correct

Guille

Moderator

Jul 27, 2023, 14:57

did you set API key?

loup

Rank 3: Container

Jul 27, 2023, 14:59

mhh my mistake is because I have to push to production (in Novu). And in NextJS i dont need API KEY right ?

loup

Rank 3: Container

Jul 27, 2023, 14:59

because im gonna trigger notification from appwrite function

Guille

Moderator

Jul 27, 2023, 15:03

If you are using cloud, you should set your api key

loup

Rank 3: Container

Jul 27, 2023, 15:03

its working without :/

loup

Rank 3: Container

Jul 27, 2023, 15:03

api key is only for the trigger right ?

Guille

Moderator

Jul 27, 2023, 15:05

I'm not sure, but if it's working you shouldn't be worried

loup

Rank 3: Container

Jul 27, 2023, 15:06

btw how do u add novu inside Appwrite function (NodeJS) ? just with that ?

import { Novu } from '@novu/node'; 
const novu = new Novu(req.variables['APPWRITE_FUNCTION_NOVU_API_KEY']);

loup

Rank 3: Container

Jul 27, 2023, 15:17

well i guess not

loup

Rank 3: Container

Jul 27, 2023, 15:17

ive try require but not working too

loup

Rank 3: Container

Jul 27, 2023, 15:27

well I guess we have to install @novu/node inside Appwrite instance

loup

Rank 3: Container

Jul 27, 2023, 15:42

Im dumb just have to add inside package.son (from the appwrite function) : "@novu/node": "^0.17.1"

Guille

Moderator

Jul 27, 2023, 18:14

Yes, you have to add your dependencies in your clud function

loup

Rank 3: Container

Jul 27, 2023, 18:17

that work so well

loup

Rank 3: Container

Jul 27, 2023, 18:17

now I have to understand how make a custom notification center

loup

Rank 3: Container

Jul 27, 2023, 18:19

Do u know if there is a way to translate notification ? The only way for me is to give inside payload the entire text directly and have no text directly in novu workflows

Guille

Moderator

Jul 27, 2023, 19:37

What I have read, there is not way to translate notifications currently, but there is already in the roadmap

Deploy In-App notification system NextJS & Appwrite

Need support?_