FIL Frame Workshop - Building Onchain Data Storage Apps - ETHGlobal Bangkok 2024

[Music] hey hi everyone uh we are all gathered here to get to know more about what uh protocol Labs has to offer uh for this aaton so let's get started uh prior introduction of me so this is Rish developer Advocate at fi Builders and uh let's get started so uh let's get acquainted with what bounties do we have uh for this Hon starting with Fon foundation so you have 8,500 to grab along with stacha that has to offer 5,000 and then we have AKA who is another on RAM solution using which you can store data on filecoin so that offers you 2,500 USD with Swan chain if you have got any AI based uh solution that you can build on chain so you got to try out Swan chain last we have protocol Labs wherein you can stand a chance to win 1,500 all right this is perfect thank you all right so um hackers hackers hackers in the house so every time when you get started building your solution uh in hackathon something you might want to have in your kit is uh St kit wherein you can just spin up your front end application as well as have hard and smart contact functionalities in it and that's what filf frame brings to you so some of the features that you have uh if you want to to build your Solution on filecoin is maybe you might want to have a smart contract framework so fil frame comes with automated framework using which you can deploy your smart contracts in just couple of minutes then you have ready to use front end so you don't need to build anything from scratch and you can just roll out your DAP in just 10 minutes so we talked about various on- Ram Solutions so during storing storing your data on filecoin you can offer for various onr Solutions like maybe it can be lighthouse it can be stacha or it can be AKA for that matter last you can also have programmable storage as well as access control so let's assume that you have any private data or you want to have some access control over the data you can offer this solution as well and with defy uh you might want to have a look at crossin Bridge and that's what we provide it inside the kit itself using excla so lastly this is all about fil frame and you are now all set to power up your daps so how do you get started with so this is the portal wherein you would find all information about filf frame so you can take a moment for a sec and just scan this QR code and you should be pointed towards fil frame all right so let me just navigate to that and here you go so this is the homepage for field frame and you can just build your daap by just going to your terminal and hitting this five set of commands and you should have your smart contracts deployed as well as your front end setup in next 10 minutes so let's uh just follow this uh like a tutorial and we would be good to go all right I will just open my terminal and uh so the First Command goes like we need to create a file uh application so I'll just copy this straight away and hit it on my terminal so what you would love to have your project name as maybe I will just create a new frame so I will go for my frame and now we provide you an option as to what kind of uh starter kit do you want to convert this into is it something you want to use tacha as the on RAM service provider or is it Lighthouse or is it aawe or if you want to have deal client that is storing data directly on chain without making use of the on onr service providers so we have like four options over here uh let's carry on with Lighthouse for this demonstration so it would create me a customized uh dap for Lighthouse so uh as you can see that we just started with and we have some error so it just says that I need to use the node version which is compatible uh with the kit so I will just you know switch it to this particular version how do you do that yes so I have switched to node version 20 0.9.0 and I should be good to go so let's just hit the command again I'll just name it as new [Music] frame and select Lighthouse as my on RAM service provider cool it will take just some time to install all the node dependencies that are required so you don't need to install it explicitly again and again we have done all it for you so here uh we have our project is all ready to roll out under the name new frame so I will just enter the directory I'll just open the vs code perfect I'll just for you let's have a look at the uh the directory structure so inside package we have two directories for you the first one for the deployment of smart contracts and that you can access via hard at and the next one is nextjs which handles all the front end for your decentralized application so before deploying your uh smart contracts the very first thing that you need to do is just edit the environment variables and you will have to input your private key so let's just do that perfect so I will just grab my private key right over there so if you are new to even metamask I will help you out how you can do that I have a metamask right open uh there just go to Account Details and it will just ask me to enter my password feel free to grab my private key it's on testnet and feel free to use all the forets right over there yeah perfect so uh there we are and I will just edit my environment variables I will I have my private key right in place so I just switch back to the terminal and the First Command I go for is compiling my smart contract and that's Yan compile so uh while our contracts get compiled we will have we can have a look at okay it's quite very fast and we have our smart contracts compiled so next step would be to deploy it right so let's just hit the command Yan deploy so this command will deploy your smart contract straight on file con calibration test net no configurations from your side required the kit comes in with pre-build uh configurations meanwhile the contract is deployed let's have a look at what kind of contracts uh is getting deployed right over here so inside contracts folder we have Lighthouse nf. Soul which means that it's an nft smart contract that is getting deployed you if you want to have your own custom Smart contract you just need to add your smart contract in the contract directory and you would be good to do okay so this should take around next uh some seconds while the contact gets deployed and you can have all the scripts the test cases for the smart contract written right there the deployment scripts are all Al mentioned over here so you just need to modify as per the name of your smart contract that's it let's have a look if our contract is deployed so it's still getting deployed let's give it another 15 odd seconds and meanwhile I will just make you acquainted with how does the front end directory structure looks like so if you go to nextjs you have app section wherein you have various uh like navigations like Lighthouse so all the integration is inside the lighthouse uh folder itself you don't need to navigate it further then various components like the assets as well as various Pages uh the routing would you would be able to find out right there okay and the contract integration and all the contracts can be fetched inside the contract folder Perfect by now we can have our contract deployed so our contract is deployed and it's waiting for a contract to be indexed and here you can see the contract is verified so just need to to uh have some patience right there that it the contract verification would be in the next version of field frame uh for now we have the contract deployed on the Chain so we are good to go so now that our contract is deployed and our contract integration is done with the front end we just need to hit the command Yan run Dave and within 10 seconds 10 minutes we have our front end ready so let's head towards Local Host I will just enlarge this perfect so let's just wait for all the uh files to be compiled and we should be good to go meanwhile I will just uh navigate through the field frame website where you can see that what are the various components this particular kit comes with so you have storage deals you have retrievals you can look at data da concept as well as how fpm exactly works and what are the storage proofs and smart contacts associated with that and these are the three storage on-ramp service providers we have Lighthouse tacha and AA uh like we just discussed uh in few minutes prior that you can integrate this onrun service providers to store the data directly on filecoin okay we have the front end up and running right there and if you see that since we uh have like opted for Lighthouse as the onr service provider you can just navigate to Lighthouse tab by clicking on it and we have like couple of options here the first one is uh mint a private nft so we uh learned about access control feature so you can offer that but for you to see my nft while we mint it I will off for mint and open NFD so let's just choose a file from my maybe I'll just select this this looks good so I've just choosen my uh file that I need to store on filecoin and I will just send a transaction where it will min the nft create the metadata of the nft and transact that on filecoin so you can already see the CID of my file is generated and my data is already stored on filecoin Via Lighthouse service provider so this should take roughly around like 30 odd seconds and then your nft would be displayed there along with that we do have uh some status where you don't need to navigate through various documentation of wagi and you can have how you can actually read data from your smart context there so you can see like there are three variables which I have the first one is get total Supply what's the name and what's the symbol so the name of the nft is Lighthouse nft and the symbol is lnft and here you can see that it automatically fetched and displayed my nft once it got minted so don't need to worry about anything and you can just maybe I'll just refresh uh this parameter and here you can see now the total supply has incremented to one since now this particular nft collection or the contract has one nft in its store so that's how quickly you can just uh set up your application so you can just if you are someone who comes from like uh working more on the contract part you can just spin up your front end as well as deploy the smart contracts in 10 minutes so I hope the hackers would love this and meanwhile uh we like wrap up with this demonstration you can see that you can switch between the networks so we have integration with filecoin menet as well as calibration so you can do that as well as you have like the facility to disconnect your wallet and connect back at it again also you can copy the Q uh wallet address as well as display the QR code if you want to share your address or need that feature in your application so that was pretty much about how you can make use of filf frame uh maybe I will just go back to my slides and let's uh have a look at it like if if you missed or like uh you want to revisit how to make use of uh this application so this is a tutorial wherein uh you can just revisit the whole session and uh just relearn about how to use this uh field frame saket perfect let's just wait for I can see some folks still scanning scanning the QR code so let's just wait for them can you scan it yeah perfect uh and in case like you missed uh want to have like complete support during the haathon you can just join our telegram which is built specifically for this haathon and we would be always there to support you and resolve your any doubts right over there awesome so that was pretty much about building a dcent LS application on filecoin and spinning that up uh for uh the aaton in 10 minutes so that's what we did in exact 10 minutes as well so that's a good one to go so if you have any questions we can discuss that okay uh okay the first question is uh exactly how how to how can an app qualify for any of the any of the bounties I heard I heard that you is not enough to use uh ipfs you actually have to use fcoin right so that's an interesting question so what I would suggest you is like if you want to store the data on filecoin so filecoin actually guarantees you the uh store data is stored securely uh but on ipfs you don't have that guarantee so if using this on RAM service providers they does the same thing they have a JavaScript SDK using which you can integrate uh in the same way you store the data on file coin but uh on ipfs sorry so using uh stacha AKA uh as well as Lighthouse you can you know just store the data on using this on RAM service providers and the data would be directly stored on filecoin so that's the thing you need to do to uh become eligible for this B oh so we have to so to qualify it's to use one of the providers exactly okay hi um so I looked a little bit into it and it said like you need to have the storage deal made on fcoin but then when you look at the Lighthouse documentation it says until the storage deal is completely finished and it's verified on fcoin it can take up to 2 days which would be like the whole hackathon uh so how is that interacting with the Bounty uh right so uh when you are making use of Lighthouse it's an on RAM service provider so it doesn't stores a single single fly file uh in filecoin it would be aggregating all the all the data it will bundle up and then store it so if you are using it will the lighthouse SDK would still provide you uh a call back wherein you would be like uh getting the result that your data is securely stored even if it takes like couple of days or whatever time it won't take that much of time but uh you would be assured that your data is securely stored and the deal is getting created so even if we don't have the fcoin storage deal yet via Lighthouse that would be okay with the Bounty yep yeah this one yeah oh okay this is the website yeah uh okay I want to ask about uh so field frame uh field frame framework is like uh on data St apps what Mak make it distinguish from like uh web to data St like uh AWS S3 or uh yeah S3 what make it distinguish uh uh ex beside of uh decentralized uh can you just come again like can you talk uh okay what make fil coin distinguish from uh web to file storage like iws S3 yeah uh beside of decentralization right so the very first thing is it's if you just uh navigate through file coin documentation you would find the comparison between the existing centralized solution for this filecoin is way more cheaper uh data storage as well as you have an option to you know uh the the one who is storing the data he can't see your data exactly but on like any centralized solution or any existing web2 solutions they do have access to your data right so that's the first one which you can say as well as you here you get an an option as to how many replications of your data do you want to make uh as well as which service which service providers do you want to store the data and for how much amount of time do you want the data to be stored so this all customized ation apart from just being a decentralized Solutions you get these features as well uh okay thank you I guess that's it and we are ready to go happy hacking and see you excited to see you what uh you build on filecoin thank you [Music]