DEV Community: Ryan

AnkiBuddy: Automating Flashcard Creation for Medical Students

Ryan — Mon, 18 Aug 2025 15:03:39 +0000

Executive Summary

AnkiBuddy transforms the way medical students create study materials by using AI to generate high-quality Anki flashcards from PDF documents in minutes - eliminating hours of manual card creation. Built by Dr. David Topf and using Anvil, AnkiBuddy went from initial idea to working prototype in just 2 months, with Anvil enabling rapid iteration and continuous improvement ever since.

Built by a solo developer
Prototype ready in 2 months
Users: 18,000+
Customer lifetime value: €70
MoM user growth: 32%
50,000+ PDFs parsed

Anvil has allowed me to do this as a solo entrepreneur. Any other solo entrepreneur that builds a software product needs to basically be a full stack developer who's also had experience with DevOps and has the skills to build a business.
Dr. David Topf
Founder and CEO, AnkiBuddy

The Challenge: When Manual Study Card Creation Meets Medical School

Every medical student knows the struggle: You have tonnes of PDF study materials, and you know that spaced repetition with flashcards is one of the most effective ways to learn. But creating quality flashcards manually is incredibly time-consuming. Turning a single PDF into comprehensive Anki cards can take hours.

David's sister Danielle, a medical student, experienced this firsthand. She asked David how she could use AI to transform her medical study summaries into flashcards. As David recalls, "When she showed me how long it takes her to manually generate Anki cards, I wanted to try to help".

What If We Let AI Do the Heavy Lifting?

David saw an opportunity - what if AI could handle the tedious process of reading through study materials and creating well-structured flashcards? This wasn't just about automation, it was about creating scientifically-sound study materials that would actually improve learning outcomes.

The idea became AnkiBuddy: an AI-powered platform that transforms PDF study materials into customizable, high-quality Anki flashcards optimized for medical education.

The Solution: AI-Powered Flashcard Generation

AnkiBuddy is a web-based platform that lets medical students upload their study materials and receive well-structured Anki flashcards within minutes. The platform:

Analyzes PDF content using AI
Generates professionally-structured flashcards
Allows easy customization and personalization of cards
Integrates with existing Anki workflows

No more spending hours manually creating cards. No more inconsistent formats. Just high-quality study materials, ready when you need them.

Building AnkiBuddy: Rapid Development with Anvil

David had already worked hard building an AI-powered PDF parser using Python - the next challenge was building a UI and getting it all deployed online. That's where Anvil came in.

He'd already learned Python for the AI part of the app, so he reached for Anvil to simplify the web development process and handle his DevOps and hosting. Within two months of working with Anvil, David had a working prototype of AnkiBuddy which he could give to users.

It basically simplified it to a place where, if I learn Python and I learn the rules of Anvil, I can do pretty much what I want.
Dr. David Topf
Founder and CEO, AnkiBuddy

More than just accelerating development, Anvil allowed David to offload database management, DevOps, and hosting. It saved him the headaches of navigating complex cloud platforms like AWS - letting him focus entirely on building his product and business.

He also took advantage of the support package offered by Anvil to help maximise his development speed and get answers to questions fast.

I completely underestimated how valuable the support plan would be. I’ve been able to work directly with the Anvil development team. They’re not just responsive; they’re some of the most skilled engineers I’ve ever encountered.
Dr. David Topf
Founder and CEO, AnkiBuddy

The Results: From Idea to Impact

Since its launch, AnkiBuddy has helped 18,000 medical students transform their study workflows. It has proven that there's real demand for AI-powered study tools that are tuned to specific needs.

Anvil has enabled fast iteration ever since the prototype was launched. When users reported bugs or suggested improvements, David could implement changes in no time.

AnkiBuddy is a perfect example of how modern AI can solve real educational challenges and how the right development platform can help solo entrepreneurs move from idea to impact in record time.

More Information

AnkiBuddy creates high-quality Anki flashcards from your PDF study materials in minutes.

Visit ankibuddy.com

If you’re new to Anvil and want to see how you can build powerful web apps using just Python—up to 7× faster than traditional development:

Learn more about Anvil

Have questions or want to get in touch? Visit anvil.works/contact.

What makes Anvil so easy to learn?

Ryan — Fri, 18 Jul 2025 10:47:59 +0000

Anvil's Shallow Learning Curve

When evaluating a new dev tool, a common question is "How long will it take to learn?". Lengthy learning curves cost time, effort, and money - but one of the beauties of Anvil is its shallow learning curve.

I don’t want all the things slowing me down. I don’t want learning curves, I don’t want any of that. I want it quick, and that’s what Anvil gave me. — Shonna Smith, Product Manager, Consultant

Anvil lets you become productive in days, not months. This isn't just a marketing claim, it's an experience shared by many Anvil users. Let's take a look at why Anvil is quick to learn.

Why Is Anvil Easy To Learn?

1. It's All Python

It's all Python, and much like Python, the learning curve of Anvil is gentle and shallow.

You don't need to learn new languages or frameworks for each layer of your web app - saving you time. You can use Python for UI components, front-end code, back-end code and interacting with your database.

# Simple Anvil event handler - just Python
def button_click(self, **event_args):
    # Updating the display text of a label component
    self.output_label.text = f"Hello, {self.name_box.text}!"

2. No Boilerplate Code

Anvil eliminates the need for boiler plate code and setup. The platform wraps common tasks like database access, user authentication, and API endpoints in easy-to-use APIs, letting you focus on what your application does.

Consider how much effort you typically spend on:

Setting up projects
Configuring build tools
Managing deployment pipelines
Creating databases and access controls
Building secure user authentication
Configuring email services and servers
Checking software security
Developing API endpoints
Setting up version control
Implementing secrets management
Integrating external services
Connecting to IoT devices

Anvil simplifies and handles all this and more for you, dramatically saving you time. It has the added benefit of making your app more secure - less code equals fewer opportunities for vulnerabilities.

If data is ever at risk in the journey, we can't move forward with a solution, full stop... They've thought about all of this so that you don't have to. - Jacque Van Niekerk, Data Scientist, CFC Underwriting

3. Extensive Documentation

Anvil's documentation and tutorials are extensive. They cover everything from the basics to advanced topics, making it easy to get up to speed.

Try a tutorial

Read the docs

Additionally, we have an extremely active community forum where you can ask questions if you're stuck, share knowledge, and get help from our team.

4. Traditional Web Architecture

Anvil follows the traditional web architecture approach, with a separation between client and server code. This makes it familiar, easy to understand, and maintain.

For people who aren't familiar with web architecture, i.e. non-web developers, it's still useful. The clear separation of concerns makes it easier for you to debug and think about. The underlying principles are also widely understood by other people, meaning they can help even without experience of Anvil.

Learn more about client vs server

A Different Kind of Investment With Real-World Impact

Anvil being quick to learn means:

Faster time-to-market for your applications
Reduced training costs for your team
Lower risk when evaluating the platform
Increased productivity rather than delayed returns

And the impact has been felt by many Anvil users:

We wanted a web app urgently during the Covid-19 lockdown. With only intermediate skills in Python, and no knowledge of HTML/CSS/JavaScript/Flask/Django etc, Anvil enabled us to share a Minimum Viable Product in just 7 days.-Peter Fison, Managing Director, South West London TV

Next Steps

Ready to see how shallow Anvil's learning curve is? Or do you have some questions?

Try Anvil's intro tutorial
Ask questions on our friendly community forum
Talk to an Anvil engineer to discuss your specific use case

More about Anvil

If you're new here, welcome! Anvil is a platform for building full-stack web apps with nothing but Python. No need to wrestle with JS, HTML, CSS, Python, SQL and all their frameworks – just build it all in Python.

How We Brought the GOV.UK Design System into Anvil

Ryan — Mon, 02 Jun 2025 14:57:16 +0000

Case Study: Implementing Any Design System in Anvil

New to Anvil? Welcome! Anvil lets you build full-stack web apps using only Python. No need to juggle JavaScript, HTML, CSS, Python, SQL and all their frameworks. Just code in Python and bring your app to life!

Design systems are invaluable for creating professional web apps. Implementing your design system in Anvil, by creating custom drag-and-drop components, layouts, and themes, streamlines development for both yourself and others. Today, I’ll show you one I built from scratch to demonstrate what’s possible in Anvil.

For this case study, I'm using GOV.UK's design system. It's a great example of a comprehensive design system, which standardises styles, helps construct components and takes accessibility seriously. It provides all the benefits of using a well thought out design system when creating a web app - so it's perfect to show you what you can achieve in Anvil.

The finished product

The proof is in the pudding so, before I dig into how I implemented the system in Anvil, here's an example of using the finished design system in the Anvil editor. Here's me using the design system as a dependency and creating a GOV.UK form by simply dragging and dropping components into the page:

You can even clone this app and play around yourself:

Clone the Example

How it's built

GOV.UK's design system website provides all the HTML and CSS needed to implement their design system. They break everything down into individual components and page templates. Since Anvil allows for extensive customisation, I was able to use a few of its out-of-the-box features to recreate them.

Custom HTML Layouts

The first step was to implement GOV.UKs page template.

Anvil’s custom HTML Layouts let me use the HTML from the design system's page templates. All I had to do was insert slots in the HTML to define where components can be added to the Layout when it is used by other Forms.

<!-- Here's a slimmed down example of the GOV.UK's footer -->
<footer class="govuk-footer" role="contentinfo">
    <!-- To let developers add components to the footer, I simply defined
    the anvil-slot. -->
    <div anvil-slot="footer-items">
        <!-- And added usage details for the Anvil designer. -->
        <p anvil-if-slot-empty="footer-items" class="anvil-designer-only"><i>Drag footer links or components here</i></p>
    </div>
</footer>

To see how simple it is to create layouts from scratch, check out our docs:

Read the docs on custom layouts

Components from HTML

For GOV.UK’s individual components, I used Anvil's ability to create components from scratch in HTML.

I simply copied and pasted the HTML from the design system and added the anvil-name attribute to the elements I wanted to access in code.

<!-- The Component's HTML is the same as the design system plus the `anvil-name` attribute -->
<input anvil-name="govuk-input" class="govuk-input">

With anvil-name assigned, I could easily reference those elements in Python using Anvil’s dom_nodes API. This let me to select individual elements, insert new content, apply new styles, and modify attributes—all while keeping the structure of the original design system intact.

# Here's are some simple getter and setter functions for the text input component I built
@property
def label_text(self):
    return self.dom_nodes["govuk-label"].textContent

@label_text.setter
def label_text(self, value):
    self.dom_nodes["govuk-label"].textContent = value

Anvil stands out by giving you full access to any HTML element's APIs directly from Python code. There are no limits imposed by Anvil's abtraction.

Check out our tutorial on building custom components from HTML:

Learn how to create components

Ready to get started?

We’ve got full documentation and tutorials to help you get started:

Multi-page apps with Layouts tutorial - Learn how to structure your app using layouts.
Custom HTML Layouts docs - Recreate page templates as Anvil layouts.
Creating custom components from scratch tutorial - Follow a step-by-step guide to creating your first custom component.
Components from HTML docs - Build individual components and access their attributes.

These resources will help you with everything you need to bring your design system into Anvil.

Any questions? Our Community Forum is full of helpful information and Anvil experts.

More about Anvil

Sign up for Anvil

Want to build an app of your own? Get started with one of our tutorials:

RyanFollow

Software developer. Tech enthusiast. Follow me for Python, Anvil and software development content.

Have a product idea? Use this SaaS template!

Ryan — Mon, 10 Feb 2025 12:06:44 +0000

Welcome to Anvil's SaaS Template

Anvil's SaaS (Software as a Service) template is a solid starting point and foundation for your subscription-based SaaS product. This template uses Stripe's API for subscription management, and includes simplified user permissions for you to use throughout your app. It's an ideal starting point for your project.

Stripe provides tools for businesses to accept, manage, and process payments online and in person, offering features like customizable APIs, fraud prevention, subscription billing, and global currency support.

In this guide, we’ll walk through the key components of the template, covering:

Introduction: Briefly learn about Anvil and the benefits of using this template.
Prerequisites: What you’ll need to get started.
Template Structure: A high-level overview of the app’s architecture and Stripe integration.
Template Setup: Step-by-step instructions to get the template up and running with your account.
Testing The App: Test the integration and explore the template’s functionality from a user’s perspective.
Make The app Your Own: With the integration set up, it's time to make the app your own.

Introduction

Anvil

You're going to need to know the basics of Anvil before using this template, so I'd recommend following our 10-minute intro tutorial. This should give you enough knowledge to begin using the SaaS template.

Why use Anvil's SaaS template?

This template is a solid foundation for building your own SaaS app. It gives you:

Full Stripe payment and checkout
Subscription management synced with the app
Account management synced with Stripe
Easy-to-configure user permissions

Overall, it's an ideal starting point for your project.

Prerequisites

To follow this guide you will need the following:

An understanding of Python
A Stripe account
Basic knowledge of Anvil (a great place to start is with Anvil's Feedback form tutorial)

Understanding the template's structure

The template is divided into two main parts: the Stripe integration and the Anvil app. Stripe manages payments, subscriptions, and invoicing, while the Anvil app handles user authentication and permissions.

The app relies on the following Stripe features:

Customer Portals - allows our customers to self-manage their payment details, invoices, and subscriptions in one place.
Pricing Tables - displays our prices, configured easily from our Stripe dashboard and takes users into Stripes checkout flow.
APIs - to send data and requests to our Stripe account.
Webhooks - to send data to our Anvil app when an event happens in Stripe.
- customer.subscription.updated
- customer.created

Here's an API flow to help visualise the integration:

And here's a user flow diagram to visualise the functionality available to the end user:

Setting up the template

This section will guide you through getting started with the template, understanding its features, and further developing it to suit your needs.

Let's get started!

Step 1 - Cloning The Template

Start by cloning the template app with the following link:
https://anvil.works/build#clone:SUTICB6NGVZM7J5S=CB3DXR7V65FYL6UQOF2VQF5L

Step 2 - Stripe Account Setup

Next, we'll set up our Stripe account. Register for a Stripe account and login. Then enter your business details to start capturing recurring revenue (or skip this step if you're only going to use Stripe's test mode). Lastly, activate Stripe's test mode.

Step 3 - Add The API Key

For the integration to work, we need to add your Stripe API key to the app. You can find your keys by clicking on "Developers", on the bottom left corner of the Stripe dashboard, and going to the API keys tab.

Copy your Stripe account's Secret key and, in the SaaS template app's App Secrets, set the value of "stripe_test_api_key" to your key.

Step 4 - Creating A Pricing Table

Next, we need to create a pricing table for our customers to use. Start in the Anvil app editor, publish this app and take a copy of the URL - we'll use this in later in this step.

In the Stripe dashboard, navigate to the Products catalogue, select the Pricing tables tab, and create a pricing table.

Click on the textbox under "Products" and select "Add new product".
Name your product 'Personal', give it a price and save it by clicking 'Add product'. Then, click 'Continue' onto the next step.
In the Payment settings, under "Confirmation page", select "Don't show confirmation page" and enter your published app's URL.

Step 5 - Adding The Pricing Table To Your App

Stripe's website should take you to your pricing table's page (if not, follow this link and select your pricing table). Now, we'll embed the pricing table in our SaaS app.

Copy the code for the pricing table.
Open the StripePricing Form in the Anvil Editor. Then edit the custom HTML by clicking the three dots at the top of the designer.
Paste the code into the StripePricing Form's custom HTML.
Lastly, add anvil-name="stripe-pricing-table" to the stripe-pricing-table tag. The final HTML should look like this:

Step 6 - Setting Up The Webhooks

We need Stripe to tell us when a new customer is created and when their subscription is updated so we can update our Users table with the Stripe subscription details. We'll use webhooks to do this. There is a guide to setting up webhooks in Stripe here but let me give you brief instructions.

Customer Created

Open the Webhooks page in Stripe by selecting the "Developers" link in the bottom left and navigating to the webhooks tab.
Click the "Create an event destination" button.
Set the endpoint URL to your published app's URL with "//api/stripe/stripe_customer_created" added to the end - i.e. "https://my-saas.anvil.app//api/stripe/stripe_customer_created".
Then click "+ select events" and select "customer.created" under events to listen for.
From now on, this will call the stripe_customer_created function in your Anvil app's StripeFunctions module when a customer is created. Here's an image of the set-up webhook:

Subscription Updated

Add another endpoint in Stripe.
Set the endpoint URL to your published app's URL with "\/_/api/stripe/stripe_subscription_updated" added to the end i.e. "https://my-saas.anvil.app/\_/api/stripe/stripe\_subscription\_updated"
Then select "customer.subscription.updated" under events to listen for.
From now on, this will call the stripe_subscription_updated function in the StripeFunctions Server Module every time a customer is created.

Step 7 - Setting Up The Customer Portal

Let's quickly set up a way for users to manage their subscription. Go to the Stripe dashboard and use the search bar at the top to find the customer portal screen.

Set up a customer portal, activate the test link and copy it.

Then open the SaaS app's AccountManagement form and point the "manage_subscription_link" component's URL to the copied link:

We're going to let users manage their email address from the Account page of our app, so we'll disable the ability for users to change their email in their customer portal. The SaaS template syncs email updates with Stripe automatically. Back in the customer portal config page, uncheck the "Email address" checkbox under customer information:

With these steps completed, your Stripe integration is ready for testing.

Testing The App

The template has a number of Notifications which will guide you through testing the app as a user. This will both test the integration we've set up and let you experience what the app is like as a user. Run the app and follow along with the in-app instruction notifications.

Here's a user flow diagram for you to see all the actions you can take with the template:

Making The App Your Own

Now that your Stripe integration is set up and you've experienced the app from a user's perspective, it's time to make this app your own.

Step 1 - Remove The Template Notifications

First, we can search (ctrl+shift+F) for the "# TEMPLATE EXPLANATION ONLY" comments and delete the relevant code below.

Step 2 - Using User Permissions

For a SaaS app to earn money, you'll want to have premium features that are restricted to paid users on specific plans - this is where user permissions come in.

What's Included With The Template

The template comes with a bespoke function and decorator designed to simplify managing user permissions:

user_has_subscription: A function that works with @anvil.server.callable. It verifies whether the user's subscription is included in the list of subscriptions authorized to use the function decorated by @anvil.server.callable. If permission is denied, a PermissionDenied exception is thrown.
@catch_permission_errors: A decorator that catches any anvil.server.PermissionDenied exceptions raised by the decorated client-side function. If permission is denied, it prompts the user to upgrade their subscription.

Using The Functions Together

You can use @anvil.server.callable, user_has_subscription and @catch_permission_errors together as follows:

1. You restrict access to a function with `@anvil.server.callable` and `user_has_subscription`

To restrict access to a premium function to users with a valid subscription, start by decorating the premium function with @anvil.server.callable. You can pass @anvil.server.callable's require_user argument user_has_subscription. user_has_subscription takes a list of allowed subscriptions and checks if the logged-in user’s subscription matches any entry in the list.

From the template, this example function is only allowed to be run by users with a "personal" subscription:

# Here's an example of a function that would require a paid subscription
@anvil.server.callable(require_user=user_has_subscription(["personal"]))
def calculate_percentage_of(number, total_number):
    percentage = (int(number) / int(total_number)) * 100
    return percentage

If the user has an active subscription which is in the allowed subscriptions passed to user_has_subscription, the function will run. If they don’t meet the subscription requirement, a permissions error is raised and caught by @catch_permission_errors - let me show you how to use @catch_permission_errors.

2. You use `@catch_permission_errors` on the client-side to prompt user

With the server-side function restricted, it's time to prompt users to upgrade if they try to use a premium feature without the right subscription - for this, you can use @catch_permission_errors. @catch_permission_errors will catch any anvil.server.PermissionDenied exceptions thrown by our server-side function and prompt users to upgrade if they don’t meet the subscription requirement.

From the example in the template:

# Catch_permission_errors catches exceptions that are thrown by a user not being subscribed and gives them a notification to upgrade
  @catch_permission_errors
  # This function is a simple example function to show you functionality that is gated behind a paywall
  def calculate_button_click(self, **event_args):
    """This method is called when the button is clicked"""
    if self.number_1_textbox.text and self.number_2_textbox.text:

      # This makes a call to a restricted function 
      percentage = anvil.server.call('calculate_percentage_of', self.number_1_textbox.text, self.number_2_textbox.text)
    ...

And that's it, you can restrict any number of features this way.

Step 3 - Take Stripe out of test mode

When you're ready to go live, switch Stripe from test mode to live mode.

Next, update the app's account management link (configured in step 7) to use the customer portal's live link.

Finally, replace the API keys in your Anvil app with the production keys.

What next?

Start building a product with Anvil! We love to see what you create with Anvil, so be sure to share your new apps on our Show and Tell Forum.

More about Anvil

RyanFollow

Software developer. Tech enthusiast. Follow me for Python, Anvil and software development content.

Using Layouts to Create a Multi-Page App

Ryan — Thu, 01 Aug 2024 11:08:21 +0000

Building reusable UIs with Layouts

When you create a multi-page app, there will be parts of the UI that will be shared across multiple Forms - for example, a navigation bar. Layouts let you create user interfaces that multiple Forms can use. I'm going to show you how to create one.

In this tutorial, we'll build a homepage Layout with a navigation sidebar, and we'll use it as the Layout for the other Forms in our app. When a user clicks a link in the sidebar, the app will open a new Form that has different content but the same navigation menu.

What are Layouts?

In Anvil, a Layout is a Form that can be used by other Forms to define their structure. A Layout Form can have components added to it. Any Form using the same Layout will all have those same components. When you create a Layout Form, you add Slots into the design. Slots define where Forms using the Layout can add components.

Tutorial Prerequisites

To follow along this tutorial you will need to know basic Python and you should know the basics of Anvil. If you're new to Anvil, why not try our introductory Feedback Form tutorial?

These are the steps that we will cover:

Step 1 - Create an Anvil app
Step 2 - Create a homepage Layout
Step 3 - Create a navigation menu
Step 4 - Add a slot
Step 5 - Use the Layout
Step 6 - Wire up the navigation menu
Step 7 - Make the link look selected
Step 8 - Test the app
Step 9 - Optional: Change the homepage Layout

Step 1 - Create your Anvil app

When you're asked what you'd like your page to look like, select Material Design 3:

Click on the name at the top of the screen and give your app a name.

Step 2 - Create your homepage template

Our app already has a Form added called Form1, which we'll turn into our homepage Layout. Open Form1 and change the name to "Homepage":

Then, click the three dot icon above the form and select "Use as layout":

The first time you use Layouts in your app, you’ll need to migrate the app to use the new UI features. If the app hasn’t yet been migrated, you’ll see a popup message when you change your Form to a Layout. This is an irreversible change to our app, so please be aware if you’re migrating an app you’ve built with the old Anvil Designer.

Let's add a description of our Layout in the form's configuration menu. This information shows up when deciding which template a new form should use. Click the three dot icon above the form again and select "Edit properties and events". Then add a description.

That's great. Next up, let's build a navigation UI in our ayout for other forms to inherit.

Step 3 - Creating our navigation menu UI

Let's start by adding a Column Panel into the sidebar of our Form.

Then we can drag two Link components into the Column Panel - one for each Form that will use this Layout. We'll change the first link's text to "About Us" and the second link's text to "Contact Us".

Lastly, let's give our app a title by dragging a Label into the title section on the top left of the Homepage Form. Then change the Label's role to Title.

Step 4 - Adding a slot

Now that we've built the Layout we want our other Forms to use, let's add a Slot. Slots define where components can be inserted by Forms that use the Layout.

We’ll add a Slot to the content_panel of our Homepage by dragging in a “Slot” from Toolbox on to the right of the designer.

Each Slot has a name. We can rename our slot using the object palette. Let's call it main_slot.

Be aware that if you delete or rename a Slot from a Layout that is being used by another Form, any components that were inside that Slot will not know where to go. You can find them in the Orphaned Components Panel and add them back to your page. For more information, see our documentation on Layouts

Great, our Layout's UI is complete. Now it's time to create some Forms that use our Layout.

Step 5 - Using the Layout

We're now going to create two Forms called "AboutUs" and "ContactUs" that use our Layout Form. Later, we'll add click event functions to the Links we added in the previous step so that they open the corresponding Form when clicked.

First, we'll create AboutUs by clicking "Add Form" in the App Browser.

Then, select the Homepage.

We can then rename the Form to "AboutUs", the same way we renamed the Homepage Form.

Then, let's add a label to the main slot and change its text.

Repeat this process for the ContactUs page, adding another label with some different text.

Now that we have two Forms using our Layout, all we have to do is wire up the sidebar links so they open the corresponding Form when clicked.

Step 6 - Wiring up the navigation menu

Open the Homepage Form and select the "About Us" link in the navigation menu. Let's first rename the Link so that it's easier to reference in code. In the floating Object Palette, click on link_1 and rename the Link to about_us_link. Next, select on click event, this will open up the code view for our Form and create an event handler function for us.

Inside the event function, we'll use the open_form function to open our AboutUs page by passing in the name of the Form as a string.

def about_us_link_click(self, **event_args):
  """This method is called when the link is clicked"""
  open_form('AboutUs')

Now, every time the "About Us" link is clicked, it will load the corresponding page. We will also do the same for the "Contact Us" link by renaming the link, adding the click event and opening the relevant Form in the function.

Lastly, let's create a reset_links function for the Forms using our template to use. Create the function and inside, set every Link component's role to a blank string:

def reset_links(self, **event_args):
  self.contact_us_link.role = ''
  self.about_us_link.role = ''

Step 7 - Making the Link look selected

Our final step is to make it so that when we click one of the links in our navigation menu, it looks selected. This will make it easier to tell what page we are already on.

Select the AboutUs Form in the designer and in the Events section of the properties panel, click the blue button next to the "Show" event.

This will open up the code view and add a function that will run every time the AboutUs Form is shown.

Inside the function, we can interact with the Layout our Form is using with self.layout. This gives us the ability to call functions defined in our Layout and change the properties of the Layout's components. Let's reset the links and set the role of the Homepage.about_us_link to be "selected".

def form_show(self, **event_args):
    """This method is called when the form is shown on the screen"""
    self.layout.reset_links()
    self.layout.about_us_link.role = 'selected'

Repeat this process for ContactUs.

Step 8 - Testing the app

To see the app in action, click the "Run" button at the top of the screen:

Click each link in the sidebar, and the relevant page should appear using our Layout.

Step 9 - Optional: Changing the Homepage Layout

This part is optional! The best way to learn any new technology is to challenge your understanding. Why not challenge yourself to reinforce what you’ve learnt and learn more?

One of the best things about Layouts is making a change to the Layout is instantly propagated to all forms using the Layout. So, why not make some changes to our homepage form and see how it affects the other forms. You could:

Add another link to the navigation sidebar and wire it up
Add a slot to the sidebar in Homepage so that other Forms using the Layout can add more links to the navigation menu
Chain Layouts together. Try creating an "Admin" page which uses the Homepage Layout and, in turn, make that a Layout. The admin page could have its own naigation menu inside the homepage's main slot with links for "Profile" and "Contact Preferences".

Clone the App

You can open the source code for the finished Anvil app here.

More about Anvil

RyanFollow

Software developer. Tech enthusiast. Follow me for Python, Anvil and software development content.

Streamline UI design with Anvil’s reusable Layouts

Ryan — Wed, 17 Apr 2024 13:38:15 +0000

Layouts simplify UI design by letting you create reusable page structures that can be shared across multiple Forms. For example, you can design a Layout with a navigation bar, and any Form using this Layout will inherit the navigation bar. This makes UI building easier, faster and more consistent.

What are the benefits?

1. Better reusability with shared Layouts

A Layout can be used by many different Forms. This means when you edit a Layout, you'll instantly see the changes across the Forms that use it.

2. Simpler app navigation

Layouts make building page navigation into your apps simpler than ever. Create a navigation bar in your Layout and share it between Forms. Then, you only need one line of code to navigate switch pages.

def page_1_link_click(self, **event_args):
    """This method is called when the link is clicked"""
    open_form("Page1")

This make building consistent navigation straightforward and fast.

3. Greater flexibility, less code

You can create complex UI structures by nesting Layouts within each other.

For example, say you want to extend a homepage Layout with a nested admin panel Layout. You can create an admin panel Layout that uses the homepage Layout, which in turn gets used by other Forms.

Ready to get started?

We've got full documentation and a brand new tutorial to show you exactly how to get started with Layouts.

More about Anvil

Try Anvil for free!

RyanFollow

Software developer. Tech enthusiast. Follow me for Python, Anvil and software development content.

Introducing Four Improvements To Anvil’s Custom Components

Ryan — Tue, 19 Dec 2023 15:23:47 +0000

We've made it simpler to build and use custom components in Anvil

Anvil's Custom Components allow you to build reusable UI components and use them through your app and others. We've recently made them easier to use and more flexible in a few different ways. Let me walk you through them:

Live Updates in the Editor
Categorize and Add Toolbox Icons
Categorize Custom Component Properties
Custom containers are simpler to build

1. Live Updates in the Editor

We've introduced live updates for custom components in the Anvil Editor. Now, as you make changes to your custom component, you'll instantly see those changes reflected in the designer. Components now run in the designer the same as they do in a live deployed app. This real-time behavior speeds up the development process and helps you fine-tune your components with ease.

Tobais’s progress bar

Not only does live updates mean the components reflect your changes immediately, it also has other benefits like exceptions being thrown and flagged to you immediately in the designer output.

2. Categorize and Add Toolbox Icons

We understand that as you add dependencies to your app, managing custom components in the toolbox can become challenging. To help you keep things organized, you can now categorize custom components and change their icons. This makes them easier to locate and manage in the Editor.

Custom components in the Toolbox

3. Categorize Custom Component Properties

In addition to categorizing components, you can now categorize your custom component's properties. This feature allows you to organize properties logically, making it simpler to configure your custom components. No more hunting for that one property buried deep in the list – categorize them for quick and easy access.

The menu for customising a property, including categorisation options

4. Turn custom components into containers

For the first time ever, it's possible for you to build your own custom containers! You can write your own custom HTML components and turn them into containers so that other components can be dragged and dropped inside.

An example custom container

Check out the docs to learn how to build custom containers.

With these new improvements, custom components in Anvil are easier to use, more flexible and more efficient than ever before. Try them out today and experience the power of Anvil's improved custom components for yourself! Happy app building!

See the custom component docs ->

More about Anvil

Try Anvil for free!

RyanFollow

Software developer. Tech enthusiast. Follow me for Python, Anvil and software development content.

Build Better Python Web Apps With Your Data

Ryan — Fri, 03 Feb 2023 14:57:38 +0000

Build Better Python Web Apps With Your Data

Do you want a quick introduction to Anvil's Data File service? Then check out our new 100 second video where we plot data from a CSV file using Pandas and Anvil's Data Files service.

Anvil is free to use. Start building now!

Prefer text to video? Read on to learn how to use Data Files

Python is great for working with data. With Anvil you can build web apps to interact with datasets and machine-learning models entirely in Python.

In this article, I’ll show you how to use Anvil’s Data Files service to attach static data to your web app. We’re going to upload a CSV dataset and plot the data from it using Pandas. Then, we’ll display the plot online for everyone to see - all in Python.

Uploading our CSV

We start by uploading our dataset into our app’s Data Files service. I’m using some example data of Apple’s stock price over time which you can download here.

Adding the CSV data to our app

Plotting our data

Now, let’s write a server function called plot_data to plot our CSV data. We can use the data_files object to get the path to the file we just uploaded, and load it into Pandas.

@anvil.server.callable
def plot_data():
  # Read the CSV file into a DataFrame using the Data Files path
  df = pd.read_csv(data_files['dataset.csv'])

We’ll use Plotly's Pandas backend to plot our dataset as a line graph and return that figure from our server function.

@anvil.server.callable
def plot_data():
  # Read the CSV file into a DataFrame using the Data Files path
  df = pd.read_csv(data_files['dataset.csv'])

  # Then plot the graph using the Plotly backend
  df = df.set_index('Date')
  fig = df.plot.line(title="APPL Stock Price")
  return fig

Writing server-side code to plot our data

Building our front-end

Now let’s build a front-end to display our graph. Drag and drop a Plot component onto the page from the toolbox on the right.

Dragging and dropping a Plot component into our form

Then switch to the app's front-end Python code. In the __init__ method, we call the plot_data() server function we created earlier and set our plot's figure property to the graph that is returned.

def __init__(self, **properties):
  # Set Form properties and Data Bindings.
  self.init_components(**properties)

  # Any code you write here will run when the form opens.
  self.plot_1.figure = anvil.server.call('plot_data')

Writing the front-end code which gets our graph

Running our app

When we run the app, it will load the dataset and plot it with Pandas.

Running our app to test it

You can use Anvil’s Data Files to load and run machine learning models, complicated datasets, and more. To find out more about Anvil and using Data Files, check out the links below.

RyanFollow

Software developer. Tech enthusiast. Follow me for Python, Anvil and software development content.

This is how to deploy a machine learning model with Anvil

Ryan — Wed, 04 Jan 2023 17:24:59 +0000

Deploying your model to the web

Deploying machine learning models is tricky. The skills used to create a model are very different to the skills needed to deploy the model for end-users to interact with. With Anvil, it’s easy to deploy ML models to the web, and we can do it entirely in Python - no need to wrestle with HTML, CSS, JavaScript or web hosting.

In this short tutorial, we'll use Anvil to turn an ML model into an interactive web application. We will use the classic iris classification problem, for which I have a pre-trained model using sklearn and joblib (if you want to see how I trained this model, check out this tutorial).

We will create an interactive web app that collects the iris measurements from the user, use our model to classify the flower, and return the classification back to our user. Here's what it will look like:

Demo of the finished app

For this tutorial you will need to know basic Python.

These are the steps that we will cover:

Step 1 - Create your Anvil app
Step 2 - Design your page
Step 3 - Run Python code when you click the button
Step 4 - Upload our model
Step 5 - Configure our server environment
Step 6 - Use our model
Step 7 - Publish our app

Let's get started.

Step 1 - Create your Anvil app

Location of the Create App button

First, name the app. Click on the name at the top of the screen and give it a name.

Rename your app by clicking on the title

Step 2 - Design your page

To classify the species of iris a flower comes from, we need to collect several measurements, so let's design the user interface for entering that data.

We construct the UI by dragging-and-dropping components from the Toolbox. Let's start by dropping a Card into our form -- this will be a neat container for the other components. Then let's add a Label and a TextBox into the card component:

Dragging a Card component, Label component and TextBox component into Form1

Next we will set up the label and TextBox components to collect the sepal length. Select the Label we just added and, in the properties panel on the right, change the text to 'Sepal length: '. Then select the TextBox we added and change the name to sepal_length, and the placeholder text to '(cm)'.

Editing the Label and TextBox

Repeat this process adding labels and text boxes for the other parameters we need: sepal width, petal length and petal width. This will capture all the information we need to classify each iris flower.

Next, let's add a Button to run the classifier. Name it categorise_button and change the text to 'Categorise'. Clicking this button will trigger a Python function to classify the iris measurements using our model. (We'll set that up in a moment.)

Finally, let's add a Label where we'll display our results. Put it below the button, call it species_label and untick the visible tick box in the properties panel so it doesn't appear immediately. In step 3 we will create an event handler function that makes the label visible, and uses it to display data returned from our model.

Our app should now look like this:

How our app's UI should look

In the next step we will add some code to control what happens when a user pushes the Categorise button.

Step 3 - Run Python code when you click the button

We want our categorise_button to do something when it's clicked, so let's add a click event.

With the button selected, go to the bottom of the properties panel. Then click the blue button with two arrows in it next to the click event box. This will open our code view and create a function called categorise_button_click(). From now on, every time the button is clicked by a user, this function will be called.

Click event being added to the Categorise button

We want to call a function on our app's server side to interact with our model, and pass it the measurements the user has entered into our web app. When the server function returns our answer, we'll display it as text on the species_label:

To do this we add the following:

def categorise_button_click(self, **event_args):
    """This method is called when the button is clicked"""
    # Call the server function and pass it the iris measurements
    iris_category = anvil.server.call('predict_iris', 
                                self.sepal_length.text,
                                self.sepal_width.text,
                                self.petal_length.text,
                                self.petal_width.text)
    # If a category is returned set our species 
    if iris_category:
      self.species_label.visible = True
      self.species_label.text = "The species is " + iris_category.capitalize()

Now we have a basic UI and functionality, let's upload our model to our example app.

Step 4 - Upload our model

Data Files are files that you, as the app developer, can attach to your app. These files are available in your Server Modules. You can do this via the built-in Data File Service. The Data Files service is useful for machine learning models, large datasets and data that stays constant.

In our Anvil app, click the + button in the Sidebar Menu, and select Data Files:

Click the + button in the Sidebar Menu, and select Data Files

Then, let's upload a classification model for our UI to use. For this guide, I've created an example iris classifier model - download it here:

https://anvil.works/learn/tutorials/img/deploy-a-machine-learning-model/knn.skmodel

Once you've downloaded this file to your computer, upload it into your app's Data Files by clicking the Upload button and selecting the model from your files.

Uploading the model to our Data Files

Next, let's create a server function that uses the model to classify our user's data.

Step 5 - Configure our server environment

Now that our model is uploaded, we need to configure the server environment to include all the packages we need to run it.

We'll start by selecting settings from the Sidebar Menu and opening 'Python versions'.

Selecting the Python version

Then, in the Python version dropdown, select 'Python 3.10'. Under 'Base packages', select 'Edit requirements.txt directly'.

Editing our app's environment

Finally, paste the following list of requirements into the text box:

joblib==1.1.0
numpy==1.21.6
scikit-learn==1.1.2
scipy==1.9.0
sklearn==0.0
threadpoolctl==3.1.0

With our server environment configured, it's time to start using our model in a function.

Step 6 - Access our saved model file

We can access our saved model file using the data_files API in a Server Module. Then we can load it into scikit-learn.

To start, let's add a Server Module to our app by clicking '+ Add Server Module' in the App Browser.

Position of the '+ Add Server Module' button in the App Browser

At the top of our server module, let's import the joblib library we need to load our model and import load_iris from sklearn's built-in iris dataset.

from sklearn.datasets import load_iris
import joblib

# Loading sklearn's built-in iris dataset
iris = load_iris()

With the dataset loaded, we can create a function that takes our iris data and returns the name of the iris species. Let’s create a predict_iris function and add the @anvil.server.callable decorator so the function can be called from our app's client-side code.

@anvil.server.callable
def predict_iris(sepal_length, sepal_width, petal_length, petal_width):
  pass

Inside the predict_iris function, we'll load our model from the Data Files service. To do this, we will get the path to the model file on disk using data_files['knn.skmodel'], we can then use joblib.load() to reconstruct our model from the file.

Once we have reconstructed our model, pass our iris flower data to model.predict() and return the name of the flower.

@anvil.server.callable
def predict_iris(sepal_length, sepal_width, petal_length, petal_width):
  model = joblib.load(data_files['knn.skmodel'])
  classification = model.predict([[sepal_length, sepal_width, petal_length, petal_width]])
  return iris.target_names[classification][0]

Back in step 3 of this tutorial, we wrote anvil.server.call('predict_iris', ...) in our categorise_button_click() function on the client side. Adding the @anvil.server.callable decorator to our server-side predict_iris() function means it can be called from the client.

Step 7 - Publish our app

Now we've finished our app, all we have to do is test it and publish it online for people to use.

Let's quickly test the app to make sure it works. We can click the 'Run' button in the top right of the Anvil Editor to run the app in split view and try it out.

Running the app in the editor

If there is an issue, the App Console will appear and show the exception that was thrown. You can click on the exception and the editor will take you to the line of code that caused it.

Fixing a bug

With the app tested, we can click the 'Publish' button at the top right of the editor. Then select 'Publish this app' and use the public URL provided or enter your own.

Publishing the finished app

That's it, our app is now finished and online for anyone to use!

Conclusion

We now have an interactive app based on our machine learning model. We've designed a UI, written client-side Python, uploaded our machine learning model, written server-side code that uses our model and deployed the app online for anyone to use - all with nothing but Python!

Clone the App

For those of you who want to see the source code for this app:

https://anvil.works/build#clone:GMXRQOGCBCX6YXWT%3dZC4GCEYQEOO5B7V3PMDOGZT5

I've added some images to improve the final app. To do this I simply added an image component to the app and set its source based on the returned iris classification. The sources I used are in the below challenges section.

What next?

Head to the Anvil Learning Centre for more tutorials, or head to our examples page to see how to build some complex apps in Anvil.

Why not check out the Anvil Community Forum? There are a lot of knowledgeable people there, and it's a great place to get help.

Optional: Challenge yourself

This part is optional! The best way to learn any new technology is to challenge your understanding. Why not challenge yourself to reinforce what you’ve learnt and learn more?

Challenge 1 - Add an image to your app

Add an Image component to your app's interface and set its source based on the returned iris classification. You can set the source of the image to one of the following three URLs in the categorise_button_click function:

Challenge 2 - Store your results in a Data Table

Try storing the classification results in Anvil's built-in database.

Hint: Add a Data Table to your app to store the classification results. Then, use Anvil's add_row() in your app's predict_iris function. This will add a row to your database each time a classification is completed.

Challenge 3 - Turn the app into an HTTP API

You can build an HTTP API for your app by decorating the predict_iris function with the @anvil.server.http_endpoint decorator. Why not try creating an API for your app for other people to use?

New to Anvil?

If you're new to Anvil, welcome! Anvil is a platform for building full-stack web apps with nothing but Python. No need to wrestle with JS, HTML, CSS, Python, SQL and all their frameworks – just build it all in Python.

Yes – Python that runs in the browser. Python that runs on the server. Python that builds your UI. A drag-and-drop UI editor. We even have a built-in Python database, in case you don’t have your own.

Why not have a play with the app builder? It's free! Click here to get started:

https://anvil.works/build

RyanFollow

Software developer. Tech enthusiast. Follow me for Python, Anvil and software development content.

Introducing Anvil’s Python-based Data Files API

Ryan — Thu, 08 Dec 2022 20:06:41 +0000

The New Data Files Service

Python has lots of great libraries for interacting with files, large datasets and machine learning models. And today we are happy to announce a new feature in Anvil to make it easier than ever to use large files and machine learning models in your Python code. We are launching Anvil's new Data Files Service.

What are we releasing?

Data Files are files that you, as the app developer, can attach to your app. These files are available in your Server Modules. Data Files can be uploaded and accessed using the new built-in Data Files service.

There's a new API to access and manage Data Files. Accessing files is as simple as using square brackets:

data = pandas.read_csv(data_files['my_spreadsheet.csv'])

What can I use it for?

Any application that uses bulk static data! For example, you might build a dashboard that queries a CSV of static data using pandas. Or you might build an app around a machine-learning model, which loads a file of stored weights into PyTorch, Tensorflow or scikit-learn.

Get started right now

Check out our Quick Start guide to learn about using the Data Files Service.

Data Files Quickstart Guide

Deploy a machine learning model

We've got a brand new tutorial to show you how to deploy an ML model and use it in your Anvil app:

Deploy an ML model with the Data Files Service

More about Anvil

Try Anvil for free!

RyanFollow

Software developer. Tech enthusiast. Follow me for Python, Anvil and software development content.

Python Web Applications in 80 Seconds

Ryan — Tue, 01 Nov 2022 13:42:36 +0000

The Pythonic Way to Build Web Apps: Anvil in 80 Seconds

Do you want to learn how Python can be used for web development? Then check out our new 80 second video:

Anvil is free to use. Start building now!

Prefer text to video? Read on to learn all about Anvil

If you can write Python, then Anvil is all you need to build and deploy web applications.

With Anvil, you can design your app with a drag-and-drop UI builder and write Python code that runs in the web browser and on the server.

Anvil comes with a built-in database backed by Postgres.

You can put it all online with two clicks — just choose a web address:

You can use all the normal Python libraries to process your data or connect to external databases.

Anvil helps you save time and stay secure by providing built-in user authentication for your apps.

You can connect code running anywhere on the Internet to your Anvil app using the Anvil Uplink. This includes code running in Jupyter notebooks, Google Colab, AWS SageMaker, IoT devices and your own computer.

Anvil has a built-in integration with Stripe that means you can run a payment form with a single line of code.

Your apps can send and receive email using the built-in Email Service.

And you can connect your Anvil app with services from Google, Microsoft, Facebook and much, much more!

Anvil lets you collaborate with other developers and manage changes with git-backed version control.

Create environments for production, staging and development and deploy each one separately.

You can deploy the Anvil Editor on-site with an Enterprise plan. You can develop in the cloud and deploy Anvil apps online. You can also deploy apps on your own hardware with the open-source framework — check it out on GitHub.

Learn More

Why not have a play with the app builder? It’s free! Click here to get started:

Get building

Want more quality developer content?
Follow me for more software development content!

RyanFollow

Software developer. Tech enthusiast. Follow me for Python, Anvil and software development content.

Connect Your Pico W To The Internet And Control It From The Web

Ryan — Mon, 25 Jul 2022 10:50:47 +0000

I recently made a new video showing how to take your brand new Pico W, connect it securely to the internet, and control it from a web interface — all in Python with Anvil.

Check out the video or the text version of the video below.

Video

Want more quality developer content?
Follow me for more software development content!

RyanFollow

Software developer. Tech enthusiast. Follow me for Python, Anvil and software development content.

Text Version

The next evolution of the hugely popular Raspberry Pi Pico microcontroller is here. The Raspberry Pi Pico W adds on-board wifi making it perfect for creating IoT devices.

In 3 steps, I’m going to teach you how to create and deploy a simple web app, so you can learn how to control your Pico W remotely.

The app will be a simple online app with a single button that makes the LED on the Pico flash.

Step 1 — Creating an Anvil app to control our Pico

We’ll build the web app with Anvil, the platform for building web apps with nothing but Python.

For the first step, we’ll start by creating the Anvil app that will wirelessly control our Pico. We’ll go to anvil.works/build and create a new blank app.

Click the name of the app at the top of the editor and change it to “Pico App”.

Next, let’s enable the Uplink. We’ll use the Uplink to connect to our Pico.

Click the add features button in the editor’s side bar and select the Uplink.

Next, we’ll click the ‘Enable server Uplink’ button.

Copy the Uplink key, we’ll be using this in a Python Script on our Pico later to establish the connection between our App and the Pico.

Now the Uplink is enabled in our Anvil app let’s move on to step 2 and set up our Pico.

Step 2 — Setting up our Pico

To setup our Pico we need to install the Anvil firmware.

To start, we’ll hold down the BOOTSEL button on the Pico and plug it into our computer.

Release BOOTSEL once the Pico’s drive appears on your computer.

Then, we’ll download Anvil’s Pico firmware file (pico-w-anvil-v-complete.uf2) from the following link:

https://github.com/anvil-works/anvil-pico/releases

Once it’s downloaded, copy the file onto the Pico’s drive. Our Pico will reboot once the files are copied over.

Open the Pico’s drive and edit the boot.py and the main.py file.

In the boot.py file, edit the Wifi connection credentials to match your Wifi network.

Then, in the main.py file, underneath the import statements, add the Uplink key we copied earlier.

The main.py is where any functions you want to run on your Pico device are stored.

As a default, Anvil’s main.py file for the Pico includes a pico_fn function. It’s a simple function that makes the light on the Pico flash and demonstrates that you can pass Python objects from your Anvil app to your Pico.

The @anvil.pico.callable decorator lets your Anvil app know that this function is available to call from the web. The pico_fn function is the one we’ll be calling from our web app.

@anvil.pico.callable(is_async=True)
async def pico_fn(n):
    # Output will go to the Pico W serial port
    print(f"Called local function with argument: {n}")

    # Blink the LED and then double the argument and return it.
    for i in range(10):
        led.toggle()
        await a.sleep_ms(50)
    return n * 2

Save both boot.py and main.py.

Reboot the Pico to save the updates by ejecting the disk and reconnecting the Pico.

Rebooting the Pico W
The Pico will flash a few times to indicate it is connected to the internet.

Let’s go back to the Anvil app we created earlier

Step 3— Creating a UI and publishing to the web

In the designer, we’ll drag and drop a button into our app’s form. We’ll change the text to ‘Flash the lights’ and style it by changing its role to primary-color.

Next, we’ll add a text box and set its type to number. This will let the users of our app input a number and pass the data to our Pico.

Double click the button in the designer. This will add a function to our client-side code which will be called every time the button is clicked.

Inside the function, let’s call the pico_fn function which is inside our pico’s main.py file.

We’ll pass our Pico function the number the user of our web app enters.

 def button_1_click(self, **event_args):
    """This method is called when the button is clicked"""
    anvil.server.call("pico_fn", self.text_box_1.text)

Now we’ve got the functionality sorted, we can deploy this app online by clicking the publish button in the top right of the editor. Let’s select the ‘Add public URL’ and change the URL to meaningful.

If we navigate to the URL we chose and press our apps button, the LEDs on the Pico will now flash.

That’s it! We now have our Pico microcontroller connected to the internet with a deployed web app that controls it. Check out the link below to see the finished Anvil app:

https://anvil.works/build#clone:UU2QIYDJCCUMPHIY=DLI6CTZ5CBL3US575ZVTOPWB

Conclusion

I’ve just shown you how to control your Pico W from the web with nothing but Python and Anvil.

Anvil is free to use — head on over to anvil.works/pico today to see more examples and the full documentation.

Want more quality developer content?
Follow me for more software development content!

RyanFollow

Software developer. Tech enthusiast. Follow me for Python, Anvil and software development content.

DEV Community: Ryan

AnkiBuddy: Automating Flashcard Creation for Medical Students

Executive Summary

The Challenge: When Manual Study Card Creation Meets Medical School

What If We Let AI Do the Heavy Lifting?

The Solution: AI-Powered Flashcard Generation

Building AnkiBuddy: Rapid Development with Anvil

The Results: From Idea to Impact

More Information

What makes Anvil so easy to learn?

Anvil's Shallow Learning Curve

Why Is Anvil Easy To Learn?

1. It's All Python

2. No Boilerplate Code

3. Extensive Documentation

4. Traditional Web Architecture

A Different Kind of Investment With Real-World Impact

Next Steps

More about Anvil

How We Brought the GOV.UK Design System into Anvil

Case Study: Implementing Any Design System in Anvil

The finished product

How it's built

Custom HTML Layouts

Components from HTML

Ready to get started?

More about Anvil

RyanFollow

Have a product idea? Use this SaaS template!

Welcome to Anvil's SaaS Template

Contents

Introduction

Anvil

Why use Anvil's SaaS template?

Prerequisites

Understanding the template's structure

Setting up the template

Step 1 - Cloning The Template

Step 2 - Stripe Account Setup

Step 3 - Add The API Key

Step 4 - Creating A Pricing Table

Step 5 - Adding The Pricing Table To Your App

Step 6 - Setting Up The Webhooks

Customer Created

Subscription Updated

Step 7 - Setting Up The Customer Portal

Testing The App

Making The App Your Own

Step 1 - Remove The Template Notifications

Step 2 - Using User Permissions

What's Included With The Template

Using The Functions Together

1. You restrict access to a function with @anvil.server.callable and user_has_subscription

2. You use @catch_permission_errors on the client-side to prompt user

Step 3 - Take Stripe out of test mode

What next?

More about Anvil

RyanFollow

Using Layouts to Create a Multi-Page App

Building reusable UIs with Layouts

What are Layouts?

Tutorial Prerequisites

Contents

Step 1 - Create your Anvil app

Step 2 - Create your homepage template

Step 3 - Creating our navigation menu UI

Step 4 - Adding a slot

Step 5 - Using the Layout

Step 6 - Wiring up the navigation menu

Step 7 - Making the Link look selected

Step 8 - Testing the app

Step 9 - Optional: Changing the Homepage Layout

Clone the App

More about Anvil

RyanFollow

Streamline UI design with Anvil’s reusable Layouts

What are the benefits?

1. Better reusability with shared Layouts

2. Simpler app navigation

3. Greater flexibility, less code

1. You restrict access to a function with `@anvil.server.callable` and `user_has_subscription`

2. You use `@catch_permission_errors` on the client-side to prompt user