Work Log

In this Code Pattern, we will create a Work Log web application using Flask, MongoDB, and Kubernetes. The Work Log application is used to keep track of and log different types of days that are associated with work. The different types of days include:

• Working in the office
• Working remotely
• Vacation days
• Holidays
• Sick days

When the reader has completed this Code Pattern, they will understand how to:

• Create a Python Flask application
• Incorporate MongoDB into a Python application
• Deploy and run microservices on Kubernetes

Architecture

1. User interacts with the App UI to initially create an account, login to account, or reset password for their account. Once User is logged in, they can view, add, and edit their work log data.
2. The functionality of the App UI that the User interacts with is handled by React. React is where the API calls are initialized.
3. The API calls are processed in the Flask API microservice on Kubernetes and are handled accordingly.
4. The data is stored, gathered, and/or modified in MongoDB depending on the API calls.
5. The response from the API calls are handled accordingly by the App UI.

Included components

• IBM Cloud Container Service: IBM Bluemix Container Service manages highly available apps inside Docker containers and Kubernetes clusters on the IBM Cloud.
• Swagger: A framework of API developer tools for the OpenAPI Specification that enables development across the entire API lifecycle.

Featured technologies

• Container Orchestration: Automating the deployment, scaling and management of containerized applications.
• Microservices: Collection of fine-grained, loosely coupled services using a lightweight protocol to provide building blocks in modern application composition in the cloud.
• Python: Python is a programming language that lets you work more quickly and integrate your systems more effectively.
• Flask: A microframework for Python for building APIs.
• React: JavaScript library for building User Interfaces.
• MongoDB: A document NoSQL database.

Prerequisites

• Docker
• IBM Cloud Kubernetes Service Provisioned

For running these services locally without Docker containers, the following will be needed:

• Python 3.7
• Relevant Python Libraries: Use pip3.7 install
• MongoDB
• NPM
• Relevant React Components: Use npm install

Steps

Follow these steps to setup and run this code pattern locally and on the Cloud. The steps are described in detail below.

1. Clone the repo
2. Run the application
3. Deploy to IBM Cloud

1. Clone the repo

Clone the worklog repo locally. In a terminal, run:

$ git clone https://github.com/IBM/worklog
$ cd worklog

2. Run the application

1. Start the application by running docker-compose up --build in this repo's root directory.
2. Once the containers are created and the application is running, use the Open API Doc (Swagger) at http://localhost:5000/api and API.md for instructions on how to use the APIs.
3. Use http://localhost:3000 to access the React UI.

3. Deploy to IBM Cloud

1. To allow changes to the Flask application or the React UI, create a repo on Docker Cloud where the new modified containers will be pushed to.

NOTE: If a new repo is used for the Docker containers, the container image will need to be modified to the name of the new repo used in deploy-webapp.yml and/or deploy-webappui.yml.

$ export DOCKERHUB_USERNAME=<your-dockerhub-username>

$ docker build -t $DOCKERHUB_USERNAME/worklog:latest .
$ docker build -t $DOCKERHUB_USERNAME/worklogui:latest web/worklog

$ docker login

$ docker push $DOCKERHUB_USERNAME/worklog:latest
$ docker push $DOCKERHUB_USERNAME/worklogui:latest

2. Provision the IBM Cloud Kubernetes Service and follow the set of instructions for creating a Container and Cluster based on your cluster type, Standard vs Lite.

Lite Cluster Instructions

3. Run bx cs workers mycluster and locate the Public IP. This IP is used to access the worklog API and UI (Flask Application). Update the env values in both deploy-webapp.yml and deploy-webappui.yml to the Public IP.

4. To deploy the services to the IBM Cloud Kubernetes Service, run:

$ kubectl apply -f deploy-mongodb.yml
$ kubectl apply -f deploy-webapp.yml
$ kubectl apply -f deploy-webappui.yml

## Confirm the services are running - this may take a minute
$ kubectl get pods

5. Use https://PUBLIC_IP:32001 to access the React UI and the Open API Doc (Swagger) at https://PUBLIC_IP:32000/api for instructions on how to make API calls.

Standard Cluster Instructions

3. Run bx cs cluster-get <CLUSTER_NAME> and locate the Ingress Subdomain and Ingress Secret. This is the domain of the URL that is to be used to access the UI and Flask Application on the Cloud. Update the env values in both deploy-webapp.yml and deploy-webappui.yml to the Ingress Subdomain. In addition, update the host and secretName in ingress.yml to Ingress Subdomain and Ingress Secret.

4. To deploy the services to the IBM Cloud Kubernetes Service, run:

$ kubectl apply -f deploy-mongodb.yml
$ kubectl apply -f deploy-webapp.yml
$ kubectl apply -f deploy-webappui.yml

## Confirm the services are running - this may take a minute
$ kubectl get pods

## Update protocol being used to https
$ kubectl apply -f ingress.yml

5. Use https://<INGRESS_SUBDOMAIN> to access the React UI and the Open API Doc (Swagger) at https://<INGRESS_SUBDOMAIN>/api for instructions on how to make API calls.

Links

• Flask
• Swagger Editor

Learn more

• Container Code Patterns: Enjoyed this Code Pattern? Check out our other Container Code Patterns.
• Python Code Patterns: Enjoyed this Code Pattern? Check out our other Python Code Patterns.

License

This code pattern is licensed under the Apache Software License, Version 2. Separate third party code objects invoked within this code pattern are licensed by their respective providers pursuant to their own separate licenses. Contributions are subject to the Developer Certificate of Origin, Version 1.1 (DCO) and the Apache Software License, Version 2.

Apache Software License (ASL) FAQ