$30 off During Our Annual Pro Sale. View Details »

The Complete Guide to building In-App Notifications in Web Apps

The Complete Guide to building In-App Notifications in Web Apps

Workshop that walks through building in-app notifications in web apps.

Otemuyiwa Prosper

June 16, 2023
Tweet

More Decks by Otemuyiwa Prosper

Other Decks in Programming

Transcript

  1. View Slide

  2. WORKSHOP!!!

    View Slide

  3. The Complete Guide To
    Building In-App
    Notifications in Web
    Apps
    Prosper,
    Otemuyiwa
    Open Source Advocate, Novu
    Co-founder, Eden Life

    View Slide

  4. Let Your Apps
    Breathe…
    DON’T
    SUFFOCATE
    THEM
    Prosper,
    Otemuyiwa
    Open Source Advocate, Novu

    View Slide

  5. What do you know about
    notifications in general?
    In Web & Mobile Apps

    View Slide

  6. Focus Today: Web Apps
    ….but a little about mobile too.

    View Slide

  7. Lean Focus:
    In-App Notifications
    In-App Notifications
    In-App Notifications

    View Slide

  8. Pain Points in Building Notification Features /
    Systems
    1. Setting up Notification Providers.
    2. Writing custom code every time from project to project.
    3. Adding Multiple Channels.
    4. Adding & Switching Between Multiple Providers.
    5. Building Digest & Delay Systems.

    View Slide

  9. ENTER…..
    NOVU

    View Slide

  10. What Novu is & provides…
    1. Single API for all messaging providers(In-App, Email,
    SMS, Chat)
    2. Easily Manage notifications over multiple channels.
    3. Ships with CMS for layouts & design management.
    4. Analyze multi-channel messages in a single dashboard.
    5. Embeddable Notification Center with real-time updates.

    View Slide

  11. Workshop in steps…
    1. Sign up on https://bit.ly/novu-web

    View Slide

  12. JOIN THE COMMUNITY - DISCORD
    https://discord.com/invite/novu

    View Slide

  13. Workshop in Steps:
    2. Create a Workflow or choose from
    the Workflow Template Store

    View Slide

  14. Workshop in Steps:
    3. Add the In-App Channel & Configure

    View Slide

  15. Workshop in Steps:
    4. Clone this backend:
    https://github.com/unicodeveloper/osca-worksh
    op-backend
    5. Run it locally - npm install & npm run dev
    …let’s add the appropriate env variables.
    ALTERNATIVE: Fire up postman & let’s use that!

    View Slide

  16. Frontend: Clone, replace the credentials & run
    https://github.com/unicodeveloper/osca-workshop-fr
    ontend

    View Slide

  17. BACKEND APP URL: Trigger a notification
    https://osca-workshop-backend.vercel.app/api/trigge
    r-notification

    View Slide

  18. View Slide

  19. BACKEND APP URL: Create a Subscriber
    https://osca-workshop-backend.vercel.app/api/creat
    e-subscriber

    View Slide

  20. Workshop in Steps:
    Topics: An easy interface for triggering
    notifications to multiple subscribers at
    once.

    View Slide

  21. BACKEND APP URL: Let’s create a topic
    https://osca-workshop-backend.vercel.app/api
    /create-topic

    View Slide

  22. BACKEND APP URL: Let’s add subscribers to a topic
    https://osca-workshop-backend.vercel.app/api
    /add-subscriber-to-topic

    View Slide

  23. Workshop in Steps:
    Topics make it possible to trigger a notification
    to all subscribers assigned to a topic.
    It helps avoid listing all subscriber ids in the
    `to` field of the notification trigger.

    View Slide

  24. BACKEND APP URL: Trigger Notification to topic
    https://osca-workshop-backend.vercel.app/api
    /trigger-notification-to-topic

    View Slide

  25. Resources to learn about Novu & In-App Notifications
    - https://docs.novu.co/
    - https://www.youtube.com/@novuhq
    - https://dev.to/novu
    - https://novu.co/blog

    View Slide

  26. One more thing:
    Novu welcomes you to contribute to it
    & please don’t forget to star the repo. 🌟

    View Slide

  27. THANK YOU!
    Connect with me on
    Twitter: @unicodeveloper

    View Slide