Build Better with 3Box’s User Data Cloud – Rachel Black

so hi my name is Rachel and I'm gonna be talking to today about how to build better we're three books user data cloud so yeah this is me I'm the Deverell lead at three books I joined in November this year so been with the team for about four months if anyone wants to follow me on Twitter please do was like more followers come so let's start with the problem statement we know that user data is broken on the web for users obviously they're very stressed this is something that you know most people are kind of worried about on some level today well it's not really a walk in the park for developers either because you're having to manage a lot of complexity around user data and all the infrastructure that goes with that and there can be very demotivating when you want to focus on the the core value of what you're building and not maintaining all of this data and also there's risks associated with this as well so hopefully you don't want your users data to become a hacked or exposed but also things like gdpr etc so we're proposing a system where we build data systems around users rather than applications so if you see here on the mossad over here we've got what we're kind of used to with web 2.0 whenever you create a profile it goes on to like Facebook servers or the government or whoever is running that that site and you really lose control over it it doesn't really belong to you after after you've created it to move to a system that's more like the one on the far side there where we actually have your data centered around you and these applications that can use date so rather than manage it so it's kind of a way to flip how we think about dates and it's quite a fundamental difference in how a architecture architecture user data this is like a lot of benefits for users first of all we can create systems that give user much more agency in transparency over their data and of course this is very empowering for users we can give users cryptographic access control and we can also build data that could be used across platforms and applications so you don't see users getting locked into sites that maybe have their social graph or they can they don't need to recreate in the same profile data every time they join a new application granular access controls you can choose what data you give to who and like hopefully this can stop user data being the product which we see a lot of today and we can build applications that are of true value to users so the technology that's well the movement that's kind of powering this is decentralized identity and this is the the sphere that we're working in at three bucks so a tree box we have a user data cloud and this can take a lot of the hard work out from you from managing user data here I have a very high level diagram of the technology we're using at 3 bucks so you can see here that we are integrating with etherion wallets bit better mass Portus whichever wallet you want to work with and then from that we are generating a three ID or a decentralized identifier and this identifier has keys attached to it so that users can encrypt date so they can sign data and the data is ultimately stored on ipfs store three box we're using orbit DB which gives a database layer on top of IP FS there as well and then we can see at the bottom you can pull this into your decentralized application so like hopefully something you might be building this weekend at the hackathon and it will allow you to access the users data if they consent to it within your application so that's kind of how it all plays together on a very high level and it's really nice because as developers we can actually start to see that we can like separate out our app logic and what we're building from the kind of data management system so here we've got you know you're awesome DAP we're gonna see a lot of these this weekend hopefully a lot with three box as well so you have your app logic you might be using a blockchain whether it's a payment so if you're using a smart contract and then everything on the far side there which is in a box this is can be managed for you by three box but you can actually make use of it through our SDKs so really it actually simplifies your life a lot as a developer and you don't need to worry about you know running a server or how you're going to create different identities for users and how you're going to manage that it's taking a lot of a lot of complexity away from you and making you focus on what's happening over here which is hopefully what you want to focus on as a developer we can actually build some really cool products that are really gonna fit our users need yeah for developers this is awesome because we have distributed database storage you don't need to worry about working with ipfs directly you can use three box and it's a very intuitive developer experience I'll give you a glimpse of that in a minute we can build data rich applications so giving the kind of functionality that users are used to from web 2.0 into the kind of distributed and web point three space and really nicely you can do all of this using just front-end code I'm a react developer so really like this yeah it's pretty awesome here's an overview of a web development or adapt development tools so we have spaces and profiles api's this is for user storage profiles we we made this is our first kind of storage space and it's been designed with the view of having profiles and and global global name spacing essentially but it functions very similarly to spaces which can be more context specific and for your app both of spaces and profiles you can either store data encrypted in private or you can store it just public there so depending on the data that you're handling Supt we've got our threads API so this is where it starts to get a lot more social you can have groups you can have members and you can create you create collaborative communication so it's really good for anything that's more sociable so content feeds walls messaging this kind of thing we have persistent threats persistent threads are persisted to ipfs as the name suggests and we also have ghost threads ghost threads are making use of IPF's ipfs pub/sub tool to just facilitate in-memory peer-to-peer messaging so really good for anything that's ephemeral that you don't need to persist great for chat if you just want to have a kind of chat that you drop in really easily and to make things even easier we create a suite of plugins and this is gonna be a gold dust and hackathon because you can just drop these in these a react components that are using the API is underneath them to give you like pretty much out of the box functionality so things like profile hover it's a way to view profile we also have a profile edit component a comment thread a chat box as well so there's a lot of ways you can use these in the hackathon and very excitingly today we are super pleased to announce a big milestone in a development sorry my bad there we go we have we have launched our confidential threads API it should load in a minute this is really really excellent for development because you can sort something here apologies about this we've we've launched our confidential threads API and this will allow you to create threads that can be encrypted so you can have messaging you can have encrypted chat across groups so there's so many implicate so many uses for this in a hackathon whether you want to make a kind of private social media site we had somebody on our channel joking about you know it's Valentine's Day and we're here so maybe somebody wants to make a dating app using you know confidential threads there's a lot of use cases you can have this kind of encrypted thread messaging in your app I hopefully when I take four then it will actually go to the next slide okay cool so of course we're sponsoring bounties so we've got 5,000 died in total so it's pretty big the the first one we have is best overall integration so whatever you're using three box for insurance that one we're looking for some really inspiring and innovative use cases there most social application so that's an application that specifically uses our threads API that could be the confidential or regular threads ghost or persistent it's up to you but a kind of a social application built on top of three bucks and we've got a thousand die for that as well and we also have bounties for storage a use of our plugin and the last one over here we have a no code integration with that hero so DAP hero is another project that's here and they've built a no cool no code tool which uses a three box and web flow so you can work with that if you're completely non-technical if your product manager if your business this is a really nice way to prototype in and build in a no code environment so yeah that's all bounties cool so I was gonna do a little quick demo so I'm just gonna jump over this a little bit bigger so have a bit of boilerplate here and it's running in the browser here and we can see we've got Justin boiler plate and it's connected into meta mask and it's pulled my meta mask address and it's enabled the provider and I'm just printing out their theorem dress looks pretty ugly it's a hex code it's not very user friendly so here we have this is the code that's just enabling better mask and then you can just see my cursor first thing we're gonna do which is the most minimal way that you can use three-box is to use our profile hover component and all you need to do to do that is just import it i've already installed it on in this boilerplate profile hover from profile hover and then i'm just gonna scroll down to where i was printing out the etherium address i'm gonna replace it with the profile hover component and we're gonna see that instead of an ugly hex address we're gonna get a much more user-friendly profile scroll down here we go ever and it's just taking one attribute here which is the use as a theorem address if I save that and go over and reload as NPM start and once it starts we should see that we'll see that nice three box profile so we can see that already this is a lot more user-friendly at the moment we still got the hex address but we can just add in another attribute I think it's show name there's quite a few attributes that you can customize it to it's all it's all documented save that and then cool so we've got my name there Rachel where is this name coming from you might ask if you're completely new to three box you can actually embed the functionality to edit this profile within your application it's just the global three box profiles API but you can also go to three box hub which is basically the app that we built essentially to to showcase what's possible with three box but it's also like a dog feeding site for us and you can see that this is where you can set up your profile and if I change something in here it will also be reflected in the profile that I'm using in my demo app so it's actually really nice it users can once they set a profile up on here then any app that's enabled with three bucks they already have a username they already have an avatar and they don't need to go through that the pain of creating it all over again but as I say this is like the lowest touch use of a three box you can see it really doesn't take very long at all to get rid of those there's hex code so like hopefully we're going to see very few hex codes in this pack thumb because there's no excuse see the next thing I was going to show you quickly it's just how to authenticate with tree box and how to store some key value data with Reeboks so I'm going to pop over back to my code for this we're going to need to authenticate we're going to need to open a box and then we can work with it so first of all I'll import the three box library three bucks cool and then a second I'm just gonna copy and paste a little bit for this because I don't want to so in my reactor I'm going to go down to here which is after where I've in neighborhoods the provider that Mehta myosin jacks and I'm actually going to start working with three bucks obviously we want to have a provider enabled and we want to have the users aetherium address before we start working with otherwise it's going to throw ours so in here what we're going to do is first create an instance of three books so we have my address which has been saved to state we have spaces you can see this is an array so if you had like multiple spaces that you want to draw it with just add them into the array we've only got one here then I'm going to create the box here and I'm just passing in the provider that meadow mask injects and then I'm gonna authenticate it so here I Manta cating with the spaces and the address and then just calling a sync sync method on it and then saving its state so now that we've done that we can open a space which is so to open a space it's pretty intuitive we're just using async/await because obviously we're working with some asynchronicity when we're we're working with three blocks and the ipfs network open a space if that's based on the exists it will create it and then i'm setting that'sa state so now that's all I need to do to set up authenticating with three box and creating a space and and everything so this is much more minimal than kind of you know potentially working directly with ipfs and trying to set up the systems around there so now it should be ready for us to set some data to it I'm gonna try and retrieve it as well so again we have very intuitive developer experience so you can see we just have space public set so that's just setting some data to the public to setting some data in public form to the space and it just takes two arguments these are key value pairs so here we have the first arguments going to be the key and the second one will be the values say key is test and the value will be hello world if we want to change it and store data in a private and encrypted way we just switch a public to private and we have space dot private set and again I can use the same key because I'm in private rather than public here and I can pass in a different value of shush for private cool so if I save that of course we want to actually retrieve this so you know public message it was assigned to await and then just as we have the set method we're going to use the get method on the same space space to public get and this only takes one argument we're just going to pass in the key of the value that we want to retrieve in this case its tests and privates message oh wait space duh private get and test okay I'm gonna try and console ugh this out and moment of truth hopefully I haven't been a typos in private message save that and then if I jump over to the browser again open up the inspector and it should if I hadn't attenti kated with his face before I would see meta mask asking me to consent so everything we do with users consent but if I have already consented then it might not put up might not pop up and if we give it a minute hopefully once it's connected to yeah we can see it it's just small there we go so we can see it's actually a console logging out the hello world and the shish which are the values that we wanted to retrieve from the users public and private storage there so pretty straightforward pretty minimal way to work with it and certainly a lot less pain than trying to configure working with ipfs directly and i'm managing user data around that if anyone is interested there's actually a whole tutorial which takes you through connecting this up and you can like start connecting it up to the front end and creating private and public storage so I can share that with you but yeah we are also we have a lot of stuff online so all of our documentation zat dots three box to IO we have a very active discord channel and all of our dev team are on there throughout Eastern River pretty much on there all the time anyway which you can find at chapter three box store io medium obviously everything we do is open source so you can check out our github and also just the kind of typical we are hiring slides so if anyone is really interested in three bucks it's a really awesome product and a great team so yeah just get in contact these are the roles that we have open yeah so thank you we also have a stand just at the top near the stairs on the second floor so like pop by we've got a lot of whiskey stones we've got like some swag and like we're happy to chat to anyone who has any ideas and wants to figure out how they can work three blocks into their hackathon project as well fantastic thank you okay we got time for about one question okay so this is a little bit different than the content you presented what I'm curious about the access control the access control is there so the the functions there other cryptography there is that all baked into three box at this point or there can you plug in other options or protocols so it's a little noisy yes I couldn't quite hear so it's around access control and wondering if it's possible to plug in other systems to which systems do you mean like other block chains or say of course I'm blanking on the name in public here I'll catch you later Coco Coco and but yes anyone is interested we are actually blockchain agnostic by design at the moment you know we're working with the theorem but we will be integrating with other block chains in the future because we don't touch the blockchain directly so it's it is opportunity to kind of work outside of it theorem but this is very much where we are right now okay one more question so I saw in the slides identity wallets as well as the three ID so what's the relationship there is do you have to go through obviously it looked like you don't have to go through three ID to access an identity wallet was that correct or is that work I didn't see what it so today I've been showing you three Box J S which is the SDK that you'd be using if you weren't a wallet basically or if you didn't want a free box J s works in the front-end JavaScript environment I don't see what it works with a wallets but it also works in a node.js environment so depending on your need yeah it's just a way for you to like embed like three ID directly into the wallet the private do they does it mean that the content is encrypted or just not visible encrypted the content yes so the in the private space the the date shows stored encrypted yes oh cool well thank you yeah come and visit our booth we've got stickers and whiskey stones Thank You Rachel [Music] you