Instantly share code, notes, and snippets.

Embed
What would you like to do?
Final Work Product Submission for Google Summer of Code'18 at The Mifos Initiative - Abhay Chawla(@abhaychawla)

GSoC'18 Work Product Submission Mifos X Web App | Abhay Chawla

I would like to thank Ed Cable, Gaurav Saini, Pranjal Goswami and Maulik Soneji for their guidance and support throughout the program. A special thanks to Santosh Math, Sampath Kumar G, Shruthi M R and the community members for their timely assistance.

Project Overview

Mifos X Web App is the revamped version of the Mifos X Community App, an effective financial inclusion solution and the default web application built on top of the Mifos X platform for the Mifos User Community. The newly integrated self-service user administrative portal strives to deliver better support to the self-service users of the online banking and mobile banking app from the financial institutions by providing them with a mechanism to properly manage and give necessary assistance to users for carrying out their operations.

Background

Initially, I had proposed the self-service user administrative portal to be an independent project in itself based on AngularJS. But during the community bonding period, the scope of my project was modified to the revamping of the current community app into the new web app with an integrated self-service administrative portal based on Angular 6.

Work Overview

Commits | Live Demo | Setup Video

Table of Contents

  1. Choice of Framework
  2. Project Guidelines
  3. Travis CI Setup
  4. Application Shell
  5. Core Module and HTTP Interceptors
  6. Shared Module
  7. App Configuration
  8. Self Service User Administrative Portal
  9. Login
  10. Accounting
  11. Home

Choice of Framework

After a thorough discussion regarding the choice of design framework for the new web app with Ed, Gaurav and the community members we came to a conclusion to leverage the following:

[1] Mailing List Discussion Link
[2] Commit to Setup Angular Material and Flex Layout
[3] Commit to Setup Angular Font Awesome
[4] Commit to Setup Material Module (Refractor)
Related Issues:
[1] https://github.com/openMF/web-app/issues/44
[2] https://github.com/openMF/web-app/issues/279
[3] https://github.com/openMF/web-app/issues/280
[4] https://github.com/openMF/web-app/issues/54
Related Pull Requests:
[1] https://github.com/openMF/web-app/pull/53
[2] https://github.com/openMF/web-app/pull/278
[3] https://github.com/openMF/web-app/pull/55

Project Guidelines

As the project was built from scratch, I created the guidelines for us as well as the future potential contributors of the project:
README.md
CONTRIBUTING.md
COMMIT_MESSAGE.md
CODE_OF_CONDUCT.md
ISSUE_TEMPLATE
PULL_REQUEST_TEMPLATE
Files were updated regularly from time to time throughout the coding period.

Related Issues:
[1] https://github.com/openMF/web-app/issues/15
[2] https://github.com/openMF/web-app/issues/16
[3] https://github.com/openMF/web-app/issues/17
[4] https://github.com/openMF/web-app/issues/18
[5] https://github.com/openMF/web-app/issues/21
[6] https://github.com/openMF/web-app/issues/25
[7] https://github.com/openMF/web-app/issues/26
[8] https://github.com/openMF/web-app/issues/301
Related Pull Requests:
[1] https://github.com/openMF/web-app/pull/19
[2] https://github.com/openMF/web-app/pull/20
[3] https://github.com/openMF/web-app/pull/22
[4] https://github.com/openMF/web-app/pull/23
[5] https://github.com/openMF/web-app/pull/24
[6] https://github.com/openMF/web-app/pull/27
[7] https://github.com/openMF/web-app/pull/28
[8] https://github.com/openMF/web-app/pull/150
[9] https://github.com/openMF/web-app/pull/237
[10] https://github.com/openMF/web-app/pull/302

Travis CI Setup

I setup travis continuous integration for auto deployement of merged pull requests to gh-pages and to prevent hashing of files for theme configuration within the app:
.travis.yml

Related Issues:
[1] https://github.com/openMF/web-app/issues/4
[2] https://github.com/openMF/web-app/issues/70
Related Pull Requests:
[1] https://github.com/openMF/web-app/pull/37
[2] https://github.com/openMF/web-app/pull/45
[3] https://github.com/openMF/web-app/pull/50
[4] https://github.com/openMF/web-app/pull/71
Other Related Commits:
[5] https://github.com/openMF/web-app/commit/6947f950f7e15272ad000cd67eee0bf4eccc8b81
[6] https://github.com/openMF/web-app/commit/b1c2d6d98e3d95833267084c0fde159c1b696179

Further Enhancements possible for future:

  • HTML and SCSS linting to be integrated with travis.
  • Testing to be integrated with travis.

Application Shell

app shell

Features Completed:

  • Sidenav Design and Functionality - It consists of organisation logo, organisation name, placeholder for user profile placeholder icon, username, easy access help icons (settings and sign out), frequently accessed icons and easy access main icons for accounting. It has three states: opened, closed and collapsed.
  • Toolbar Design and Functionality - It consists of navigation menu to move around the appliation, search bar, language selector, theme picker, notifications placeholder and a helpful user menu with settings and sign out option.
breadcrumbs
  • Breadcrumbs Design and Generation - They are automatically generated with minor route configuration as described here.
  • Content Component - To display the content of the visited route.
  • Footer Design - Displays the current version of the application.

Related Issues:
[1] https://github.com/openMF/web-app/issues/52
[2] https://github.com/openMF/web-app/issues/286
[3] https://github.com/openMF/web-app/issues/62
[4] https://github.com/openMF/web-app/issues/106
Related Pull Requests:
[1] https://github.com/openMF/web-app/pull/53
[2] https://github.com/openMF/web-app/pull/287
[3] https://github.com/openMF/web-app/pull/63
[4] https://github.com/openMF/web-app/pull/129

Work Left:

  • Configuration of organisation logo, organisation name and language when app configuration functionality is setup.

Further Enhancements possible for future:

  • Show user profile photo in place of placeholder. (subject to discussion and API availability)
  • Generation of frequently accessed routes/icons dynamically.
  • Addition of more easy access main icons with further development.
  • Search bar functionality.
  • Notification functionality.

Core Module and HTTP Interceptors

Features Completed:

  • Consists of application shell and functionality to reuse and route with shell.
  • Progress Bar - To show loading indication when a HTTP request is sent to the server.
  • Alerts - To show alert messages to the user. (using angular material snackbar)
  • Logger - Logs messages to console.
  • HTTP Interceptors -
    1. Sets the authorization request headers.
    2. Sets the API prefix using environment configuration. (disable prefix functionality also available)
    3. An error alert is sent incase of an error.
    4. Sets the state of progress bar to give loading indication.

Related Issues:
[1] https://github.com/openMF/web-app/issues/47
[2] https://github.com/openMF/web-app/issues/65
[3] https://github.com/openMF/web-app/issues/141
[4] https://github.com/openMF/web-app/issues/64
[5] https://github.com/openMF/web-app/issues/123
Related Pull Requests:
[1] https://github.com/openMF/web-app/pull/48
[2] https://github.com/openMF/web-app/pull/66
[3] https://github.com/openMF/web-app/pull/142
[4] https://github.com/openMF/web-app/pull/124
Other Related Commits:
[5] https://github.com/openMF/web-app/commit/d9c35b875980c72437cb3fa81c3c90e9bfb7aff7

Shared Module and Components

Features Completed:

Mentioned above with choice of framework:

  • Icons Module - Single module for adding font awesome angular icons to library for convenient access in all components of application.
  • Material Module - Single module for adding Angular CDK, Angular Material and Flex Layout modules for use in all feature modules.

Others:

  • Shared Module - All modules and components shared throughout the application including icons and material module are exported here.
  • Delete Dialog - A dialog box for delete confirmation with a delete context.
  • File Upload Component - Custom input based on angular material to upload files.
  • Language Selector - Select language to be used within the application.
  • Theme Picker - Select theme to be used within the application.
  • Footer - Common footer for login and application shell.

Some features were added from time to time with feature modules in different commits.

Related Issues:
[1] https://github.com/openMF/web-app/issues/281
Related Pull Requests:
[1] https://github.com/openMF/web-app/pull/278

App Configuration

Features Completed:

theme picker
  • Theme - Six custom material based themes for the application were integrated. Two are based on the logo of Mifos and other four are default themes provided by angular material.
  • User Interface for global app configuration.

Related Issues:
[1] https://github.com/openMF/web-app/issues/68
[2] https://github.com/openMF/web-app/issues/73
[3] https://github.com/openMF/web-app/issues/125
[4] https://github.com/openMF/web-app/issues/127
[5] https://github.com/openMF/web-app/issues/35
[6] https://github.com/openMF/web-app/issues/292
Related Pull Requests:
[1] https://github.com/openMF/web-app/pull/69
[2] https://github.com/openMF/web-app/pull/74
[3] https://github.com/openMF/web-app/pull/126
[4] https://github.com/openMF/web-app/pull/128
[5] https://github.com/openMF/web-app/pull/90
[6] https://github.com/openMF/web-app/pull/293

Work Left:

  • Configuration of language and date format. (Discussed with Gaurav and Ed about using ngx-translate or Angular's Official Internationalization and put on hold for now as our usecase is not supported by the official package but might be supported in future)
    Please refer here.
  • Other configuration functionalities including organisation name, description, summary, images, font and contact information when the required APIs are available.

Further Enhancements possible for future:

  • User specific browser settings for language and date format.
  • Component based theme configuration.

Self Service User Administrative Portal

Features Completed:

  • User Interface for Self Service User Management and Creation
User Management (Feature for bulk activation/deactivation, creation, filtering, sorting, viewing)
self service user management
Create User (Existing) Create User (New)
create self service user existing create self service user new
View User (Feature to Activate/Deactivate, Change Password, Edit) Edit User
view self service user edit self service user

Related Issues:
[1] https://github.com/openMF/web-app/issues/33
[2] https://github.com/openMF/web-app/issues/34
Related Pull Requests:
[1] https://github.com/openMF/web-app/pull/49
[2] https://github.com/openMF/web-app/pull/89

  • User Interface for Self Service App Configuration
App Configuration (Main) App Configuration (Images)
self service app configuration 1 self service app configuration 2
App Configuration (Theme and Font) App Configuration (Contact Information)
self service app configuration 3 self service app configuration 4

[1] Mailing List Discussion Link
Related Issues:
[1] https://github.com/openMF/web-app/issues/36
Related Pull Requests:
[1] https://github.com/openMF/web-app/pull/90

Other Related Issues (Refractor):
[1] https://github.com/openMF/web-app/issues/290
Related Pull Requests (Refractor):
[1] https://github.com/openMF/web-app/pull/291

Work Left:

  • Self Service User Management and Creation Functionality when the required APIs are available.
  • Self Service App Configuration Functionality when the required APIs are available.
  • Task Mangement user interface and functionality. (subject to discussion and API availability)
  • Chat Support using Rocket.Chat - Mailing List Discussion Link

API requirements are summarised at the JIRA ticket here.

Login

Features Completed:

  • User Interface for Login Page, Login Form, Reset Password Form and Two Factor Authentication Form.
  • Authentication APIs and environment configuration for basic auth, oauth2, two factor authentication and reset password.
  • Remember me feature to persist user credentials through sessions.
Login Reset Password
login reset password
Basic/OAuth2 Authentication (GIF) Two Factor Authentication (GIF)
basic auth two factor auth

Related Issues:
[1] https://github.com/openMF/web-app/issues/95
[2] https://github.com/openMF/web-app/issues/97
[3] https://github.com/openMF/web-app/issues/117
[4] https://github.com/openMF/web-app/issues/118
[5] https://github.com/openMF/web-app/issues/119
[6] https://github.com/openMF/web-app/issues/120
[7] https://github.com/openMF/web-app/issues/284
Related Pull Requests:
[1] https://github.com/openMF/web-app/pull/96
[2] https://github.com/openMF/web-app/pull/98
[3] https://github.com/openMF/web-app/pull/122
[4] https://github.com/openMF/web-app/pull/283

Known Issues:
OAuth2 with Two Factor Authentication cannot be implemented.
[1] Issue
[2] Mailing List Discussion Link

Further Enhancements possible for future:

Accounting

accounting

Related Issues:
[1] https://github.com/openMF/web-app/issues/130
Related Pull Requests:
[1] https://github.com/openMF/web-app/pull/140

Features Completed:

  • Frequent Postings - User Interface and API Integration
Frequent Postings
frequent postings

Related Issues:
[1] https://github.com/openMF/web-app/issues/136
Related Pull Requests:
[1] https://github.com/openMF/web-app/pull/140

  • Create Journal Entries - User Interface and API Integration
Create Journal Entries
create journal entries

Related Issues:
[1] https://github.com/openMF/web-app/issues/200
Related Pull Requests:
[1] https://github.com/openMF/web-app/pull/144

  • Search Journal Entries - User Interface and API Integration
Search Journal Entries
search journal entries

Related Issues:
[1] https://github.com/openMF/web-app/issues/201
[2] https://github.com/openMF/web-app/issues/234
Related Pull Requests:
[1] https://github.com/openMF/web-app/pull/235

  • View Transaction and Revert Transaction - User Interface and API Integration
View Transaction Revert Transaction View Journal Entry
view transaction revert transaction view journal entry

Related Issues:
[1] https://github.com/openMF/web-app/issues/139
Related Pull Requests:
[1] https://github.com/openMF/web-app/pull/140

  • Financial Activity Mappings - User Interface and API Integration
Financial Activity Mappings (Feature for creation, filtering, sorting, viewing)
financial activity mappings
Create View (Feature to edit, delete) Edit Delete
define new mapping view mapping edit mapping delete mapping

Related Issues:
[1] https://github.com/openMF/web-app/issues/202
Related Pull Requests:
[1] https://github.com/openMF/web-app/pull/241

  • Migrate Opening Balances - User Interface and API Integration
Migrate Opening Balances
migrate opening balances

Related Issues:
[1] https://github.com/openMF/web-app/issues/276
Related Pull Requests:
[1] https://github.com/openMF/web-app/pull/277

  • Chart of Accounts - User Interface and API Integration
Chart of Accounts (List View) Chart of Accounts (Tree View)
chart of accounts list view chart of accounts tree view

Related Issues:
[1] https://github.com/openMF/web-app/issues/203
[2] https://github.com/openMF/web-app/issues/204
Related Pull Requests:
[1] https://github.com/openMF/web-app/pull/266

  • GL Accounts - User Interface and API Integration
Create View (Feature to create sub-ledger account, edit, enable/disable, delete) Edit Delete
create gl account view gl account edit gl account delete gl account

Related Issues:
[1] https://github.com/openMF/web-app/issues/205
Related Pull Requests:
[1] https://github.com/openMF/web-app/pull/270

  • Closing Entries - User Interface and API Integration
Closing Entries (Feature for creation, filtering, sorting, viewing)
closing entries
Create View (Feature to edit, delete) Edit Delete
create closing entry view closing entry edit closing entry delete closing entry

Related Issues:
[1] https://github.com/openMF/web-app/issues/208
Related Pull Requests:
[1] https://github.com/openMF/web-app/pull/271

  • Accounting Rules - User Interface and API Integration
Accounting Rules (Feature for creation, filtering, sorting, viewing)
accounting rules
Create View (Feature to edit, delete) Edit Delete
create rule view rule edit rule delete rule

Related Issues:
[1] https://github.com/openMF/web-app/issues/206
Related Pull Requests:
[1] https://github.com/openMF/web-app/pull/272

  • Periodic Accrual - User Interface and API Integration
Periodic Accrual
periodic accrual

Related Issues:
[1] https://github.com/openMF/web-app/issues/273
Related Pull Requests:
[1] https://github.com/openMF/web-app/pull/274

  • Provisioning Entries - User Interface and API Integration
Provisioning Entries (Feature for creation, filtering, sorting, viewing, recreating, viewing journal entries)
provisioning entries
Create View (Feature to filter, sort, create journal entries) View Provisioning Journal Entries (Feature to filter, sort)
create provisioning entry view provisioning entry view provisioning journal entries

Related Issues:
[1] https://github.com/openMF/web-app/issues/207
Related Pull Requests:
[1] https://github.com/openMF/web-app/pull/275

Other Related Issues (Refractor):
[1] https://github.com/openMF/web-app/issues/298
Related Pull Requests (Refractor):
[1] https://github.com/openMF/web-app/pull/300

Work Left:

  • Update Language and Date Format (using Moment.js for material-date-picker) once settings for language and date format are setup.

Known Issues:
Journal entries are not filterable by type of entry: system.
[1] Issue
[2] Mailing List Discussion Link
[3] JIRA Ticket

Further Enhancements possible for future:

  • Implementation of infinite scrolling to reduce form loading time and better responsiveness in migrate opening balances component.

Home

  • Home basic design.

home

Related Issues:
[1] https://github.com/openMF/web-app/issues/296
Related Pull Requests:
[1] https://github.com/openMF/web-app/pull/297

Further Enhancements possible for future:

  • Better design with futher development.

Other Work

  • Added documentation comments throughout the project.
  • Created the project's wiki.

Other contributions:
[1] Integration of animation loader - Designed by Anwesh: Issue and PR
Community App:
[2] https://github.com/openMF/community-app/pull/2956
[3] https://github.com/openMF/community-app/pull/2919

Further Enhancements possible for future:

  • Development of the rest of the application.
  • Active router link highlighting.
  • Implementation of Lazy Loading.
  • Implementation of User Permissions.
  • Write unit and integration tests.

Weekly Updates

https://mifosforge.jira.com/wiki/spaces/RES/pages/225247233/2018+Google+Summer+of+Code

Blog Posts

[1] https://medium.com/@abhaychawla/my-journey-to-google-summer-of-code18-4d958f61c6e9

Overall Experience

It was initially challenging for me to cope up as the scope of my project got changed during the start of the coding period, at a time when my exams were going on as well. Although, Ed and my mentors made the transition easier with their support. It has been a great experience working with the Mifos community and I am looking forward to continue the same in the future.

Thank you Mifos Initiative and Google Open Source Team for this great opportunity! 😃 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment