badgeYAY – An abrupt flow of code

Badgeyay is a web application which takes a CSV file, an image file and an optional config.json file, and converts them into a PDF file which consist of a set of badges as per the data in the CSV and the image as its background. In order to contribute to the badgeyay repository, a contributor is expected to have some knowledge of Python Flask, HTML and CSS. An understanding of git version control system is inevitable in open source.

Flask – Web development in baby steps

First things first – Having a local copy

Sign up for GitHub and head over to the Badgeyay repository. Then follow these steps.

  1. Go ahead and Fork the repository
  2. Star the repository
  3. Get the clone of the forked version on you local machine using git clone https://github.com/<username>/badgeyay.git
  4. Add upstream using git remote add upstream https://github.com/fossasia/badgeyay.git

How a flask application works

A flask application basically consists of an app.py or main.py file which is run using the command python main.py

The main.py file consists of:


from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
if __name__ == '__main__':
app.run(debug=True)

This snippet starts the flask server at localhost:5000 and index.html template gets rendered on visiting the root url. All the templates reside in templates folder while the static asset files are stored in static folder.

Steps:

  1. First. we imported the Flask class and a function render_template.
  2. Next, we created a new instance of the Flask class.
  3. We then mapped the URL / to the function index(). Now, when someone visits this URL, the function index() will execute.
  4. The function index() uses the Flask function render_template() to render the index.html template we just created from the templates/ folder to the browser.
  5. Finally, we use run() to run our app on a local server. We’ll set the debug flag to true, so we can view any applicable error messages if something goes wrong, and so that the local server automatically reloads after we’ve made changes to the code.

The template consists of a base layout which is extended by the pages.

templates/layout.html

<!DOCTYPE html>
<html>
<head>
<title>Flask App</title>
</head>
<body>
<header>
<h1 class="logo">Flask App</h1>
</header>

{% block content %}
{% endblock %}

</body>
</html>

templates/index.html

{% extends "layout.html" %}
{% block content %}
<h2>Welcome to the Flask app</h2>
<h3>This is the index page for the Flask app</h3>
<h3>{% endblock %}</h3>

With this and a little understanding of python, and you are all set to contribute to flask repositories such as badgeyay.

Resources