Push Protocol 🛠️ Building native web3 messaging and Notification Apps!

[Music] hey everyone my name is asesh Kumar pradan I'm one of the C- developer at push protocol and today we are going to talk about a very important uh issue that you're trying to solve using push which is the ux so uh let's start with the first thing that we see when you wake up right you scroll down through your notification to see what all important Gmail uh sorry email or slack messages that you have received and that's where your journey to the application starts but that was a music uh Missing uh puzzle in the web3 ecosystem and that was a huge barrier in terms of uh you know the evex that the users were expecting so that's what uh push came into the picture and that's what we started with we started with notification uh so essentially what push protocol does is that it allows uh uh like it's a open communication layer that any smart contract any front end any uh you know uh backend they can just tap into it and uh use that Medium to deliver the notification to the user in a platform agnostic way that means they can receive the notification in a web uh in their browser extension in their mobile app or even in the custom print end that you have and uh the notifications are very Dynamic like they can be customized to the extent that uh you can add your own custom uh uh markdown to it so that you know like people will be really impressed with the uh uh the notification you can add images videos and even call to action so that uh in case you know you want to redirect the user to to perform certain action that can be easily doable and uh and it's all gas list like you don't have to pay any kind of gas fees or any kind of fee for uh you know triggering notification ation uh so yeah uh we going to talk about uh a important leap uh you know like in making the ux much more uh uh intuitive uh is notification settings so uh the journey into the push protocol starts with a channel so essentially you create a channel just like for YouTube right you Cate create a YouTube channel and uh people can subscribe to it so that they receive notification the same goes for uh push you know for you to start uh delivering notification you need to create a channel but uh let's say we talk about Coes channel so Coes is a media channel and they deliver notification like Tech uh uh marketing uh you know hack everything that falls under it but uh uh if I opt into the Coes Channel I'll be uh you know obliged to receive all the notification that Co is trigging even if I'm just interested in Tech I'll be receiving all notification so that's where settings comes into the picture so as a channel uh you have this power to you know curate the notification into categories so that as a user I don't have to receive all the notification but only the category of notification that I'm interested in so let's say I'm only interested in receiving Tech type notification so I as a user can just go in and uh you know uh you know uh as for this example you can see a lot of options uh you know like essentially you can either Set uh uh slider type notification uh category or Boolean type so let's get into get into it a bit depth so Boolean type notification is something which essentially says yes or no so am I interested in notification us as a user users to Define like yes I'm interested or no I'm not interested and second type of notification ification that we have is a range type notification uh sorry slider type so what that means is like let's say I want to receive notification when bitcoin price hits $40k so I as a channel can set the range that you know uh between 0 to $100 or 100K user can set uh the preference value for which they want to receive that notification and I as a user when I opt in I Define that value like you know when it reaches 40K just send me the not ification out and that's what that's what uh you know enables a lot more smoother DX uh then yep uh let's uh get into the demo side of the things so yeah uh for for the demo purpose of the notifications part of the thing we be using uh the staging uh dab so as you can see I already have a Channel created here and I have three settings that I defined so uh I have a CH Mender here right and uh for now like just for the context I've defined two stages of evolution and uh there is like a third type of which is the uh slider type which essentially says uh you know what's the h HP of the Charmander so uh I can just go here uh let's start with subscribing to the channel so let me just go [Music] here sign sign sign and yeah I can just go to the channels and I can see all the channels that are there I can just search for the channel that I'm interested it so when I click on optain I get this option now let's say I'm just interested in receiving uh you know the stage to like when Charmander re uh achieve stage two I want to receive notification so I can just Define that reference sign this message and yeah it simple as that I'm opted into the channel and I as a user has the option to even alter it uh as per my interest now let's try triggering notification so yeah let's um so here this notification for the specific user that just opted in so uh we have like uh if you can see the interface so we have three type of notification broadcast which is essentially you want to trigger notification to all the subscribers targeted when you want to you know send notification to a specific wallet address and subset is when you want to send notification to a range of wallet addresses so uh let's try targeted uh and I'll be uh you know dropping the recipient wallet address here and uh let's tyy the message as uh you know leveled up and uh you can even attach a image if prefer uh and I can just enable media drop the URL and you can see the preview of the notification itself and uh okay let me just refresh again targeted enable the media URL again so yeah I just need to sign this P load and that's it uh the notification will be delivered to the wallet address uh this is like uh default type that I selected but yeah uh as a user I can uh choose uh level two to yeah and I can do the same again so yeah those are a couple of ways uh in like this is from the UI aspect of the things and uh you can see the notification being visible in the inbox of the extension and uh similarly we can trigger it from the SDK so for now uh I've like predefined uh predefined the uh code that we'll be using so essentially uh uh we importing the rest API that we'll be using for uh uh you know for sending the notification out we initialize the SDK uh and the SDK expects that the uh you know like we need to pass the signer object that will be used for now I'm hardcoded the uh channels private key and using that as a medium and for this use case again I'm be triggering the targeted notification so here you have a flexibility to define the uh the notification uh details and uh here in the category you just Define like for what context you want to trigger the notification and let me just run so let's give it a couple of minutes and yeah we have successfully sent a notification and I can see it in my extension right uh it's hide from at T so yeah enough about uh uh notification so let's talk about the next uh next thing in push ecosystem which is chat sorry so yeah uh as a user we use different kind of like notification in one way for you for people or for a certain protocol to uh broadcast the notification out to the user but chat enables uh you know more of a wallet to wallet or a peer to-peer communication medium so that's why push chat comes into the picture so anyone can use their wallet address or their nft to chat with other users and on top of that we have enabled group chat so uh that makes it a lot more easier to build a Discord kind of server for Dows or protocols that makes it seamless for you know like for them to leverage the native web3 uh like uh features that comes in like uh they can use their token they can use their nft or custom rules uh to get the uh group that they create so that uh you know like it caters to the need for which uh the ecosystem exist so let's say uh you know like I want to create a a group chat with people who hold let's say developer do nft so that can be easily doable uh using a group chat uh we have our SDK out so right out right right out of the box you can build or create a group and on top of that you can use a a component to essentially even uh use the group chat so this is how uh like the the key highlight of push chat ecosystem is conditional getting so again this is all about you know uh def refining the rules based on which people will be allowed to join the group or even send a message to the group so you can see in the uh screenshot right uh so I can just create conditions and add endless like infinite criterias that are needed which either means that you know some of them have to be uh satisfied or all of them so that's something I can definitely add and uh people who satisfy they will be able to join or chat in the group so let's also get into the demo of it so again uh I've created uh sorry I've created uh the code for it so it's a normal uh so for this we'll be essentially using the chat UI provider right uh and the create group model to create a group and uh we'll be essentially defining the rules based on which the people would be allowed to join the group so uh I have it running here so uh first thing let's connect our wallet so this will be essentially used for PCP keys so uh if I click on create group this is the model that pops up and as a user you don't have to do anything you just need to uh Define the uh this 56 line of code and that's it you have your create group model ready uh you can give an icon so again I'll be going for this cute cat uh let's say test test and this is where the token G uh conditions comes into the picture so here uh you can define a condition and under that condition you can Define n number of uh uh criterias that needs to be fulfilled so for this case uh I'll be just give me one second I'll be push toen so let me just uh take this uh token address that we have so I'll add that and I can add the condition that you know whether it should be greater than greater than or equal to less than less than equal equ Al to equal to I mean you know you're free to choose whatever you want I'm just going with this and let's click on ADD so I have like defined one condition that if anyone holds one push they'll be allowed to join the group so once I click on ADD and create group uh yep I have my group created it's not visible here but if I uh go to the staging dab chats so here we have like two segments one is request and another is chats uh just a second I'll need to check one thing sorry uh let's do that again it won't take uh a lot of time create group testing so add condition add criteria then one add great group and yeah I have the group ready as you can see here and since I hold some push token in the wallet so I can just you know like uh send message here but yeah you're free to experiment on and everything I explained here it can be easily found uh in our dogs which is push the do/ dogs and uh you know uh just to make developers life easy we have introduced something called as live playround playground so on the go you can go and tweak with the code play around and you can see the uh you know like uh the changes happening here so you know like at the end of the day you can just copy paste as per minut Rees or matches your criteria and just use it here so that's something uh you can definitely leverage in uh so yeah uh thanks to uh like we're glad to announce that you know like we have delivered almost 55 million plus notification we have 148k subscribers and on top of that we have uh integration we have uh know push chat and notification has has been integrated with 650 plus protocols and projects and uh this is the QR uh for some of the most uh uh useful links that will be that will be helpful for you so first thing uh we are there uh in the booth 24/7 so anyone needs any kind of help feel feel free to hop in or we have a Discord link also so you can scan the QR code and if you face any kind of issue feel free to post your uh doubts there uh a push dog is the Bible that you can use we have everything for it like we have built it from scratch including the playground so feel free to experiment and if you have any feedback please let us know we are here to improve ourselves so yeah that's it thank you thank you very much yeah