Forem: Yogesh Sharma

Insights into Forms in Flask

Yogesh Sharma — Sun, 14 Aug 2022 07:11:00 +0000

Hey there!

Today, we will look into implementing forms in Flask. We will start with quick rendering of forms and look into details of customising the form.

Background

Flask is popular web development framework implemented in python.
Forms are important part of developing any websites and are used heavily to take inputs from users.
We would see the usage of wtform module for flask. For frontend, we will use jinja2 templating.

Pre-requisites

A basic understanding of python and flask is required. It is expected that you know how a flask server is started and have it running.

With all the above information, let's get started -

Setup

We need following things before we can render a form to frontend -

A basic flask app running
A python form class implemented
A controller which would render the form

It is assumed that you already have (1) running. For (2), add the following code to your forms.py

# forms.py
from flask_wtf import FlaskForm
from wtforms import StringField, IntegerField, TextField, SubmitField
from wtforms.fields.html5 import IntegerRangeField
from wtforms.validators import DataRequired, Optional, NumberRange


class SampleForm(FlaskForm):
    name = StringField('Name', validators=[DataRequired()])
    age = IntegerField('Age', validators=[DataRequired()])
    moto = TextField('moto', validators=[Optional()])
    range = IntegerRangeField('range', default=10, validators=[DataRequired(), NumberRange(min=1, max=50)])

    submit = SubmitField('Submit')

You can read more details about wtf at https://wtforms.readthedocs.io/en/3.0.x/ and more about validators at https://wtforms.readthedocs.io/en/3.0.x/validators/

For 3, add following code to create controller

# routes.py
from flask import Blueprint, url_for, redirect, render_template

from app.sample.forms import SampleForm

sample = Blueprint('sample', __name__)


@sample.route("/sample-form", methods=["GET", "POST"])
def sample_controller():
    form = SampleForm()

    if form.validate_on_submit():
        return redirect(url_for('sample.sample_controller'))

    return render_template('sample/sample_form.html', form=form)

To attach the route to your app, add following to the create_app method

# app/__init__.py
from app.sample.routes import sample

app.register_blueprint(sample)

Quick form rendering

First, we'll look at the quickest way to render beautiful forms.

create sample/sample_form.html in templates/ folder

{% extends 'base.html' %}
{% import 'bootstrap/wtf.html' as wtf %}

{% block app_content %}
<div class="container-fluid">
    {{ wtf.quick_form(form, button_map={'submit': 'success'}) }}
</div>
{% endblock %}

Once you reload the server the output should look like

Voila! You have your beautiful form rendered with just one line of html code. Note that, button_map maps the field to bootstrap styling class (btn-success in this case). Another thing to note, the flask setup is using bootstrap in this case so your styling may vary depending on whether you are using bootstrap or not.

Field wise form rendering

Change your sample html to following

{% extends 'base.html' %}
{% import 'bootstrap/wtf.html' as wtf %}

{% block app_content %}
<div class="container-fluid">
    <form class="form form-horizontal" method="post" role="form">
        {{ form.hidden_tag() }}
        {{ wtf.form_field(form.name) }}
        {{ wtf.form_field(form.age) }}
        {{ wtf.form_field(form.moto) }}
        {{ wtf.form_field(form.range, class="form-range") }}
        {{ wtf.form_field(form.submit, class="btn btn-success") }}
    </form>
</div>
{% endblock %}

This gives more control over handling fields, as we can render field by field and provide custom styling. The end result should look like following -

Further customising

This is the most interesting part for me as I was not able to locate any corresponding docs online easily.
Consider that in the range field, we also want to show the value that is currently selected and we also want to show the default value initially.

Here's how we can achieve this. Change html file to following -

{% extends 'base.html' %}
{% import 'bootstrap/wtf.html' as wtf %}

{% block app_content %}
<div class="container-fluid">
    <form class="form form-horizontal" method="post" role="form">
        {{ form.hidden_tag() }}
        {{ wtf.form_field(form.name) }}
        {{ wtf.form_field(form.age) }}
        {{ wtf.form_field(form.moto) }}
{#        {{ wtf.form_field(form.range, class="form-range") }}#}
        <label for="range" class="form-label">{{ form.range.label }}</label>
        {{ form.range(min='1', max='50', oninput="r_value.value = this.value", class="form-range") }}
        <input type="text" id="r_value" value="{{ form.range.data }}" disabled></input><br/><br/>

        {{ wtf.form_field(form.submit, class="btn btn-success") }}
    </form>
</div>
{% endblock %}

Notice the code for range input, we have separately accessed label and input field and we have added a custom oninput to update value of the new input added.

The end result looks like this -

That's all this time!

Use Random Integer in terraform module

Yogesh Sharma — Sun, 27 Feb 2022 16:26:00 +0000

Hi there!

Today, we will learn how to use a random integer generator in terraform module.

Situation -

You are writing a module which takes a url as variable but needs to add a random userId (or any other thing) to the url. How do you achieve this in your terraform module?

Pre-requisites

This post is NOT covering basics of terraform and module writing so some understanding of terraform is expected.
It is assumed that you have terraform setup on your system and have an idea about how to write module.

Steps

Example module

Consider following datadog synthetics module

resource "datadog_synthetics_test" "test_template" {
    name = var.name
    request_definition {
        method = var.request_method
        url = var.start_url
    }
    // rest of the module
}

The above is a sample for creating a synthetic monitoring test on datadog.
Assume you want to append a parameter userId with random 6 digit number to the url.

Add random_integer resource

Add a resource for random integer

resource "random_integer" "random_user_id" {
    max = 999999
    min = 100000

    keepers = {
        test_name = var.name
    }

The documentation for random integer.

The above resource generates a 6-digit integer between 100000 and 999999. The keepers field make sure that a new random number is generated each time a new var.name is passed to module.

Link random_integer resource to the example module

update the url field to

url = "${var.start_url}/${random_integer.random_user_id.result}"

Checking

Use your module as usual and verify.

That's all!

Build a Budget App using Flutter and Appwrite

Yogesh Sharma — Tue, 02 Nov 2021 02:21:12 +0000

Overview

There are multiple components to think about when you are building an App.

The broad component can be categorised as -
1.) The code for app: How data is consumed, displaying the components.
2.) The backend: Where the data is stored, api implementations

For 1, we have multiple solutions like react, ionic, flutter, Android sdk etc.

For 2, there are a lot of things to consider, how you handle authentication / authorisation, which database are you using etc. To make things simpler, there are frameworks like firebase and appwrite.

In this blog we will learn about Flutter for building the app and Appwrite for its backend. Both Flutter and Appwrite are open-source projects and you can find them at -
Appwrite - https://github.com/appwrite/appwrite
Flutter - https://github.com/flutter/flutter

The best method to learn any new technology is to build something using it!

So, in this blog we will make an app using flutter and appwrite.

We will create a simple budget management app which can do following things -

Allow authentication for multiple user, thus different users can manage their budgets
Show current balance and option to add expense / income
Show the historical transactions done by the user

Alright, with these requirements in mind, we are ready to start building!!

pre-requisites - A little knowledge of flutter would be helpful but I will point to different resources as and when needed.

Building the Budget App

You can find the final version of app in the repository - https://github.com/1995YogeshSharma/budget-app

Step 1: Dev Environment Setup

Setting up both flutter and appwrite for local development is very easy. Appwrite comes as dockerized container and is very easy to use.

Instruction to setup flutter - https://flutter.dev/docs/get-started/install
Instruction to setup appwrite - https://github.com/appwrite/appwrite#installation

I am using VS Code as IDE but you can choose your preferred IDE.

Step 2: Build the layout using Flutter

In this section, we build the layout of our app and use mock data.

2.1 Create a blank project

Run the following command to create a blank flutter project

flutter create budget-app

Strip down the code in lib/main.dart to just have the outline code -

import 'package:flutter/material.dart';

void main() {
  // runApp(BudgetApp());
  runApp(new MaterialApp(
    home: new BudgetApp(),
  ));
}

// Our main widget
class BudgetApp extends StatefulWidget {
  @override
  _State createState() => new _State();
}

class _State extends State<BudgetApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Budget App'),
      ),
      body: Container(
        child: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

When you run the app, it should look like -

2.2 Build the layout

You can find the updated code at - https://github.com/1995YogeshSharma/budget-app/blob/main/blog_steps/step3_lib/main.dart

On compiling the app should look like -

2.3 Add the functionality

Now, let's add the functionality to add expense / income and show the transaction history. We also add the bottom sheet view for the login / signup.

You can find the updated code at -
https://github.com/1995YogeshSharma/budget-app/blob/main/blog_steps/step3_lib/main.dart

On compiling the app should look like -

Step 3: Add the Appwrite authentication and database

3.1: Add flutter project to Appwrite

Follow the instructions at https://appwrite.io/docs/getting-started-for-flutter to setup your app connections with Appwrite.

3.2: Create required collections in Appwrite

We will need two collections for the functionality

balances : This collection will be used to store the current balance for each user. The Document has 'email' and 'balance'

Click on the left bar options in Appwrite UI to create your collection with following settings

transactions : This collection will be used to store transactional history for a user. Each document will have 'email' filed and 'transactions' which is an array of transactions

3.3: Add appwrite authentication to the app

We need to create 'login', 'logout' and 'signup' functions in our appwrite client code and use them in the main file

Code for appwrite client - https://github.com/1995YogeshSharma/budget-app/blob/main/blog_steps/step6_lib/appwrite_client.dart

Updated main file code -
https://github.com/1995YogeshSharma/budget-app/blob/main/blog_steps/step6_lib/main.dart

We should be able to login and signup in our app now!

3.4: Add appwrite database connections

For transactions, we need to create a model which will be used to store the Transaction object and convert it to JSON to store it to appwrite database and back to object when fetched from appwrite

The updated code is present at - https://github.com/1995YogeshSharma/budget-app/tree/main/budget_app/lib

We have built our app now!

The final App