Swarm Summer School ‘21, Day 3: Workshop by Mustafa Mahmutovic - Connect to Fairdrive

okay uh then i'd like to call forward mustafa mahmutovic to give a demo of airdrive hi mustafa hey robert nice to nice to see you um yeah and thanks gregor for introduction of fairground protocol and fair drive itself we built that together and [Music] my focus would be more on technical side of virgil protocol and fairgirl and how you can interact with fair drive as storage unit through ferrous currently and if there is another steps compliant we will extend it on the very jar protocol let me just start sharing my screen just a sec so as gregor already mentioned we want you to build your dapps faster so you don't think about back-end services and login and storing and calling the apis and everything so what to be started to build is the fair drive protocol itself so the idea here is when you are creating your dap you inject the fair drive protocol as a package and you call all all the components that fairground protocol offers and you don't think what happens beyond that what happens behind the fair drive protocol is currently he's communicating with various dfs which is decentralized file system that communicates with big client and saves users data and fetches and manipulates the data itself so uh i won't go about the fair drive and there's our protocol idea because gregor already mentioned i will just go into tech details so what we created on the free drive protocol level is an npm package where and you can download it it's currently in the sandbox mode and it's in development you can download it by running the yard or npm called fd dash slash dash d slash b it's like version test protocol and when we publish an official version it will be fair drive dash protocol what we created here i will just go through the components that we already have and then i will jump into the code that i created just for testing purposes and showing how easy it is to start developing that using the first drive protocol so most of the components that you already have is the login component where a user enters his details to access his fair drive account and you will get the session cookie and the password that you will need to open the pods uh we also have the upload file it all of these components are shown on the dracula that gregor already demonstrated with his markdown the markdown editor and all of these components as you see just a sec are easy to inject it's just import that component and call it like this if you want to let's say upload the file you will probably save the file as a blob and then you need to send the file inside the component as a parameter for the component itself and the file will be stored on the fare drive same goes as loading the files you will call you will first import the load files component you will store the com files locally on component level on the using netflix so as you see i didn't mention this this is built for react apps it's not for angular but we will tackle to cover all of the js frameworks as front as as front-end frameworks so it should in the future it will be com it will be components for all of the frameworks that exist or are mostly used so you will use the hook on local on component level and calling the this function this component called load files component you will fetch the files inside that pod and store it on the component level where you can display to the user as for opening and listing the pods it goes the same you import the component you set hook on component level and you call up the component itself to show that in code and how easy it is i will just show something that i did today so what i what i did it was i firstly installed the package as fd dot dash dp dot and call up three components the login list pod and open pod component inside my component i set three hooks like the password password is needed to open the pod itself and get grant access to pod and listing files and uploading the file in that pod this hook will be used to set all the parts that are associated with users account and last one is for that we want to open as you can see there isn't much code it's listing calling one function list all parts calling second function to open the pod and this is the third component logging component so when user enters password and it's correct when logging component returns the password you will have functionalities on these two the old list components list pods and open open bond component so far just a sec let's open that app itself this is the app so as you can see this on the screen here connect the pair drive i call it this component because we don't have any password stored from the pair drive and when i authorize my app i should see the button called list pods and list part component is this one and just a second let's open the console log and network and when i call the list parts i now have listed all of my pods available and when i click on it i will open them so uh interaction with this component list pods call up the function on ferro s that will bring that will return all of my pods under the username lucky the haha and the home so as you see and if i click on the home just a sec my pod is open successfully and opens us actually and i have access to that same goes to this one i opened it successfully to check that one up there no okay i can use this one as well so it goes the same even on the dracula what we did is just inject the components on on the dab so we can access authorize okay yeah yeah and if i click these are my pods same ones as are they here and if i click on one and load files i will have like multiple i just call the component on the opening files for the implementation if you want to go inside most of it it's done in react if i open the component called all models and connect to fair drive what we did here for you is that we receive the username and password from your app that you provide us store it and call login functionality inside the ferrous so far and we return the response to your to your app and you store that response locally and then you have the access to uh various functionalities for the user what else can i talk about um i think that that covers the fairgirl protocol itself uh i just wanted to show how easy it is for you to start developing app so you don't think about uh handling connections with backhand calling the axials handling errors handling responses from the backend services all of it it's done in the fairgirl protocol it's plug and play system for your dap development um and i'm ready for questions thank you mustafa uh for the demonstration if you have any questions feel free to ask me in the q a section or raise your hand and you will get the voice with regards to fair drive in the meantime mustafa what is um with regards to the ease of use of the system what was the most recent feature added that you enjoyed most recent feature added is listing all the files and on click opening the files like what i showed you here this uh oh i'm still screen sharing just confirm oh yes you are i uh on the dracula i didn't do any coding of this card i just called the fergie protocol component called list all files and this was the view and it has integrated on click functionality when you click it it will open the file itself it will return the file readable for you that was like the most interesting component that to build as a developer when i want to list all the files i need to think about designing it listing it the click functionalities and everything here we offer like displaying all the files from the pod and when you click on the file it it will return you readable readable object to your app where you can show it as a string i i show i displayed here as a text okay um let's try to see uh don't have any further questions so i'd like to thank you again for the demonstration if you want to know more about fair drive of course gregor has provided some links as well in his talk uh be sure to check it out how it could aid you in your application development let's see we're still screen sharing mustafa yeah okay yeah that's it so thanks again um you're welcome and all of these can be fined in the github repos under affiliate society organization so fairdrive is there publicly open for you to investigate the development and itself virgil protocol you can find the implementation there and the documentation how to use all the components that we provided uh and the dracula is as well there fair drive photo is there all the mini tabs we implemented for for testing the protocol itself so if you want to check how something is done it's on the virgin fair data society's repo