NEAR Protocol 🛠️ Decentralized Frontends Made Easy with BOS

[Music] okay so hello my name is Boris fania I'm from near def hop um I'm going to do today um quick Workshop I only have like 15 minutes or 20 minutes so how do what do you need to start coding on on on boss right first I want to explain what is boss you know boss on the open web stock is the idea that the you know the all the all the all the stock should be decentralized so boss is the decentralized front end basically I like to call it it's not accurate but I like to call it like react react on chain basically called your uh boss uh component deploy it on on boss and that there will be unchain yeah what as long as the near near validators are there the code will be there right so the components are maintained by the validators by the nodes so and what a component you know basically components are small pieces of code that you can deploy react code and basically you deploy it and boss will do the composability through applications that's a main idea so this more or less a stack so you can you have the you can have the discovery you have a platform you have the blockchain there you don't have to use near on the on the back end you have to use any EVN compatible blockchain and then you have the components on the top that's the basic architecture so there are three ways you can do easily do this we have uh the online idees one is Jutsu one is the near the native online IDE I will show all this and you can but you can also use the vs code plugin you install the plugin you do the code you can see the the you can see the renders and you can deploy from there you you only need near to deploy right the rest is the the back end you you select the back end you can use of course the back end but if your smart contracts are in solidity or in you know ether ethereum polygon you just can use ether GS and connect the smart contracts that's fairly simple if you need any gas money for the hackaton you let us know we can send you all that you need more than enough you can you know hack and deploy many times times this is the basic architecture so basically it's uh the a full application has multiple components you just need to do each each one we have a lot of them pre-made so you don't have to do it yourself you just you just and either import the the component or copy paste the code is free is is is open sorry every single component is open sourced every single component is available to anyone else so anyone can be will be able to see your components and you will be able to use other components of course we encourage I mean if you're using I don't know a a like button and you want to use a r there we encourage to use it but we we expect that the final the final application have original components to you know to a original app right so we have some with some pre-made components I would show them I would show them later but we have some bases you have like uploader that uploads image to ipfs you have one that do the overlays on the on image es H you can have one for in infinite scroll to upload files to do the tool tip you can use radics we I'll show a little the code of of them um okay I will at the end I will talk about the hacket on this let's talk a about the widgets so these are if you go to documentation uh do doc.org I I can I I will I will put the links later you will have some the basics so we have the big the widget oh all the documentation is boss enabled so it became similar I would show the ID later but if you have something like here like the the basic wiet is a if you see if you're are familiar with react it's just a basic react component you have some variables whatever your return is displayed so if I change this here it will change so it's very simple this is a very basic component and then we have other you have the the uploader this is a code for the uploader you can upload an image and it will direct it to PFS you can upload files we have one that you know renders markdown H the the overlays the inflence scroll the this oh this is very important because we for using CSS the probably easiest ways to use a style it the component so this is uh is is there you can use this one and then here in documentation we span a little for example if you want to use a Smart contract inter interaction we have the code to do the SMART contract interaction action is very simple this is for smart contact interaction with boss if you're using B with near it's just it's fairly simply to do it but if you want to use it uh uh using uh ether GS ethereum we also have a more you know expanded it's basically it's the same use in ether GS it's already imported you just have to do the same you will use you create a provider you get the signers and then you start calling whatever you need the balance it the address is whatever you need so you again you will need the AI of the contract you will need the address of the contract but from there just call in from there we also have a a good sanction here for the style components if you want to use you know if you want to implement your own CSS it's very well explained there but you can go there's a lot of detail there of course we be there on the on the booth if you need more details you can knock or door and sadly I only have like 10 more minutes so I can go into details but usually the CSS part is the one they they come to us to ask more how do I this on the CSS how I can make it look like that these are the smart contracts bar so that's this very is well explained here but you can come to us and and so I will go you can use uh the the native the native um ID uh the sandbox H the the links are there or you can use juu I like to use juu but it gives me a little more tools right of course they are all ER free to use you just have to go to jutu AI you connect your W your wallet if you don't have a wallet you just go to Miner wallet do I think I know this.org see Miner wallet.org and get a wallet that's it if you need funds to fund the wallet and start the pl just we send you the the uh we send you a link so you can get the mment funds but basically is it's kind of make it look to vs code so you create a component I create this component calculator for this for this for this Workshop I just created like 30 minutes ago is just create a GSX I if you're familiar with uh with um react you know it's a GSX file and what I actually did I asked chat GPT to to create a to write a calculator and I just copy paste the calculator here and it gave me this calculator right I did some changes I use that but basically that's it it so that's it and then I just hit deploy when I hit deploy you will ask me I'm I'm saving this data because what is what is actually happening was saving this code on chain right then we have a layer a layer that will make possible to be read as a web online but what is happening is we're saving this this code on chain right so I will save the data it will ask me the internet is a little slow is deployed uh this one so let's create a new component so new calculator because this one he recogniz it does so didn't let me copy paste the code copy paste where is the new calculator I put it here here and then I will deploy again so here is you can plan how much data your application will use long term and you can prepay it here so you don't have to add later for a hackaton you probably don't need to add that but you not deposit but in when you are deploying for you know production you will have to have this in mind ER if this case I would say I'm not deposit I'm just paying the current the the gas for this transaction and it will it will raise my wallet this is what it cost me like 12 12 cents this is the only payment you have to do the component will remain in the blockchain as long as there is a protocol up there so so that's the only thing you you don't need to repo to like like monthly fees like to verell or anything the process is similar and one is one it's deployed I just go to my you know let me find my components here so new calculator is here and it's is is now launched you see it's online and you can anyone so you can everyone will be able to see the the everyone will be able to see the the code you will be everyone will be able to Fork it and and then I can see let's see here and this is a public component now the component is is open is available everyone can import it into you can use it so the component is there so you can create multiple component compose it into your single app or create a single app with with you know all the code in a single file there's many ways you can do this at the same way you will do a normal react component application so this is all the thing you need to deploy just get your component put it I mean you can use the the I me just here is there you can use a Sandbox this is the one we have this is is is do the same jutu but it's a little simpler has less tool doesn't have the integration with with uh giop stuff like that but you can use this one is very simple same and you just uh R preview it's same thing you can pull it from here I can click pull it from here it will be the same process right so it's all the only thing you need to do to deploy is get your component put it in the AI have some gas and polish it if you if you want to do this all the app all the app in a single comp component you can do it you can have multiple component compos it later is is this some this is also you know it's part of your of your it's very simple we also have some basic uh uh data things we have like H Keir storage you can use directly is is here uh well is here documentation if you need if you want if you plan to to to use data storage come to us we can help you um if you want a good how to use a Smart contract so we have one there the Leo Leo has basically all the functionality you need to deploy the it's using the AI is using the is getting the providers and getting balances you can get it from there or you can of course you know come and talk to us um so that's this is the basic architecture of of of the of of this so I don't have much time left but so I will talk a little more about the hackaton [Music] um uh sorry so so the hackaton for this hackaton we have one F Place $3,000 two second place $2,000 three three third place $11,000 what we're asking for the prices you know is it have that your application have a comprehensive functionality something that works ER these are you know production great user experience I mean it's is the closer you can get to that we understand it's a hackaton but it's we we we expect that is an application that could be used even if not complete it's something that you someone will want to use H we want code that is readable and we want call that is usable that's what I make an emphasis at the beginning that all your code is public we want that whatever you can do we we someone else can you know take advantage of it at the at the end near focus is on on public goods so we we would like to see reusable components H and open source component bonus it's a think that every code you we hear it should be open source so bonuses if you can get some feedback of what it means to to code with boss if you you know spread the word but these are the main things but the at the end the the the basic if you have to to win the the Bounty you have to have a boss component PO on Main net or test net I we have all the I only have the the the funds for mainnet so feel free to use mainnet we send you the the the tokens um but that's the main requirement you have to have a functional usable react boss component um this is the website you can uh this is the QR code of the website something I forgot we also have the the vs code um plugin right you just search for it here you go to boss you and you will find it here it's very easy to use near boss ID I have it already installed it's very easy to use it will show you this this part this part will show you you can you you connect your wallet you can log in it will fetch all your components you are public so you will have all the files here here this this one and then you can deploy you have this it will it will render it will render the the the preview and you can pish from here right away from here you just going to have pish the the component so you the same thing I did on the ad you can do it from the from the BS code if you prefer to to work on offline ER we I mean you have to use whatever you have there like you you cannot export other components if you want to use other libraries or or react er um libraries you can use something called gateways is is way more than I can cover here but you can come to us there are some examples on documentation how to use W with there are some people that already did use like gateways so you can use an example but basically you you can you can connect other libraries that are not if are not the native ones here so H I think I'm close to to the end so I don't know if you guys have any questions H I think this cover most of the of the things you will need to to start coding I really recommend as a strategy we know and we've been seen this in other hackathons you leave the front end to the end because the the core the meat of your application goes to in the in the back end but if you're doing boss we recommend to start doing at the beginning because it have a learning curve unless you already know boss so don't don't leave it to the end to start doing that at least get the basic at the beginning so when you get get the point you you're you're start doing the front end you you already have the basics covered right ER again we'll be there anything any help you need we are happy to support um er we I mean no matter how how technical the question they're always there to to help um yeah any I don't know if you have any questions um almost in time so let me know if not you can CCT us on the on the on the booth