Anvil: Web Apps with Nothing but Python Transcripts
Chapter: Application first steps
Lecture: Creating the Fitnessd app
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
It's time to create our app and actually start writing some code and we're going to focus on that for the rest of the course.
0:06
So here we are on anvil.works. Pretty cool domain. We're going to get started building our app. Now, like I said, you can create your account here.
0:14
Having a free one pretty much let's you do what you need to do for most of what we're doing in this course.
0:20
Having a paid one obviously lets you do more. For example, you can't host on a custom domain like we're going to without a paid account.
0:28
So here we are, we're going to get started by just clicking Start Building. If we hadn't already logged in or registered
0:34
we would do that, but now it's just going to take us straight to where we can create our app. Now, one of the things that is a little tricky
0:40
for me working with Anvil is I always feel like I have the webpage and then I usually have an editor
0:47
but the webpage that I'm viewing and interacting with created by Anvil, is also the editor. You should press the Stop button as you'll see
0:55
and so in order to keep myself from trying to close that window and go back to my editor I like to have this full-screen
1:02
just dedicate all the space to it. There's really no reason to leave our web browser, right? It's going to both run our app
1:09
but also going to be where we're writing our app. Now, the app we're going to create is a fitness app. We've already sort of introduced that idea
1:17
and I call it Fitnessd without the e in there. So Fitnessd, but without the e. Here, you can see a little sample one I built
1:25
as I was writing this course taking the screenshots and everything. So we're going to start a new one that's why you see it down there already.
1:31
So we're going to start with the material design one and it comes down, and it's just not so creatively called material design one.
1:40
So let's give it a name. I'm going to call it Fitnessd, like that. Now, rename it, now our app is good. The next thing we want to do is we want to have
1:50
some links over here, so we're going to put a title. On the right, you can see that there's sort of this drag-and-drop thing we have.
1:59
Labels, we can put the labels over here. We have maybe a button if we want to put the button there. We can go and select the button
2:06
and, say, change its style like it could say, Click Me. And we could set its role to be primary so it looks like this, and so on.
2:15
This is not really how we want our app to look but just to show you really quickly how this form designer works here.
2:22
Let's go ahead and put this title over here that we're talking about, that they're suggesting we put.
2:27
I come down here, and I can rename these elements. If you want to program against them they should have good names, they always have names
2:33
even if you don't want to program against them but you probably want to give them names. So this is going to be labeled Title, like that.
2:41
And then, we could just put this up here as Fitnessd.app or something like that. This is going to be our title.
2:48
Okay, so here's how the form editor works. We have a little output from when our app runs. That's like the console, terminal type thing.
2:56
We have these forms here so by default they're form one, form two not super interesting I'm going to rename this one to HomeForm.
3:07
And be like our main page, you'll see this is actually the center of our application in a lot of interesting ways. Here's the client side modules.
3:14
We can go and add one of those. I'm going to get rid of it again 'cause we don't need it now but it just creates, well
3:19
let me just look at it real quick. It creates a Python file where we'd write Python code but incredibly, this runs in the browser.
3:26
It never runs on the server. The server modules are similar but these are going to run on the server. Right now, it's running.
3:35
We can write Python 2 code over there but if we have the paid version we can have full Python 3, which is great. I definitely want to have that.
3:46
If you don't have the paid version just write Python 2 code for now until you've decided that it's worthwhile for you, but, of course
3:51
when I write code, it's going to be Python 3. Python 2 is just about out of the loop. It's just about deprecated and so on.
3:59
We're going to come back when I have some of those. Here's the services that we talked about. We could have our data table service, our user service
4:07
send an email, app secrets Google Drive, and login, and whatnot Facebook services, Microsoft which requires the business account
4:16
and Stripe, as well as Uplink those are some of the things we spoke about. We can also configure the theme, and, just so you all know
4:23
I have the individual plan here. Okay, so this is the basic look and feel of our app. This is how it's going to work. We're going to write code here
4:35
and then when it's time to run it we just click this button. Actually, there it is, it doesn't do anything. It doesn't have anything going on
4:41
and maybe if we put a button or something right here then you see this little button one. Run it, there you go, now, we can go about
4:47
clicking our little button. So our app is running, this is what I was talking about with this sort of two experiences.
4:54
Here's where we work with our app and run our app and debug it, and then you hit Stop and you're back to the editor.
4:59
It's best to just have your web browser absolutely full-screen. Chrome is a little bit better than Firefox for this 'cause it actually hides the window
5:06
the tabs and everything, which I kind of like but in general I prefer Firefox. So here we go, we're going to be using Firefox for this.
5:14
All right, our app is created and now, we're going to have to start doing some cool drag-and-drop UI layout to start creating our application properly.