{"id":"9e-J1yi-Ej0","title":"Daml 101: BYOF: Bring Your Own Frontend with JSON API [2022]","description":"📚Check out Daml Learning Center: https://bit.ly/LearnDaml\n📖Join our forum and get started: https://bit.ly/tryDaml\n\nThis is a multi-episode series intended to take you from the brief context behind blockchain and smart contract to the development of smart contracts using a next-gen smart contract language called Daml. The entire series can be found here: https://bit.ly/damlone\n\nDaml is a development framework for creating systems of record that securely connect across business processes and data boundaries while retaining privacy, guaranteeing data integrity, and enforcing strict authorization. Allowing such systems to cross boundaries — legal, regulatory, organizational, or other — enables them to form seamless economic networks.","channel_name":"Daml","published_at":"2022-04-19T00:00:00.000Z","thumbnail_url":"https://i.ytimg.com/vi/9e-J1yi-Ej0/hqdefault.jpg","transcript_text":"here we are you're getting better and better each day with a demo development you now know the concept of a template and choices and you know how to use the script to test your model and it comes out exactly the way you want it in the output you are familiar with the concept of the ledger in the sandbox and you're using the navigator and you're moving around like an expert ready for jedi training you are hi this is steve sean from digital asset if you're watching this video chances are you are already familiar with some basic demo development and concepts for example you understand how contracts are created out of templates and how these templates have these built in by you choices that can be invoked or exercised and sometimes exercising these by design will archive an active contract you you likely use the script to test this and see the output on the right side of the screen and you may have used the navigator to log in as a party to make to exercise choices or to create contracts now past this point you're going to start to run into limitations if you want to customize your app for the look and feel and maybe some functionality this is where you start to wonder how do i bring in my own front end and the answer lies in the json api let's start your jedi training now let's first start with examining an application architecture we have the following diagram in our documentation with a react full stack example the white part the white part refers to what you write and the pink part refers to things that are compiled or generated for you so this part the dar file is compiled from your demo file for example now at the end of the day you'll be talking to or rather your app will be talking to the ledger api submitting commands reading from the ledger some utility services and testing services but behind the scenes there are really four flavors of json api there's a java one that's a scale one there is a grpc one as well but we'll focus on the json api for this video and postpone the rest of the discussion up on the other ones in future videos so let's dive into just the json api for now the json api works just like most api does json based you use it to create contracts to exercise choices and contracts and query current active contract set and retrieve known parties now what it cannot do is inspect transactions make asynchronous submit and completion workflows and temporal queries like um you want the transactions from this time to that time so keep that limitation in mind and if you run into limitation you got to use the grpc version version of the ledger api now let's look at a basic rest flow you've got a front end you've got a demo and you've got the api in the middle so what what will happen essentially at a high level is that you'll be issuing a create command from your front end that will go through the json api if everything goes well the back end if you will will send back a 200 just to tell you that everything went smoothly now let's double click if you will and go deeper into that in the instance of the sandbox your front end will make a communication to the json api but it cannot make a you cannot make it alone it needs a a access token that can tie the authorization to a party and you can do that by getting it from the jwtio or from from some jwt library and how do you do that in the gwto you have to supply the ledger id and application id and act s which is the party so once that is done the key is generated the access key generated and then you package it with your json with your rest call and that goes to the json api and we're going to take a look at exactly that in the next few minutes fantastic we're gonna give windows some love uh in this video so i'm gonna create a simple demo project using the template of um the skeleton so skeleton template that will give me a very simple scenario and with test script so let's fire up demo studio and let's look at the demo file perfect we have exactly what we need we're not going to touch anything here but we're going to go into the yaml file and make some changes so let's let me explain something first if i were to run demo start without touching anything it will do two things it will run the sandbox which will hold a in-memory ledger fantastic and it will run the navigator the web-based ui that you can use to test your demo file and if you look at the output back in the terminal you are going to see that a ledger id has been assigned to you so what we're going to do is to create our own or rather should i say we're going to set our own ledger id and we're going to call it test demo app ledger and the second thing we're going to do is we're going to suppress the starting of the navigator because we want to build our own ui eventually so we're going to say we're going to set that to false now if i were to do a demo start again you are going to see that it will start just the same box but it will not start the navigator as we intended now if you scroll up you will find a ledger id that the ledger id that we set now the when you see press c that means that everything is ready to go okay fantastic so we'll leave that open and running and for this video we're going to do flutter so for flutter i like to run flutter doctor for those of you who are familiar just to make sure everything is okay and you may or may not have to run this command to make sure that the flutter can build windows apps and we're going to do a windows app for this video and if now i'm going to create a a templated flutter app and there it is i'm going to run it and you will see that it will fire up in a second in the windows app and all it does is you have one button to click and it counts how many how many times you have pressed the button that's all so here we go windows app should load up very quickly and there's a button at the bottom right you can click it's building the app right now and once it's up you can click on the plus sign it counts the number of clicks that's it all right fine now let me show you a little neat trick uh type code space dot and that will fire up visual studio from that folder here it is and we're gonna do a few simple things here we can take a look at this file real quick we're not gonna dive in because this is not a flutter tutorial so what i'm gonna do is to zip through many of the steps that you're going to see that's not relevant and essentially i'm using a boilerplate template and i'm going to give two buttons and i'm going to give alice the ability to create a tv contract and then give it to bob so two actions um if you want to see the full version comment below and i will create another episode for it in normal speed i guess all right so fasten your seatbelt here we go so what i'm essentially doing is to uh debug the app while i'm coding uh and flutter has this nice hot reload functionality so what i'm gonna do is to open up the dart file and change a few things you see that on the app it has you have clicked this so many times i'm going to change that and i want a text box there you go and ideally we we want a drop down box or a login box for proper authentication but we don't have time to do that so i'm just going to have a text box where i can enter alice and put two buttons and the buttons are there now one is a star and one is a sign up button that i'm going to use for the giving choice so right now on the back of the visual studio code side you see that i am wiring up the relevant piece that will slow down a little bit for now the first thing you want to do is to package together a nice json payload that we will send to the json api it must have a template id and that the value of that is the the name of the demo file and the template that we are addressing and it needs three parameters uh what is stated right now in the payload the issuer the owner and the the name of the item which will be tv we're gonna pass it as tv in the lines above that and once we have this json uh this map object what we are going to do is to um parse it well no we're not passing it we are converting it into a proper uh encoded into a json data and we are going to make our post call now your framework may have a different way of doing it but this is the way i would do it we would do it in flutter and there's always a call that you make and then parameters that you pass to that particular call in this case we are passing in the um the headers and the body that we prepared in a few lines above and then we want to wire up a response or rather we want to check for the response as it comes back this is an asynchronous call so when it does come back it will look at the response if it's 200 it's good it's 4 or 500 something is wrong now we are we're going to need a alice access token uh in the proper way we would have her login and then get access token but we're going to use jwt.io go into the debug section and remove the payload that they pre set in there and enter the following payload in this structure the ledger id will be what we set our ledger id to be in this case it was test demo app ledger we're going to copy that and we're going to go back to gwtio and paste that in the second thing we need is the application application id it doesn't really matter what you use here especially when you're displaying the sandbox and for the act s uh it could be bob it could be alice but it needs to be generated for each person in this case we are just testing uh the things that alice can do so we'll just keep it at alice uh turns out that uh it does matter because it didn't like that single quote so i'm gonna go back and say maybe it does i'm gonna copy that entire encoded gwt and i'm gonna go back to my dot file which is my flutter where things are control and replace the this access token that we are presetting into this demo app so we're cheating here right we are just making things go a little faster just for demonstration purpose fantastic now we've got this app let me just arrange the windows and i want to log in as alice and if i click the star i should be able to create a tv as i have hard coded it and we want to put things side by side so we can see the output and what happens when i click alice so i have the demo file on my left i click alice i click create and look at the reaction you get from the demo site something is happening it went through and the the up the terminal shows um that confirms that it has been pinged and there is a corresponding output now if you go back to your front end you should be able to provide that you have coded it you should be able to see an output as well so let's go to our flutter app and look at the output that we have coded because we know it's a 200 so we know it was successful so some response has been sent back to the front end and here in blue you see the json response that came back so let's make this a little taller and you see that it's a response 200 and this was what was given back to us from json api confirming that it was a 200 fantastic now um look at this this is the contract id remember that when you create a contract out of a template a new contract id is generated and that is that contract id and we're going to need it we're going to need it because we will need to act we need to exercise choices on that new active contract and remember that we have one more we have the give uh functionality that we need to code in so in this next few screens what i'm going to do is to create an equivalent event handler where i have to give the asset and i'm hardwiring it to bob in this case i'm still using alice's token the call itself will be slightly different there's no payload there's an argument so i'm going to set it to new owner because that is the only required input so but we do need that contract id don't we we need an asset contract id which is which represents and references the tv that now alice owns and alice is going to act on that so i'm going to keep this blank for now again this is a lazy way of coding in things so that we can do this demo so in the following screens what i've done is i've created a little helper function to take a look at the blue output at the bottom and parse it and grab the contract id out of it so you don't have to worry about this this is flutter specific so pretty much this function will extract that contract id so we can use it so now i'm going to run it again and we see that we've got contract id extracted perfect and now i should be able to give and see the new chunk of blue text that confirms that it has been um has been exercised that choice of giving has been exercised and you can parse through this second json output and there you have it we made a round trip to create a contract and then exercise on a choice to give the tv to bob all using the json api so i hope that provided a great overview of the json api now you can truly byof bring your own front end we've got more content lineup see you in the next episode bye json api","transcript_synced_at":"2026-10-26T04:09:13.591Z","segments":[{"start_seconds":0,"text":"here we are you're getting better and better each day with a demo development you now know the concept of a template and choices and you know how to use the","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=0s"},{"start_seconds":8,"text":"script to test your model and it comes out exactly the way you want it in the output you are familiar with the concept of the ledger in the sandbox and you're using","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=8s"},{"start_seconds":17,"text":"the navigator and you're moving around like an expert ready for jedi training you are","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=17s"},{"start_seconds":40,"text":"hi this is steve sean from digital asset if you're watching this video chances are you are already familiar with some","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=40s"},{"start_seconds":47,"text":"basic demo development and concepts for example you understand how contracts are created out of templates and how","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=47s"},{"start_seconds":55,"text":"these templates have these built in by you choices that can be invoked or exercised","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=55s"},{"start_seconds":62,"text":"and sometimes exercising these by design will archive an active contract you you likely use the script to test","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=62s"},{"start_seconds":70,"text":"this and see the output on the right side of the screen and you may have used the navigator to log in as a party to make","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=70s"},{"start_seconds":78,"text":"to exercise choices or to create contracts now past this point you're going to start to run into limitations if you","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=78s"},{"start_seconds":85,"text":"want to customize your app for the look and feel and maybe some functionality this is where you start to wonder how do","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=85s"},{"start_seconds":93,"text":"i bring in my own front end and the answer lies in the json","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=93s"},{"start_seconds":100,"text":"api let's start your jedi training","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=100s"},{"start_seconds":107,"text":"now let's first start with examining an application architecture we have the following diagram in our documentation with a react","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=107s"},{"start_seconds":115,"text":"full stack example the white part the white part refers to what you write","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=115s"},{"start_seconds":122,"text":"and the pink part refers to things that are compiled or generated for you so","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=122s"},{"start_seconds":130,"text":"this part the dar file is compiled from your demo file for example now at the end of the day you'll be","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=130s"},{"start_seconds":137,"text":"talking to or rather your app will be talking to the ledger api submitting commands reading from the ledger some utility services and testing services","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=137s"},{"start_seconds":146,"text":"but behind the scenes there are really four flavors of json api there's a java one that's a scale one there is a","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=146s"},{"start_seconds":154,"text":"grpc one as well but we'll focus on the json api for this video and postpone the rest of the discussion up on the other","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=154s"},{"start_seconds":162,"text":"ones in future videos so let's dive into just the json api for","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=162s"},{"start_seconds":168,"text":"now the json api works just like most api does json based you use it to create","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=168s"},{"start_seconds":176,"text":"contracts to exercise choices and contracts and query current active contract set and retrieve known parties","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=176s"},{"start_seconds":183,"text":"now what it cannot do is inspect transactions make asynchronous submit and completion workflows and temporal","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=183s"},{"start_seconds":191,"text":"queries like um you want the transactions from this time to that time so keep that limitation in mind and if","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=191s"},{"start_seconds":198,"text":"you run into limitation you got to use the grpc version version of the ledger api now let's look at a basic","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=198s"},{"start_seconds":206,"text":"rest flow you've got a front end you've got a demo and you've got the api in the middle so what what will","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=206s"},{"start_seconds":213,"text":"happen essentially at a high level is that you'll be issuing a create command from your front end that will go through","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=213s"},{"start_seconds":219,"text":"the json api if everything goes well the back end if you will will send back a 200 just to tell you that everything","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=219s"},{"start_seconds":227,"text":"went smoothly now let's double click if you will and go deeper into that in the instance of the sandbox your","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=227s"},{"start_seconds":236,"text":"front end will make a communication to the json api but it cannot make a","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=236s"},{"start_seconds":242,"text":"you cannot make it alone it needs a a access token that can tie the authorization to a party and you can","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=242s"},{"start_seconds":251,"text":"do that by getting it from the jwtio or from from some jwt library and how do you do that in the gwto you","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=251s"},{"start_seconds":259,"text":"have to supply the ledger id and application id and act s which is the party so once that is done the key is","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=259s"},{"start_seconds":267,"text":"generated the access key generated and then you package it with your json with your rest call and that goes to the json","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=267s"},{"start_seconds":274,"text":"api and we're going to take a look at exactly that in the next few minutes fantastic we're gonna give","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=274s"},{"start_seconds":282,"text":"windows some love uh in this video so i'm gonna create a simple demo project using the template of um","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=282s"},{"start_seconds":292,"text":"the skeleton so skeleton template that will give me a very simple scenario and with test script so let's fire up demo","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=292s"},{"start_seconds":299,"text":"studio and let's look at the demo file perfect we have exactly what we need we're not going to touch anything here but we're","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=299s"},{"start_seconds":306,"text":"going to go into the yaml file and make some changes so let's let me explain something first if i were to run demo start without touching anything it","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=306s"},{"start_seconds":315,"text":"will do two things it will run the sandbox which will hold a in-memory ledger fantastic and it will","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=315s"},{"start_seconds":322,"text":"run the navigator the web-based ui that you can use to test your demo file and if you look at","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=322s"},{"start_seconds":330,"text":"the output back in the terminal you are going to see that a ledger id has been assigned to you so what we're going to","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=330s"},{"start_seconds":338,"text":"do is to create our own or rather should i say we're going to set our own ledger id and we're going to call it test demo app","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=338s"},{"start_seconds":347,"text":"ledger and the second thing we're going to do is we're going to suppress the starting of the navigator because we want to build our own ui eventually so we're","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=347s"},{"start_seconds":355,"text":"going to say we're going to set that to false now if i were to do a demo start again you are going to see that it will","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=355s"},{"start_seconds":363,"text":"start just the same box but it will not start the navigator as we intended now","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=363s"},{"start_seconds":370,"text":"if you scroll up you will find a ledger id that the ledger id that we set now the when you see press c that means","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=370s"},{"start_seconds":379,"text":"that everything is ready to go okay fantastic so we'll leave that open and running and for this video we're going to do flutter","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=379s"},{"start_seconds":387,"text":"so for flutter i like to run flutter doctor for those of you who are familiar just to make sure everything is okay and you may or may not have to run this","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=387s"},{"start_seconds":396,"text":"command to make sure that the flutter can build windows apps and we're going to do a windows app for this video and","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=396s"},{"start_seconds":404,"text":"if now i'm going to create a a templated flutter app and there it is i'm going to run it and you will see","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=404s"},{"start_seconds":413,"text":"that it will fire up in a second in the windows app and all it does is you have one button to click and it counts how many","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=413s"},{"start_seconds":421,"text":"how many times you have pressed the button that's all so here we go windows app should load up very quickly and there's a button at the bottom","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=421s"},{"start_seconds":429,"text":"right you can click it's building the app right now and once it's up","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=429s"},{"start_seconds":437,"text":"you can click on the plus sign it counts the number of clicks that's it all right fine now let me show you a little neat trick uh type code space dot and that","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=437s"},{"start_seconds":445,"text":"will fire up visual studio from that folder here it is and we're gonna do a few simple things here","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=445s"},{"start_seconds":454,"text":"we can take a look at this file real quick we're not gonna dive in because this is not a flutter tutorial so what i'm gonna do is to zip through","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=454s"},{"start_seconds":462,"text":"many of the steps that you're going to see that's not relevant and essentially i'm using a boilerplate template and i'm going to give two","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=462s"},{"start_seconds":470,"text":"buttons and i'm going to give alice the ability to create a tv contract and then give it to bob so two actions um if you want to see the full version comment","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=470s"},{"start_seconds":479,"text":"below and i will create another episode for it in normal speed i guess all right so fasten your seatbelt here","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=479s"},{"start_seconds":487,"text":"we go so what i'm essentially doing is to uh debug the app while i'm coding uh and","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=487s"},{"start_seconds":496,"text":"flutter has this nice hot reload functionality so what i'm gonna do is to open up the dart file and change a few","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=496s"},{"start_seconds":503,"text":"things you see that on the app it has you have clicked this so many times i'm going to change that and i want a text box there you go and ideally we we want","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=503s"},{"start_seconds":513,"text":"a drop down box or a login box for proper authentication but we don't have time to do that so i'm just going to have a text box where i can enter alice","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=513s"},{"start_seconds":521,"text":"and put two buttons and the buttons are there now one is a star and one is a sign up button that i'm going to use for","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=521s"},{"start_seconds":529,"text":"the giving choice so right now on the back of the visual studio code side you see that i","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=529s"},{"start_seconds":536,"text":"am wiring up the relevant piece that will slow down a little bit for now the first thing you want to do is to","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=536s"},{"start_seconds":544,"text":"package together a nice json payload that we will send to the json api it must have a","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=544s"},{"start_seconds":551,"text":"template id and that the value of that is the the name of the demo file and the template that","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=551s"},{"start_seconds":559,"text":"we are addressing and it needs three parameters uh what is stated right now in the payload the","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=559s"},{"start_seconds":567,"text":"issuer the owner and the the name of the item which will be tv we're gonna pass it as tv in the lines above that","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=567s"},{"start_seconds":577,"text":"and once we have this json uh this map object what we are going to do","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=577s"},{"start_seconds":584,"text":"is to um parse it well no we're not passing it we are converting it into a proper uh","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=584s"},{"start_seconds":591,"text":"encoded into a json data and we are going to make our post call now your framework may have a different way of","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=591s"},{"start_seconds":598,"text":"doing it but this is the way i would do it we would do it in flutter and there's always a call that","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=598s"},{"start_seconds":606,"text":"you make and then parameters that you pass to that particular call in this case we are passing in the um","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=606s"},{"start_seconds":613,"text":"the headers and the body that we prepared in a few lines above and then we want to wire up a response","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=613s"},{"start_seconds":621,"text":"or rather we want to check for the response as it comes back this is an asynchronous call so when it does come back it will look at the response if it's 200 it's good it's 4 or 500","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=621s"},{"start_seconds":630,"text":"something is wrong now we are we're going to need a alice access token uh in the proper way we would have her","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=630s"},{"start_seconds":639,"text":"login and then get access token but we're going to use jwt.io go into the debug section and remove the","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=639s"},{"start_seconds":646,"text":"payload that they pre set in there and enter the following payload in this structure","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=646s"},{"start_seconds":654,"text":"the ledger id will be what we set our ledger id to be in this case it was test demo app ledger","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=654s"},{"start_seconds":664,"text":"we're going to copy that and we're going to go back to gwtio and paste that in the second thing we need is the application application id","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=664s"},{"start_seconds":672,"text":"it doesn't really matter what you use here especially when you're displaying the sandbox and for the act s uh it could be bob it could be alice but it","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=672s"},{"start_seconds":681,"text":"needs to be generated for each person in this case we are just testing uh the things that alice can do so we'll","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=681s"},{"start_seconds":688,"text":"just keep it at alice uh turns out that uh it does matter because it didn't like that single quote so i'm gonna go back and say maybe it","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=688s"},{"start_seconds":696,"text":"does i'm gonna copy that entire encoded gwt and i'm gonna","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=696s"},{"start_seconds":705,"text":"go back to my dot file which is my flutter where things are control and replace the","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=705s"},{"start_seconds":712,"text":"this access token that we are presetting into this demo app so we're cheating here right we are just making things go a","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=712s"},{"start_seconds":720,"text":"little faster just for demonstration purpose fantastic now we've got this app let me just arrange the windows and i want to","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=720s"},{"start_seconds":729,"text":"log in as alice and if i click the star i should be able to create a tv","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=729s"},{"start_seconds":735,"text":"as i have hard coded it and we want to put things side by side so we can see the output and what happens when i click","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=735s"},{"start_seconds":743,"text":"alice so i have the demo file on my left i click alice i click create and look at the reaction you get from the demo site","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=743s"},{"start_seconds":751,"text":"something is happening it went through and the the up the terminal shows um","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=751s"},{"start_seconds":758,"text":"that confirms that it has been pinged and there is a corresponding output now if you go back to your front end you should be able to","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=758s"},{"start_seconds":768,"text":"provide that you have coded it you should be able to see an output as well so let's go to our","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=768s"},{"start_seconds":776,"text":"flutter app and look at the output that we have coded because we know it's a 200 so we","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=776s"},{"start_seconds":783,"text":"know it was successful so some response has been sent back to the front end and here in blue you see the json response","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=783s"},{"start_seconds":791,"text":"that came back so let's make this a little taller and you see that it's a response 200 and","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=791s"},{"start_seconds":798,"text":"this was what was given back to us from json api confirming that it was a 200 fantastic","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=798s"},{"start_seconds":805,"text":"now um look at this this is the contract id remember that when you create a contract out of a template a new","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=805s"},{"start_seconds":813,"text":"contract id is generated and that is that contract id and we're going to need it we're going to need it because we will need to act","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=813s"},{"start_seconds":822,"text":"we need to exercise choices on that new active contract and remember that we have one more we have the give","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=822s"},{"start_seconds":830,"text":"uh functionality that we need to code in so in this next few screens what i'm going to do is to create an equivalent","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=830s"},{"start_seconds":838,"text":"event handler where i have to give the asset and i'm hardwiring it to bob in this case i'm still using alice's token","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=838s"},{"start_seconds":847,"text":"the call itself will be slightly different there's no payload there's an argument so i'm going to set it to new owner","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=847s"},{"start_seconds":855,"text":"because that is the only required input so","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=855s"},{"start_seconds":862,"text":"but we do need that contract id don't we we need an asset contract id which is","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=862s"},{"start_seconds":868,"text":"which represents and references the tv that now alice owns and alice is going to act on that so","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=868s"},{"start_seconds":877,"text":"i'm going to keep this blank for now again this is a lazy way of coding in things so that we can do this demo so in the following screens what i've","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=877s"},{"start_seconds":885,"text":"done is i've created a little helper function to take a look at the blue output at the bottom and parse it and grab the","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=885s"},{"start_seconds":892,"text":"contract id out of it so you don't have to worry about this this is flutter specific so pretty much this function will","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=892s"},{"start_seconds":900,"text":"extract that contract id so we can use it so now i'm going to run it again and","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=900s"},{"start_seconds":907,"text":"we see that we've got contract id extracted perfect and now i should be able to give","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=907s"},{"start_seconds":914,"text":"and see the new chunk of blue text that confirms that it has been um has been exercised that choice of giving","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=914s"},{"start_seconds":922,"text":"has been exercised and you can parse through this second json output and there you have it we made a round trip to create a","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=922s"},{"start_seconds":930,"text":"contract and then exercise on a choice to give the tv to bob all using the json api","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=930s"},{"start_seconds":937,"text":"so i hope that provided a great overview of the json api now you can truly byof","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=937s"},{"start_seconds":944,"text":"bring your own front end we've got more content lineup see you in the next episode bye","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=944s"},{"start_seconds":960,"text":"json api","url":"https://www.youtube.com/watch?v=9e-J1yi-Ej0&t=960s"}],"youtube_url":"https://youtube.com/watch?v=9e-J1yi-Ej0","url":"https://ccpedia.xyz/videos/9e-J1yi-Ej0"}