DAPPCON 2019: Worksop - How to Build a Decentralized Chat App w/ M. Sena & J. Torstensson (3Box)

Transcript

today we're gonna be playing around with the three box and we're gonna build a shadow application where multiple users can interact and like the same system and this is using something called three bucks threads which is basically a way of coasting posting and making comments between users so I'm Joel and I'm the CTO of three bucks and with me somewhere over there I have Michael he's just observing today yeah so three bucks is like a framework for user identity and user centric data storage what this means is basically

that when you build an application you can store the data with the user in a way that the user is always in control of their own data so three bucks is useful if you want to build applications without having to worry so much about like servers and infrastructure or our API is a pretty easy to use so storing data and like accessing it is simple we build this on top of IP FS and a system called orbit to be I'm gonna dive into that a bit more later yeah I'm not going to go through this list so we have a few

things that we provide we have three books SDK which is like the main library you can use to make applications and this library allows you to do things with an identity you can you authenticate you can see profiles you need to store general data and also messaging which is what we're gonna be experimenting with today we're also about to launch something called the identity vault is decay and what this basically is is a an SDK for allowing wallets to natively support the three Box Network [Music]

in addition to that we also have the cruise hub which is where you can create profiles and profile hovers which is just like component made in react which you can plug into your app and basically get a quick view of who's someone who's like in Metiria dress is referring to so we're actually going to use that today as well so a little bit of how this actually works we have aetherium accounts which are used for authentication and then we have this ID ID so D ID is short for decentralized identifiers we call it 3 ID and it's basically the reference you have for your identity in the three box

system that's used to get access to data verify signatures and also contains crypto keys so you can send encrypted messages to other people data is stored on ipfs and we're using a system called orbit DB which is a database the structures ipfs data cool and there's a bunch of apps those nifty apps that play around with this and are building empty box so yeah today we're gonna have a look at the three buckshot

system and this is called threads the API is called threads so what what are they like what is the centralized shop well basically we have sorry basically threads is a way to post messages and a way where you make a log of events or messages and each message refers back to the previous one so you can build like commenting systems and other types of share interactions and

we're also actually gonna take a look at how to do that today I kinda went through this orbit to be feed source there's like a linked list of events that gets like an ordering of messages and thread yeah so we have a few different types so open oh yeah sure yeah so that's a good question the the thread is or the underlying data structure is append-only but you can do delete events so if you make a post then you can delete that

post in the data structure so when you read the entire thread you'll see that this post has been deleted so so in the index of the database it will be removed but the log of that you added a message and then removed it will still be there so I think that answers your question okay open threads anyone can post to and however we have a moderator that can remove posts that are like maybe isn't fitting in remember only threads which is basically

you have to invite every person that is allowed to post to the thread and personal threads basically like a feed that only you can control and if you're familiar with secure Scala but it's kind of similar to that and yeah there's like a bunch of use cases for threads and today we're gonna make like a commenting / public chatroom system and but you can use it for like maybe content feeds or data feeds of some sort and one thing that we're kind of interested in is like seeing how this can be used in like proposal systems in the house so

basically allowing cows to like comment and interact with the proposal before actually passing it so I'm going to give a quick overview of like what we're doing this workshop and then I'll let you get started so this is in software building this is like login page so three shots three set it's just a simple application where we allow users make posts and interact with each other so we have different topics and each topic is basically a thread of messages

and yeah we're gonna use the profiles from three box and the messaging API and resolved it should look something like this so here you can see like multiple users posting we have a bunch of threads or topics and we can see the members or the moderator in this case of the shot all right so how do we actually do this well the first thing you need to do is to head to our github so get up it come slash three box slash OPCON workshop and clone the repo let me know if anyone still like doing

this or I figured go on its how everyone downloaded the guy went to the repo go so from here you can also look at the talk side might be helpful during the hackathon this is also linked in the readme and we repository you just looked at and we also have like a small small contracts in the DAP so if you want to be able to create topics in the in the app you need to have some small amount of rinkeby so you can request that from the rinkeby faucet otherwise i can also

send you some beef if you send me your address it might be cool to have a profile to see actually your profile being displayed in the shaft so to do that you can go to 3 box REO and sign in and create a profile all right so I'm just going to go through all of the overview and then I'll let you continue a bit on your own place once we have clone the repo we can use to npm install an ambien stork and

in the github repo we then have a few different steps that we can take to actually implement the entire app well okay so let's see where we're actually at so as and everyone been able to find this repository yes cool has anyone already cloned the repository and has it locally so let me know if not we can wait or we can just go on once you've found it install the dependencies and then run

NPM NPM start that should get you going to like just actually launch the app and you should be able to sign in but you won't be able to do anything in the app yet so let's leave some time for that and then we'll move on to the first step in the workshop yeah so if you want to create a profile so you can see it load profile in the app when you're like making posts you so it doesn't really matter because three

bucks is not on any specific network so you can just go to three bucks today oh and sign in with your meta mask and you can create a profile and yet please let me know when you have like managed to get the app running first time are people still waiting for their

dependencies to be installed or how far along are you waiting for that all right is there anyone that has like any trouble with any of this and needs some help or is it like fairly simple okay actually I might also do it oops oops

all right as everyone mostly ready someone's still working on getting the react up to run okay so if if you haven't seen yet in the repository there is seven steps you can take to actually implement all of the three boxing Chenal 'ti into this application so I kind of want to leave it to you guys to like do that in your own pace I'm also gonna do it on the screen as well so and I'm also gonna like walk through what happens in

each step but if you want to like sprint and do all of it before me that's fine and if you want to like take it slow and like try to understand it more deeply that's also fine so I might just get going but basically there are seven steps here that you can follow Michael maybe we should give like a reward for like the first person to like make it read and make it post in the app from from there settled cool so the first one who like makes a post and a

thread or creates a thread and posts in it will get a three box hot yeah ok cool so after you've installed I mean yeah I'm sure you've already way far ahead of me this anyone started on like these steps or not okay some of you house it seems yeah and feel free to like ask any questions yeah rinkeby now I don't think you should have to

change the code for just doing that that's interesting fun on contract address wait you're on the main area network sorry I know ours okay I'm not in the right folder okay so I'm gonna start with the first step and if anyone is having trouble or you just want to follow along that's actually where I mean the first is Inc

or import the three box objects three box and the first thing I'm gonna do is just to also actually the shut up looks like this you just log in without doing anything where something oh there's already a bunch of stuff in here interesting I don't know how we're gonna judge judge like who made is first I guess that's the first thread yeah I

mean it doesn't really come because you have it implemented all of the logic for the threads so like the first one just finished all the seven steps and makes a post in a trip not the first one that used to creates a thread if that wasn't clear so you basically have to go through all of these steps in order to make a post so step seven actually allows you to create a post and it's within with like each step has like a small thing that does that allows you to get to the thing so the first thing we're gonna do is just replace this

blocky with weight a 3 bucks profile so we're just gonna go here my profile and we're gonna wait box top get profile what this does is just like from the terrain network or from the three box network pulls the profile of the user the users at area Memphis wait for JavaScript to compile over here again now we actually have a user here

and you see in an image and if I click on this I think I should go to three bucks that I owe and I could edit my profile so let's actually authenticate the user so what what does authenticate the user actually mean well in order to allow the app to get access to the data in the user three box the user actually needs to approve approve the app to edit and read the data so we need to authenticate the user and what we're gonna do is simply we create a box object and we're gonna call weight talks the open box and

we're gonna pass the address of the user and we're gonna pass the etherium provider now we also need to await the data to sync from the network so how we do that is we will just create a promise this is actually bit annoying so I'm just gonna copy paste this from from the code example what this does is basically we have a function called on sync done which takes is a parameter another function that is called when the the

user's data has been syncs from the network and the reason we need to do that is to make sure we don't edit the users data before actually the data has been synced from the network so we just wrap this in a promise and await that promise now we need to authenticate the user to a specific space so a space in three box is basically a Coenen or like a compartment within i uses three box which is access controlled and what that means is that a user could give app any access to the shat space but the app be couldn't like get access and write to the shat space

so it's like a selective disclosure of data access so we're gonna just call open space and we're gonna call it Trish it's maybe what's it called yeah all right and we're also gonna store the user's VAD here so this is basically just to give the react app some state and this is passed to the stay here the D ID is the user's decentralized identifier and that's associated to the theory mattress it's basically used to look look up the data in the network it's also used to verify signatures from

that the the user does when it updates the data all right cool so now we should actually have the authentication system so I'm just gonna clear my cache because I think right now I'm already authenticated so let's see how this looks like when I click get started I will be prompted with a metamath notification so this is what happens when we call the on open box function I sign that and let's see if I get another one and this is now it wants me to give access to the 3-shot space so this is actually what we here called open space

3-shot and now we sign that and now we're logged in so that that's the authentication and then now we can't really do much more oops wrong thing so we want to actually display the posts that are in this these threads so I don't know maybe some of you have already gotten to the point where you can post things in the threads so I'm just gonna see if that has happened so now we actually need to go into another file it's in views it's called shot so what we need to do is to join the thread and joining the

thread it means basically that we connect to the network and say hey I'm interested in getting posts from this thread and that will sink the the thread data from the network so here's step 3 we wanted to wait and we actually have the chat space object which we cut in here from the props in the act app we were gonna call your in thread and the name of the thread is actually the topic which we get from here from here the function we going thread with topic and

now we need to pass some parameters so for the first moderator it's basically the hoops the first every thread needs to have a first moderator and the reason for that is such that they're all they're always need to be someone that can like be a moderator of thread so they can like remove any like post it doesn't fit in the thread or anything else and they can also add other moderators and I can also add members to the thread so we're just gonna call the owner which we get from this topic manager call so the topic manager is the smart contract which we actually just

register all of these topics and then we get if this is a members-only thread or not and now we need to add listener functions so these here we have this listener function and what they do is basically every time we get new posts from the network this on update function is called it's also called if someone removes a post and this on new capabilities is another function that is called every time a new moderator is added or a new member is added to the thread so I'm just gonna

add those in here and now we see that on update we call this update thread posts function which is used this function and we have a post here and array so we're gonna actually wait and we have the active topic passed in from above and we're gonna do get posts that should be it but this function actually throws an error so we use if it fails so we're just going to wrap it in a try-catch that I do something wrong

okay so let's see if this actually works and we can get a post from the network there's anyone like way further ahead of me or like you hi howdy interesting so let's see if we can let's actually see oh are you the first well did someone post in these other threads right that's not right yeah so this app is actually something we threw together so it's not hasn't

been like rid of all the bugs but you can see this red at least so this Oh someone looks like someone made a post here as well [Music] so yeah basically we can see the messages in here and we still see Blackie's because we haven't update we only updated like the thing that gets the profile for our own thing I think something might be buggy with the react up because the the post are showing up in the wrong order here yeah let's get going with actually displaying members

and moderators so in here we should be able to see the members and moderators so we're just gonna add this to the update thread capabilities oh I'm sorry this one doesn't yeah let me just do this quickly right and let's just do the same thing here

looks like I got something wrong we didn't haven't added a catch okay let's try to see if we can actually see the moderators no groups okay now the list members and list moderators Australia's again

all right now so now we actually see the creator of this red you still have blockage though so hopefully it doesn't the next step yeah so what we're gonna do in the next step is implement get profile for everyone in posts and we're also going to implement the profile hover here so we can get more information so I'm just going to copy this we need to go into some other profile picture file okay hmm did you do something differently from

what's in the example hmm interesting yeah yeah that's just because if you go you can just remove the console.log and

you should be fine okay yeah this way we had a try-catch because all of the posts are yeah does he mean like I just had this yeah this should be ready I think so this is what I should do it also had this can you try to read did you get that before as well no first time I checked their

counsel oh I mean I don't think there's a problem if everything else works it says I should be okay yeah but you what should I see it hispano something is broken I don't know can you try like reinstalling the dependencies I mean see how he closed all right not really that all right since I won't see what you

guys have posted about I need to and I also wanted to see your profiles I'm just gonna implement this story import we need three box and we also need the profile hover no I'm here we have a profile variable so we're just gonna do the same thing as in the app class get profile and in this case we use added dat of the user in the space which is basically the identifier that we get

from the other users here in the shot [Music] cool so now we're also gonna add the profile hover this is like a cool little react component so we can just throw that into the the JavaScript I think I need to have something like slash all right so let's see if we can get some other profiles in here

cool seems like some of you have posted an empty message and here's some someone who's managed to get in front of moly and we also have the profile hovers daily pictus let's see how if these profiles loads I think yeah here's a profile it's kind of cool have anything else here yeah I mean I don't know how I can really look at who created it first or I guess that each post should have like a timestamp

alright how's that possible alright that yeah let's have a look for eight oh let me just paste my product key all right cool so we got the most of the functionality here I guess some of you have already implemented the making a post I haven't really so there are two things we can do

I think I let's see all right so that's actually so the we have these two types of threads you can create in here so we have open chats and we also have members only shouts so in this members only shot only Molly can actually post unless more members are added so let's actually try to add some some of you guys and see if you can post in this Members Only thread first let me implement these functions and where were they at modules yeah if in order for me to like add you

as a model as a member you need to like send me your address but you could send that and maybe the workshop chat like that yeah because let me do this handle add thread member so we need to call a wait active topic ID number and then the thread member which we get from the react state I think and we're going to do the same thing for the moderator when we add a moderator so something like that all right so had any of you posted your

addresses cool so I'm just going to start adding some of you to this new topic that's members only so let's see if I implemented this correctly add oh yeah wonder if you can make post now yeah I want to know like which whom of them would be like worthy of being a moderator of this thread cool so let let's just what happened now no yeah okay I'm just gonna randomly assign not

as well well so now we can see we have two members we have a moderator and we also have the creator of the thread which is also a moderator yeah so that basically means that only if someone thinks that either his mom is in the shot or in this room or I don't know what else that would be cool so it seems like the access control actually is working very well so let me actually also add the ability for me to post as

well let's see mirthless and the components all right cool as anyone else created like a

members-only thread that you can maybe invite me to if so let me know I'll try to reload created one one thing that's a little bit annoying about this up right now is that you need to reload the page in order to see new new topics I wonder if it's just rinkeby the stone

again I heard rinkeby was down yesterday of course so this is a members-only thread and I should not be able to post in this no nothing happens sorry yes you copy the the address from here

so I'm rainbow moly my address ends with AC let me just paste it in here just add this other address to here as well did you say that you added moderator to this thread I remember sorry you are that you did okay sorry

is anyone having trouble with previous steps of the workshop and need some help maybe look wait can you repeat Oh so the hovers get shown here and not in here oh the code yeah so I think it's in profile picture you add the hovers by adding this component yeah

any hackathon ideas all right cool has anyone been able to create a thread and add moderators to it or add members to it like a private thread really trying to shop

you managed to get around the earth probably yeah yeah actually good posts yeah this right yeah so if you sweet

yeah yeah it's project shill oh did you add a moderate remember yeah strange you could see it seems like it's not getting updated yeah so I had an issue with members because that that actually throws an error if yeah let's throw us an error if if it's like an open thread yeah that was practice I just like I know yeah

perfect but and it's so even still thanks son so you have this one one deep a drink yeah I can't see members didn't you added like a bunch so for some reason it's not mmm did we care I really don't talk debug a new partner