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