Creating Forms and their validation using Semantic UI in Badgeyay

Badgeyay project is now divided into two parts i.e front-end of Ember JS and back-end with REST-API programmed in Python.

After a discussion, we have finalized to go with Semantic UI framework which uses simple, common language for parts of interface elements, and familiar patterns found in natural languages for describing elements. Semantic allows to build beautiful websites fast, with concise HTML, intuitive javascript and simplified debugging, helping make front-end development a delightful experience. Semantic is responsively designed allowing a web application to scale on multiple devices. Semantic is production ready and partnered with Ember framework which means we can integrate it with Ember frameworks to organize our UI layer alongside our application logic.

In this blog, I will be discussing how I added Log In and Signup Forms and their validations using Semantic UI for badgeyay frontend in my Pull Request.

Let’s get started and understand it step by step.

Step 1:

Generate ember components of Login and Sign up by using the following command :

$ ember generate component forms/login-form
$ ember generate component forms/signup-form


Step 2:

Generate Login and Sign up route by following commands.

$ ember generate route login
$ ember generate route signup 


Step 3:

Generate Login and Sign up controller by following commands.

$ ember generate controller login
$ ember generate controller signup


Step 4:

Now we have set up the components, routes, and controllers for adding the forms for login and Sign up. Now let’s start writing HTML in handlebars, adding validations and implementing validations for the form components. In this blog, I will be sharing the code of Login form and actions related to logging In of user. You can check the whole code my Pull Request which I have made for adding these Forms.

Step 4.1: Creating a Login Form

<div class="ui hidden divider"></div>
<div class="ui raised segment">
    <div class="ui stackable column doubling centered grid">
        <div class="ui middle aligned center aligned grid">
            <div class="row" >
                <div class="column">
                    <h1 class="ui orange header">
                        Welcome back !
                        <div class="sub header">We're happy  helping you get beautiful name badges.</div>
                    <div class="ui hidden divider"></div>
                    <form class="ui form">
                        <div class="ui stacked element">
                            <div class="field required">
                                <div class="ui left icon input">
                                    <i class="mail icon"></i>
                                    {{input type="text" value=email name="email" placeholder="E-mail address"}}
                            <div class="field required">
                                <div class="ui left icon input">
                                    <i class="lock icon"></i>
                                    {{input type="password" value=password name="password" placeholder="Password"}}
                            <button class="ui button orange fluid" style="margin-bottom: 10px;" {{ action 'logIn' 'password' }}>Log In</button>
                            <a href="#" class="text muted"> Forgot your password ?</a>
                            <div class="ui divider"></div>
                            <a href="{{href-to 'signup'}}" class="text muted weight-800">Don't have an account yet? Signup</a>
                    <div class="ui horizontal divider">
                    <h1 class="ui header">
                        <div class="sub header">Login with</div>
            <div class="three column row">
                <div class="column">
                    <div class="ui vertical animated red button fluid" {{ action 'logIn' 'google' }}>
                        <div class="hidden content">Google</div>
                        <div class="visible content">
                            <i class="google plus icon"></i>
                <div class="column">
                    <div class="ui vertical animated violet button fluid" tabindex="0" {{ action 'logIn' 'facebook' }}>
                        <div class="hidden content">Facebook</div>
                        <div class="visible content">
                            <i class="facebook f icon"></i>
                <div class="column">
                    <div class="ui vertical animated blue button fluid" tabindex="0" {{ action 'logIn' 'twitter' }}>
                        <div class="hidden content">Twitter</div>
                        <div class="visible content">
                            <i class="twitter icon"></i>


Step 4.2: Adding Form Validations

import Component from '@ember/component';

export default Component.extend({
  init() {

  actions: {
    logIn(provider) {
      let email = '';
      let password = '';
      if (provider == 'password') {
        email = this.get('email');
        password = this.get('password');
      this.get('login')(provider, email, password);

    logOut() {

  didRender() {
        inline : true,
        delay  : false,
        fields : {
          email: {
            identifier : 'email',
            rules      : [
                type   : 'email',
                prompt : 'Please enter a valid email address'
          password: {
            identifier : 'password',
            rules      : [
                type   : 'empty',
                prompt : 'Please enter a password'


Step 4.3: Adding Login Actions

import Ember from 'ember';

import Controller from '@ember/controller';

const { inject } = Ember;

export default Controller.extend({
  session: inject.service(),
  beforeModel() {
    return this.get('session').fetch().catch(function() {});
  actions: {
    login(provider, email, password) {
      const that = this;
      if (provider === 'password') {
        this.get('session').open('firebase', {
          provider: 'password',
        }).then(function(userData) {
        }).catch(function(err) {
      } else {
        const that = this;
        this.get('session').open('firebase', {
        }).then(function(userData) {
        }).catch(function(err) {

    logOut() {


I have made Login form and in a similar way I implemented the SignUp form and complete code can be seen in my Pull Request.

Now, we are done with writing HTML in handlebars, adding validations and implementing validations for the form components.

Step 5:

Now run the server to see the implemented changes by the following command.

$ ember serve


It will show like this :

Navigate to localhost to see the changes.

  • Login Form

  • Sign up  Form

  • Form Validations

Now we are all done with setting up Log In and Signup Forms and their validations using Semantic UI in the badgeyay repository.

This is how I have added Log In and Signup Forms and their validations in my Pull Request.


  • Semantic UI Docs – Link
  • Ember Docs – Link

Implementing Database Migrations to Badgeyay

Badgeyay project is divided into two parts i.e front-end of Ember JS and back-end with REST-API programmed in Python.

We have integrated PostgreSQL as the object-relational database in Badgeyay and we are using SQLAlchemy SQL Toolkit and Object Relational Mapper tools for working with databases and Python. As we have Flask microframework for Python, so we are having Flask-SQLAlchemy as an extension for Flask that adds support for SQLAlchemy to work with the ORM.

One of the challenging jobs is to manage changes we make to the models and propagate these changes in the database. For this purpose, I have added Added Migrations to Flask SQLAlchemy for handling database changes using the Flask-Migrate extension.

In this blog, I will be discussing how I added Migrations to Flask SQLAlchemy for handling Database changes using the Flask-Migrate extension in my Pull Request.

First, Let’s understand Database Models, Migrations, and Flask Migrate extension. Then we will move onto adding migrations using Flask-Migrate. Let’s get started and understand it step by step.

What are Database Models?

A Database model defines the logical design and structure of a database which includes the relationships and constraints that determine how data can be stored and accessed. Presently, we are having a User and file Models in the project.

What are Migrations?

Database migration is a process, which usually includes assessment, database schema conversion. Migrations enable us to manipulate modifications we make to the models and propagate these adjustments in the database. For example, if later on, we make a change to a field in one of the models, all we will want to do is create and do a migration, and the database will replicate the change.

What is Flask Migrate?

Flask-Migrate is an extension that handles SQLAlchemy database migrations for Flask applications using Alembic. The database operations are made available through the Flask command-line interface or through the Flask-Script extension.

Now let’s add support for migration in Badgeyay.

Step 1 :

pip install flask-migrate


Step 2 :

We will need to edit and it will look like this :

import os
from flask import Flask
from flask_migrate import Migrate  // Imported Flask Migrate

from api.db import db
from api.config import config


migrate = Migrate(app, db) // It will allow us to run migrations

def create_tables():

if __name__ == '__main__':


Step 3 :

Creation of Migration Directory.

 flask db init


This will create Migration Directory in the backend API folder.

└── migrations
    ├── README
    ├── alembic.ini
    └── versions


Step 4 :

We will do our first Migration by the following command.

flask db migrate


Step 5 :

We will apply the migrations by the following command.

flask db upgrade


Now we are all done with setting up Migrations to Flask SQLAlchemy for handling database changes in the badgeyay repository. We can verify the Migration by checking the database tables in the Database.

This is how I have added Migrations to Flask SQLAlchemy for handling Database changes using the Flask-Migrate extension in my Pull Request.


  • PostgreSQL Docs    – Link
  • Flask Migrate Docs  – Link
  • SQLAlchemy Docs  – Link
  • Flask SQLAlchemy Docs – Link

Refactoring and Remodeling Badgeyay API

When we build a full scale production application, we make sure that everything is modeled correctly and accordingly to the need of the code. The code must be properly maintained as well as designed in such a way that it is less prone to errors and bugs.

Badgeyay is also targeting to be a full production application, and in order to achieve it we first need to re-factor the code and model it using a strong yet maintainable structure.

What is the current state of Badgeyay?

Currently Badgeyay is divided into two sub folders.


It is backed by two folders, viz backend and frontend. The ‘backend’ folder handles the API that the service is currently running. The ‘frontend’ folder houses the Ember based frontend logic of the application.

Improvements to Badgeyay Backend

We have worked on improving Backend for Badgeyay. Instead of traditional methods, i.e. current method, of API development; We employ a far better approach of using Flask Blueprint as a method of refactoring the API.

The new backend API resides inside the following structure.


The API folder currently holds the new API being formatted from scratch using

  • Flask Blueprint
  • Flask Utilities like jsonify, response etc

The new structure of Badgeyay Backend will follow the following structure


The folders and their use cases are given below

  • \config
    • Contain all the configuration files
    • Configurations about URLs, PostgreSQL etc
  • \controllers
    • This will contain the controllers for our API
    • Controllers will be the house to our routes for APIs
  • \helpers
    • Helpers folder will contain the files directly related to API
  • \models
    • Models folder contains the Schemas for PostgreSQL
    • Classes like User etc will be stored in here
  • \utils
    • Utils will contain the helper functions or classes
    • This classes or functions are not directly connected to the APIs
    • Main python file for Flask SQLAlchemy
    • This is the main entry point.
    • Running this file will run the entire Flask Blueprint API

How does it help?

  • It helps in making the backend more solid.
  • It helps in easy understanding of application with maintained workflow.
  • Since we will be adding a variety of features during Google Summer of Code 2018 therefore we need to have a well structured API with well defined paths for every file being used inside it.
  • It will help in easy maintaining for any maintainer on this project.
  • Development of the API will be faster in this way, since everything is divided into sub parts therefore many people can work on many different possibilities on the same time.

Further Improvements

Since this structure has been setup correctly in Badgeyay now, so we can work on adding separate routes and different functionalities can be added simultaneously.

It ensures faster development of the project.


Auto Deployment of Badgeyay Backend by Heroku Pipeline

Badgeyay project is now divided into two parts i.e front-end of Ember JS and back-end with REST-API programmed in Python. One of the challenging job is that, it should support the uncoupled architecture. Now, we have to integrate Heroku deployed API with Github which should auto deploy every Pull Request made to the Development Branch and help in easing the Pull Request review process.

In this blog, I’ll be discussing how I have configured Heroku Pipeline to auto deploy every Pull request made to the Development Branch and help in easing the Pull Request review process  in Badgeyay in my Pull Request.
First, Let’s understand Heroku Pipeline and its features. Then we will move onto configuring the Pipeline file to run auto deploy PR.. Let’s get started and understand it step by step.

What is Heroku Pipeline ?

A pipeline is a group of Heroku apps that share the same codebase. Each app in a pipeline represents one of the following steps in a continuous delivery workflow:

  • Review
  • Development
  • Staging
  • Production

A common Heroku continuous delivery workflow has the following steps:

  • A developer creates a pull request to make a change to the codebase.
  • Heroku automatically creates a review app for the pull request, allowing    developers to test the change.
  • When the change is ready, it’s merged into the codebase Default branch.
  • The Default branch is automatically deployed to staging for further testing.
  • When it’s ready, the staging app is promoted to production, where the change is available to end users of the app.

In badgeyay, I have used Review App and Development App steps for auto deployment of Pull Request.

Pre – requisites:

  • You should have admin rights of the Github Repository.
  • You should be the owner of the Heroku deployed app.
  • For creating a Review App , Below mentioned files are needed to be in the root of the project repository to trigger the Heroku Build.

1. App.json

    "name": "BadgeYay-API",
    "description": "A fully functional REST API for badges generator using flask",
    "repository": "",
    "keywords": [
    "buildpacks": [
            "url": "heroku/python"
2. Procfile

web: gunicorn --pythonpath backend/app/ main:app


Now, I have fulfilled all the prerequisites needed for integrating Github repository to Heroku Deployed Badgeyay API. Let’s move to Heroku Dashboard of the Badgeyay API and implement auto deployment of every Pull Request.

Step 1 :

Open the heroku Deployed App on the dashboard. Yow will see following tabs in top of the dashboard.

Step 2 :

Click on Deploy and first create a new pipeline by giving a name to it and choose a stage for the pipeline.

Step 3 :

  • Choose a Deployment Method. For the badgeyay project, I have  integrated Github for auto deployment of PR.
  • Select the repository and connect with it.
  • You will receive a pop-up which will ensure that repository is connected to Heroku.

Step 4 :
Enable automatic deploys for the Github repository.

Step 5 :

Now after adding the pipeline, present app get nested under the pipeline. Click on the pipeline name on the top and now we have a pipeline dashboard like this :

Step 6:

Now for auto deployment of PR, enable Review Apps by filling the required information like this :

Step 7:

Verify by creating a test PR after following every above mentioned steps.


Now we are all done with setting up auto deployment of every pull request to badgeyay repository.

This is how I have configured Heroku Pipeline to auto deploy every Pull request made to the Development Branch and help in easing the Pull Request review process.

About Author :

I have been contributing in open source organization FOSSASIA, where I’m working on a project called BadgeYaY. It is a badge generator with a simple web UI to add data and generate printable badges in PDF.


  • Heroku Pipelines Article – Link

Daimler: Our developers know about the advantages of Open Source Software

Vlado Koljibabic is Head of CASE IT at Daimler AG, the parent company of the car manufacturer Mercedes-Benz. He aims to strengthen the idea of Open Source in his company. Daimler is a partner of FOSSASIA. Torben Stephan interviewed Koljibabic on the advantages of open source software.

Stephan: What does CASE stand for?

Koljibabic: CASE is the combination of everything disruptive regarding our business: Connected, Autonomous, Shared & Services and Electric. These topics shall help us to transform from a car manufacturer to a mobility services provider. This is key in order to remain successful in the future.

How much Free and Open Source Software (FOSS) is actually part of a Mercedes?

We have been using FOSS for many years. Any Mercedes-Benz comes with a CD full of FOSS licenses. Every license belongs to a piece of open source software which is implemented in our cars. Even our Mercedes me app contains seven OS licenses. We use it because our developers know about the advantages of OSS.

Which are?

We don’t need to develop everything from scratch, we can reuse things where it makes sense and contribute to the development of open standards that increase efficiency throughout the system.

Daimler is a member of the “Automotive Grade Linux” (AGL) initiative initiated by the Linux Foundation. Isn’t that the right place for such open standards?

Absolutely. During FOSSASIA, with the community, we discussed the opportunity of defining an open standard for electric vehicle charging stations. From my point of view it definitely does make sense to develop this via the AGL. On the other hand Daimler might put even more commitment into this project to show we seriously want to be part of this.

Vlado Koljibabic CASE IT Daimler
Vlado Koljibabic CASE IT Daimler

What’s the advantage of open source software compared to proprietary?

Two things: Nobel Prize laureate John Nash showed that sharing of commodities brings advantages to all players in the market. For me this is the secret of the success of open source software. Beside this we can use existing software solutions for recurring processes. And the car industry is full of recurring processes. If there is no ready-to-use solution, we can initiate and design the processes and contribute to the community.

How do other business units within Daimler respond to this ideas?

For a company like Daimler these are huge changes. That’s why we do this step-by-step. First of all we convince our internal stakeholders of the reasonableness and the value of FOSS. As a following step we accelerate the topic within concrete projects. The overall process of enhancement of OSS usage is initiated and strategically supported. Jan Brecht the CIO of the Daimler AG drives and promotes the initiative essentially.

In which fields would you refrain from publishing your source code?

For example in highly sensitive areas in terms of competition. One example is Autonomous Driving – I would not be the first to focus on open source when it comes to this topic right now. But I’m sure that within the next years, there will be a deck of open source tools for Autonomous Driving, Machine Learning and Artificial Intelligence everyone can use.

Daimler uses a lot of open source. But what are you giving back to the community?

We are a member of the Linux Foundation and partner here at FOSSASIA. However, we don’t contribute source code yet in the context of open source projects. But we see the demand of the community and are working on it continuously to contribute as soon as possible.

Unit Tests for REST-API in Python Web Application

Badgeyay backend is now shifted to REST-API and to test functions used in REST-API, we need some testing technology which will test each and every function used in the API. For our purposes, we chose the popular unit tests Python test suite.

In this blog, I’ll be discussing how I have written unit tests to test Badgeyay  REST-API.

First, let’s understand what is unittests and why we have chosen it. Then we will move onto writing API tests for Badgeyay. These tests have a generic structure and thus the code I mention would work in other REST API testing scenarios, often with little to no modifications.

Let’s get started and understand API testing step by step.

What is Unittests?

Unitests is a Python unit testing framework which supports test automation, sharing of setup and shutdown code for tests, aggregation of tests into collections, and independence of the tests from the reporting framework. The unittest module provides classes that make it easy to support these qualities for a set of tests.

Why Unittests?

We get two primary benefits from unit testing, with a majority of the value going to the first:

  • Guides your design to be loosely coupled and well fleshed out. If doing test driven development, it limits the code you write to only what is needed and helps you to evolve that code in small steps.
  • Provides fast automated regression for re-factors and small changes to the code.
  • Unit testing also gives you living documentation about how small pieces of the system work.

We should always strive to write comprehensive tests that cover the working code pretty well.

Now, here is glimpse of how  I wrote unit tests for testing code in the REST-API backend of Badgeyay. Using unittests python package and requests modules, we can test REST API in test automation.

Below is the code snippet for which I have written unit tests in one of my pull requests.

def output(response_type, message, download_link):
    if download_link == '':
        response = [
                'type': response_type,
                'message': message
        response = [
                'type': response_type,
                'message': message,
                'download_link': download_link
    return jsonify({'response': response})


To test this function, I basically created a mock object which could simulate the behavior of real objects in a controlled way, so in this case a mock object may simulate the behavior of the output function and return something like an JSON response without hitting the real REST API. Now the next challenge is to parse the JSON response and feed the specific value of the response JSON to the Python automation script. So Python reads the JSON as a dictionary object and it really simplifies the way JSON needs to be parsed and used.

And here’s the content of the backend/tests/ file.

 #!/usr/bin/env python3
"""Tests for Basic Functions"""
import sys
import json
import unittest

from app.main import *

class TestFunctions(unittest.TestCase):
      """Test case for the client methods."""
    def setup(self):['TESTING'] = True =
      # Test of Output function
    def test_output(self):
        with app.test_request_context():
            # mock object
            out = output('error', 'Test Error', 'local_host')
            # Passing the mock object
            response = [
                    'type': 'error',
                    'message': 'Test Error',
                    'download_link': 'local_host'
            data = json.loads(out.get_data(as_text=True))
            # Assert response
            self.assertEqual(data['response'], response)

if __name__ == '__main__':


And finally, we can verify that everything works by running nosetests .

This is how I wrote unit tests in BadgeYaY repository. You can find more of work here.


  • The Purpose of Unit Testing – Link
  • Unit testing framework – Link

Parallelizing Builds In Travis CI

Badgeyay project is now divided into two parts i.e front-end of emberJS and back-end with REST-API programmed in Python. Now, one of the challenging job is that, it should support the uncoupled architecture. It should therefore run tests for the front-end and backend i.e, of two different languages on isolated instances by making use of the isolated parallel builds.

In this blog, I’ll be discussing how I have configured Travis CI to run the tests parallely in isolated parallel builds in Badgeyay in my Pull Request.

First let’s understand what is Parallel Travis CI build and why we need it. Then we will move onto configuring the travis.yml file to run tests parallely. Let’s get started and understand it step by step.

Why Parallel Travis CI Build?

The integration test suites tend to test more complex situations through the whole stack which incorporates front-end and back-end, they likewise have a tendency to be the slowest part, requiring various minutes to run, here and there even up to 30 minutes. To accelerate a test suite like that, we can split it up into a few sections utilizing Travis build matrix feature. Travis will decide the build matrix based on environment variables and schedule two builds to run.

Now our objective is clear that we have to configure travis.yml to build parallel-y. Our project requires two buildpacks, Python and node_js, running the build jobs for both them would speed up things by a considerable amount.It seems be possible now to run several languages in one .travis.yml file using the matrix:include feature.

Below is the code snippet of the travis.yml file  for the Badgeyay project in order to run build jobs in a parallel fashion.

sudo: required
dist: trusty

# check different combinations of build flags which is able to divide builds into “jobs”.

# Helps to run different languages in one .travis.yml file

# First Job in Python.
- language: python3

- python-dev

- 3.5
- $HOME/backend/.pip-cache/

- sudo apt-get -qq update
- sudo apt-get -y install python3-pip
- sudo apt-get install python-virtualenv

- virtualenv  -p python3 ../flask_env
- source ../flask_env/bin/activate
- pip3 install -r backend/requirements/test.txt --cache-dir

- export DISPLAY=:99.0
- sh -e /etc/init.d/xvfb start
- sleep 3

- python backend/app/ >> log.txt 2>&1  &
- python backend/app/ > /dev/null &
- py.test --cov ../  ./backend/app/tests/

- bash <(curl -s

# Second Job in node js.
- language: node_js
- "6"

chrome: stable

- $HOME/frontend/.npm

# See for details.
- JOBS=1

- cd frontend
- npm install
- npm install -g ember-cli
- npm i [email protected] --save-dev
- npm config set spin false

- npm run lint:js
- npm test


Now, as we have added travis.yml and pushed it to the project repo. Here is the screenshot of passing Travis CI after parallel build jobs.

The related PR of this work is

Resources :

Travis CI documentation – Link

Deploying BadgeYaY with Docker on Docker Cloud

We already have a Dockerfile present in the repository but  there is problem in many lines of code.I studied about Docker and learned how It is deployed and I am now going to explain how I deployed BadgeYaY on Docker Cloud.

To make deploying of Badgeyay easier we are now supporting Docker based installation.

Before we start to deploy, let’s have a quick brief about what is docker and how it works ?

What is Docker ?

Docker is an open-source technology that allows you create, deploy, and run applications using containers. Docker allows you deploy technologies with many underlying components that must be installed and configured in a single, containerized instance.Docker makes it easier to create and deploy applications in an isolated environment.

Now, let’s start with how to deploy on docker cloud:

Step 1 – Installing Docker

Get the latest version of docker. See the offical site for installation info for your platform.

Step 2 – Create Dockerfile

With Docker, we can just grab a portable Python runtime as an image, no installation necessary. Then, our build can include the base Python image right alongside our app code, ensuring that our app, its dependencies, and the runtime, all travel together.

These portable images are defined by something called a Dockerfile.

In DockerFile, there are all the commands a user could call on the command line to assemble an image. Here’s is the Dockerfile of BadgeYaY.

# The FROM instruction initializes a new build stage and sets the Base Image for subsequent instructions.
FROM python:3.6

# We copy just the requirements.txt first to leverage Docker cache
COPY ./app/requirements.txt /app/

# The WORKDIR instruction sets the working directory for any RUN, CMD, ENTRYPOINT, COPY and ADD instructions that follow it in the Dockerfile.

# The RUN instruction will execute any commands in a new layer on top of the current image and commit the results.
RUN pip install -r requirements.txt

# The COPY instruction copies new files.
COPY . /app

# An ENTRYPOINT allows you to configure a container that will run as an executable.
ENTRYPOINT [ "python" ]

# The main purpose of a CMD is to provide defaults for an executing container.
CMD [ "" ]


Step 3 – Build New Docker Image

sudo docker build -t badgeyay:latest .


When the command completed successfully, we can check the new image with the docker command below:

     sudo docker images


Step 4 – Run the app

Let’s run the app in the background, in detached mode:

 sudo docker run -d -p 5000:5000 badgeyay


We get the long container ID for our app and then are kicked back to our terminal.Our container is running in the background.Now use docker container stop to end the process, using the CONTAINER ID, like so :


docker container stop 1fa4ab2cf395


Step 5 – Publish the app.

Log in to the Docker public registry on your local machine.

docker login


Upload your tagged image to the repository:

docker push username/repository:tag


From now on, we can use docker run and run our app on any machine. No matter where docker run executes, it pulls your image, along with Python and all the dependencies from requirements.txt, and runs your code. It all travels together in a neat little package, and the host machine doesn’t have to install anything but Docker to run it.

Docker Cloud

Docker Cloud provides a hosted registry service with build and testing facilities for Dockerized application images; tools to help you set up and manage host infrastructure; and application lifecycle features to automate deploying (and redeploying) services created from images.

In BadgeYaY, we  also have a Deploy button button which directly deploys on Docker cloud with a single click .

The related PR of this work is .

Resources :

  • Docker documentation: Link
  • Get Started With Docker: Link

Setting up Codecov in Badgeyay


BadgeYaY already has Travis CI and Codacy to test code quality and Pull Request but there was no support for testing Code Coverage in repository against every Pull Request. So I decided to go with setting up Codecov to test the code coverage.

In this blog post, I’ll be discussing how I have set up codecov in BadgeYaY in my Pull Request.

First, let’s understand what is codecov and why do we need it. For that we have to first understand what is code coverage then we will move on to how to add Codecov with help of Travis CI .

Let’s get started and understand it step by step.

What is Code Coverage ?

Code coverage is a measurement used to express which lines of code were executed by a test suite. We use three primary terms to describe each lines executed.

  • hit indicates that the source code was executed by the test suite.
  • partial indicates that the source code was not fully executed by the test suite; there are remaining branches that were not executed.
  • miss indicates that the source code was not executed by the test suite.

Coverage is the ratio of hits / (hit + partial + miss). A code base that has 5 lines executed by tests out of 12 total lines will receive a coverage ratio of 41% . In BadgeYaY , Code Coverage is 100%.

How CodeCov helps in Code Coverage ?

Codecov focuses on integration and promoting healthy pull requests. Codecov delivers <<<or “injects”>>> coverage metrics directly into the modern workflow to promote more code coverage, especially in pull requests where new features and bug fixes commonly occur.

I am listing down top 5 Codecov Features:

We can change the configuration of how Codecov processes reports and expresses coverage information. Let’s see how we configure it according to BadgeYaY by integrating it with Travis CI.

Now generally, the codecov works better with Travis CI. With the one line

 bash <(curl -s


the code coverage can now be easily reported.

Add a script for testing:

"scripts": {
   - nosetests app/tests/ -v --with-coverage

Here is a particular example of travis.yml from the project repository of BadgeYaY:

- python app/ >> log.txt 2>&1  &
- nosetts app/tests/ -v --with-coverage
- python3 -m pyflakes

- bash <(curl -s


Let’s have a look at Codecov.yml to check exact configuration that I have used for BadgeYaY.

  # yes: will delay sending notifications until all ci is finished
    require_ci_to_pass: yes

  # how many decimal places to display in the UI: 0 <= value <= 4
  precision: 2
  # how coverage is rounded: down/up/nearest
  round: down 
  # custom range of coverage colors from red -> yellow -> green 
  range: "70...100"

     # measuring the overall project coverage
    project: yes
     # pull requests only: this commit status will measure the
       entire pull requests Coverage Diff. Checking if the lines
       adjusted are covered at least X%.
    patch: yes
     # if there are any unexpected changes in coverage
    changes: no


  layout: "reach, diff, flags, files, footer"
  behavior: default
  require_changes: no


Now when anyone makes a Pull Request to BadgeYaY, Codecov will analyze the Pull Request according to above configuration and generate a Report showing the code coverage of that Pull Request.


Below is the screenshot of all test passing in BadgeYaY repository

This is how we setup codecov in BadgeYaY repository. And like this way, it can be set up in other repositories as well.

The related PR of this work is

Resources :

  • CodeCov Documentation – Link

FOSSASIA Summit 2018 Highlights

The schedule for the FOSSASIA Summit is out. Our four-day open tech event starts on Thursday, March 22 with a grand opening of the exhibition at 12:00 PM and the conference at 1:00 PM in the Lifelong Learning Institute.

Developers, engineers and business representatives from FOSS projects and companies are joining the event. Thank you to Google Cloud, Daimler, Indeed, Microsoft, JPMorgan and the many partners and supporters for helping us to make the summit possible!

As a reader of FOSSASIA news you get a 15% discount on your ticket if you book before March 14 (after that 10%) with this link.

Here are some highlights of the event and a glance at participating FOSS projects, organizations and companies.

Highlights of the FOSSASIA Summit 2018

  • 200+ Tech Speakers in 12 Tracks are confirmed. Learn about latest technologies and Open Source business models in the Blockchain track, find out how to analyze data more efficiently in the Artificial Intelligence track or see how to deploy solutions with Kubernetes in the Cloud from engineers at leading cloud providers.
  • Executive Keynotes about “Daimler’s Open Source Strategy”, and “Machine Learning with TensorFlow and Cloud ML”
  • Leadership Panels about “AI, Machine Learning, Cloud, and the Conversational Web: Where is it all going?”, “Making Money with FOSS” and “Open Source Education”
  • The Exhibition and Career Fair runs from Thursday (March 22) till Saturday (March 24) with more than 50 company and project booths, where you can learn about technologies, job opportunities and participate in hands-on labs. Free hall passes are available until March 14.
  • The UNESCO Open Science and Open Data Hackathon takes place on Saturday and Sunday (March 24/25). Tickets and registration are free. Awesome prizes are waiting for the winners.
  • We put together a Cloud Training Day for Business Professionals in cooperation with Google. Apply for your spot here.
  • At the Young Developers Day on Saturday (March 24) there are many hands-on workshops in the exhibition hall, where participants of any age can build their own hardware and experiment with our Pocket Science Lab.
  • Vast variety of Deep Tech Sessions in tracks such as Artificial Intelligence,  Cloud, Container, DevOps, Blockchain, Cybersecurity, Web and Mobile, Open Design, IoT, Hardware, Imaging, Kernel & Platform,  Science Tech and Education and more.

FOSS Organizations at the FOSSASIA Summit

Speakers at the event come from amazing Free/Open Source organizations and projects like Debian, CentOS, FreeBSD, Videolan/VLC, Linux Foundation, Open Source Initiative, Python Software Foundation, Wikimedia, KDE, Apache Software Foundation, Open Source Design, Drupal, OpenTech, Ethical Hacking Club, Pocket Science Lab, Oman FOSS Initiative, LikeCoin Foundation and many more.

Companies at the FOSSASIA Summit

Tech Companies present at the event are Daimler/Mercedes, Google, Microsoft, Samsung, Singapore Press Holding, J.P. Morgan, Indeed, UNESCO, Oracle/MySQL,, Lazada, Viseo, Grab, SUSI.AI, BareOS,, Ulicious, SAP, Thoughtworks, Autodesk, KPMG, VMWare, Lionsforge, Fujitsu, Zendesk, McKinsey, Iomedia, IBM, Collabora, Manulife, Tata Consultancy Services and many startups like KyberNetwork, DataKind, Ethereum, Kamailio, Go-Jek, Canaan, StopStalk, ConsenSys, Chibitronics,, Attores and many others.