# Zero To Dapp | Devcon SEA

- Channel: [Devcon](https://streameth.org/devcon)
- Date: 2025-10-07
- Duration: 1:16:47
- Watch: https://streameth.org/watch/yt-lRo-TBLTgzs
- YouTube: https://www.youtube.com/watch?v=lRo-TBLTgzs

## Description

Learning Web3 programming. There are so many different tools and protocols to learn. Zero to Dapp is a workshop series that builds upon collaboration between different projects to guide the students from zero to their first Dapp. In this workshop, we review our learning from previous editions to encourage others give their own Zero to Dapp. Then we'll give a shortened version - usually, this workshop takes between a half day up to two full days. But we are fast learners at DevCon, aren’t we? ;)

Speaker(s): Simon Emanuel Schmid, Rob Stupay, Abena
Skill level: Beginner
Track: Developer Experience
Keywords: Layer 1, Layer 2s, Tooling, DevRel, Live Coding, onboarding

Follow us: https://twitter.com/efdevcon, https://twitter.com/ethereum, https://warpcast.com/devcon
Learn more about devcon: https://www.devcon.org/
Learn more about ethereum: https://ethereum.org/ 

Visit the https://archive.devcon.org/ to gain access to the entire library of Devcon talks with the ease of filtering, playlists, personalized suggestions, decentralized access on Swarm, IPFS and more.

Devcon is the Ethereum conference for developers, researchers, thinkers, and makers. 
Devcon SEA was held in Bangkok, Thailand on Nov 12 - Nov 15, 2024.
Devcon is organized and presented by the Ethereum Foundation. To find out more, please visit https://ethereum.foundation/

## Transcript

[Music] hi everyone I welcome you to our session today I know it's early but I hope you're still ready um I'm really excited to present the workshop Z to De together with Simone and Rob the topic is about how like a new former C to dep how to onboard the next wave of Builders across the world short intro uh short overview I will talk about what exactly is here to dep how it how did it started what can you expect out of this session what is e and then we have a handson experience with um the graph remix and Silo zero to depth the name the first edition started in E San Francisco 2022 it was like a way for um everyone who is familiar with hackaton it was a way for hackers to have a preh hackaton experience a longer guided format more Hands-On dedicated workshops because during a hackaton usually have like 30 minutes um technical Workshop where sponsors are guiding you through how to build on their product but usually even even though as a how should I say as a newb experience hacker this Workshop is a little bit short um it does not really give enough Insight which is why some organizations start have hey let's have a preone preone workshop but you have longer format and each partner session builds up onto the last one that's why start zero to dab you start and the session uh the goal is should should be that at the end of the session you as a participant you have built a dep from the scratch the format is was like 30 minutes you have a theory followed by the 30 minutes execution um after this um after this Edition in 2022 I think it was it took place in 2023 in Paris after before the EC hackaton and I'm a haon a and I picked up this concept and I was like hey when I founded ethra in 2023 I taught as a way to on board especially new hackers why not having this format as well as in Ghana it's and this is where the ethra zero to dep um Edition found its way I think one of the added value of this format is also that different Protocols are able to collaborate within each other for example we had the graph last year but and also remix and this year we had um circles participating I mean the format is the same but which protocol are participating can differ and Vary from City to City another way that also adds value is as a hacker especially if you're not really familiar with concept of hackerone we have many hackers they just sign up for the zero to dep and they felt confident and then after they sign up to the hackerone because the hackerone itself can sound intimidating if you're really familiar with the concept but if you just come for a one day or two day workshop gives you a little bit of insight of what to expect you can also ask K questions with the protocol it's more like um a more it's a smaller setting you can also have a little bit brainstorming team formation and based on that we had many people who also attended the hackaton itself the form you can have it in one day or in two days I mean in a last year we had it one day this year we decided to have it sear on two days we had a beginner track as well as advanced track so the format and how the length Etc it's pretty flexible but it just it should be that the overarching goal should be that at the end everybody all the participant have finished um building a dep within one or two days are there any questions so far okay now I'm happy to talk about a little bit about ethra um I found as as you might have heard I'm a hackaton aado I love attending hackaton I've attended I don't know maybe 15 e Goa heon the past two years um I realized that usually when I go to places I'm that are many women and also not many African people and I was thinking okay if people are not able to come to places like here in Bangkok or Brussels or San Francisco Etc why not bring ethereum to Ghana this was the idea why it started and last year I found a bunch of people we were like hey let's create this Hub it has never happened in West Africa and and yes we were taught like combine International people with local people and creating a hub for anyone who wants to enter um the eum universe and then create Amazing Project um the reason why we doing this is I think we also want to bring a little bit a different conversation to the developer ecosystem globally bring New Perspectives um and providing appealing opportunity for companies who are looking to higher people remotely because hack is like like I would say a mini R&D if you always host hackaton in the same region I think you should always have the same Solutions or projects but if you host hackaton in different regions then you also get new insights on different how people are using your project because people always build what is related to their local needs and solve local U problems and I've been a hack I've hacked in Bogota I've hacked in New York I've hacked in bangaluru I've hacked um where else many different places and always the hack I always thought I will not see something new but each time when I go to different places I'm exposed to different way of people are coming out with solution I think it's very interesting and if as a company if you're interested to expand have a more holistic broader perspective on how people are using your tool I think you are not you cannot miss of hosting hackaton in various regions and being exposed to different different needs different um perspective and fresh new ideas um which is why I think it's a win for those who want to attend hackaton but also for companies who want to um expand a new um region and as we all know I think African continent especially West Africa is 75% of the population is 7 below 35 years it's a huge youth population and I think the future of I don't know maybe the tech or Tech Sav is going to be then it's just right to have um entry point or way to harness this huge potential Market okay and yes I mean I said we identified this opportunity in 2023 none of us had really like we come from event organization background I think we are just very curious people but believe me if I knew if we knew what we what it would expect us I don't know if we would have done this but we very happy and I think it we have grown as well and yeah last it was huge success which is why we did again the second edition and popular demand we will do a third edition as well next year so if you're interested to attend a hackaton outside of the popular path you're highly welcome to attend um arra in West Africa we do annual hackaton but we also collaborate with existing communities for example python Ghana react Ghana these are existing web two and matured communities and based when we collaborate with them I think we can leverage on their synergies um also Swiss Embassy GH also get notice of us and they also um supported us as a way to prepare people or like bring a awareness to what the heckadon is we did a campus tour we went to different universities in Ghana where we did like um not I would not say Road show but like we did a technical and non-technical workshop there um the main target audience where the University students um last year we did like two universities this year four and it has spread the word that universities are reaching us to ask that we should come to their campus um do like ether Crown campus tour um also and next year we are planning to do like when they have like a spring break we do like um weekl long technical Workshop so the demand and the need and the interest is very high um we were able to participate with quite um leading eum projects like the graph sponsored optimism Soo near e Foundation B GLE hair they all um like the idea initiative so demand and and interest is high we also have started doing more like meetups I mean usually people start doing meetups and based on that then doing hackaton we did other way around we start the Bold we just doing the hackaton first and then now we're doing more and more meetups to also have better Community engagement these are little bit facts and figures like last year um for first time Edition we quite impressive amount of um people roughly like 100 hackers 18 submit projects five sponsors 10K US dollar we're able to scale it in a good way and I think for our mission our goal is to have it slowly but steady we for us it's more import important about quality um than quantity and we were happy about the turnout of this year so the number speaks volume we are going to do a third edition definitely and we want to build on um these successes and then who knows the future might be that some amazing unicorn projects the idea started at the hackerone E car maybe 2025 or Beyond are there any questions so far if not then I think I can pass it on to my next ah speaker Rob and he will talk about more the handson Practical experience hello Bangkok oh I need the uh clicker yes it's here I need not to electrocute myself if I spell the T um the next slide is not that the next slide is who I thought there was another next slide there so uh I'm at I work at remix it's a online IDE and uh if you want to do a uh zero toap workshop and want to join our community of zero toap Workshop uh organizers take that telegram group and we can uh support you give you some ideas about how we organize the projects we've done before and uh maybe even send you some SEO eth for all your hackers or hook you up with other project or uh anyway so there's that and the next one is uh onto remix so just so I get a sense of uh who's here everyone knows what a smart contract is or no oh good okay and and of the people that know what a smart contract is has anyone ever deployed one ah okay and has anyone used remix before well it's going to be a review for the use but anyway here we go so uh we're going to basically like first you when you start up remix well first you got to know the URL to start up remix otherwise you're sunk and then um just so you know a little bit of the uh layout of remix like there's a this part over here there's the icon panels and that's where you switch out the plugins which are over here here's a console here's a terminal uh and there's the Home tab and when you start writing code the code's going to appear in the Home tab in a tab in the Home tab something like that um so you got to get some templates it's an easy way to start if you just want to start looking at what some code looks like and uh yeah maybe that's better um and so to get the code you oh look I can look over here uh you go to the hamburger menu and actually that's another question I had because I do devr and I'm writing all these docs does everyone know what a hamburger menu is okay okay so you click the hamburger menu and then um anyway that's what the um the file explorer looks like and then you click the hamburger menu and if you do that then you get this pull down menu and then you can select uh create using template so it's creating a workspace so in remix files are in workspaces and then you can select the workspace the template you want those are that's a erc2 one if we were going to be so typically in know a zero to DAP Workshop there's someone like me that gets up and Rambles away and then you kind of catch what you catch and then you go and you do some of your own uh you do some uh work on it like you'd use a tool I give you a recipe to follow and then you could uh play with it on your own and then the next speaker comes up and Builds on it and so you know like um in Simon's one when he talks about the graph you'd be using a erc20 project so we would get one in remix and then deploy it uh but now we're just going to I just going to give you a quick run through of remix and then I'll show you on the tool and I'll fumble around on the tool and we'll see if it works uh so then you can also clone GitHub repos into remix uh you can what else you can do yeah so it's simple to get a GitHub repo you can also grab verified contracts on ether scan and bring them into remix you can go to the open Zeppelin Wizard and open in remix button uh and you can also go to um you can write your own code just like click that icon there in the top of the file explorer underneath the workspace pull down menu and in remix it's important to know like it's an online IDE so there's no setup up but also it means that the files are stored in browser stored so you have to know that and uh it can you know if browser storage gets corrupted then you lose your your work so either you got to push it to a repo if you want to save it you could download it to your computer or yeah or or you can work with with remix D which is a little script that runs locally that allows you to share a folder on your hard drive with the browser and also we have remix desktop in beta right now so you can work with remix offline um and just so also like in remix there's a lot of plugins for lots of additional functionality and you go to the plugin manager at the bottom there and so you kind of you click that you choose the one you want to activate and then it will activate and the icon will appear on the left column there uh so you get the file you want and you want to compile it oh look another member of the remix team coming in the door uh so you compile the the you compile the active file from the active tab in the main panel and you click the compile button and um what's that oh yeah there are multiple ways to compile you can you know click the uh play button you can click compile you can go to the uh the uh what you call it solidity compiler and click it there or you can do just control s to compile and then you can after it's compiled then you can grab the ABI which is important for making your daps and then you deploy and uh deploy panel is the run a deploy panel is a little U dense but it's important to get to know it you choose the environment that means like what chain you're going to deploy to a local chain or a chain using a browser wallet to connect to a a public chain uh and then you can add value to your transactions uh which is uh over here uh and then you can select which account you want to use and in the remix VM which is the local chain inside the browser in remix there gives you 10 10 accounts with 10 with uh 100 ether each um and you can also deploy to different environments you can deploy to local chains you can deploy using metamask which is using or whatever browser wallet you want using injected provider and then there's other ones we check the bottom one which says customize this list and then you can go to another Tab and so anyway uh then you hit click deploy after you've got the file compiled and then uh appears Below in this deployed contract section and you get this little green uh thing when the uh button there uh and if you want to debug it you can launch a debugger section by clicking on the debugger tab in the terminal uh so once you open up the uh deployed contract in the deploy and run you get this um kind of pop- down menu or this accordion and then orange buttons are for pay are for uh where you're saving to the blockchain blue buttons are just read functions and red ones where you can are payable functions and uh then you can open those each one of those up further and if they're multiple inputs you can dial that thing down and then you can put the inputs in individually and it tells you what the input type should be and then you can copy the address there and now you can even pin the address so that next time you come back to remix you can uh get that easily uh then the other part is uh is contract verification is very important and uh so people can read your source code and to do that you got to open up the contract verification plugin down in the plug-in manager and then it comes up and then uh you can deploy you can verify on multiple um verification services and then the this verification plugin has multiple tabs and so you can verify on one if you using one of the services like ether scan uh you got to put in your API API key so then you go over to the settings tab and put that in and then come back to the verify Tab and verify the contract on this the chain that you deployed it to uh and then there's also um learning things in remix because when you're learning got questions so you can ask remix AI so there's a bunch of ways remix AI works you can there's code explanations like explain a contract or block a code you can get coding assistance like when you're when you're um coding you can say like write a function that counts to 50 or whatever you want and then um you can get coding uh completion while you type so in the robot icon up there it'll explain that contract I'm kind of whipping through it so I can just show you quickly in remix uh when I get to that um so anyway uh that will explain the contract and it'll right now it'll appear in a new uh uh AI assistant panel right now this is like the previous version so it's appearing in the terminal um and then you can uh get AI to help you with compiler errors so you just click that AI button and then it'll give you the answer in the uh AI assistant terminal I mean uh panel right now it's in the terminal but so uh you can get explanations initiated from that robot icon but also when you uh click on some code and um what you got here oh yeah so you can explain this code you canl explain this function and then you can also get coding assistance on request but to do that you need to turn on the switch there a lot of little things hidden around remix so you turn on the switch and then you can inside a inside a contract with the three slashes you can say like write whatever you want what's that one say uh yeah and then um and when you're uh each time you ask it to do this it will give you a different answer so if you don't like the answer it gave you then ask again and then there's code completion uh and sometimes um that could get annoying if you don't like it then you can turn that off by switching that top thing the top switcher and then their learne tutorials which are tutorials inside of remix um just a wanted to put this little note here if see this little uh icon up there if you click that then the plugin will bounce over to the right side of the panel so then that means that you can um you can be getting the instructions on one side and doing the work on the other and uh should be super fun uh then we have this remix guide which you can either get to from the uh plug-in manager or from the Home tab and you get a bunch of videos and there a bunch of lowlevel solidity videos which are kind of complicated there are some just intro to remix videos there's some intro to solidity videos knock yourselves out and then you could ask somebody and a good way to ask somebody who especially is not next to you is to send them a gist uh so you can just do that pretty easily just from the uh file explorer and right click you get this popup menu and uh get a gist and your gist is ready okay so now I'm going to show you how to deploy a contract in remix I think I can do it like this no oh did I yeah look at that okay so here we got remix and you can see it's in uh there are different themes in remix so you could go to the settings tab and switch that if you want uh and uh and this one it's set up with the erc20 contract but here I'll make new one uh using a template and then we're going over here and then we're going to uh set erc20 burnable minable we're going to create it and it's going to load and then uh here look so then uh it loaded all the dependencies so just to note like to do the dependencies with the import statements if it's uh importing something that's a mpm package you just do it like that it'll remix will grab it from unpackage and then uh you got that here I'm going to compile this using this little button here look I compiled but we're going in the solidity compiler you go here if you want to switch your solidity version and if you're loading some old contracts you probably need to change your solidity version and so that's loaded uh yeah and here's the uh ABI if you want to grab that here and then we're going to deploy to the local VM here I'm going to grab my my contract because I'm going to Mint it to myself put it in here here but I'll dial this down a chunk transact so um you can see that and then um so add address is when you're uh want to access an already deployed contract so if you just have the chain the right chain connected uh then you can and you have the um ABI then you can uh pull in a contract or the source code you can pull in a contract uh uh from that's already deployed and uh so uh so yeah so like it's interesting here there's like a bazillion uh functions here okay so now we're going to deploy to a public net and we're going to do that with uh what's going on here uh oh got to customize this list so we enabled the injected provider and then um we're we're going to and we're connected to sepolia but if we wanted to connect to some other chain we click here and we go to chain list and chain list you just put in the the chain if you want to deploy like to uh scroll soolo you put scroll in here scroll well you get the idea anyway uh you can get there and if you click the one that you select it'll configure the browser wallet and then you don't have to put any uh RPC stuff it just does it automatically and what else uh yeah okay so it's uh we're connected there we're going to deploy here now it's going to want approval and I'm going to give it approval and you have to wait cuz it's pending and maybe when the Internet is slow it takes a little while oh did it happen I think it did yeah so now we can see uh the um the functions from this deployment uh just also note that um here's the evm version and you can select the evm version back here in the advanced settings but uh anyway so we've deployed it here and just uh quickly just so you have this little uh secret thing here is uh you can quickly make a Dap here you click that and uh you can quickly just deploy this to this stap on surge you can make a free account you can uh put in your uh name of the DAP some instructions you can there's like a million um functions and maybe like you don't want to show them to somebody you just want to show like uh a couple of functions so you just select the ones you want you can um get rid of that you can move this one over here then you put in like username and password and then you you'll when you hit deploy you'll have a URL outside a remix that you could just pass to someone and then they can check out your functions and if it's a verified contract then uh you can open up the code someone can open up the code back in remix you got a question it's better sure um so I just deployed this here onto sapoia and then I'm going to go to the plug-in [Music] manager and go down to uh contract I'm going to search contract verification and um so you can um we're going to select uh sapoia and it's this contract and um this is asking if it's a proxy contract but this one isn't and uh ether scan is not enabled here because you need to put in the um what ah don't worry about it I mean if you wanted to do it you could just uh you go to the settings tab over here but it's not going to it's not that important I mean you could do it or not or anyway so um uh we're verifying it oh valid contract address oh I see okay maybe this wasn't the I'm going to put it here that was not a valid contract address wow that's tricky okay uh uh copy the address oh I see what happened okay so anyway uh go back to contract verification let me take this we grab it all delete it and paste it now we'll try will it work oh oh you're right the contract I want to verify uh my token you're good Kajun oh valid contract address didn't like it okay is this the API key again nope okay we got the verification in the verification receipt section it's not going to be on ether scan it because we didn't put the API key in but it's on block Scout and uh sourcify but if we put the API key in it'll be on on um uh either scan so we have four different verification services and also sourcify is interesting because uh if you just deploy the if you publish the source code on ipfs and you deploy it will it'll find the um source code on ipfs and it will it goes through all deployed contracts on most on a lot of chains so you don't even need to do anything but if you don't uh publish the uh source code then it's not going to give you a full match I mean it's not going to work on sourcify um any other questions um yeah there's lots more and you can check the remix docs here there's an kind of like a little trick here if you want to go just go right to the docs you go here and then you can go to the documentation that little thing this little fold up thing at the top and um uh um what else my tokens here uh okay anyway I think that's uh good enough unless anyone else has any questions yeah often that's because there's uh kind of error in the code if oh oh the other thing is um after you after you um compile uh like um not doing it here but you often see the um the gas fees on each line on the contract line anyway um but um there there could be the or or you can also go to the um gas section to um let's see over here and um up the gas you have to click custom to up the gas but it's of an indication of something else going on um here and I'll just show you a uh quick um we'll make a little compiler error here and we compile it and um go back over here we see the error we go over here and we go to remix Ai and we see uh we'll get the answer over here it's quite a thorough answer so that's what I got Simon I pass the torch yes curs is it similar to curser it's totally different a totally it's totally different code base oh the AI model it's a code llama yeah cool thank you rob hi um my name is Simon do you still hear me yes okay cool uh yes so um thank you Rob so the idea of zero to De as I said like it's kind of building up so um foundational usually is to learn about smart contracts and uh yeah when you go into adapt development but uh then we can have building blocks uh going on top like um I'm working on the graph protocol so the building block that I think is the next is um using the graph to index that data from the blockchain so um we can quickly run that uh thank you rob again uh through some slides um that explains like how to access it but I want to emphasize here like in the zero to depth context like the H having the graph is one idea it could be other uh other things that get data into your front end or other protocols that you can can uh build on top like we had zero to deps um setups where like L after after the graph maybe T tenderly came to present or we had like polygon that showed how it works on their chain um may we also worked with wallets and so on so forth so like that's basically open the idea is just like that we run through in one course and that each session Builds on top of each other so that people that really take the time sit in um that they yeah and end up with something that is working and also to Showcase how nicely actually all these different protocols and projects play together because um uh yeah we kind of from the same chain and have this interoperability the the Lego blocks um I think it's very nice anyways um so as I said like my name is Simon uh I dooper experience at ETO it's one of the C working on the ground quickly uh who knows what the graph does okay yeah I I can run through the slides like basically it's about accessing blockchain data um so when we think about data on the blockchain when we send a transaction we always pay gas uh to incentivize the validators to bring that transaction into the chain uh so like that's that's why people run validators because they can get part of that Gess or actually they get block rewards but you know know what I'm talking about but like when you want to um read data from the blockchain I mean there is a interface called Json RPC that helps to get data directly out of of of of the of the blockchain node but it is not an optimized way of getting data out it's a very lowlevel interface to get data um so that results like in code like this um that's actually a project that I that ask me at some point like hey we have problems in our front end it's very very slow what can we do and when you look through it if you understand JavaScript do understand JavaScript and typescript good uh yeah then you see that all these await statements and all these await statements they they it's kind of like they the frontend code works with Jason RPC endpoint and they wait until the results come and let say and this is just like in showing nfts and if the person has 10 nfts that he can easily take like a second or two to load and I mean we are used like if if if you are uh using uh web 3 or the central applications on everyday basis kind of like no it takes longer always like very long um but like like the next you know the next wave of people that comes in they will probably like after a second say like ah this page which probably doesn't work um so we need to work on this so one of the things that people started to do is um building their centralized index kind of like setting up servers and server uh in their server Farms whatever or connecting to service providers that do it for them or whatever um and build and build that thing and it's okay I mean it works but on the other hand I like a lot of the properties that we were looking for if they Center Technologies are a little bit circumvented like that I mean if that server goes down basically the application is unusable anymore uh it's also a the single point of censorship like if there's any any problems um then it can can go down but there's also often a vendor lock in um that uh especially service providers that provide such a service they they might or might not just change the service change the API change the pricing or whatever and if if you build an application on top of something like that uh yeah that can break so that's basically a little bit where the graph if subgraphs sit um so having like a decentralized network of indexes that basically care about that problem um they run graph nodes which is a fully open source MIT stack that you can also run on your own um data center or local machine to for development but um it is in in a decentralized network it's there and it's running so you don't need to care if you don't want to um there over 9,000 subgraphs uh published so basically every big protocol has a subgraph uh on on the graph Network um so that's pretty cool so it's it's it's a it's easy way to have like data accessible and then we end up with with this Paradigm like that the UI sends the transactions directly to the blockchain Via Jason RPC it's also then the Chason RPC works pretty well and then the subgraph basically watches those tra watches those contracts see what's going on right in the store and then the UI can read from the subgraph that's a thing uh the the graph is uh as I said it's a decentralized network it consists out of uh 110 index across the world the big number of delegators create is not so important as a developer but actually also subcraft it's almost like a 10K subcraft right now so like uh if you like if you develop your new contracts usually you write a new subcraft but if you're interested in just getting data out of what's going on then there might be already a subgraph that uh gives you that data but in this zero to dep what we do is like we build a new uh contract uh yeah you can think of subgraphs as something like this there's this this like huge uh around things of of data on the blockchain and it's unordered and and we want to bring it in order and so that's where subgraphs come in or when we go through to the um example from before like this this uh ugly JavaScript query that we saw or JavaScript code we can have at graphql but we s just like one transaction and to the to a graph node or an indexer and then uh we have the the results and it usually takes I think average response time current is 150 milliseconds so that's uh as Snappy as we would like to have our applications be yes and the subgraphs are customizable apis so it's code code so they're written in code it's the code is called assembly script it's similar to typescript it has some quirks but uh usually it's it's easy learnable and um that whole technology by itself is like as I said it's it's an industry standard it's open source and while writing subgraphs uh it's also then able to publish it to that registry the graph Explorer and so it's it's a little bit of a market plate of data sets or a collaborative registry of data sets that have blockchain data and if you write a new contract you can bring your uh subgraph also to that registry um yes so as I said like there's a graph Explorer to explore subgraphs but we mainly look at uh the gra.com studio um yes so like like the the in the workshop of Rob who was actually following and all also deployed an esc20 token right now what's that someone one two nice two and a half okay so zero to dep workshops usually take uh a day or two and today we do it in an hour or one hour and a half so usually we are there and say like okay now you you follow here and click here and you deploy and stuff and then we have a uh like mentors around that help people to sit down when they're blocked uh that's like unfortunat we cannot do it here so we run through the theory and some people might be able to follow some people not um but yeah there will be the Hecker done on the weekend and I will be there and so you can just try to do it there but I'll show it how it goes so when I also share the slides in the telegram group so because I also made screenshots but I tried to just do the the live demo here so when we go to the gra.com slash studio uh you can sign a message to log in oh yeah that's my test subgraph but but usually there is um here is a button to create a new one if there isn't any but I can create one I can give it a name um live Devcon actually the best practice is to give it a proper name with spaces and capital letters and that stuff and then here you will see it it created that Slug and then when we have that subra in the subra studio uh there is basically the instructions here on the right that you could just follow in order to get started with with a subgraph and it's actually it's pretty easy so I go in my terminal here I need to make it a little bit bigger so that's the first command I run I run this so I'm getting the latest graph cign installed on my local machine um in the meantime I try to verify that token here e here yeah I want to from the owner actually yeah here ah no okay right thank you it's good to have experts in the room like that's that always helps okay so I can go over to get the contract address and then the deployer address was probably I can get the owner here nice okay if so you had that question right about how to verify an ether scan so we did it so you need to have an API key add it add it to to remix and then it should work like the quirks are you need to find the contract address where you deployed it when you do it the first time um I mean I I I probably spent an hour once to find it again uh and you need to know the deployment arguments that that you gave uh one of the workarounds for me is like I started to write contracts without deployment arguments and at all because it's always just a hassle to verify them um but yeah everybody finds its own ways but now now what what's important for starting to write the sub graph what I wanted to say is like you need to have uh a verified contract on ether scan at the moment like we're working on integrating especially with sourcify since this is this canonical open uh code uh source code registry but unfortunately as the state is right now uh eil scan has the most verified contract and so this uh is around but having said that I think now we should have the latest um graph CI installed that looks good and then we basically just follow the steps here so we do graph in it uh live Devcon and that that dialogue is it visible that dialogue um yeah kind of forces forces us to go through like uh some questions so the first is the protocol so the graph also supports other blockchains than ethereum but we don't care it's Defcon only ethereum is important uh then like the subgraph log is um so ethereum here means evm compatible actually so the subgraph slog we we we we take it from here see I said like there's this logy thing going on so we it's lowercase and dashes for spaces um but um it's all automatically then we can get a directory I usually just go with the one that's there and then we can just select the chains here and it's like most um evm compatible chains are around we go for sepolia here we go and now we need to have the contract address again and since we have it here can get it over and now as you see it fetches the ABI it fetches the star plock it even fetches the contract name directly from ether scan so we don't need to do much the star plock also is here my token and then the last question is like index contract if entities which scaffolds out the whole subgraph like database schema uh mapping code and everything that just indexes all the events in my opinion this is already um come on maybe because of the I know it's probably because of the pointer interesting um where was I so yeah so we have it scaffolded out yeah now actually I can show you quickly how that looks like while it's installing in the background so a subgraph basically is just like simple uh node Jazz project you see there's a package Json file there is uh yeah it's a package file with some commands like there are some dependencies um but then like what I do when I look at the subgraph I look at the subgraph yaml this is what everything keeps everything together so it says uh what we said before um like where is the like which contract which contract address is it uh where was that contract deployed so we don't need to look at blocks that are older than the deployment block um on which network are we which uh like blockchain uh thing do we have is e ethereum or something else um and more like there there's a whole documentation about what we all have here but like here I said these are the event handlers and for the contracts or the esc20 contracts mostly important is the transfer event so with the transfer event we can basically reconstruct everything because in the transfer event we see the mints that they go from address zero to some address and then with with um with an amount and then when when tokens are sent around so that's basically it but the orders are here depending on the contract that you write uh that's all scaffold out then there is a database schema so the schema. grq think about just the database schema for everybody that knows about the database schemas um just table definitions um with uh yeah just table definitions where where event stuff is stored and again for the transfer we see there is an ID there's a from it's encoded in bytes which is an address a two encoded in byes again the value like how much tokens changed hands and then the block number when it happened the uh the block Tim stamp when it happened and the transaction as so these basic building blocks already would would help me to write the front and to just uh displays all the transactions that happened on that token uh also some code is autogenerated here you see it's in it's in typescript for those that are able to retype script or JavaScript it's pretty simple so this is a good starting point I don't even touch any of that code it's just a boiler plate but I want to to quickly show you how that's organized uh so that later on you can uh go crazy and do your own stuff if you want because we ran this thing so then we just go further with copy pasting out uh the authentication please don't uh steal my API key here I know the session is recorded So I mean need to change later we did already go into the directory so we don't need to do this then there is this graph Cod gen and graph build there's some autogenerated code of the schema and of the manifest like that yl file that we looked there's some helper code created and uh and then like uh the whole thing in the end is compiled down into web assembly the good thing about web assembly is that it gives us a very uh robust sandbox so that the indexes don't need to be afraid of running your subgraph code uh because like some smart engineer tried to hack some stuff in so the assembly scpt this really secure uh uh sandbox and then I can just simply run graph deploy life Devcon that's it I give a version number so I go with the default and that's it and then I see here in the UI it starts in the background like uh to Sy um we did not do any transactions yet so we don't see anything see like when you go on ether scam and you look at transactions it's basically only deployed so it would be a little bit more interesting if you have any transactions right um so we can go here was it yeah it's minable right yeah you you create minable so how do we do that so let's say we mint ourselves some tokens yeah some uh and what happens if I mint oh ah where do I see the the problem let's see if we just send it does it show here no ah unauthorized account no no I know I be so the owner is Set uh the owner is set to another account probably the in probably said the owner to the injected account uh the this one yeah 5B um do we have do we have the private key of that account is it the normal one from that also scaffold euses I don't think no it's not that I have them okay uh how much time do we have left I need 2 minutes and then I can fix it or five okay let's do it again e for okay I redeployed the contract and now it's pretty simple I just need to change the address here in the subgraph yl so that it points to the to the to the new contract and then I can redeploy my subgraph go a version up actually I would not even have to verify it like this because the subgraph it just needs to have the ABI of the token here and the the AI didn't change so if you have the ABI into to contract address then we can we can spin up the subgraph so any anyways so now we have that um thing deployed here now we have two entities all right um but we can look for transfers from to Value so let's look for transfers so now we don't have any transfers as you see I can go into the playground and then here on the right I can open and close this graphic explorer that helps to uh discover the schema um but here now in remix I can actually send transactions so this this is the new contract so now try again to Mint myself some tokens now it's working nice boom and we see the tokens here wo it worked always these live demos makes me sweaty [Applause] hands okay um yeah I'll share these slides later on in the telegram group that we have if you didn't join the telegram group yet I'll get the QR code up again wow so many slides today sorry so this is the C code I will share the slides in the telegram group um what I also have shared in the telegram group is uh Google Sheets um so what we did what we do usually at this work or like one way to to run the workshops if if with particip participants in the room is uh to really walk with through the steps until they each deployed their own erc20 token on seoa so we have like a shared or like whatever test net you want to work with and so everybody has that that token and then we ask them to add their eoa or the address that they use to deploy the token and the contract address into that Google sheet right and then we have a Google sheet of all the participants that have uh the the contract deployed and then we tell we can tell them to send now around tokens to each other and that works right and then each has then a subcraft that tracks its token and then we can see like uh yeah we can we can see that the shared state that we work on so I added an example uh Google Sheets there if you want you can um also do that to today or later or I know next week or whatever and ping me and then we can maybe uh do that but that's that's what we do in a live setup um also at the telegram group but I will also share the slides later on so you can um build on top of the slides but I think the last slide of me is yeah the screenshots of everything um but yeah actually there is also like uh then the next step usually is now we have a smart contract we have now subcraft is is building a whole front end or whole UI whole application and for that we partnered up with scaffold Le scaffold they have a bunch of different um sessions here workshops I think one runs right now in parallel I really uh can yeah can suggest to check them out it's a very very cool project but what's important from from from here is that there is a plugin to to scaffold out the scaffold e project with a subgraph already included so that makes it very easy and then it's very well integrated uh it's just this one command like basically the normal command plus a DE d e and then subgraph uh which includes that and they also work on on other plugins so like there's a a group of plugins or or if you're working for a protocol that wants to be integrated with scaffold leave like you can also reach out to them and integrate your stuff too um yeah check it out um I think that's it from my side if there are any questions we can also do questions let's see if someone posted a question is question Q are I no okay yes please to elaborate like web trgs to interact with the deploy smart contract now at this level you're introducing the subgraph so at which level can we place sub graph what is the uh what is this really useful use for I would like to to really understand why we need it uh in the process of developing is it for performance or yes Al so yeah I mean uh the presentation is not that much about like uh showing what the graph is more about the sca the zero to dep but I can go into it quickly so so yes it is possible for a UI to directly get data out from the blockchain with Jason RPC that's possible and that's also so so usually what people learn first when they go when you go to when you look at scaold uh without the subcraft plugin that's what what you end up but as I said like here in this problem statement um getting data out via Jason RPC at scale gets problematic pretty quickly um you yeah in in so you end up with code like this so you you you send a lot of asynchronous queries to the to the Chas rpcn point trying to get that data out maybe you get it into your front end then you try to Crunch it together in the front end and you end up with like slow and complicated code um and then the first step is usually that you think about like oh maybe I should have my own server and then have your own database and then you store then you run all that stuff and do stuff in your database on your server that you run somewhere on AWS or whatsoever but then you are again basically locked into that system that you build up on um the where you where you host your service or if you're on AWS maybe je Jeff Bezos wants to raise prices or whatever or for whatever reion for whatever reason they do some IP blocking or you know all that stuff that we see and but with with sub crafts or like there are other indexing Technologies like the graph uh there is a possibility of spilling on top of stand of Industry standards that um help you that to to have that data available for your front end does it answer the question okay thank you please another one yes uh yes once I deploy the soft the subgraph okay uh is there a possibility to know or to to query the event that occur before the deployment of this subgraph okay which events are you particularly interested in no I just want to understand and I mean like if you want to for example I can imagine that you're interested in other contracts events right yes yes then you can uh it's basically go to this subgraph yaml and then you basically copy paste the whole data sources here create a new one and then you change that contract address that start block and then you basically tell the subra hey there is another contract that I'm interested in maybe you want to look at this um event EV to okay thank you other questions there is one in the front it's a simple question what is the difference between subgraph and graph node not graph when we deploy a subgraph is there a graph no deployed behind yes so the graph Noe is um uh as I said like it's a fully open source uh soft technology written in Rust that runs usually alongside a archive node of ethereum and the subgraph is a piece of code you can think of that's compiled into web assembly and then deployed to a graph node and the graph node runs the subgraph and while running the subgraph it's basically a set of instructions to tell the graph node what data to get out of the blockchain and how to store it in a database and how to give access via graphql to other people so the graph node is basically the run the execution environment for the subgraphs thank you wait wait you you need the microphone for the recording so how how does the pricing or the fees work for subgraph do you pay um with some transaction fees every time you make a read call like the you can run the graph not by yourself as I say it's a it's open source but if you're using the graph Network there is a paper query oh okay got it but like it's basically you you you put money into into the system and then it detects for you when does um graphs start to make sense like what scale of data are we talking about it depends I know I personally like to start with the subcraft immediately it also helps to to write the smart contracts a little bit more lean because like um in my experience a lot of subcraft uh smart contract developers they end up writing functions that they you only need them for data for data access um but you can skip those make your sub smart contracts a bit more lean and more focused and then and and already start with a with indexing solution from the from day one um but it also depends a little bit on on your team I mean I'm as I'm more of a full stack or front developer I was often looped into teams when that when you have like dedicated smart contract developers there are solidity people when you talk to them about JavaScript then uh they become angry and uh and then it's kind of like that setup right and then for me like then subgraphs are very useful because it's basically a a line of defense because I can build a subgraph in between the contract and my front end and whenever they whatever they do on their contracts it doesn't necessarily immediately influence my front end work so it also helps with this um but yeah I would say like maybe if you're really a beginner like if if it's your first uh smart contract then you might not want to already go into into the graph although or other Technologies in general although uh with that steps that I just showed it's also not that hard makes sense and on the flip side if um let's say you are a pretty pretty old project you have large amount of data on blockchain already and you want to introduce a subgraph uh how complex that is complex how simple that is sorry can you repeat the question um uh on a flip side let's if you're an older project you have large amounts of data already on the blockchain yes um and it's really slow and you decide to start using subgraph how difficult or easy it is to integrate subgraph in your project yeah then that's the same I mean like what I what I just showed like just going through that initialization steps just having your uh events index is already a a big plus actually um it's already speeding up stuff and then and from there you can iterate upon so I think it's basically no no-brainer I mean yeah there is some there is it's it's a it's some learning curve to learn the technology but yeah but integrating is fairly straightforward okay yeah that was that was very often like the actually the developer Journey was like oh they come they come and want to keep their systems lean which I understand usually I also try to have as little dependencies as possible to start a project but at some point you run into the scale issues and then TC uh but yeah they could also avoid it and have it from the beginning about makes sense thank you other questions all right thank you so much thank you rob for the invitation thank you abna thank you for coming thank you