Low-Code Tutorial – Build 3 Financial Apps (Full Course)

Hello everyone on freako camp 
today wanting to learn about   low code. Now if you're looking to spin up 
apps fast with out of the box UI components,   this is the course for you. My name is Ania, 
and I'm a software developer, YouTube tutorial   creator, and your video instructor for this low 
code course. In this course, you will learn all   about local solutions by building three financial 
apps. These apps will be number one, a trade   dashboard for brokers to log their trades, as well 
as track their commissions, as well as communicate   with our back offices via an integrated message 
sender, places slack API number two is going to   be a crypto dashboard using coin API service to 
get live prices.

As well as utilizing Twitter's   API to send text messages your friends or 
family about any changes you see instantly.   And the re invoice tracker that communicates with 
an external database using graph qL API allows   you to embed instructional videos for those using 
it. Now, these three apps might sound intimidating   to you, if you're not super well versed in using 
API's and building up front ends for them. But the   whole point of local solutions is that it takes 
the pain out of doing both of these things. Think   of low code as platforms that essentially give you 
all the UI components you need. So for example,   tables, graphs, text boxes, you name it, and then 
also give the option to integrate them using pre   configured inputs for API's. This type of solution 
is perfect for personal trackers on your finances,   in house apps that needs to be spun up quickly, 
or perhaps proof of concept prototypes looking   for investment.

And that is only the tip of 
the iceberg. stick around to the end of the   tutorial for the where to go next section 
to see what other things you can build. So   that leads me nicely into what exactly we 
are going to be covering in this course.   In this course, we will look at low code versus no 
code, setting up retort compatible integrations,   building a trade dashboard, 
where they get crypto dashboard,   building an invoice tracker, and of course where 
to go next. Now the only prerequisite I ask of you   before starting is to have a basic understanding 
of how API's work before starting this course. Or   if you don't know what API's are, or feeling up to 
it, please do have a go at following along anyway,   I will be taking things super slow and covering 
everything as we go to make this course as   accessible to as many people as possible. Okay, 
so what are we waiting for? Let's do as always,   please do hit that sub button as it really does 
help out this channel and providing you with free   courses and tutorials.

Your support is really what 
makes freako camp what it is today. Let's start   with exactly what locode It's located in the least 
amount of words is a way for developers to create   applications quick with a minimal efforts. 
Most local platforms allow developers to drag   and drop visual blocks of existing code into a 
workflow to create any application they wish. The   main advantages of low code apart from it being 
a huge time saver is that a developer can just   jump right in.

To create an app in a business. You 
don't have to learn what frameworks they're using,   how they like to work, you don't need to create 
a GitHub account even or create any components.   And the best part for me is that you don't have to 
write any tests for them. Now that we have covered   low code, how is that different to no code? Well, 
as the name would suggest, no good solutions   are for those with zero coding knowledge at all. 
Simply drag and drop things to create an app.

And   that's it. And whilst you might be like, Oh, well, 
why don't I just use that was no code solutions   can be pretty powerful, they are often quite 
limiting, especially when it comes to wanting to   integrate databases. In addition to this, it can 
result in Apps being created without the proper   expertise needed to maintain them. So if something 
goes wrong, for example, or needs to be changed,   that is going to be an issue. And not to mention 
security concerns or compliance issues that   could result from that too. All in all, a no good 
solution was perfect for building some things. So   things like password projects that don't rely on 
databases can end up being a huge headache farther   down the line when use in a professional setting. 
For this tutorial, we are going to be using a tool   called Rito.

So here's the tool we're going to 
use it is free to use on a trial basis. And the   best part about it is that it comes with all 
of these fantastic integrations already done   for us. So there really is a lot underneath trying 
to cover the main ones that I use on a day to day   basis in this tutorial. So these ones right here. 
Okay, so I hope you're excited. Let's do it.   Okay, so let's get to creating our first app 
which is going to be a trade dashboard using the   Google Sheets API. So here's what your dashboard 
should look like once you have signed up to retool   the low code platform. And I am just going to 
create a new app by actually adding a resource   fast. So I'm just going to 
gravitate to the Resources tab,   we're going to start off by connecting 
the resource that we need. In this case,   it's of course going to be a Google Sheet. 
So let's just gravitate to the resources.   And I am going to not use the sample Google 
Sheets, I'm going to create a new resource,   select Google Sheets, and I'm just going to choose 
to call it let's just call it traits for now.   Please make sure to select the read and write 
if you plan on adding data from your app to the   Google Sheet.

If you don't want to just want to 
read the data, but you want it to be interactive,   make sure that this read and write option is 
selected. And there we go. We of course need   to authorize our retort to talking to our Google 
Sheets. So it's going to go ahead and do that by   clicking Authorize. And going through these steps. 
Okay, wonderful. So now we have connected return   to our personal Google Sheets by allowing Rito to 
speak to our Google Drive, essentially. So that is   done. Now let's go to creating a new app with 
this resource. So I'm just going to click   Create a new app now. And let's go ahead 
and name it. So I'm going to call it trades   dashboard. Okay, so pretty easy trades 
dashboard, if I can only spell trades dashboard.   Okay. And there we go. This is our app, it's 
got some default stuff here. But don't worry,   let's actually maybe get rid of all this for now. 
So I'm just gonna delete the default query that   this comes with, and make a new query.

Okay, 
so here we are, here's the central list of   all the resources. So all the resource 
when we were just on the resource tab,   including the new resource we made called traits. 
So I'm just going to select that one. Okay,   so now that we have that resource, just 
going to maybe make this a little bit bigger.   Please make sure the action type is read data 
from a spreadsheet. So because we want to be,   you know, reading the data from our spreadsheet, 
and of course, we need to tell the platform, which   spreadsheet we want from our Google Docs. So I 
know that my spreadsheet is called trades. So I'm   just going to sell at that. But you will see all 
your Google Sheets essentially here as an option.   Okay. and wonderful. If I run this query, you will 
actually see a preview of all the data. So that is   really useful. And the next thing I want to do is 
actually get that shown in a table. So before we   do that, I'm just going to delete this table. 
And I'm actually going to rename this query to   trades, perhaps get trades, that's a bit 
better in terms of mutability.

So get trades.   And then I am just going to drag in a table. Now, 
once you have done this, you will see the table   actually uses the data from get trade. So that was 
really simple, we really didn't need to do much.   That is because we are currently on the gap trade 
query. Okay, so it's automatically using that data   for us to create this wonderful table based on 
the query data. Okay, so this looks pretty simple,   right? all we've done is drag a table making sure 
that we are on the get trades query as we do it.   Now I'm going to show you this little left 
sidebar as it's super useful, I think it's   very powerful when it comes to dealing with 
more complex I guess results. And if we   now look here at the queries and transformers, 
you will see the get trade query Of course,   but you will also see how this data is returned. 
So you will see the data comes as an array of   objects.

Okay. And that is what we are using to 
essentially create the table. It is something that   I'm probably more comfortable using in terms 
of coding. So it can be really useful to you   if you are a dev that is that prefers to work in 
this type of way. Okay, I think let's move on.   The next thing I'm going to show you is 
actually how to personalize some of these   columns.

So there's a lot we can do with these 
columns. For example, let's select the first   one. Now say I know this column, I want it to come 
in the format of dates. And I want it to be more   readable, I can simply select the column type 
to be a date. And you will see how the timestamp   has now changed to have the month, day. And 
here. So that's just been formatted for me.   We can of course do other things, we can 
filter them. So if you click on the column,   it will filter. And then you can also do things 
such as you know, change the background color.   So I can simply select a column and type in 
the color red. Of course, you can use hex code,   and RGB as well. Or you can simply type the 
term red, the platform is pretty intuitive   when it comes to that. Another thing that 
you can do is let's maybe look at the   price. So if I click on The Price column, I can 
make sure that this is showing up in US dollars,   simply by selecting the US dollar option.

And we 
can do the same for commission. So once again,   I'm just going to click on the commission, 
USD column. And from the column type,   I'm just going to make that show up in dollars, 
too. Great. So there are a few different   styles you can run with, I'm just going to space 
this out. So it's a bit more readable for us.   There we go. Okay, and wonderful. Now, another 
super useful thing you can do is not only   create tables from your data, but also create 
graphs super easily. So I'm talking pie charts,   bar charts, anything you really wish. So to 
do this, I'm actually just going to click   off the table and using the same query, so making 
sure you also only get treats query, I'm just   going to drag in a bar chart.

So here we go, 
I've just dragged on n, it's gonna move around.   Okay, so there we go. And now, so you can see 
the x axis value is the timestamp. And I can also   change this around to make more sense, 
I'm just going to hide some of these,   I'm going to hide these three in order to 
make the x axis the timestamp on the y axis,   the commission in US dollars.

Okay. So 
there we go, we can see it causes very   small just because we have that very large 
commission one on that, let's just make   it a little bit dark as you can see it and 
wonderful. So we have now plotted essentially,   the amount of commission that is made by de, okay, 
and it was really painless. So that is another   thing you can do with the data that we are getting 
from the get trades query. Okay, I'm just going   to show you how to create another chart, this 
time, just gonna move this around a little bit.   This time, let's make it a pie chart.

So once 
again, all I'm gonna have to do is change the   data sets. This time, I'm just going to have the 
commission by US dollars, and I want to do it by   broker. So to do this, I was simply get the value 
labels and select broker. And there we go. Now we   can see exactly how much each broker is making, 
what percentage of the pie for the desk they are   making. And of course, we can change the colors 
around a bit too. So let's go ahead and do that.   Okay, wonderful. This is really interactive, 
you can interact with pieces of the pie as well,   all of these components come not just visually, 
but also with a bunch of extra cool features too.   So it really is quite advanced in terms of 
handling data and transforming it into graphs.   Okay, I'm just going to show you one more 
example that we can do that would really fit   this trade dashboard. So I'm just going 
to use the bar chart again for this.   And this time, I'm going to actually 
select the x axis to be To the broker.   Okay, so we know what percentage of the pie each 
broker is making this time, I want to see exactly   how much commission the broker is making, okay. 
So I can see that Annie Glover's made around 25k.   And she's made around to 70% for the 
desk, okay, 70% of the total for the desk.   Wonderful.

Okay, so this is looking pretty good on 
all just from one Google Sheet at the moment. The   next thing I'm actually going to do is show you 
how you can now add more data to the Google Sheet.   Okay, so we're displaying the data, but we want to 
not only read the data we want to write data to.   And to do this, I want to be able to add 
a trade, but from the platform. Okay,   hopefully that makes sense. Let's carry 
on. So to do this, I'm actually going to   use a modal. So let's just go ahead and select 
the modal component. And I'm going to just drag it   up here. Okay. For the button text, 
I'm actually gonna change this to   add a trade.

And then let's just change the 
button color to go with a red. And yeah, okay,   now that we have the pop up working, the first 
thing I'm gonna do is actually make this a form,   because we're gonna have to submit the form. So 
I'm just going to drag in the form component,   just like so. Okay, so that is done, we have 
created a form. And now it's gonna make this a bit   smaller. Now we're gonna have to 
drag in things into our form. Okay.   So, the first thing I'm going to do is 
actually just drag in some text, because   this is what we're going to want to give some 
information about what kind of data goes into our   trade essentially. So I'm just going to drag in 
some text to let the user know that this is for   a ticket, and this is going to be the buy side. 
Okay, so here's the text, the Asterix on the   text mean that this is going to be in bold, just 
going to get rid of this and write by sight,   and then also get rid of the emerging and 
perhaps has made the background green,   you can apply custom styling, I will be 
showing you how to do this.

But for now, just   stick with me, this is something that I will be 
showing you how to do later. Okay, so we have   the buy side, the next thing we're going to do 
is just make the sell side to why we're here. So   I'm just going to drag in another text component. 
And I'm just going to edit this to say sell side,   and also get rid of the emoji. And once 
again, let's make the background red,   you will notice the text has changed to be 
white to make this more readable. That is a   feature that is built into the low code platform. 
However, if you want to change this, as mentioned,   the option to add your own custom CSS will also 
be available to I'll show you how to do this.   Okay, now we have the past by side and the 
sell side, the first thing we want to do   is start putting in some inputs.

So we have you 
know, what is corresponding to the Google Sheet.   So that means products and entity, a timestamp, 
the volume and so on. So the first thing we do   is just put in a text input like so. Okay, I can 
also choose to position the writing at the top   if I want. And I'm just going to 
give this a label of entity like so   I can also make this a required field. So just 
by ticking this little checkbox right here. Okay.   And that is done, we have created our first 
input, this input is going to be for the entity   that is going to have made the trade. Now, let's 
actually create a second one because obviously,   I'm gonna have a buy side and sell side each one 
need an entity. So once again, I'm just going to   make this go to the top instead of going to the 
left, and I'm going to make this a required yet.   Wonderful.

So now that we have an entity for 
the buy side and an entity for the sell side,   the next thing we're gonna do is actually 
have something for the products because   we're gonna have to choose what kind 
of product this is to go in our table.   So I'm going to choose to make this a drop down 
just so people can't enter whatever they wish.   So I'm going to search for the drop down 
option. And once again, when we are here,   we have a label And then we also have the values. 
So at the moment, the values that appear are 123.   I want this to be product. So I'm just going to 
put in some standard products that you would see.   If you're trading the Brent, do you buy crude 
oil. So it's going to put some in here for now.   This is, of course, just for demonstration 
purposes, you can make this whatever you'd   want, making sure it's an array of 
strings separated by commas. Okay,   so we have August, September, October, 
November, December, it's gonna copy all of that.   And it's gonna paste it.

And instead of grant, 
I'm gonna change this to do by fastline. Crude.   Wonderful, then perhaps, let's have 
just some straight up futures. So   okay. Just gonna change this from Brandt fastline 
to Brent. crude, huge, I mean, yeah, that's fine.   Again, this is just for, you know, demonstration 
purposes. So now if I go here, I can select a   product that is only from that list.

So this is 
how you would do that. I'm just going to change   this label to be product as well, and make 
this a required field. Okay, wonderful. So   now that is done. And I've shown you how you can 
do that, of course, you can make your own This is   just for demonstration purposes. Let's actually 
do it for the other side, too. It's going to   check this works. So is required field, if 
I don't pick one, yes, a red thing shows up.   Okay.

Now that we have done that, I'm 
just going to stick it on the other side,   too. And there we go. Hey, wonderful. I mean, I 
think this is pretty neat. If I was still working,   this sort of thing would be extremely useful, 
and extremely time saving when it came to,   you know, keeping track of your trades. So 
the next thing we'll do is actually use a   number input, this time to put in the price of 
the product that was traded. So I'm just going   to drag in a number input, and I'm just going to 
change the label to be price. US dollars. Okay,   price US dollars, and then some put at the top, 
let's make it required field as well, we are here.   gonna copy it, and put it on the other side, 
too.

Okay, so that is looking quite good,   we've got some number inputs, I'm just going 
to copy again. Because we also need to put in   the volume traded. So I'm just gonna 
use another number input for this,   the volume and KB and copy it to the other side 
to the the sell side too, because you know,   someone's buying this on someone's selling 
this. Okay, I'm just going to make this a   little bit bigger, so it's easier to work 
with and you can see a little bit better.   And there we go. So now we've copied 
it, we have two things for the volume,   we can also make sure that this is in currencies, 
so I'm just going to format this as currency.   So great, that makes a lot more sense.

So now we 
know that whatever is being put into here will be   the format of a currency. And for this one, we're 
not really going to do anything at the moment.   Okay, now I'm just going to copy this again as we 
want another input for the commission, right. So   let's change the label to commission rate. And 
once again, I am just going to copy this using   the copy command on my keyboard and move it to 
the salsa. Okay, so now each side has pretty much   the same on it.

And of course, I'm just going to 
change this to be top positions for all of them,   just because I think it's a lot neater and we 
can actually see what is on each label for this   one It's not actually letting me go to the top. 
So, I mean, we could just get rid of the label,   maybe let's do that. I guess we don't need it 
if we can have, you know, like a placeholder. So   yeah, maybe let's do that.

I'm just going to 
work on how you can see this a little bit better.   So I'm just actually going to move this 
down here. Okay, wonderful. So that is,   I think that's a lot better for this video. 
Now you can see everything. Okay. So we've   got a bunch of stuff, we're still not done yet. I 
saw need to, I guess, calculate the exact amount   commission made and which broker made it.

So to 
do this, I'm actually going to use a statistic.   I'm just going to search for statistic, and 
then just drag it and drop it. Here. We go.   Great. I'm just going to change this to be the 
title of commission. I'm going to do a little   calculation here. Okay, and just display it to the 
user, as well as use this to put into our Google   Sheet later. So we've call this commission. 
Okay, I'm actually going to use oops, I have   misspoke permission. Okay, commissioners to two 
s's commission, commission. Okay, okay, I think   that's fine. Right? To get their commission, 
I'm actually going to have to do a bit of a   calculation. So let's do that in the value. I'm 
going to get up these syntax, we're reasonable. So   we need these two curly braces, like so. And 
I'm going to grab whatever is the number input   to us right value, whatever I put into there, was 
applied by 1000. And then also multiplied by the   commission rate. So commission rate value, 
whatever I put in that, multiply it by the   price, hold on, that should 
be volume.

So what is this?   Yeah, okay, whatever the volume is, what abide by 
the Commission, I'm just going to change this to a   four. Okay, and that should be the value. So now 
let's test it out. If I just fill these in. Now,   guys, because volume multiply by commission rates, 
and that will give me the commission that I have   made on this side of the tickets. Okay. So 
this is cool, I'm essentially just generating   a number based on the inputs that have been put 
in. And let's just do the same on the other side.   So I'm just going to copy this using the copy 
command on my keyboard. And I'm just going to   change this here to be number input three, 
and the commission rate for the bicep, okay,   so just change out these numbers. And now, I'm 
just going to test this out. So let's put in the   volume. Let's do 100 kV and make 
the course commission rate 0.05.   And great, that gives me 500 not lbs though, 
let's just make it we don't need a suffix.   Great.

So nearly that the next thing that I want 
to do for this ticket, so that's quite cool,   right, we sort of at least done one input based 
on some calculations. So we don't have to do that.   This, usually when I was a broker, we would 
have to, you know, like, do the calculation   in our head or use a calculator. And this way, we 
just calculate commission for us. Okay, so we've   got everything. And the last thing I'm gonna do is 
actually pass through which broker did this trade.   So for this, as we have, you know, like a set set 
amount of brokers that are working on this desk,   I'm actually going to use a drop down.

So I'm 
just going to select the drop down, I'm going to   get rid of the label care, because we can just 
have, we can have a placeholder instead. So select   broker, and we are actually meant to do 
that for above as well. So let's do that.   Again. For the we're going to get rid of the label 
and just put, you know, like select product, and   again for this to select products and get 
rid of the Okay. Okay. Right now we don't   want the verb to be 123 right? This is just 
default values, we want it to look like this.   So I'm going to change the values. And who 
are our workers? Well, we've got Annie Glover.   We have David Astra. We have Jeremy Lin. And we 
have Sam Sammy.

Yeah. Cool. That's it. Wonderful.   And once again, I'm just gonna use my copy command 
to copy this and make another one for the bicep.   Okay, great. So this is looking good, we have 
now completed our module, we have now completed   a way for us to just going to maybe move this 
out a little bit better to make it look nicer.   But we are now essentially 
completed a way to add trades   to our table by using this little 
pop up modal with required fields.   Okay, the next thing we need to do is actually 
make something happen if we click Submit. So   other moments, obviously, nothing happens. All the 
fields are required are giving us our messages,   I need to essentially make a new query that 
instead of getting trades, we'll add a trait   to tip. So to do this, I'm going to go back here 
create new, just select the new resource query.   Let's just rename this to add, Fred. Great. Make 
sure the resource is so the trades list. And then   what I need to do is make the action 
type and of course choose a spreadsheet.   So the spreadsheet was trades.

Let's do that 
for a trade. So select a sheet trades, then,   okay, this is looking good. And then I need 
to change the action type. So the action type,   I want to be append data to spreadsheet, okay, 
because we want to add a new essentially line to   our spreadsheet. So this is how we would do it, 
and the values to append. So this is going to be   an array. And we need to add an array of objects, 
just like we saw in the left sidebar, we need to   keep the structure the same.

So to this to this 
array, my first object is going to be a timestamp,   just like in our table. And for the time set, the 
value is going to be just today's date. So this   is a bit of JavaScript, I'm using a date object 
to essentially add today's exact date, whenever   we add a trade to the dashboard, which will then 
be sent to our Google Sheet. Okay. So new date is   going to be the timestamp. Okay, if you know 
JavaScript, you know what this will return.   If you don't, please do have a Google of the date 
object. And let's carry on. So I'm just going to   make sure it was formatted correctly. Cool. The 
next thing that we need to add is the entity   and the entity. Let's do the let's do the by side 
fast. Hold on. This is not something's wrong here.   I don't see why this should be wrong, maybe 
let's just carry on and it will update.

Okay,   so let's focus on the buy side. First, we're 
going to add the buy side first, and then   the sell side. So two lines to our spreadsheet 
essentially. So the entity is going to be the   first text input component that we used. So 
up here, the entity is text input one, because   we're doing the by side, first we're adding the by 
side trade to our dashboard. text input one value.   Okay, so we've got the entity, the next thing 
we're gonna do is product. So it's really easy,   we're literally just finding the component on our 
dashboard, and using it value. The next thing I'm   gonna do is actually we need the direction to 
so we said there's going to by side, I can just   hard code this to the buy side because we didn't 
need to select the direction, we should know that   you know, like if it's under the buy side, the 
green title, this is going to be a biotech trip.   Now it says other product.

So just like we found 
the other component. This time, we're going to   find the drop down, which is called select one 
if we hover over it as the bit in the blue,   and I'm going to get the value of that. The next 
thing I'm going to add is deep Price in US dollars   making sure by the way that these what the 
keys are the same as the headers of our columns   in our Google Sheet table and the prices do is 
going to be once again let's just hover over it   and we're going to get the value of whatever 
we put in this number input.

Okay, hopefully   this is making sense the more we go along the next 
thing we'll do is the volume kb. So the volume k b   is going to be well let's have a look at what 
component is and it's text input number input   three sorry. So number input three value so 
great. Next we need to do the commission rate.   So I'm just going to do commission rates hold 
on how did I spell commission because I've been   making loads of mistakes commission out whoops, we 
have misspoke commission here. So commission here   has a one. So for the sake of it here, I'm just 
going to spell it the way I wrote it in my table   because as I mentioned, it has to be exact has 
to be the same spelling otherwise this will not   work.

So commission rate I'll change it later. 
But just bear with me for now. Sometimes I do   think making mistakes like this is the easiest 
way of understanding how this is all working.   Hopefully you see now that why 
this needs to be exact because   it has to be exactly the same as the column 
column title likes or commissions but with one   okay. So we're going to put what are we going to 
put in this column where we're going to put the   what is this number input five value, so number 
input five values, whatever I put in this input,   that is going to be my commission right? 
Great. The next thing we need to do is   get the commission USD which I've misspelled 
here again, and I clearly wasn't having a very   good day with this word Commission's but with 
with two M's and one s is time in US dollars,   I promise I will fix this commission US dollars is 
going to be well we know this is going to be the   statistic, right, it's going to be the thing 
that we figured out.

So I'm going to go into   statistic, the statistic too. So let's 
select statistic two, and once again value   that and the last thing we should do is just 
put the broker that did it. So broker and then   we need to go into the drop down I believe was a 
drop down. But let's just double check, maybe hold   on, it wasn't called drop down was it done value 
is not defined. Okay, so that doesn't exist here.   Let's just have a look. Okay, find a select 
four is not called drop down, select for value.   Wonderful. So now we have done everything 
for the buy side. If we run this, it should   essentially add a row to our table, but we need 
the sell side too. So okay, cell size, I'm just   going to copy all of this that we've done so far. 
And we now need to adjust it for this cell side.   So I'm going to copy it, paste it.

And 
now I'm just going to change these to be   this number. direction is going to be sell 
product is going to be selected. To price USD   is going to be number input to volume q b is 
gonna be number input for this is going to be   statistic one and select three. Okay, great. So 
we've done it. I'm going to save this get rid of   this comma, we don't need to save this. And okay, 
I'm just going to now fix this because you know,   like it's better to have everything correct case 
we've changed that in here. I'm going to get   the trades again to see if that has worked. 
Okay, so commission rate commission rate good.   It's messed up with our grass, 
but we'll fix that a bit later.   Okay, so now that we fixed this billing 
commission, commission rate commission rate   we need to hook up our Submit button.

So to do 
this, we are going to have to create offers event   handler. If I click on the submit button, an 
event event has actually been generated for us.   So I'm just going to click here to 
show you what is going to happen   is I'm going to run the query add trade selected, 
add trade, because we are currently on that query.   And on submit, I'm going to add a trade.

So on 
submit, essentially, I'm going to run this query,   I'm going to run that add trade query. 
Okay, as soon as I press the submit button.   Great. So that is looking good. I can also add 
confetti, just for fun. We confess to you so that,   you know like when I press the Submit confetti 
gets thrown as well. And another thing I could   do is also rerun the get trades query. So the 
previous query worked to get all the trades,   I can run that query. So after we added the 
trade to the bottom two, we can run the get   query get trades query again. Okay, so that we 
can actually see them in the browser itself.   So that is looking good. I think let's test it 
out. So let's just make sure that we enter all of   these, I'm going to put tests, tests. September, 
September, just making this up. Really, I don't   really know what September brought fastline. 
Price is at the moment and say 6555. Let's   also put it at 44. Make this up, find find put in 
some brokers and click Submit.

Whoo, and confetti,   we have run the Add trades crew. We're getting 
some errors. Why is it red? It hasn't been   added? Why is this? Let's have a deeper dive 
into this. Okay, so that has not been added?   It should appear at the bottom here. 
It has not. Why is this happening?   Got it took one bite at the moment. Let's go 
back in here and have a look again at what   we thought were values were pending. Okay, 
we've got an error message commission are   we did not spend we did not correct commission 
spelling here.

Okay, fine, fair enough. We go,   these error messages are super handy. I mean, 
already, I know why this has not worked.   And click Save. Okay, so let's 
try it again. I prayed, sir met.   Okay, no errors. Now, let's have a look. So that 
has not been added to the boss. But let's see if   it's been added to my Google Sheets. And it 
has. Wonderful. So we've added these trades,   this is working. Whoo. We've added the two 
new trades. We broken a few things along the   way like the bar charts, but don't worry, 
it's a step by step process with the get   queries and not get run, though, so the sorry, 
the get trade query did not get run however.   So if I actually manually run this, you will 
see the new trades. So why is this not working?   Let's try again. It could just be a bit 
too slow as in we're adding and then we're   getting but the get is running before the Add 
trade.

Now this seems to be okay. Okay, well,   there's another way to do this, which is actually 
probably better. We can also just change this.   I think that big volume wasn't great. 
Okay, so we can we obviously, that's   that time. Nope, didn't work. Okay. So we 
can do this another way, I can actually   make this run after the query runs after the 
ad trade query runs. So to do this, I would   just click on the Add trades query again, and 
on a success trigger, so after this query runs,   get the trades. Okay, so this is actually a bit 
more foolproof. And let's check it out at a trade   and then just change it so we can see a little 
bit of a difference. And then call this test new   and test new. Click Submit. Okay, let's see if 
that has worked. So now let's go to the last   page and one of us.

Okay, that has worked. We 
have done it. We have added new trade and it's   showing on our dashboard. Amazing. I'm 
really pleased with how this is looking.   So cool, we've done this, I'm just going to change 
this to add a new trade. Okay. And now let's also   based on everything we have learned, we're going 
to do a bit of repetition, and just make another   modal using everything that we have learned so 
far. So I'm doing this, you know, for muscle   memory. And also to make it a lot more realistic 
and the sort of trade dashboard that you would see   at a brokerage, because you don't only have 
trades that have two sides of a buy and sell side,   you can also have someone just selling some 
brand futures online. So I'm going to create   a new pop up modal, very similar to this one, 
but this time, it's going to be a custom trade.   Once again, it's just a pop up modal, maybe 
let's call this custom, add custom trade.   And then let's make it green.

Okay, and this 
time, I am going to allow the person to select   a direction, and it's only going to be, you 
know, like not double sided is gonna be one side.   So once again, I am going to Well actually, we 
don't really have to make this. Okay, so let's   just make this create a custom trade, get rid of 
the emoji using the Asterix to make this bold.   And then let's make it yellow, because yellow 
is quite neutral color. There we go. Okay,   let's do it, the first thing we do is just drop 
in an input, this input is going to be a just   a text input or the trade direction, which we're 
going to end up either buy or sell.

The next thing   I'm going to do is just put another text input, 
this time, it's going to be for the entity. So   let's change this up to be entity. And let's put 
some placeholder text, enter. company name. Okay.   So there we go, just make a capital. And 
now we've got the traduction got the entity,   this time, let's grab a drop down for the product. 
So this is going to be for what kind of product we   want to select, essentially, label it as product. 
And the drop down. Well, I've already done this.   So once again, I'm just going to get an array of 
strings separated by commas. Okay, so that is how   we put in values.

So there we go, we've done it, 
we put in an array of strings separated by commas,   to signify the items in our drop down. The 
next thing we'll do is actually put a number   input. So let's drag that in here and give 
it the label of price USD. And I'm actually   going to format this to be currency, so that 
we can only put in numbers that have a currency   format. The next thing we're going to do is 
just copy this so using the copy command,   and I am going to use this to have my volume 
in KB, on formatted so just a standard format.   Once we have that, once again, just going to use 
my command to copy and paste another number input.   This time, however, the label is going to say 
commission rate, because that is where I'm   going to put the number value for my commission 
rate.

And now that we have that, if you remember,   the next thing we did is actually use the 
statistic component. So I'm dragging and dropping   it in here. And we are going to essentially use 
this to calculate our commission. So the total   commission for this ticket based on so we're 
going to use this syntax of two curly braces   to pick out an element and this case it's number 
input eight, and its value. Okay, so dot value,   whatever the value of that input is multiplied by 
1000. And multiplied by the commission rate, which   is number input nines value.

That is how I have 
chosen to calculate my commission for this ticket.   Okay, so let's just take this out, I'm going 
to put volume 100, KB and commission rate 0.05.   And number 100, multiply it by 1000 multiplied 
by 0.005. Indeed, gives me 500. And the format   of that as dollars. So this is looking good. It's 
calculating it correctly, everything's looking   wonderful. The next thing I'm going to do is 
actually use another drop down. So if you remember   from the previous modal we did, we actually had a 
drop down for the brokers. So once again, I'm just   going to put broker and once again, I'm just going 
to go back and copy it. Just to me. get exactly   the same, because we need to paste in the broke 
options. And once again, it's an array of strings,   followed by commas to essentially split them out 
as individual items. Okay, so we've done that   we've done everything here, the next thing 
we need to do, we didn't put it in a form.   So let's go ahead and do that. Put in the form. 
And then let's just work all these things.

And   so just move them in, we could have not really, 
you don't have to make this a form, you can just   put a button, but this way is a better 
practice. Essentially, if you did the button,   you could have just done the same thing, you 
know, attach an event to it. So like a trigger,   but we're not going to, okay, this is a much 
better way of doing this. So there's our form. Now   let's hook up the submit button. So I'm just going 
to click on the submit button. And of course,   we need an event handler for this.

So here we go. 
I'm going to say that if we submit the button,   I want to run the query add trait, and I want that 
to trigger. However, this won't make sense, right?   Because the Add trade query will trigger the other 
modal because we picked out all the different   components for this. Okay, the add a trade even 
if I felt all these things out, we'll essentially   use the not the custom trade options. But the 
previous modal that we built, this is not correct,   we need to build a new query. So once again, 
I'm going to click new resource. And once again,   let's rename this, I'm going to rename this to 
add custom trade, it's going to be pretty much   the same as our trade.

So the spreadsheet we 
need for this is trades. And here action type,   I'm going to say append data to a spreadsheet. 
So just like add trade, essentially save this   save, just like our trade. However, the only 
difference is the values to append will be   different. But we're going to use this as a 
template. So I'm just going to paste all this,   this up so you can see it better. I'm 
going to delete this, I guess second row,   because that was a second row. And now 
we're going to append one row. And let's   change these values up a bit. So timestamp, new 
date, that'd be fine. That'd be today's date,   entity, well, I want to grab another text input 
This time, I want to grab text input threes value,   okay, that's because it's this component that 
we need to grab it's text input, oops, four,   actually, text input four.

Okay, so I'm just gonna 
move around a little bit text input for its value,   that's gonna be the entity. Now direction is 
going to be okay, we could actually make this   perhaps we shouldn't make this something else 
text in Book Three, perhaps we should be more   strict and say, you know, it should just be 
a buy. Or it could just be a sell rather than   someone being able to enter whatever they 
want. So I'm going to use another option for   this that is available to us just be a bit more 
strict.

I'm going to use this segmented control.   So I'm going to grab that and just whack that 
in here. It really is that easy. And this time   I'm going to I'm just going to delete 
this. move everything up again.   Oops. Okay. So now we have this, 
let's put the values as by Sal.   Okay, and labels, I'm going to put buy 
and sell as well. Okay, so now you go.   And do you thought about is going to 
buy. Wonderful. Now, we don't want   so now I'm going to get these segmented control 
one value.

Okay. Great. value. Wonderful.   Cool. Let's carry on product is going to be 
select five. The next one's gonna be text   input seven. So once again, I'm just going to be 
finding out reading off the blue whenever I hover   over each component, that is 
essentially the components name.   This is going to be number input eight. This 
is going to be number input, nine and then   commission rate that's fine. This is going to use 
it Step three, so let's change that to a three.   And then we just need the broker I believe.

So 
this is this select, just change the number on   that to be a six, wonderful. And let's click 
Save. Okay, let's test it out, we also need to,   of course, make sure that the submit button is 
triggering the correct query. So we need to change   this to add custom trade. And then once again, 
that's maybe send some confetti. Great. Now, if   you remember from the previous thing, there's one 
more thing we need to do and onsuccess trigger,   we need to get the trades again, so they can 
see the new trades in our table. Wonderful.   Now, let's get to testing this out. Okay, 
so let's do it, I'm just gonna put in some,   oops, I'm gonna put in, I'm just gonna move this 
down a bit, click Add Custom trade, just gonna put   test, custom trade like this a sell product, 
and then just put in some random price,   volume and say 200 commission rate 2.05.

That is 
looking like the correct commission amount. And   let's make the broker Annie Glover. Now I'm just 
going to click Submit, the confetti goes off. And   there we go. We have added our custom trade 
is one line this time I can see it. So the get   trades query has also ran once this add custom 
trade query has run. Wonderful. This is looking so   fantastic. We've added some we've added a custom 
trade, we've added a I guess double sided trade,   this is looking great.

One more thing to do. 
And that is integrate our Slack channel. Okay.   Before we do this, let's actually fix these, 
as I said, when I rerun the query and change   some of the column names, this actually broke. 
So I'm just going to change these best parts give   as a title. So commissioned by percentage that is 
meant to be and this one is meant to be daily desk   commission obviously doesn't look like that now, 
but that's what it's meant to be. And this one,   this was meant to be this Yeah, how much is 
broken made? So perhaps let's call it commission   in US dollar.

Okay. Cool. Now, so to do this, I'm 
just going to delete this drag in a new bar chart.   Now the x axis, oops, we need to make sure that 
it's getting the correct query. So get trades,   get all the trades data. And now let's 
make sure that the x and y axis correct.   So I just want to use commission in US dollars. 
But let's do the x axis first. So by broker oops.   And then we want the commission 
was dollar. So let's hide these   three. Wonderful. Okay, so that one is fixed 
with Sony to fix those two, but perhaps,   let's do the slack integration first. Okay. So 
the first thing we need to do is just use this   form, just like that. Let's 
move this out of the way. Okay.   And let's create a new resource. So I'm just 
going to create a new resource. This time,   I'm going to actually go back to here and go 
back to my resources tab, and create a completely   new one, and then just use the that's fine to 
slack.

Because this has been pre configured for   us by return already. So I'm just going to find 
it wherever it is. I know it exists there is   okay. Now, what should we call this resource 
just for our knowledge in this app, I'm gonna   call it slack API. Now we need to get a web 
hook to make this work. So to do this, let's go   to slack. and easy way to do is just click 
right here to create a slack webhook. And   I'm just going to sign in with Google. 
So I'm just going to click here. Okay,   it looks like you're new to slack. Create 
a new one. Place, create a new workplace.   What's the name of your company, 
I'm just going to go and as   demo next. team working right now, retool,   to call this low code costs great. To Do you 
want to email.

Let's, let's skip this for now.   Wonderful, and open this in slack. So now if we go 
to slack, there we go. I have created a workspace,   essentially. And there's no one in here. This 
is, of course, just for me at the moment. Now   let's get to hooking this up to our platform. 
So for this, we need a web hook. Right? So   let's get to it. This is step one.

Now step two is 
the web hook to integrate the Slack channel with   my platform. And just go back here, create a web 
hook. And there we go. Now that I have a channel,   this is a lot easier. Choose a channel, low code 
costs. So all my messages is going to go here and   add a covering web hooks. So here's my web hook 
URL, literally a few steps to do this super easy.   Just whack that in there. And we don't want 
to create a new app. So let's go back to   resources. And then back to our trades dashboard. 
So we've added that new resource let's carry on.   So the first thing I'm going to do is, 
what should we do first, I am going   to just use some text. So I'm going to make 
a text area, this time, not a text input.   And then what should we call this, 
I'm gonna call this create message.   And then maybe let's get an emoji.

I'm going to 
get a writing emoji for this cute, maybe let's   make it a little bit smaller. And you can also 
input images in here. So let's go ahead and just   put slacks logo in to serve Herman knows what this 
is, what's going to Google's like logo for this,   we're just going to use one that's 
hosted online, just for this tutorial.   So I'm just going to copy one from free 
social media icons, copy image address,   then just put it in here like so. So there we 
go, we have our slack logo from the internet,   it is hosted online, off the internet, we've 
just got it. Next thing I want to do is actually,   I'm just going to grab the text again, 
and this is we're going to display   what we are going to send. So like a little 
preview, I'm going to call it slack preview.   Okay, and once again, let's whack in an emoji 
I'm going to put in speech football emoji.   Okay, looking very cute. Once again, the Asterix 
are there to make it the text bold, okay.   If I get rid of them, that is what it looks like. 
Okay, so with and without the little asterixis.

So   now I can use this, just make a little container, 
actually, I'm going to put a container in here   to make a little bit smaller, and   move the form up as well. Because all these 
things are in a form currently. move that down.   And in here, let's change the background perhaps. 
So I can be really precise with the background. Or   I could just choose a premade one is up to us. 
Okay, so there we go. That's a bit lighter now.   And in the slight preview, I want to preview what 
I'm typing. So I'm going to grab the text again.   So we get wiser. And this time in the value, 
rather than just having some text, I am going   to use this pre written piece of code that I have. 
Okay, so this is some pre written code.

This isn't   a coding course, this is essentially just 
some HTML, I'm not really going to go through,   hopefully you know your HTML. If not, please 
do do some googling at this point in time,   or you can just, you know, pause this and just 
take this from me. Essentially, I've done some   custom code, okay, which you will see styled 
in a bit. And I'm going to use the ritual   syntax. So once again, the two curly braces 
to get whatever the value of my text area is.   So text area, dot value now This means that 
whatever I type will show up in the container   below.

Before we move on, I'm going to show 
you how to add some custom CSS. So to do this,   you just need to click on these three dots right 
here, and click on this scripts thing and styling.   And then just click on the CSS part, to add custom 
CSS to this whole app. So here is my custom CSS,   I'm just going to paste it once again, this is not 
really a coding course, this is just some custom   CSS to style, the divs and tags that I previously 
put in, there's gonna save that. And then you got   the styling has been applied. Wonderful. Now, if 
I actually type some tags into the Create message,   you will see that being previewed in my slack 
preview component that I have custom built.   Great, this is looking good.

Let's perhaps also 
change the button color, let's make it a bit more   like slack. And then give it purple. Awesome. So 
we've done this. And now of course, we need to   hook up the submit button. So for this, I need my 
I need to make a new query, I'm going to add a new   resource. And then I'm going to essentially search 
or we might refresh this, I need to search for the   slack resource that we just created. So here I'm 
going to go resource and search for slack API.   Great. So we have the slack API. Now, we just need 
to use our resource syntax to post a message to   the Slack channel we chose. So this is the message 
that's going to be sent. I'm going to write user,   current user first name. So this is essentially 
saying that whatever is going to be sent to   slack is going to have user dot dot, and 
what whoever's using it. So currently,   as a first name, this is going to return an error 
because I'm the current user.

And then let's have   the message itself. So I'm going to go 
into the text area again and get the value.   Okay. So that's our query. Let's save that. Let's 
also perhaps, okay, so, okay, so that's cool. If I   press submit, at the moment, you'll see nothing's 
happening, because we don't have an event handler.   on submit, I need to get the query for perhapses 
rename this, I'm going to rename this to send   message. Now you'll see if I run this 
query, there you go. That is working.   So there we go. There's our incoming message. If I 
run that query, that will work. So I'm just going   to type another message into so check this as 
working. That's a lot more like. Okay, so now,   it's still likes it. So that is good. Everything 
is working as it should. Wonderful. Okay.   Let's carry on. So this is looking good. This is 
what our app will look like if we preview it.

So   I'm just going to preview it. Now. As you can see, 
this would look like if you share the link with   anyone, we have a table, we can also add trades 
via the murderdolls whether it's you know, a trade   or two directions that will add two lines, we're 
just a custom trade our one line to table. Great.   We have a few more things to do before moving 
on. I can of course, also just add something here   saying you know, this is Ania.

This is current 
user first name, so that will bring back Ania   as I am the current user and my first name is 
Ania. or friend. I'm just going to get rid of   that let's not have all friend. Let's just have 
my name dashboard. Okay, even though technically,   maybe we should have had a friend because if there 
is no current user and first name, it will just   say this is dashboard. But whatever, this is fine. 
Okay, I can also make this we don't have to just   use the little Asterix is I can use HTML in here 
too. So for example, I can use h1 or let's make   this an h2 tag. And if I want to be more specific 
with my styling, there is of course the option to   add more custom CSS right here. Okay, so you can 
really go to town on the seiling, that is going to   be completely up to you. Before finishing this, 
let's actually fix these two, I guess the bar   chart and the pie chart, as we said, changing 
the table, column names seem to broke this.   So once again, I'm just going to select this 
graph right here.

And I am simply just going to   as the data source thing, probably the 
easiest thing to do is just delete this.   And then once again, use this syntax 
rutile syntax to get to the trades,   and get all the data from the trades. 
Wonderful. So that is that you can't   really see because it's very light. And we did 
add a trade with a huge amount of commission,   which, of course, is just being very tall 
right now.

There we go. So you've added   a few of these. Wow. So that is why it's looking a 
bit different a little bit bad, it's just because   one has a very tall number. Okay. So once again, 
this is what it is looking like, wonderful.   Okay, now let's go ahead and preview what 
this looks like on our custom made URL.   And there we go, here is our custom dashboard. 
Just one more to do. And that is the brokers   because I can see that's not reflecting correctly. 
So I'm just going to once again, you get rid of   this data source, type it in again. Okay, so 
get played data, let's hide the rest of these.   Okay. And there we go. So that 
is looking way more correct,   just based on the new trays that we added, 
which just had like a ridiculous volume.

Okay,   and that is it. Hopefully, you've learned 
a lot. In this first part of the tutorial,   we have covered quite a lot. We've covered how to 
essentially use data from Google Sheets, and also   learn how to integrate, and also learn how to 
integrate slack API in order to create your own   custom dashboard. And, of course, customize the 
CSS as well as a lot of other things too. Now that   we've covered this, let's move on to working with 
rest API's. In the next section. I'll see that.   Okay, now in this section, we're gonna learn 
how to build our own personal crypto app using   the coin API and Twilio API to send messages. 
So let's do it.

The first thing I'm going to do   is add a resource. So I'm just going to click on 
Resources here and create a new resource. This is   going to be a REST API. So let's call this coin 
API, just like that. And now I'm going to find   the API. So this is the API I'm going to use for 
this tutorial. And we're going to have to get a   key for this. So we can actually use this. 
So I'm just going to get a free API key.   Click here. And to get my free API key, I'm just 
going to put in my email address in gmail.com,   earlier, Kubo developer,   and get a free API key. So that should 
now be emailed to me. Let's check it out.   And there we go. We have our API key, please keep 
it safe. So I'm just going to copy this.

And now   in here, this is where we want to have to put our 
API key at the moment, I am just going to put it   in the header as a string. Okay, so make sure 
that is the string. And then let's get to the   documentation to see what we should use as the key 
for this API key. So I'm going to go back here,   we don't need this anymore. And let's check out 
the API docs, I will be deactivating this key. So   please do use your own. This will not be valid 
anymore at the time, this tutorial goes live. So   here we go.

Here is everything that we need. There 
is a bunch of different data here. What I'm going   to get for now, I'm just going to get the base 
URL. So we can use all of these endpoints in our   app. And I'm literally just going to copy let's 
copy the sandbox one actually. Use a sandbox.   And I'm going to just put it here as the base 
URL. And then we need to find out what the key   needs to go under. So let's just have a 
little scroll. There we go. So this is   what we're going to have to have X coin API 
key, Copy that.

And once again, is a string,   I'm just going to paste it in here. So that is 
looking good. This is all we really need in order   to be able to communicate with the quaint API. So 
I'm just going to click Create resource. Great.   And let's create an app using a Korean 
API. So I'm going to call this crypto dash,   board create. Wonderful. So now we will see a 
query has already been made. We have a little   reminder for us on how to use this base URL that's 
really handy. Please read the HTTP Doc's query API   for more information on how to use this API. Thank 
you very much. So now that we have that done,   let's go to creating a table, it's going to use 
all the quotes for the crypto currencies. So to do   this, I'm going to actually, I think we can shut 
this one down now. So I want to get the quotes. So   I'm simply going to go here to get the correct 
endpoint. And I can use this data right here.   So this is what I'm going to get back.

If 
I use this GET request, I will get back   objects that look like this that have, you know, 
a symbol ID, exchange time exchange, so on, so on,   and ask price, a bid price and everything else 
that we need. So I'm just going to copy this,   just like that. And then whack it in here. 
We don't need this extra one because we have   the little dash here already.   And now just to check this works, let's actually 
pick a symbol ID to filter by. So let's just say   this one. Okay, so you will see here that was now 
URL parameter. And now we also need to put Well,   that is correct the excellent API key here again, 
and the headers, so it's going to get this and   put it in here, we don't need to specify, we 
don't have to put it as a string because it   automatically gets converted to a string for 
us.

So now if we run this here, you will see   the response, which at the moment isn't coming 
back with anything, perhaps it's nice to be a.   Okay, well, let's just get 
all the currencies for now.   And there we go, here is our response, we 
have managed to successfully get all that   data. So we've got the data. Now let's put it in 
the app. So that is our first query done. We can   of course, rename it, let's rename it to make 
this more usable, I'm going to call it quotes,   because that is what it is. It's 
just the quotes for all the prices.   Okay. Great. So now that we have that, I'm just 
going to perhaps make this a little bit smaller,   like so.

And then let's just drag in a table, this 
is going to be super painless. Here's our table.   And you'll see that it's already managed to 
sort of decide that this is what we want.   So it's just picked out the first query that 
we did. It's got the query here to the query   as quotes we've just called it quote, and it's 
got all the data from our quotes. query. Okay,   so I'm just going to move this around. So you 
can see we've got similar due time exchange time   point of view, I asked price, ask size, basically 
everything that we got in the response here.   Wonderful.

So that is very intuitive. We 
really didn't have to do much. I'm actually   going to show you how you can personalize this 
table. So what if I don't really like the way   that the API gave me all these keys, I 
don't want them as my own table headers,   so I can change them. I could simply go in 
here and call this symbol ID. Just like that.   And then maybe let's change all of 
these. Do we want the time exchange   We could just keep time coin API, so I can also 
hide this one. To do this, I can simply just click   on this little icon right here and it disappears. 
Time coin API.

Let's also rename this time   moyen API. And then I can also say this is quite 
cool. I can say that the column type is a date   time original timezone, which will change it to a 
date format. For me, so that is pretty cool. Now   the ask price, let's make that ask price, like 
so. And then I'm actually going to change this   to reflect a price small, so let's pick that 
from here. We could use float, or we could use US   dollars, if we want, like, so it's totally up to 
us. Okay, so it could look like this, if we wish.   Now let's do the Ask sighs. Oh, yeah, if you 
click on these, it automatically filters by this   column. That's quite cool. So we've got the ask 
price. Now let's do the Ask size. Just like that.   And then maybe let's make this a float. So I'm 
going to make a float.

Okay. So once again,   that is looking good. Or you can make it 
a full integer. It's totally up to you.   Okay, so we've done the Ask 
size, let's do the bid price now.   But price. And then let's 
also make this US dollars.   It would seem not many people 
are trading on the COO coin spot.   Now, let's also do the bid size. So I'm just going 
to change that here. To want bid size.

So I'm   going to keep the size, I'm just going to rename 
it. And once again, I'm going to make this a note.   And then we should also probably have lost 
train. So I'm going to have lost trade too.   Now this is interesting, because we're 
going to have to this is an object.   So we're going to have to learn how to work 
with that object. Because we don't want this to   appear like this, we actually want to go into 
the object to get a value. So let's do that.   So to do this, I would use the mapper, and I'm 
going to use the keyword self so that it knows   I'm talking about that particular component. 
And then I'm going to go into the object   and pick out the time coin API.

It's quite 
nice that there's auto populating for me   the time coin API. So now if I look here, you will 
see that that is exactly what's been picked up for   the last trade, I've essentially have a look at 
the request and the response or the response.   So I've gone this is what was returned to me 
for last trade. And that's what was trying to   put in itself. But I said no, I want the last 
trade time coin API. So hopefully that makes   sense. Now, let's also perhaps format this to 
be a date. So date, let's say original time set.   Wonderful. Okay, so this is looking really good.   We can of course also move them around. So 
perhaps maybe lets us move the bid size,   then the bid price. So the bid and the ask are, 
you know next to each other.

And that is looking   great. Wonderful. Now, I can of course also 
personalize this further, if I want, I can   add a color. So background color. 
For this, you can just type red,   or green or you can be more specific type 
put in hex colors to the choice is completely   up to you. But I'm quite happy with this looking 
the way it is right now. It's already come with   pagination for us, which is really useful. 
I just want to do one more thing and that is   add an option for us to be able to search. So 
essentially, we want to be able to filter out   so filter by the symbol ID. Okay. So 
I'm just going to do that up here.   So to do this, I'm actually going to find a 
component that has a text input.

So I'm just going   to grab that whack it here, I'm going to make it 
a bit longer. And let's change the label to say   such like so. And then I'm going to actually leave 
a placeholder to so for example, and symbol ID.   Okay, so we've done that, of course, at the 
moment, it's not really linked up to anything. So   that is our next job, let's get to linking this 
up so that it works. To do this, I'm actually   going to go back to my quote, I'm just going to 
make this a little bit bigger.

So remember, at   the beginning, we tried to filter. So we use this 
because you're trying to filter by symbol ID. So   since you're going to bring that back in, but 
instead of filter Id like this, I am going to   essentially just going to get rid of that. So 
I'm going to use this syntax, I am going to   find the text input one text input, once I'm 
literally finding this component I'm reading   the blue offered. So I know that this component is 
called text input one for this platform. And I'm   just going to get the value. Okay. So now whatever 
I type into this is essentially going to be   this. And now I just need to make this trigger 
on change. So we need an event handler for this,   the event handler is going to be a change because 
we're not submitting anything.

I just want it to   change as I type. And it's going to trigger the 
query that is going to read the quotes. query.   Okay. So that is the event that's going to 
trigger as soon as I start typing, like so.   So I've just searched by symbol, and you will 
see, all the symbols with BTC have been filtered,   I can of course go. That's just maybe type Gemini 
spot, BTC SGD. Gemini spot, and let's see if it's   changing. Okay, so that is changing. It's got 
anything with Gemini spot here now. Brilliant.   This is looking really cool. Just gonna go, maybe 
it's changes back to BTC for now. Wonderful.   Okay, so now we've got our quotes coming through, 
and our search is working, let's carry on. The   next thing I want to do is just get all the main 
cryptocurrencies that I want to I guess monitor   and another table right here. So let's go 
ahead and do that.

For this, I'm actually   going to get in make a new query but using 
the same API, so let's use the resource query   to make this bigger for us. And this query, 
I'm just going to call current seats.   It's got quotes, we've got currencies. And 
for this one, well, I just want to get a few   currencies with their little images. So I 
know that this exists here, because I've   had a look at this before the end point, I want 
to get all to essentially filter out specific   cryptocurrencies that I want, but also include 
all that assets and stuff is somewhere, look,   here we go. Assets but also filtered by certain 
coins. So I'm going to grab this one. And I'm just   gonna walk it in here. So if you want to asset 
filter asset and let's watch, shall we get? I want   to get well, let's get a Bitcoin.

Let's also get a 
theory and maybe I'm just gonna put a few in here.   Maybe require an RTC.   Okay. So I'm literally just 
using the documentation here.   And I know this is what's 
going to be returned. Okay.   So that is what is going to happen. Let's save 
and run. Oh, yes, we also need to put in the API   key again. So once again, just in the header 
section. And what was this called? Oops.   paste that in here. Yeah, save it. And 
then we also need this one and seven, one.   Okay, so now if you look at the response,   wonderful. Okay, so we're getting 
the Bitcoin, the light coin,   the tea, the coin, Dogecoin, aetherium, finance, 
coin cadorna coin and die. I don't really know   what that one is, but it was on there, so I just 
put it in as well. Okay, so we filled it out just   a few from the API, the next thing I want to do 
is use this ID coin to get an image.

But first of   all, let's just work them in a table. So once 
again, I'm just going to drag a table across,   super easy. And it's pretty much guessed that 
that's the one we want. I think it's because   we are on it was selected on it. So it naturally 
just goes to that one. It's getting the currencies   query, and they gave me the days from it. If you 
want to see more of these, what exactly these come   backwards, so you see currencies. And that is the 
data. So we're getting all the currencies data.   And then you can go further into each object in 
the data array to so that is essentially just   the response, but maybe a bit more workable in 
terms of being a developer and wanting to get   the correct properties from the response. Okay, 
so that is, I just got that by clicking this left   panel, right here.

I'm going to minimize it for 
now. But if you ever want to see it, it's just,   it's just right, that cool. So now we have 
our most popular quote are the ones we chose,   sorry, the the, our chosen kryptos 
that we want to keep an eye on.   Let's get to personalizing this table a bit more 
again. So for this one, I'm actually just going to   Okay, yeah, let's keep the asset. D, I want 
that. That is fine. Type crypto. I mean,   we sort of know that. So I'm going to get rid 
of that. I don't want this, I don't want this.   I do want the name, let's perhaps switch 
this around the we're going to put name   actually don't want a bunch of this 
stuff. I really only care about   the volume, one de USD and the price.   Just delete, or hide, sorry, delete is probably 
the wrong word.

So let's use this one volume   on the US dollar. And then let's change 
this to of course, US dollar. Oh.   And then the price USD, I'm just gonna put 
price, and then make sure that there's dollars.   Okay, another icon, I want the 
icon to be at the beginning.   Okay, great. So we've done that before I 
actually get to putting the images in using a,   we're going to do a little bit of JavaScript for 
that. I'm actually going to now show you how to   put in Twilio API in order to send a text message 
to your friends and family from this platform.   So I think, yeah, that's let's do it.

So to 
do this, I'm actually going to go back to my   resources page. And I'm going to create new and 
this time, let's actually search for Twilio. So   Twilio is one of the API's that comes already sort 
of with retail as a resource. You can of course,   you know, get in touch with them if there's 
something that's missing, but luckily, Twilio is   here. So let's just go ahead and click it. And I'm 
going to call this just Twilio API, Twilio. One L.   Okay, so now let's go to Twilio. I don't really 
want this anymore. For now. Let's go to Trulia.   Just gonna click here and sign up for a 
Twilio account. I can get a Twilio API.   And what is it asking us for? It's asking 
us for an account s ID and an auth token.   So let's go ahead and find that. And now I want 
to use the SMS service. And I'm just building   a guess what's the most alerts and 
notifications? How do you want to do this   I don't know, with code or the minimal 
code to admin walk out, okay? JavaScript.   Get Started.

Okay, perfect. So we've got an 
account s ID, it's going to take that, whack it in   here. And then autocon, share once again, I won't, 
this won't be active. So please do use your own.   When doing this tutorial, these will 
not work any more. And then just crucis.   Wonderful. So that is it back to resources, 
I want to create a new app. So we have our   Twilio API ready, let's actually set 
these down because we are done now   with those. And let's go back here. And I'm 
going to click import from query library.   And then I'm just going to 
find the Twilio API. Wonderful.   So we've done that. And the next thing 
I'm going to do is actually create a form.   Okay, so this form is essentially where I am going 
to send text messages from. So let's go ahead   and maybe make this a little bit nicer. So I can 
essentially drag items in here, I'm going to drag   some text. In here, I'm just going 
to say send a text quick. So using   send a text quick. So this is to make it bold.

We 
don't need this anymore. Perhaps we'll put in an   emoji though. Anyway, they are quite fun. So I'm 
gonna put in a little mobile phone number, yeah.   Wonderful. So you've got some text. And now let's 
actually put in some inputs. So I need the input,   because I need to know exactly who I'm going to 
text, I'm going to maybe put in this number input,   let's use a number input, maybe this won't really 
be the best one. Now, let's not use this one.   So I'm just gonna delete that one. 
Let's just use the text input.   Just because I didn't want to select a number, 
I actually want to put in quite a long number.   So let's put a number here.

Okay, we can 
of course, you can start this up however   you wish, you can position it like this, I 
think that looks maybe a little bit better.   So we've got a phone number here. The 
next thing you want to do is make this   look okay. I mean, you can you can go wild, okay, 
it's gonna be totally up to you how you want   this to look. You can spend hours starting 
up, I don't want this to be about styling,   I want it to be about, you know, getting getting 
the job done, and then styling afterwards.   So we've got that the next thing I'm going to 
do is just put in a text input below here, and   this is going to be for the actual message itself. 
So perhaps maybe there's a better one than this.   Let's maybe use this different one, okay.

But to 
delete that, you can use a bigger one as well,   we can use a text area, but I think 
I prefer so let's use the text area.   Again, just put that up the top. 
Once again, let's maybe call this   message. I can just spell message message and then 
enter value or enter text it is up to you. Okay,   so I think this is looking good. We can have this 
as a required field. So let's make this a required   field. And then you can do a bunch of other stuff 
to to really sort of personalize the whole thing.   Okay, so now that we have that, maybe let's 
make this a little bit smaller now. Wonderful.   So now, let's get To hooking it up. So we're 
going to do this with these two values. So   first off, I want you to just going to 
change the color of this just because I can.   So this is how you do something like 
that. You can change the button color   to whatever color we wish now. So you have the 
Twilio API. Okay, so I essentially want to post   to my Twilio API.

So let's get the docs out again.   So let's carry on with this. So we've got our C 
ID, we've got our auto token, let's get a trial   number. So this is going to be our 
trial number, choose this number.   Okay, so this is now our new phone number. 
I'm just going to make a note of this.   Okay, so now that we have that, we need to 
figure out how we're going to use this in order   to send text messages. So I'm going to get the 
Quickstart docs. And then just go to node j. s.   Twilio REST API. So this is the request that 
we're going to have to make that makes sense.   API operation, oh, it's already done it for 
us. That's really handy. So I want to post.   So this is for addresses. I 
just want the one for messages.   So there's a lot in here, but I'm just 
impressed the retort already have this,   I pretty much didn't really need to do the 
messages at all.

So messages, messages, messages.   messages, Jason. Okay, got it. Okay, so 
now in here, where we already have the   account, si D, we've already done that part. 
So two, two is going to be the text input.   So I'm going to grab text input two, once 
again, this is how we would do it. And here,   I'm gonna grab text input two, and get its 
value. And that's the two and then the body.   So I'm just going to get the body of text area 
one, text area, one body, okay. And then the from.   We're gonna have to have a from which isn't 
actually on here. But that's fine. We're   going to add it now. So from and then 
here's where I'm going to put my saved   new phone number, because there's going to be 
my Twilio phone number. So just like that. Okay,   and let's try it out. So I'm just going to 
save that.

Let's rename this to send text.   And I'm just going to put in my phone number into 
here as a test using the country code that I'm in.   Hello, me. At the moment, this Submit button 
isn't really hooked up. But if I run this, that   should work. So query ran successfully. I'm just 
going to wait for my text. I got a text. Whoo.   Can you see that? Pretty cool. Okay. Nice. So 
we've done that that works. And it's actually   instead of me running it here manually. I want 
it to run if I click the submit button. So let's   click on this Submit button here. And I'm just 
going to have to add an event listener for an   event handler, sorry. And that's going to be the 
query send text. That is correct. I'm happy with   that syntax trigger. And I also do things like 
send confetti. So when the summit happens, I can   just send some confetti. So let's try that 
again. Hello, me summit. Oh, confetti us run   committees, I guess, thrown at us was the 
trigger was the buzzer has been clicked.

Okay,   cool. And once again, let's check 
with that as well. I got a text.   Wonderful. I've got another text. Amazing. 
So that is how we would link up the   Twilio API, and how we would link it up to 
this text input and this text input and make it   run at when we click the submit button. So this 
is looking pretty good. We've got our cryptid   dashboard, we can filter this table right here, we 
also have a separate table here for crypto coins   that we've specifically wanted to keep an eye 
on. And we can send a text using Twitter's API   directly from our platform. Now, one last thing, 
we can of course, you know, personalize this   loads, I can make a beautiful header if I want 
to. So you can just call this I don't know,   let's call it my crypto dashboard. It's completely 
up to you how you would like to do this.

So   perhaps Yeah, maybe let's sign up a little bit, 
just while we are here. Let's put in some text.   So again, if I want to use my current name, 
I can use current user and the first name.   Or if that doesn't exist, I'll just say 
Hello, friend. That's exactly what this   code is saying. I'm going to say, welcome Ania 
or friend, to your group to. So just like, so.   There we go. Great. Okay, so the 
last thing we'll do is actually   use the icons here. And this is 
going to involve some, I guess,   advanced coding, I say advanced, a little bit 
more advanced of what we're doing now.

So what   I want to do is essentially use these ID icons to 
get an image. So let's go ahead and do that. Now.   The first thing I'm going to do is actually create 
a new query resource query using the coin API.   So let's go back to the coin API documentation, 
because I want to get these images to coin API.   And then General, here, get all asset icons. 
That's what I want on the asset icons for this.   So to do this, I would simply get the asset 
icons. There we go, here we go, I can get   these. And I could just pass through an icon size 
too. So I'm going to copy this, mock that in here.   And let's make them better to access. So once 
again, however, I'm going to have to get the   API key.

And then just lock that in 
here, too. And click Save and Run.   Let's rename this query to 
images, to so it's more readable.   And now, the query comes back with all of our 
images, as long as the as well as the asset ID.   So if I was just to grab this, and then just paste 
it in the URL, you will get the asset. Wonderful.   So we've got that now we need to essentially 
put the icon URL sort of in here based on   the asset ID. So we're going to have to add some 
JavaScript to do this to pass the images. So I'm   just going to click here, and I'm actually going 
to create a custom column that I'm going to call   icon. Okay, and in here, I'm just 
gonna use an image tag like so.   Closing image tag, and I'm going to use lodash 
here. So the source for this is going to be this   is obviously for my retail syntax, I'm going to 
use find, this isn't a JavaScript tutorial.

So I'm   just going to provide you with a code. I'm going 
to get the images data, and then that's the first   parameter and the second parameter is going to 
be a function. So the function it's going to have   just gonna pass through for object and then open 
up the curly braces and return asset ID equals   current row, so current row of this table, asset 
D. Okay, so there we go. And then just do dot euro   Nice. And obviously, let's make 
sure that this is a string.   Okay, so now I'm just going to actually 
move this custom one right here.   Hard this icon. And we need to render this 
as pure HTML that we go. So now that we have   render those as HTML, that has now worked, we're 
getting all the icons show up. Pretty neat.   Okay, so now we can also preview this. 
So this is what our app will look like.   and wonderful.

Brilliant, I'm really happy 
with that the header is sticky. Everything   else is pretty responsive. And I can 
share this via this URL to whoever I   wish. Awesome. So that is a crypto app. Hopefully 
you found this useful. I can now create your own   crypto apps to using the coin API, Twilio API 
and resource. I'll see you in the next lesson.   Okay, so in this part, we're going to learn how 
to create an invoice tracker using a graph qL API,   as well as learn how to embed videos into 
the platform. So let's do it. For this, I'm   going to have to start a database, I like to use 
data stacks.

So I'm just going to log in that I'm   going to click on Data stocks. And I'm just going 
to click try for free. Okay, now I've already   created an account. So I'm just going to click 
here and just select an account to work with.   Great, so when I'm here, I'm 
going to create a new database.   And then I'm just going to get started clicking 
the Get Started button. And what should we call   our database? Let's call it in, or says, and 
the keyspace name is going to be invoice says   his space, just making it super easy 
for you to follow along with. Okay,   and then I'm going to select Europe because I'm 
in Europe and just create a database, is it.   Okay, so once we are here, we 
just have to wait for this status   to connect at the moment, it's pending, 
I'm probably going to cut this out.

So   okay, so the status not active, but let's go ahead 
and click here. So this is important, we're gonna   have to have all of this information. But first, 
let's go ahead and connect to our graph qL API.   Now, this is essentially the URLs 
that we're going to use in order to   hook up the graph API to our platform. So I am 
just going to select this right here. And that's   going to open up our playground. However, we need 
to get our API key or kasandra token.

So this is   what it looks like. And we're gonna have to put 
it in here in order to communicate with this   and communicate with it in our retort app 
too. So I'm just going to go to Settings.   And then select admin user and generate the token.   So here we go. Here is our token. I'm just 
going to copy that. Please do make a note of   it somewhere, just to make things easier. And to 
communicate with this playground. I would just   click that, like so. So that is looking good. 
That works. We've proven it works. So now let's   go back to our retail app. I'm just going to 
get rid of this. And let's create a resource.   So this resource create new I'm 
going to search for the graph qL API.   And in the headers This time, I'm going to put 
this token as a string, and then here is going   to say kasandra token I'm just going to paste it 
like so. And then the URL, the base URL for this,   well, it's not going to be this, it's 
actually going to be.

So if you go back here   to the documentation, graph, QL.   It's going to be the invoice keyspace. But the 
first thing we need to do is actually create some   data. Okay, so let's just put this in there for 
now. So this is the URL that we want to be able   to interact with. So I'm just going to put that as 
the base URL, like so. And then I'm just going to   name this graph. Well, 
invoices and create resource.   Okay, so now that we've done that, let's create an 
app.

I'm going to call this invoice FACA, like so.   So now we're connected to our database, 
we're actually connected to the database   key space, okay, because we use the URL for 
the key space, but there's nothing in there   yet. So there's two things we're going to do 
with this, we're actually going to make our   app retrieve data but also add data through the 
app to just to get started there, I'm just going   to put some dummy data into our database first. 
So I'm going to do this using some mutations.   So back here, under the schema, I'm actually going 
to create a table, it's going to be mutation,   this is going to be called an always says, create 
a table for the invoices, open up some ups.   Do you actually want that so the queue 
space name? Well, we know this is invoices.   Key space, the table name is going 
to be just going to call it invoices.   And we need to get some partition 
keys, I'm going to have us it's   going to be an ID and the ID is actually 
going to be a string.

So type. basic   text, the ID are the values that are going to 
be allowed are going to be Name column company,   which is also going to have a type   of basic text. Space this up a little bit maybe   we're also going to have a value of 
the invoice which is going to be a   float. So the idea is essentially the 
invoice ID will reference the company name   is to just a company name is a string, the 
value is going to be the value of the invoice.   We're also going to have a paid or not 
paid, which is going to be a Boolean.   And we're going to have a timestamp which 
is actually going to be a text that is like   a timestamp but I'm just going to do tags just to 
make our lives a bit easier. Okay, and just click   Done. So we've run that we've created 
a table. The table name is invoices,   and it has an ID a company a value, a paid or not 
paid and a timestamp.

Wonderful. So we've created   a table now let's get to adding an invoice ID to 
our table. So for this we can now use the docs.   I'm going to have to   go to this URL again. Okay, so I'm just 
going to replace this with that URL.   And I'm going to get to the Cassandra token 
again, so we can talk to our key space.   And then I'm just going to write a mutation 
to add an invoice. So insert invoices,   that's what we want.

So it's gonna be mutation, 
and then invoices, so you can go like invoice   one, for example, and then insert invoices. 
Now I'm just going to have the value.   So what did we have in here, 
again, where we had the ID,   we can actually just see these here. So 
Id as a string, we're going to invoice   one. And then we're also going to have company 
which is also a string, let's go aren't besties   cup cakes, limited spaces out so you can see a   paired true time stamp slew that for now, 
value. And we'll have this is a float.   So let's do 200 oh one, okay. And the 
timestamp took us to today's time some.   So we're going to use the ISO one,   it's going to put as a string, okay.

And then 
let's make it maybe a month back, just like so.   So there's one invoice. Let's see if that 
works. And then I'm just actually going to   so those are our values. And then let's just 
return the values. idea for works. Okay, so that's   what we've added one invoice while I'm here, 
let's just add a few. So just make this zero to   your two, this is going to be Motley Crue just   paid true. And then this make this the 10th. The 
value is going to be for I don't know this much   about again, I'm not going to add a lot. I'm just 
going to do this for demonstration purposes. So   maybe let's add like, just one more. For 
now. Who asked me Have I missed her call?   Then to get paid? Let's do some false, then let's 
make this the 14th. The value is going to be for   course you've got three or Ruiz invoices.

And now 
let's just do one more. Just because I want to   have the highest harco id 
again, maybe? And then can you   fit. Okay, so we've got four invoices in 
our database at the moment, let's see if   we can get them into our app before we start 
adding stuff to our database from the app.   So I'm going to go back here.   Delete that one, we don't want 
this one, I'm going to create a new   resource query. And this time, 
I'm going to use the graph qL API.   And now I need to retrieve my data. So I know how 
to do this.

If you want to use the documentation,   just refer back to this. I need to 
get all the data and that will look   like this query where we used to get all of 
them so we could just write our own in the   graph qL playground and see if it works. 
So I'm just going to comment out for now.   Use the docs. So if I want to get all the 
invoices, it's gonna be a query and then invoices   Id value timestamp was a company.   Wonderful. So this is the correct query to get all 
four of our invoices, I'm just going to copy it.   And then just put it in.   Now the URL, it's asking me for the URL again, no 
worries, though, I'm just going to copy this here.   Seems that we didn't get the 
correct.

We want this one.   Yeah, okay, so I'm just going to change this 
to be the one we pre made. Okay, wonderful.   You can, of course, just create one from 
here too. But as we've already made it,   I'm going to use this one right 
here. And just click Save and Run.   And great. So we now have all four invoices 
ready to use for our app. So the nice thing   about this here is you can actually see 
the queries and mutations available to you.   So it's taken them directly from the docs in 
the playground that have been generated for us.   Great. So now that we have that, I'm 
just going to actually delete this.   And then let's make a new table by 
using this new query that we just have.   Okay, so I'm going to rename this to something.   Let's call this graph QL. invoices. Okay. 
So now instead of this data like this,   so this is some like default data, I don't want 
this, we're going to have to use our query.   So we're going to get the graph qL invoices data, 
just like that.

And now, this is a great time for   using this because that's obviously not working. 
That's not enough, we need to get the data,   but then we also need to get the invoices, 
and then we also need to get the values.   So I'm going to do invoices, and then bodies. 
and wonderful. So we now have thanks to our   little left sidebar, we now have all the four 
invoices in our dashboard that we need. Great.   It's gonna make this a little bit 
bigger.

Okay, so let's carry on.   Once again, maybe let's do some personalization. 
So I'm going to change this to invoice reference,   just to be super clear about what that is this 
value, well, I think value should be fine. But   maybe let's make it US dollars. So I'm just 
going to choose dollars. And the time stamp,   I'm just going to change this maybe to the 
date. So I'm just going to change this to   date, and then use the date original timezone. To 
change that into a date format, which is easier   for us to read. Company I'm happy with company, 
maybe let's just make it like a capital C.   And this paired, so I can 
change this to a checkbox.   Great. And now these are the ones are paid.

And 
these are the ones that aren't paid. But we want   to be able to edit this right, so we'll do that in 
a bit. Just gonna maybe make this smaller again.   Before we move on, I'm actually just going to show 
you how to create headers that aren't I guess tied   to the top. So to do that, obviously, we're in 
the header. Now that is not correct. I'm going   to move this down to the main section. I don't 
really want anything in the header this time.   Because I don't want the header to essentially 
appear on the published app. So by leaving it   blank, that's exactly what will happen. So this 
time, I'm going to actually just make a container.   Make your own this big and I 
can change the color of this   container if I wish I can make 
it like this. greeny color.   Oops. greeny color. Cool. And then in 
here, I'm just going to essentially   put in maybe like an invoice tracker. 
So I want to title put in a title   And as the value I could just use HTML 
like this and put in voice, cracker.   Okay, and that will work, too.

Voice.   And then maybe let's put some more text here.   Hello Ania or friend, this is 
your custom invoice tracker,   I mean, there's really a bunch of stuff we can do,   we can add an image, we want to put 
in a little image of an invoice.   So then I can just simply select 
this. And then I actually have   some images on my image out, which I like 
to store. So I'm just going to use that.   Okay, so that is an image from my imager. And 
I'm just going to replace that URL, like set.   So we've now got a title.

This is what it 
looks like if you preview the app and you   want to share it via the URL. So you see the 
other head has now gone, that is the main   header. Okay, let's go back to editing 
the app. Now, we can actually create   things super easily just by dragging and 
dropping charts. So if I want to create a chart,   I would simply drop this in here. And then it's 
going to get my graph qL invoice data. Now we can   be really specific about what kind of data we 
want to feed into this graph. So let's do it.   Once again, going into data is not enough, we 
need to go into the invoices and get the values.   Okay, so just like for the table, 
we need to be a bit more precise.   So now it's done about invoice and value.

However, 
what if we don't want this? What if we want to do   it by value and date? So we can easily do that, 
I would simply have to just change the x axis   values. So other moments ID, I can choose 
timestamp. And it really is that easy.   Okay, so I can put value here instead. And at the 
bottom, I could put dict. Okay. Obviously, oops,   we have to make that a little bit better 
in order to see that in a nicer way. Okay.   So we've now created a graph to let us 
know what days we made the most money on,   you can edit this way further, like say I want to 
change the color of this, I can of course do that,   too. Wonderful. So the next thing I want 
to do is actually also maybe create a pie   chart. So let's go ahead and do that. I'm 
going to show you how to create a pie chart.   Grab that here. And this time, I want to just 
select pie chart. Once again, I need to go into   the invoices, values.

And great. Again, I if I 
don't want this to do it by invoice by ID, I can   change it up. So to do this, maybe again, 
let's do this by Okay, I want to change the   colors though. So I could just go around 
and change a bunch of colors if I wish.   Again, we're not gonna be splitting it by these. 
So let's change that. Let's do it by paid or not   paid. So the green is how many haven't paid paid 
white invoices. And this is how many of them   paid. So that's quite a good statistic. I 
think that's quite a good one to keep that.   And I can also do things like put these in 
containers. So let's maybe do that just to   make it look a bit nicer. So I'm going to grab 
a container Want to stick this in the container?   Okay, and now I can put a title, or just some 
text that will look like it's part of the   same container. So if I do this, and I just put, 
let's make this maybe an H, three tag this time   paid versus on paid.

And then we 
will just make sure that it's in the   middle. Okay? Cool. We can, of course, 
put more things in this container if we   wish. So maybe let's go ahead and do that. 
It's totally up to you, we can even do oops,   we can even put on another graph, maybe two. So   show how many clients have given 
the most money. So once again,   we will now need to go into the data in voice 
says earlier is to get that data. And this time.   Let's do it by company. So now we 
can see which company has essentially   given us the most money. And again, maybe let's 
change that to a different color. Wonderful.   Okay, so this is starting to shape up really 
nicely. If you let's move that a bit further.   Oops, down here. Just so we have a bit more space 
for these things, we don't need to squish them up.   For example, we actually 
want to put a video up here,   I'm just going to make some 
space.

For that to happen.   Let's give this a title to secondary invoices. 
By value. Maybe let's get rid of this one. And   then also give this one a title. So this should be 
paid versus on. Paid versus paid versus on paid.   Okay. I'm going to stick this table up here.   Move this container down a bit.   And just elongate that just in case we 
get more invoices coming through. Okay.   So now I'm going to show 
you how you can also embed   videos if you wish. So for this, I'm just going 
to maybe, let's also give it a title, have you   done your tax returns is sort of 
like a reminder, if you're managing   these platforms, right, and a lot of people are 
using them, you might want to remind them to do   something that is important. So have you 
done your tax return, and then maybe let's   I don't know what we want to do with this.   I actually don't like the way this looks.

So 
let's get rid of that. And I'm going to use a   text instead. So I'm going to 
put some text in just like so.   And then make it centered. Let's make 
this like an H, there's the paragraph.   Let's have a play around. You can of course 
edit these even more. That's the beauty of   this low code platform. Okay, so have you done 
your tax return and then let's put in a video.   So to add a video, I would simply just drag this 
in here so I'm just going to put it And here.   And I'm just going to I mean, yeah, that's a great 
video, but maybe you should do something that is   to do with taxes.

So you can obviously put your 
own video, I'm just going to use one of YouTube   tax return us just because we are 
dealing with dollars. So let's   just give a video on that. This is from 2020. 
But, I mean, I know we're in 2021. But I'm just   gonna use this one, just so you can see what that 
whoops looks like, needs to get this, get the URL   and just put it in there. Okay, wonderful.   So this is looking really good. let's 
preview what this looks like on the app.   Okay, so this is what you would look like it 
would look like to anyone that you shared it with   looking or some very minimal, we did very 
minimal start to it, you can of course,   style this up as much as you want.

All the 
components come already pre made, you can   style them up with just by changing colors, or 
texts. Or you can go that little bit farther   by changing the CSS just like we did in the 
first video. Okay, one more thing to do.   And that is I'm going to show you how to 
add an invoice and also update an invoice.   Let's get things going by creating a new resource 
query. This time, I'm just going to make this   bigger. So this time, we need to figure out 
where to actually add data to our database.   So to do this, let's first off practice in our 
playground.

So I'm just going to comment this out,   and then write a mutation using the docs 
provided in order to insert a new invoice. So   I'm just going to essentially use this Doc's to 
help me we are going to be writing a mutation. If   you're not super well versed in graph qL, I would 
recommend Of course, doing a tutorial previously   on it as this is not a graph qL tutorial. This is 
a local tutorial for those, you know, who already   have some graph qL knowledge but of course, please 
don't let that stop you. Let's carry on. So for   this mutation to create a new invoice, I was 
simply need to create a mutation, which is going   to look like this, this invoice is going to be 05 
and I'm just going to put insert invoices, and in   here the values that I need to essentially 
create my invoice. So the value for this   is going to be ID invoice 005 as a string. 
And then I'm going to have the float of 10.1   a timestamp which I'm just going to use as a 
string just to make our lives a lot easier.   So I'm just going to use this format here.

And 
perhaps Let's change things up a little bit.   Maybe let's just change this to 15 Okay, just to 
mix it up a bit. So we've got the ID we've got the   value we've got the timestamp Next we need company 
unpaid. So let's say a company let's write company   and then of course this is going to be stream 
so I'm just gonna put Aeneas abacha says they're   limited and is Abacuses limited 
fine.

Is that how you spell Abacuses?   I don't even know. And he is ant 
eater. mittens limits. Okay, let's   unpaved, this is gonna be a Boolean, as we 
said, and I'm gonna say false. Okay. So this   is how I would expect the mutation would 
look like if I was to create a new one, but   let's check it out. So let's go ahead and run 
it. validation error sub selection Christ.   Sent invoices. All right, okay, we need 
to return something. So let's just return   some values. And I'm just going to attend 
an ID just to see if it works. Okay,   wonderful. And that has worked. So we know this is 
the mutation we need. So let's grab it and use it.   So I'm just going to go back to I'm going to 
just copy this actually first, back to here.   And on this query, I'm just going to paste this in 
here like so. Okay, we know this is the mutation,   we know this works, we, we now need to replace, or 
the, the ID the value of the title of the company,   and paid with staff from our platform.

Okay? So 
for this, maybe let's just, let's just check, it   works from this here, this platform actually here 
to the students just to invoice six, and was six,   this change the value and the change of timestamp? 
And let's just save this and run it just to check   again. Okay, that has worked. Our response is, our 
query has run successfully, we've got a response.   So this query works. Let's rename this 
to add invoice to make a more readable,   okay. And now let's get to replacing all 
the values with stuff from our platform. So   how are we going to do this, we need to replace 
all these values, we'll probably make a modal   we're going to have to have an ID, this is 
a string, as we said, has to be a string.   Okay. So just like that, and I'm going 
to replace whatever we pass through this   as the ID.

Next, we need the company. And 
the company is also going to be a string.   So let's replace whatever we 
pass through here as the company.   Great, we've got the ID, we've got the 
company, let's do the timestamp next.   And this is also going to be a string, 
we've chosen this to be a string   just for this demo. And there we go timestamp. 
Okay, now let's move on to the value,   the value is going to be a float, remember. 
So we're going to have to put float for that.   And then we're going to just grab the 
value and replace it here.

So whatever   we pass through the body, it's going to be the 
value. And that's it. I know we also need to pay   and pay it is going to be a Boolean, then 
we're going to replace paid with page.   Wonderful. And this I'm just going to have 
as I do, it doesn't really matter. Okay,   great. So we are sort of that now our variables 
have generated for us below, based on what we have   just written most recently.

So now I think 
it's time to essentially create our modal.   Okay, so, to create a new invoice, I am going 
to have to just like we did if you remember,   in the first tutorial, with creating 
traits, we're going to do the same.   So let's grab our knot button, we 
need a modal, drag it down here.   Let's perhaps rename this to add invoice, 
invoice. Okay. And now maybe we want to   change the button to be red. Why not? 
Or maybe green greens less angry.   Okay, so got a modal, let's start 
dragging stuff into the modal.   So for this, I am going to essentially put in 
all the inputs that we need to create an invoice.   So this will include everything we have just, 
I guess, stated our variables. So let's do our   first one, I'm going to drag in a text input.

And 
then I'm going to put a placeholder placeholder of   enter invoice reference, this is going to 
be essentially the ID of the invoice. Okay,   so there we go invoice reference. The next thing 
we need is this time again, let's actually have   a text input. And then this is going to be 
let's make this the company. So label company   name. Then let's have a another 
text input for the timestamp.   Or actually, no, let's not have that. Let's 
actually make a date selection for this.   So I'm going to change this to this 
let's change this invoice amount.   Now let's make this let's get rid of this 
actually and make a user number input instead.   Let's get the number input this time,   just going to drag it in here.

Let's change the 
label. Let's make the label say invoice. amount.   Great. And I'm just going to delete this using 
my keyboard commands. Okay, so that is now gone.   So we have the image reference, we have the 
company name, we have the invoice amount,   what else do we need? We need the actually, 
there's another one we can use. Okay,   let's use the currency one. So I'm just 
going to drag that in here. And once again,   invoice amount. And then once again, use 
my keyboard to delete that one. So now we   now got our currency one that's formatted 
zytek currency. Okay, that makes a lot more   sense. The numbers now will come in currency 
format. Wonderful. Okay. Now, we need to.   Now let's pick the date time picker. 
So I'm just going to search date picker   and grab that and just whack it in to here. Okay, 
just like that.

And now we have a date selector.   So I'm going to use this for my timestamp 
essentially, carry on. The next thing I need to   do is the paid or not paid. So as the brilliant, 
I'm simply going to look for a checkbox.   So I'm going to use this right here. And 
just write paid. Question mark. Easy.   So that is now it, let's maybe add some text to 
make it really obvious to the user what this is   for. I'm just going to drag that in and put 
add a new invoice. There we go add a new   invoice just as a title right here, it doesn't 
look super great. Of course, we can edit it,   I can center this, if I want just to make 
things look a lot nicer. So that we go.   Cool. It's going to move these down a little bit 
just to make it a little bit more spaced out and   just I think look better, in general.

Okay, so the 
next thing we should do is actually make something   happen once is filled out. And for this, I'm 
going to use a button. In the previous tutorials,   I did make a form. In this one, I'm going to 
show you how to do without form. So I'm just   going to use a button instead, to essentially 
trigger a query if all the values are filled out.   So let's go back in here, and now that 
we have our variables, I'm going to use   the Rachel syntax to pick out components and 
the values as the variables. So for the ID,   well, we know that the text input 
one here, value is going to be the   ID of the invoice.

So I'm going to grab text 
input one value, okay, do you see the blue   text showing up? That is the components name. 
Okay. Next we do the company. So this is going   to be text input two's value, the timestamp 
which is going to be the number input value.   Okay. I think it is number input value, maybe it's 
not number input number input. And that input in   one is not defined. Okay, so let's go back here 
and just double check that now that is the invoice   type number invoice. Number two value is the value 
of the invoice, okay? And this is date picker one.   Find. So date picker, one is going to be the 
timestamp and his copy is cut that out sorry, and   put it under value.

And this is going to be date 
picker, date type date. Yep, that's the one date   time picker. There's format to string because we 
did say that time something needs to be a string.   Cool. And finally, let's get the little checkbox. 
So it's just checkbox one, as you saw by the blue,   little writing. Great. Okay, so we've done it, 
we have picked out all the variables that we need   based on the input values. And now we just need 
to hook up the button to trigger this query.   So essentially, because we are on the query 
already add invoice. This is sort of done   for us the queries are invoice and if we click 
the button, this will trigger the query. Okay.   Great. Just because I like it, I'm gonna put some 
confetti here too, if we click the button. Okay,   so now let's save this and test it out 
invoice reference.

Let's go ahead and put.   Okay, so that's Ron, but obviously that we didn't 
add anything because there's nothing in here.   So let's put invoice 07 
company name, I'm going to put   Tony's turtle next limited invoice 
amount to 123. And let's pick a date.   Sure, there we go and just select paid and submit.   So we have just submitted it we have added an 
invoice then that was that seems to have worked,   awesome query ran successfully, but 
we won't see it in our platform. Okay.   This is because we need to run another query after 
all this is done, we can do it let I'll show you   how we can do it here in the event handlers. So 
once this, we click this button, we essentially   send an invoice we create a new invoice, but I 
can also ask it to get all my invoices again.   So I'm going to run the graph qL invoices query 
that we previously wrote.

So if we click it, it   will add an invoice but also get all the invoices. 
So let's test that out. Let's add another invoice   or a I'm just gonna change the price again, 
and just change the date and click Submit.   So now you will see here, amazing invoice ate 
and invoice seven and are visible in my table   because the graph qL invoices query has run. If 
you remember from my first tutorial, you can also   do it on the query itself. So after the query 
ran has run successfully, has ran successfully,   it is totally up to you. Okay, whichever one works 
best for what you are making at that moment in   time. Okay, so this is looking fantastic. I'm 
really pleased with how far we have gotten,   we have been able to get data from our database. 
But we're also not adding data to our database   from the platform itself. Great. And finally, 
I'm going to show you how to update an invoice.   So for this, I am once again going to create 
a new query, let's just go here, query source   query.

And let's rename this to update invoice 
just to be super clear about what we are doing.   Now, I'm just going to save that and I'm 
actually going to just copy this mutation,   because essentially, to update an invoice, we have 
this mutation right here. I'm just gonna paste   that. And then I'm just gonna change oops, just 
change this to say, update invoice instead of   insert invoice as per the graph qL playground 
documentation. Okay, so it's exactly the same   apart from your updating, moonboys, not adding 
one. And now we need to actually pick out   the correct components of values for this. So I 
want to pick out whatever row I interact with.   So to do this, I'm going to grab the Table 
Table, what is it table one, table one,   I'm going to use something called record update to 
do this, the record update is actually a property   of the table, please feel free to mess around 
with it, it might seem quite complex for now,   as it's probably not something you've come across 
before, but just know that it's a property of the   table to update rows and just pass to a zero to 
make sure that we are the first item of the array   and grab the ID of whatever row we are in.

Okay, 
and do the same for this wherever we are and we   want to grow the company. And whatever role 
we are in we want to grow up the timestamp.   And whatever row when we want to grab the value. 
I'm also going to parse float the value just to   make sure that it's accepted. in case anything 
goes wrong. I just want to wrap it in a pass float   as this has to be a float value and paid again 
let's whatever row we are and we are grabbing   the paid value.

Okay. So that is it. Let's check 
it out. I'm not sure why it's red. Maybe when we   save this, it'll go away. But I am confident 
that this is the correct code. Okay, now one   more thing, we actually need to enable editing for 
all of these. So enable, enable, enable enable.   Great, now we just need an event handler. So 
this time, I'm just going to choose the change   option, and then trigger update invoices. Okay, 
so let's run this, it's going to minimize this,   click Save. And now we need to do one more thing. 
Once we update the invoice, we also need to   run the graph qL invoices query to refetch all 
the invoices. So I'm going to do that on success.   So after the query has run, and 
has been successful, I want to get   all the invoices again. So now let's try it out, 
I'm just going to change this and save changes.   And great, so that has worked, that is 
updated, wonderful.

Everything is looking good.   Okay, and we can see here the 
query has run successfully.   Amazing. Okay, and it's picked out in boys three, 
because that is the invoice that we are wonderful.   Now I can I could rename this to, you know, 
get invoices, it would make a lot more sense   as that is what we are doing.

And will might make 
much more sense with what I've written below. So   add invoices, and update invoice, that would be 
better. But you know, then you'd have to change   that everywhere you've used in the app. So 
for now, I'm just going to get rid of it   and just keep it as graph qL invoices for now. 
Okay, wonderful. And let's check out our app.   So this is what our app looks like it is now 
finished. If I interact with one of these and save   the change, you will see that that has worked. 
Everything is looking good. Amazing. Okay, and   it's also updating all the graphs are dependent 
on this data. So the bar chart and the pie charts,   too. Okay, so I hope that video was useful, we 
have now completed three low code solutions,   all very different, or practicing a lot of 
different API's and a lot of different techniques.   So hopefully, there was a lot for you to take 
away from this course. Next up, where to go next.   Okay, so hopefully, you've learned a lot by 
building three completely different financial   apps, I tried to make each tutorial very 
different to really sort of maximize your   potential for gaining knowledge.

Now, if 
you're not particularly into financial apps,   there's a bunch of other stuff you can build to. 
If you go to the retail site, you can actually   see a bunch of different templates that you can 
click on in order to get to coding straight away,   using them as a template. Some great examples 
are a custom CRM, a admin panel, a stripe refund   tool. So you can imagine you're just working 
at a maybe small business and you need to   figure out a way to allow everyone on the team 
to issue refunds quickly, you can build a stripe   refund tool that looks like this. Other 
things you can build on s3 file exporter,   and get hub PR dashboard, a Firebase admin panel, 
a customer success panel, customer support tools,   inventory management, and image annotator and 
machine learning image labeler. And so, so much   more. The potential for this is really 
quite large. And I hope you can have a go   at creating your own dashboards today.

Thanks 
so much for watching, and I'll see you soon..

test attribution text

Add Comment