Say Hello to Anvil

In this video, we’ll take a tour of Anvil. We’ll start from a blank page, and build up to a multi-user web app complete with database storage and user accounts - all in nothing but Python.

By signing up and building along with this video, you can learn all the essentials of Anvil.

Take a tour with me:

Now you’ve watched this tour, it’s time to explore further. Sign up and try it yourself, or watch more tutorials in the Anvil Learning Centre.

Next tutorial

In our next tutorial, we build a To-Do list that allows you to add, edit and delete reminders.

Topics Covered

Constructing a User Interface | 0:36 - 1:38

We construct the UI by dragging-and-dropping components from the Toolbox. We add a TextBox to enter a name, a Button to click, and an empty Label where a greeting will go. The Properties panel allows us to configure these components.

Handling events | 1:38 - 1:50

To make the Button do something, we simply double-click the Button in the Editor. This creates a Python method that runs when the Button is clicked.

To configure more event handlers, use the ‘Events’ box at the bottom of the Properties panel on the right:

Controlling components from code | 1:50 - 2:18

Each component is available as a Python object. Their properties can be modified in code. We set the event handler to put a greeting in the message label, using the name entered in the text box:

  def button_1_click(self, **event_args):
    """This method is called when the button is clicked"""
    self.message_label.text = 'Hello, ' + self.name_box.text + '!'

Entering a name now displays a greeting:

Publishing your app | 2:18 - 2:50

We’ve just built a simple web app - let’s publish it!

If you open the Gear menu and choose Publish, you get a private link with an unguessable URL. This is like a Google Docs sharing link. You can also get a public link with a more memorable URL (this app is live at https://hello-world-demo.anvil.app/).

Calling functions on the server | 2:50 - 3:51

To run code on the server, we add a Server Module. This is a Python module that runs on the server. It’s ready to go right away.

We define a function to print the name that was entered:

def say_hello(name):
  print("Hello, " + name)

And we decorate it with @anvil.server.callable so we can call it from our page:

@anvil.server.callable
def say_hello(name):
  print("Hello, " + name)

Then in the client code, we can call it by running:

    anvil.server.call('say_hello', self.name_box.text)

When we run our app again and enter “Meredydd”, we see that the server has printed “Hello, Meredydd”.

This Server Module is running standard Python, so it can run any Python packages such as pandas, numpy, or googleads.

Storing Data | 3:51 - 5:00

You can connect to your own database, but you’ll often want something easier. We create a Data Table to record the name of each visitor we’ve seen. We give it a single text column, name.

Then we put some code in the Server Module to store the names as they are entered:

  app_tables.visitors.add_row(name=name)

User registration | 5:00 - 6:50

We enable the Users Service and discuss the features that it supports - Email + Password, Google, Facebook, plus your company’s Active Directory or certificate system.

It automatically creates a Data Table to store the usernames, password hashes, and other data it manages for you.

To show the login/signup dialog, we add this line to our Form:

anvil.users.login_with_form()

We link the Users table to the Visitors table so we can see which user entered which name.

Then we try it out - we run the app, sign up and verify our email, and log in. We see that we have a new row, and we’ve linked the entries in the visitors table to our users.

Saving and version control | 6:48 - 7:40

That’s it! Time to save what we’ve made. We hit the Save button to store the state of the app at this point in time.

Then we look at the version history for this app. It’s backed by Git, so we have complete version control - and we can clone the app as a Git repo to work on it offline.

Finally, we set a particular version of the app to ‘published’ - this keeps our published app separate from the one we’re working on.

Try it for yourself

Build this app for yourself to master the essentials of Anvil. Sign up and follow along, or watch more tutorials in the Anvil Learning Centre.

Next up

Head to the Anvil Learning Centre for more tutorials.