All right. 1
So now that we're more or less done writing Motoko code and we've completed the back-end for this 2
decentralized finance or defi application, well, it's time to actually think about what the user is 3
going to see. 4
So namely the front end of this application. 5
Now you notice that by default, every single new project that you create on the ICP when you use 6
the template, it will generate a set of assets, including a Dfinity logo and also an index. 7
html and index.js. 8
And you can tell pretty much from this HTML code that this is just the same as the hello world example 9
that we saw when we first set up for ICP development. 10
And that means right now the frontend for our Dbank actually looks somewhat like this. 11
So this doesn't allow us to use any of the things that we've created in our back-end. 12
And so basically we have to get rid of the template and replace it with this. 13
This is what we're going to create today. 14
We're going to hook up this front-end with our Motoko back-end and get it to actually work and to update 15
the balance to top up, to withdraw and to be able to use our Motoko code. 16
So let's get started. 17
The first thing I want you to do is to go ahead and simply just delete everything that's inside the 18
index.html, the main.css and also the index.js. 19
We're going to delete all three parts of our frontend basically. And instead we're going to replace 20
it with some new code. 21
Now, if you go over to the course resources for this lesson, you'll be able to download a file called 22
Index and Main. 23
Now, instead of saving them as HTML files or CSS files, I've actually gotten rid of the extension and 24
just kept them as text files. This way 25
basically, when you double click on it to open on your computer, it won't try to open it in the browser 26
because it recognizes it's an HTML file. 27
But what I want you to do is to go ahead and simply just copy the index file and put it into the index 28
.html. 29
And then do the same thing for the CSS, 30
so the main file goes into the main.css. And now we've got some basic front-end code. 31
Now because we've done so much front-end work in this course already when we covered HTML CSS, I don't 32
want to type all of this out from scratch so that we can focus more on learning new things. 33
But I think it's a good idea always when you copy and paste code to just make sure that you understand 34
what's actually going on. 35
So in this case, all we've got here is a container that contains a logo. 36
Now, don't worry about this just yet. 37
I'm going to talk about it in just a second. 38
We're going to create this logo very soon. 39
And then you can see we've got this current balance which corresponds to this line. 40
And then we've got a form where we've got two inputs: a place where we can put the input amount and 41
a place where we can put the withdraw amount. 42
And then finally there's a submit button. And then the CSS basically just styles up all of those components. 43
And I've kept it pretty basic. 44
So now what we are going to code up, however, is the index.js. We're not just going to copy 45
and paste code in here because we actually have to understand how to hook up the frontend with the backend. 46
This is really important. 47
But what do we do if we want to be able to see this so that we can develop it as we go along? 48
Well, in this case, we're going to set up a new terminal. 49
And making sure that you are inside the dbank project, 50
you're going to run npm install. 51
And this is going to install all of the packages that are required for this to get up and going. 52
And if you take a look inside package.json, you can see what the dependencies are. 53
There shouldn't be too many. 54
Now, the next thing we're going to do is we're going to run dfx start. 55
And that means we've got our simulated Internet computer running locally. 56
And then in a new terminal, I'm going to run 57
dfx deploy. 58
You might have already done this before, so you might have already deployed your code into the canisters. 59
But because we've changed a whole bunch of files, it's usually a good idea to just deploy and update 60
our canisters. 61
Now, finally, I'm going to run the command npm 62
start. 63
And this is going to spin up our web server and it will allow us to view what our current website looks 64
like. 65
So as you can see, we've got a broken logo because we don't have it in yet, 66
but the CSS and HTML seem to be placed in correctly. 67
Now, none of this is going to work because of course, we don't have any JavaScript code to 68
tell it how it should behave. 69
But the first thing we need to fix is this logo. In order to add this logo, 70
I've again included it in the course resources, so you can simply download it. 71
And once you've downloaded it, all you have to do is drag and drop it into the assets folder. 72
So the same folder as where the logo.png is. 73
So let's go ahead and do that. 74
Now you can either delete this Dfinity logo or you can keep it. 75
It doesn't really matter. 76
I'm going to get rid of it just so that it's less confusing here so that we've only got one logo. 77
And you can see this is the logo that I've created for our current project. 78
If you want to create your own logo from scratch, then I'll show you how I made this. 79
I didn't actually design or do any work. 80
Instead, I use this free logo maker online. 81
I typed in the name of my product and then I just went through this selection process and chose fonts 82
and sizes and styles that I liked. 83
And then we get to pick our favorite color, 84
add a slogan if you want to, and then type in some related icons to our concept. 85
Now, in the end, I actually didn't choose to use a logo with any of these icons, but you might feel 86
differently. 87
So once you've chosen all of your icons, then it'll show you a bunch of automatically AI-generated logo 88
results and you can basically just go through these and pick one that you like. 89
And then once you're done, you can download it by signing up to this free service. 90
They just want an email password, I think. 91
Alternatively, if you don't want to sign up, you can also just take a screenshot of the logo that 92
you like and then crop it to the size that you want. 93
And this is how I basically ended up with this Dbank logo. 94
And then all we have to do is drag it into the assets folder and we're golden. 95
So now if we go ahead and hit save and go back to our local host and then go ahead and refresh, you 96
should see the logo show up. 97
So perfect. 98
Now, this HTML and CSS part is at least complete. 99
And what we need to do now is to hook it up with the JavaScript.