The Mifos X Web App represents an enhanced version of the Mifos X Community App, offering a robust financial solution tailored for the Mifos user community. It encompasses all essential features for various financial inclusion methods and products, complemented by a self-service administrative portal. This portal aims to provide superior support to users of online and mobile banking applications, enabling effective management and assistance. The Web App, developed since 2018 using Angular, promises improved user experience and better maintainability for financial institutions.
Project Mentor:
- Fix remaining issues.
- Impoving translations.
- Enhance look and feel of app.
- Redesigning customer and account dashboard pages.
We can split the translation into three categories:
For this translation, I created a pipe named translateKey
. The TranslatePipe
is a custom Angular pipe that translates keys received from the back-end using @ngx-translate/core
. It constructs a translation key from a given value, group, and optional prefix, then instantly retrieves the corresponding translation. This pipe streamlines translating dynamic content in multi-language applications by organizing translations into logical groups.
To complete the translation of static data in HTML files, hardcoded text is replaced with translation keys that reference entries in a translation file. This process ensures that all user-facing text is dynamically translated based on the selected language, enabling seamless localization. By centralizing translations, it simplifies updates and supports multi-language capabilities across the application.
To enable localization within TypeScript files, I replaced hardcoded strings with translation keys using TranslateService
from @ngx-translate/core
. For instance, instead of directly using 'Edit Note'
, I used this.translateService.instant('labels.heading.Edit Note')
to dynamically fetch the appropriate translation. This approach ensures that all user interface text in the TypeScript code is translated based on the user's language preference, supporting a multilingual application.
- [PR-2037] - translate collaterals folder and add missing translations.
- [PR-2105] - add missed translation for products module.
- [PR-2108] - create new translate pipe and remove TranslateCatalogPipe
- [PR-2109] - add translation to manage-data-tables inside system module
- [PR-2124] - translation of manage hooks.
- [PR-2134] - add missed translations to html files.
- [PR-2156] - finish translation of matTooltip in our project.
355435773-14a60946-06ad-41b1-a9a5-8b0d2a4f2a1e.mp4
358878368-8bc30721-32f3-453b-a4ec-001552348e9e.mp4
- [PR-2164] - add new style to our progress in toolbar.
- [PR-2159] - add some style to accounting to enhance our user experience.
- [PR-2150] - add some style to dashboard.
My experience with Google Summer of Code through The Mifos Initiative has been both rewarding and challenging. I've deeply enjoyed expanding my skills and collaborating with dedicated community members to achieve our project goals. Special thanks to RADHA THAKARE, Ed Cable, Alberto and Pushpendra for their constant support and invaluable guidance throughout this journey. Their assistance was crucial in navigating both the technical and collaborative aspects of the project.
Thank You
Regards
Omar Nabil