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.
