SlideShare ist ein Scribd-Unternehmen logo
1 von 34
Downloaden Sie, um offline zu lesen
Outsystems user group 2021 03 04 - cm app
2 |
Speakers & team
Add the presentation’s name
Niels Favreau
Speaker | Providit
@ Niels.Favreau@providit.eu
Joris Deckers
Speaker | Providit
@ Joris.Deckers@providit.eu
Wannes Verdonck
Speaker | Providit
@ Wannes.Verdonck@providit.eu
SCRUM master | Tech lead Developer | Backup SCRUM master
Developer
Kim Daems
@ Kim.Daems@cm.be
Bram Verlinden
@ Bram.Verlinden@Providit.eu
Lode Desplancke
@ Lode.Desplancke@cm.be
Developer| LCM Developer | LCM
Developer | Providit
Tineke Van Engeland
Tineke.VanEngeland@cm.be
Product Owner | LCM
@
Pieter Matthieu
@ Pieter.Matthieu@icapps.com
UX & UI Designer | ICAPPS
5 |
Agenda
The My CM APP
● LCM
● Introduction to the CM APP
● Project approach
● Demo
● Current architecture
● Architecture next steps
● Challenges
6 |
LCM
The My CM APP
● Biggest health insurance in Belgium
● Registration mandatory for everybody that lives or works in Belgium
● Insurance against illness, accidents, hospitalization,…
● 4,5 Million members
7 |
The App
The My CM APP
● OutSystems mobile application
● Consult their CM/MC profile
● Personal/care data
● Dependants
● Consult the Reimbursements
● Request CM/MC advantages
● Contact CM/MC
● Request Yellow stickers
● Onboarding flow
● For new users and existing users
● Verification with ItsMe/CSAM (Identity provider for Belgian Identity cards)
● Fingerprint, face recognition and application pincode
8 |
Project approach
The My CM APP
● Agile mindset
● SCRUM
● Jira
● Sprint every 2 weeks
● Refinement
● Review
● Retrospective
● Planning
● Challenge: Everything started together
9 |
Project results
The My CM APP
● Delivered in time and scope
● First release was internal = CM employees
● Now available in the app store and google play store
● Marketing campaign ongoing to the public
● Development not stopped
● New roadmap
Demo
11 |
Current architecture full picture
The My CM APP
12 |
Current architecture
The My CM APP
● Front-end module CM APP
● Multiple flows
● Based on the core modules
● Components
● Library modules
13 |
Current architecture
The My CM APP
● Core modules
● Business concept
● Local storage
● Sync
● Core widgets
● Will change in the future
14 |
Current architecture
The My CM APP
● BackOffices
● Creation of data
● By business
● Backend service modules
● Consumes internal services
● Exposes API wrappers
15 |
Current architecture
The My CM APP
● Oracle service bus
● Fetching of data
● Throttling
● Secures internal systems
● External system
● Fetching of data
● Authentication
● Verification mails, …
16 |
Current architecture full picture
The My CM APP
17 |
Architecture next steps
The My CM APP
18 |
UX/UI
The My CM APP
Flowchart
Wireframe/prototypes
Figma
Prototype app
Design
19 |
Flowcharts
The My CM APP
● Overview reimbursements
● Accessible from dashboard
● Filter (sidebar)
● Detail screen (sidebar)
● Contributions paid
● Overview of your allowances
20 |
Wireframes  Prototype  Design
The My CM APP
21 |
Challenges
The My CM APP
22 |
UX/UI
The My CM APP
● Android back
● Notch - default OS 11 iPhone X detection, custom classes
● Tabs inside tabs
● Tablet design
23 |
Android back button
● Android back button component
● Event
● Input parameters when needed
● Previous screen  destination = “default screen”  refresh of the app
● Dashboard  minimize app  this.cordova(getActivity().moveTaskToBack(true)
● Using Sidebars
24 |
Notch
● iPhone
● .iphonex.portrait.header  padding-top: 50px
● Android devices and older iPhones
● .header  fixed height and padding
25 |
Tabs inside tabs
26 |
Tablet design
27 |
Performance
The My CM APP
● Slow API’s
● Split up the offline data sync
● Parallel processing
● No API data on first page
● Spinners
● Rework network flow
28 |
External authentication
The My CM APP
● Existing accounts
● eID verification
● Encrypted authorization
● OutSystems accounts
● Linked
● Automatically logged in
29 |
Existing accounts
The My CM APP
● Website compatible
● Api’s exposed
● Wrapped in service actions
30 |
eID Verification
The My CM APP
● Government site
● External flow
APP wrapper Site
government
site
1 2
3
4
1: inappbrowser
2-3: redirects
4: deeplink
31 |
eID Verification
The My CM APP
● Client side credentials storage required
● No more device restriction
● Fingerprint/pincode login
encrypted authorization on device
32 |
Encrypted authorization
The My CM APP
● Supported component
● OutSystems success guide
source: https://success.outsystems.com/Support/Enterprise_Customers/Maintenance_and_Operations/Data_Encryption_at_Rest
33 |
Firebase statistics
The My CM APP
Thank you.

Weitere ähnliche Inhalte

Was ist angesagt?

Leveraging Dynamic Interactions on Salesforce Lightning Pages
Leveraging Dynamic Interactions on Salesforce Lightning PagesLeveraging Dynamic Interactions on Salesforce Lightning Pages
Leveraging Dynamic Interactions on Salesforce Lightning PagesCodeScience
 
Headless E-commerce That People Love
Headless E-commerce That People LoveHeadless E-commerce That People Love
Headless E-commerce That People LoveDigitalOcean
 
RADS - Rapid Application Design Sprint
RADS - Rapid Application Design SprintRADS - Rapid Application Design Sprint
RADS - Rapid Application Design SprintOutSystems
 
[Webinar] Announcing the Camunda Cloud Public Beta - February 2020
[Webinar] Announcing the Camunda Cloud Public Beta - February 2020[Webinar] Announcing the Camunda Cloud Public Beta - February 2020
[Webinar] Announcing the Camunda Cloud Public Beta - February 2020camunda services GmbH
 
Make windows forms speak the windows 8 modern ui design
Make windows forms speak the windows 8 modern ui designMake windows forms speak the windows 8 modern ui design
Make windows forms speak the windows 8 modern ui designLohith Goudagere Nagaraj
 
Testing in projects
Testing in projectsTesting in projects
Testing in projectsDataArt
 
Clean low-code - OutSystens
Clean low-code - OutSystensClean low-code - OutSystens
Clean low-code - OutSystensHasan Derawan
 
Building with Visual Studio Online
Building with Visual Studio OnlineBuilding with Visual Studio Online
Building with Visual Studio OnlineJeff Bramwell
 
Twin Cities Eloqua User Group - May 21, 2013
Twin Cities Eloqua User Group - May 21, 2013Twin Cities Eloqua User Group - May 21, 2013
Twin Cities Eloqua User Group - May 21, 2013relationship | one
 
Automating Web UI Testing | Inflectra Webinars | (Part 1)
Automating Web UI Testing | Inflectra Webinars | (Part 1)Automating Web UI Testing | Inflectra Webinars | (Part 1)
Automating Web UI Testing | Inflectra Webinars | (Part 1)Inflectra
 
Modernizing Portfolios With Reactive Applications
Modernizing Portfolios With Reactive ApplicationsModernizing Portfolios With Reactive Applications
Modernizing Portfolios With Reactive ApplicationsOutSystems
 
0 to 60 With Outsystems
0 to 60 With Outsystems0 to 60 With Outsystems
0 to 60 With OutsystemsOutSystems
 
Accessibility in Low-Code: Applications with no Limits
Accessibility in Low-Code: Applications with no LimitsAccessibility in Low-Code: Applications with no Limits
Accessibility in Low-Code: Applications with no LimitsOutSystems
 
4D Simulator -COMOS Walkinside
4D Simulator  -COMOS Walkinside4D Simulator  -COMOS Walkinside
4D Simulator -COMOS WalkinsideLander Amorrortu
 
Alternatives to the Micro Focus QA Suite
Alternatives to the Micro Focus QA SuiteAlternatives to the Micro Focus QA Suite
Alternatives to the Micro Focus QA SuiteAdam Sandman
 
Proactive Citrix Logon Monitoring with Free Citrix Logon Simulator
Proactive Citrix Logon Monitoring with Free Citrix Logon SimulatorProactive Citrix Logon Monitoring with Free Citrix Logon Simulator
Proactive Citrix Logon Monitoring with Free Citrix Logon SimulatoreG Innovations
 
Flutter or PWA Which Is Best For Application Development
Flutter or PWA Which Is Best For Application DevelopmentFlutter or PWA Which Is Best For Application Development
Flutter or PWA Which Is Best For Application DevelopmentMobiloitte
 

Was ist angesagt? (20)

Leveraging Dynamic Interactions on Salesforce Lightning Pages
Leveraging Dynamic Interactions on Salesforce Lightning PagesLeveraging Dynamic Interactions on Salesforce Lightning Pages
Leveraging Dynamic Interactions on Salesforce Lightning Pages
 
Headless E-commerce That People Love
Headless E-commerce That People LoveHeadless E-commerce That People Love
Headless E-commerce That People Love
 
RADS - Rapid Application Design Sprint
RADS - Rapid Application Design SprintRADS - Rapid Application Design Sprint
RADS - Rapid Application Design Sprint
 
[Webinar] Announcing the Camunda Cloud Public Beta - February 2020
[Webinar] Announcing the Camunda Cloud Public Beta - February 2020[Webinar] Announcing the Camunda Cloud Public Beta - February 2020
[Webinar] Announcing the Camunda Cloud Public Beta - February 2020
 
Make windows forms speak the windows 8 modern ui design
Make windows forms speak the windows 8 modern ui designMake windows forms speak the windows 8 modern ui design
Make windows forms speak the windows 8 modern ui design
 
Testing in projects
Testing in projectsTesting in projects
Testing in projects
 
Clean low-code - OutSystens
Clean low-code - OutSystensClean low-code - OutSystens
Clean low-code - OutSystens
 
Building with Visual Studio Online
Building with Visual Studio OnlineBuilding with Visual Studio Online
Building with Visual Studio Online
 
Twin Cities Eloqua User Group - May 21, 2013
Twin Cities Eloqua User Group - May 21, 2013Twin Cities Eloqua User Group - May 21, 2013
Twin Cities Eloqua User Group - May 21, 2013
 
Automating Web UI Testing | Inflectra Webinars | (Part 1)
Automating Web UI Testing | Inflectra Webinars | (Part 1)Automating Web UI Testing | Inflectra Webinars | (Part 1)
Automating Web UI Testing | Inflectra Webinars | (Part 1)
 
What is PhoneGap?
What is PhoneGap?What is PhoneGap?
What is PhoneGap?
 
Modernizing Portfolios With Reactive Applications
Modernizing Portfolios With Reactive ApplicationsModernizing Portfolios With Reactive Applications
Modernizing Portfolios With Reactive Applications
 
EECS 497 Intro
EECS 497 IntroEECS 497 Intro
EECS 497 Intro
 
0 to 60 With Outsystems
0 to 60 With Outsystems0 to 60 With Outsystems
0 to 60 With Outsystems
 
Accessibility in Low-Code: Applications with no Limits
Accessibility in Low-Code: Applications with no LimitsAccessibility in Low-Code: Applications with no Limits
Accessibility in Low-Code: Applications with no Limits
 
4D Simulator -COMOS Walkinside
4D Simulator  -COMOS Walkinside4D Simulator  -COMOS Walkinside
4D Simulator -COMOS Walkinside
 
Alternatives to the Micro Focus QA Suite
Alternatives to the Micro Focus QA SuiteAlternatives to the Micro Focus QA Suite
Alternatives to the Micro Focus QA Suite
 
Proactive Citrix Logon Monitoring with Free Citrix Logon Simulator
Proactive Citrix Logon Monitoring with Free Citrix Logon SimulatorProactive Citrix Logon Monitoring with Free Citrix Logon Simulator
Proactive Citrix Logon Monitoring with Free Citrix Logon Simulator
 
Sushma_resume
Sushma_resumeSushma_resume
Sushma_resume
 
Flutter or PWA Which Is Best For Application Development
Flutter or PWA Which Is Best For Application DevelopmentFlutter or PWA Which Is Best For Application Development
Flutter or PWA Which Is Best For Application Development
 

Ähnlich wie Outsystems user group 2021 03 04 - cm app

Pivoting to Cloud: How an MSP Brokers Cloud Services
Pivoting to Cloud: How an MSP Brokers Cloud Services Pivoting to Cloud: How an MSP Brokers Cloud Services
Pivoting to Cloud: How an MSP Brokers Cloud Services RightScale
 
Micro Focus iPrint
Micro Focus iPrintMicro Focus iPrint
Micro Focus iPrintGWAVA
 
Product Overview: Mobile and 4X Faster Bonita BPM 6
Product Overview: Mobile and 4X Faster Bonita BPM 6Product Overview: Mobile and 4X Faster Bonita BPM 6
Product Overview: Mobile and 4X Faster Bonita BPM 6Bonitasoft
 
An Introduction to the Model-View-Controller Pattern
An Introduction to the Model-View-Controller PatternAn Introduction to the Model-View-Controller Pattern
An Introduction to the Model-View-Controller PatternTeamstudio
 
Infrastructure As Code
Infrastructure As CodeInfrastructure As Code
Infrastructure As CodeYosef Tavin
 
Windows Autopilot - Workplace Nijna Summmit 2020
Windows Autopilot - Workplace Nijna Summmit 2020Windows Autopilot - Workplace Nijna Summmit 2020
Windows Autopilot - Workplace Nijna Summmit 2020Ronni Pedersen
 
Engage 2020-nerd-for-move-on-from-x pages
Engage 2020-nerd-for-move-on-from-x pagesEngage 2020-nerd-for-move-on-from-x pages
Engage 2020-nerd-for-move-on-from-x pagesHeiko Voigt
 
IBM Lotus Notes/Domino App. Dev. Competitive Advantage: The Social Business E...
IBM Lotus Notes/Domino App. Dev. Competitive Advantage: The Social Business E...IBM Lotus Notes/Domino App. Dev. Competitive Advantage: The Social Business E...
IBM Lotus Notes/Domino App. Dev. Competitive Advantage: The Social Business E...John Head
 
ITMAGINATION - competences, facts, technologies, clients
ITMAGINATION - competences, facts, technologies, clientsITMAGINATION - competences, facts, technologies, clients
ITMAGINATION - competences, facts, technologies, clientsITMAGINATION
 
1C Partner Presentation
1C Partner Presentation1C Partner Presentation
1C Partner Presentationgjackman
 
Choose the eZ Universe for Your Web Galaxy
Choose the eZ Universe for Your Web GalaxyChoose the eZ Universe for Your Web Galaxy
Choose the eZ Universe for Your Web GalaxyeZ Systems
 
Keynote: Software Kept Eating the World (Pivotal Cloud Platform Roadshow)
Keynote: Software Kept Eating the World (Pivotal Cloud Platform Roadshow)Keynote: Software Kept Eating the World (Pivotal Cloud Platform Roadshow)
Keynote: Software Kept Eating the World (Pivotal Cloud Platform Roadshow)VMware Tanzu
 
Cloud-Native Insights: How Platform & App Visibility Drive Business Outcomes
Cloud-Native Insights: How Platform & App Visibility Drive Business OutcomesCloud-Native Insights: How Platform & App Visibility Drive Business Outcomes
Cloud-Native Insights: How Platform & App Visibility Drive Business OutcomesVMware Tanzu
 
1C Partner Presentation
1C Partner Presentation1C Partner Presentation
1C Partner Presentation1CCompany
 
Programming for non tech entrepreneurs
Programming for non tech entrepreneursProgramming for non tech entrepreneurs
Programming for non tech entrepreneursRodrigo Gil
 
Bitrix24 Enetrprise Reosurce Planning System
Bitrix24 Enetrprise Reosurce Planning SystemBitrix24 Enetrprise Reosurce Planning System
Bitrix24 Enetrprise Reosurce Planning SystemFahad Saleem
 
webMethods World: How Can You Innovate Even Faster With the Latest webMethods...
webMethods World: How Can You Innovate Even Faster With the Latest webMethods...webMethods World: How Can You Innovate Even Faster With the Latest webMethods...
webMethods World: How Can You Innovate Even Faster With the Latest webMethods...Software AG
 
IBM Bluemix Presentation.pptx
IBM Bluemix Presentation.pptxIBM Bluemix Presentation.pptx
IBM Bluemix Presentation.pptxvishal choudhary
 
Accelerating Development of a Safety-Critical Cobot Welding System with Qt/QM...
Accelerating Development of a Safety-Critical Cobot Welding System with Qt/QM...Accelerating Development of a Safety-Critical Cobot Welding System with Qt/QM...
Accelerating Development of a Safety-Critical Cobot Welding System with Qt/QM...ICS
 
Innotech Vietnam Profile
Innotech Vietnam ProfileInnotech Vietnam Profile
Innotech Vietnam ProfileLe Phuong
 

Ähnlich wie Outsystems user group 2021 03 04 - cm app (20)

Pivoting to Cloud: How an MSP Brokers Cloud Services
Pivoting to Cloud: How an MSP Brokers Cloud Services Pivoting to Cloud: How an MSP Brokers Cloud Services
Pivoting to Cloud: How an MSP Brokers Cloud Services
 
Micro Focus iPrint
Micro Focus iPrintMicro Focus iPrint
Micro Focus iPrint
 
Product Overview: Mobile and 4X Faster Bonita BPM 6
Product Overview: Mobile and 4X Faster Bonita BPM 6Product Overview: Mobile and 4X Faster Bonita BPM 6
Product Overview: Mobile and 4X Faster Bonita BPM 6
 
An Introduction to the Model-View-Controller Pattern
An Introduction to the Model-View-Controller PatternAn Introduction to the Model-View-Controller Pattern
An Introduction to the Model-View-Controller Pattern
 
Infrastructure As Code
Infrastructure As CodeInfrastructure As Code
Infrastructure As Code
 
Windows Autopilot - Workplace Nijna Summmit 2020
Windows Autopilot - Workplace Nijna Summmit 2020Windows Autopilot - Workplace Nijna Summmit 2020
Windows Autopilot - Workplace Nijna Summmit 2020
 
Engage 2020-nerd-for-move-on-from-x pages
Engage 2020-nerd-for-move-on-from-x pagesEngage 2020-nerd-for-move-on-from-x pages
Engage 2020-nerd-for-move-on-from-x pages
 
IBM Lotus Notes/Domino App. Dev. Competitive Advantage: The Social Business E...
IBM Lotus Notes/Domino App. Dev. Competitive Advantage: The Social Business E...IBM Lotus Notes/Domino App. Dev. Competitive Advantage: The Social Business E...
IBM Lotus Notes/Domino App. Dev. Competitive Advantage: The Social Business E...
 
ITMAGINATION - competences, facts, technologies, clients
ITMAGINATION - competences, facts, technologies, clientsITMAGINATION - competences, facts, technologies, clients
ITMAGINATION - competences, facts, technologies, clients
 
1C Partner Presentation
1C Partner Presentation1C Partner Presentation
1C Partner Presentation
 
Choose the eZ Universe for Your Web Galaxy
Choose the eZ Universe for Your Web GalaxyChoose the eZ Universe for Your Web Galaxy
Choose the eZ Universe for Your Web Galaxy
 
Keynote: Software Kept Eating the World (Pivotal Cloud Platform Roadshow)
Keynote: Software Kept Eating the World (Pivotal Cloud Platform Roadshow)Keynote: Software Kept Eating the World (Pivotal Cloud Platform Roadshow)
Keynote: Software Kept Eating the World (Pivotal Cloud Platform Roadshow)
 
Cloud-Native Insights: How Platform & App Visibility Drive Business Outcomes
Cloud-Native Insights: How Platform & App Visibility Drive Business OutcomesCloud-Native Insights: How Platform & App Visibility Drive Business Outcomes
Cloud-Native Insights: How Platform & App Visibility Drive Business Outcomes
 
1C Partner Presentation
1C Partner Presentation1C Partner Presentation
1C Partner Presentation
 
Programming for non tech entrepreneurs
Programming for non tech entrepreneursProgramming for non tech entrepreneurs
Programming for non tech entrepreneurs
 
Bitrix24 Enetrprise Reosurce Planning System
Bitrix24 Enetrprise Reosurce Planning SystemBitrix24 Enetrprise Reosurce Planning System
Bitrix24 Enetrprise Reosurce Planning System
 
webMethods World: How Can You Innovate Even Faster With the Latest webMethods...
webMethods World: How Can You Innovate Even Faster With the Latest webMethods...webMethods World: How Can You Innovate Even Faster With the Latest webMethods...
webMethods World: How Can You Innovate Even Faster With the Latest webMethods...
 
IBM Bluemix Presentation.pptx
IBM Bluemix Presentation.pptxIBM Bluemix Presentation.pptx
IBM Bluemix Presentation.pptx
 
Accelerating Development of a Safety-Critical Cobot Welding System with Qt/QM...
Accelerating Development of a Safety-Critical Cobot Welding System with Qt/QM...Accelerating Development of a Safety-Critical Cobot Welding System with Qt/QM...
Accelerating Development of a Safety-Critical Cobot Welding System with Qt/QM...
 
Innotech Vietnam Profile
Innotech Vietnam ProfileInnotech Vietnam Profile
Innotech Vietnam Profile
 

Mehr von Providit

Belgium Outsystems user group speech recognition ocr
Belgium Outsystems user group speech recognition   ocrBelgium Outsystems user group speech recognition   ocr
Belgium Outsystems user group speech recognition ocrProvidit
 
OutSystems User Group 24 september 2019 - Intro
OutSystems User Group 24 september 2019 - IntroOutSystems User Group 24 september 2019 - Intro
OutSystems User Group 24 september 2019 - IntroProvidit
 
OutSystems User Group 24 september 2019 - Data Grid
OutSystems User Group 24 september 2019 - Data GridOutSystems User Group 24 september 2019 - Data Grid
OutSystems User Group 24 september 2019 - Data GridProvidit
 
OutSystems community meetup 2019 03_how to handle exceptions like a pro
OutSystems community meetup 2019 03_how to handle exceptions like a proOutSystems community meetup 2019 03_how to handle exceptions like a pro
OutSystems community meetup 2019 03_how to handle exceptions like a proProvidit
 
Outsystems community meetup 2018 11 service modules
Outsystems community meetup 2018 11 service modulesOutsystems community meetup 2018 11 service modules
Outsystems community meetup 2018 11 service modulesProvidit
 
Outsystems community meetup 2018 11 screen templates
Outsystems community meetup 2018 11 screen templatesOutsystems community meetup 2018 11 screen templates
Outsystems community meetup 2018 11 screen templatesProvidit
 
Outsystems community meetup 2018 11 reusable ui components
Outsystems community meetup 2018 11 reusable ui componentsOutsystems community meetup 2018 11 reusable ui components
Outsystems community meetup 2018 11 reusable ui componentsProvidit
 

Mehr von Providit (7)

Belgium Outsystems user group speech recognition ocr
Belgium Outsystems user group speech recognition   ocrBelgium Outsystems user group speech recognition   ocr
Belgium Outsystems user group speech recognition ocr
 
OutSystems User Group 24 september 2019 - Intro
OutSystems User Group 24 september 2019 - IntroOutSystems User Group 24 september 2019 - Intro
OutSystems User Group 24 september 2019 - Intro
 
OutSystems User Group 24 september 2019 - Data Grid
OutSystems User Group 24 september 2019 - Data GridOutSystems User Group 24 september 2019 - Data Grid
OutSystems User Group 24 september 2019 - Data Grid
 
OutSystems community meetup 2019 03_how to handle exceptions like a pro
OutSystems community meetup 2019 03_how to handle exceptions like a proOutSystems community meetup 2019 03_how to handle exceptions like a pro
OutSystems community meetup 2019 03_how to handle exceptions like a pro
 
Outsystems community meetup 2018 11 service modules
Outsystems community meetup 2018 11 service modulesOutsystems community meetup 2018 11 service modules
Outsystems community meetup 2018 11 service modules
 
Outsystems community meetup 2018 11 screen templates
Outsystems community meetup 2018 11 screen templatesOutsystems community meetup 2018 11 screen templates
Outsystems community meetup 2018 11 screen templates
 
Outsystems community meetup 2018 11 reusable ui components
Outsystems community meetup 2018 11 reusable ui componentsOutsystems community meetup 2018 11 reusable ui components
Outsystems community meetup 2018 11 reusable ui components
 

Kürzlich hochgeladen

ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdfARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdfTobias Schneck
 
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine HarmonyLeveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmonyelliciumsolutionspun
 
20240330_고급진 코드를 위한 exception 다루기
20240330_고급진 코드를 위한 exception 다루기20240330_고급진 코드를 위한 exception 다루기
20240330_고급진 코드를 위한 exception 다루기Chiwon Song
 
online pdf editor software solutions.pdf
online pdf editor software solutions.pdfonline pdf editor software solutions.pdf
online pdf editor software solutions.pdfMeon Technology
 
AI Embracing Every Shade of Human Beauty
AI Embracing Every Shade of Human BeautyAI Embracing Every Shade of Human Beauty
AI Embracing Every Shade of Human BeautyRaymond Okyere-Forson
 
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...Jaydeep Chhasatia
 
Watermarking in Source Code: Applications and Security Challenges
Watermarking in Source Code: Applications and Security ChallengesWatermarking in Source Code: Applications and Security Challenges
Watermarking in Source Code: Applications and Security ChallengesShyamsundar Das
 
JS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AIJS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AIIvo Andreev
 
eAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspectionseAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspectionsNirav Modi
 
IA Generativa y Grafos de Neo4j: RAG time
IA Generativa y Grafos de Neo4j: RAG timeIA Generativa y Grafos de Neo4j: RAG time
IA Generativa y Grafos de Neo4j: RAG timeNeo4j
 
Kubernetes go-live checklist for your microservices.pptx
Kubernetes go-live checklist for your microservices.pptxKubernetes go-live checklist for your microservices.pptx
Kubernetes go-live checklist for your microservices.pptxPrakarsh -
 
Mastering Kubernetes - Basics and Advanced Concepts using Example Project
Mastering Kubernetes - Basics and Advanced Concepts using Example ProjectMastering Kubernetes - Basics and Advanced Concepts using Example Project
Mastering Kubernetes - Basics and Advanced Concepts using Example Projectwajrcs
 
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/MLBig Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/MLAlluxio, Inc.
 
Webinar - IA generativa e grafi Neo4j: RAG time!
Webinar - IA generativa e grafi Neo4j: RAG time!Webinar - IA generativa e grafi Neo4j: RAG time!
Webinar - IA generativa e grafi Neo4j: RAG time!Neo4j
 
OpenChain Webinar: Universal CVSS Calculator
OpenChain Webinar: Universal CVSS CalculatorOpenChain Webinar: Universal CVSS Calculator
OpenChain Webinar: Universal CVSS CalculatorShane Coughlan
 
Generative AI for Cybersecurity - EC-Council
Generative AI for Cybersecurity - EC-CouncilGenerative AI for Cybersecurity - EC-Council
Generative AI for Cybersecurity - EC-CouncilVICTOR MAESTRE RAMIREZ
 
How Does the Epitome of Spyware Differ from Other Malicious Software?
How Does the Epitome of Spyware Differ from Other Malicious Software?How Does the Epitome of Spyware Differ from Other Malicious Software?
How Does the Epitome of Spyware Differ from Other Malicious Software?AmeliaSmith90
 
Why Choose Brain Inventory For Ecommerce Development.pdf
Why Choose Brain Inventory For Ecommerce Development.pdfWhy Choose Brain Inventory For Ecommerce Development.pdf
Why Choose Brain Inventory For Ecommerce Development.pdfBrain Inventory
 
Top Software Development Trends in 2024
Top Software Development Trends in  2024Top Software Development Trends in  2024
Top Software Development Trends in 2024Mind IT Systems
 

Kürzlich hochgeladen (20)

ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdfARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
ARM Talk @ Rejekts - Will ARM be the new Mainstream in our Data Centers_.pdf
 
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine HarmonyLeveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
Leveraging DxSherpa's Generative AI Services to Unlock Human-Machine Harmony
 
20240330_고급진 코드를 위한 exception 다루기
20240330_고급진 코드를 위한 exception 다루기20240330_고급진 코드를 위한 exception 다루기
20240330_고급진 코드를 위한 exception 다루기
 
Sustainable Web Design - Claire Thornewill
Sustainable Web Design - Claire ThornewillSustainable Web Design - Claire Thornewill
Sustainable Web Design - Claire Thornewill
 
online pdf editor software solutions.pdf
online pdf editor software solutions.pdfonline pdf editor software solutions.pdf
online pdf editor software solutions.pdf
 
AI Embracing Every Shade of Human Beauty
AI Embracing Every Shade of Human BeautyAI Embracing Every Shade of Human Beauty
AI Embracing Every Shade of Human Beauty
 
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...
Optimizing Business Potential: A Guide to Outsourcing Engineering Services in...
 
Watermarking in Source Code: Applications and Security Challenges
Watermarking in Source Code: Applications and Security ChallengesWatermarking in Source Code: Applications and Security Challenges
Watermarking in Source Code: Applications and Security Challenges
 
JS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AIJS-Experts - Cybersecurity for Generative AI
JS-Experts - Cybersecurity for Generative AI
 
eAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspectionseAuditor Audits & Inspections - conduct field inspections
eAuditor Audits & Inspections - conduct field inspections
 
IA Generativa y Grafos de Neo4j: RAG time
IA Generativa y Grafos de Neo4j: RAG timeIA Generativa y Grafos de Neo4j: RAG time
IA Generativa y Grafos de Neo4j: RAG time
 
Kubernetes go-live checklist for your microservices.pptx
Kubernetes go-live checklist for your microservices.pptxKubernetes go-live checklist for your microservices.pptx
Kubernetes go-live checklist for your microservices.pptx
 
Mastering Kubernetes - Basics and Advanced Concepts using Example Project
Mastering Kubernetes - Basics and Advanced Concepts using Example ProjectMastering Kubernetes - Basics and Advanced Concepts using Example Project
Mastering Kubernetes - Basics and Advanced Concepts using Example Project
 
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/MLBig Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
Big Data Bellevue Meetup | Enhancing Python Data Loading in the Cloud for AI/ML
 
Webinar - IA generativa e grafi Neo4j: RAG time!
Webinar - IA generativa e grafi Neo4j: RAG time!Webinar - IA generativa e grafi Neo4j: RAG time!
Webinar - IA generativa e grafi Neo4j: RAG time!
 
OpenChain Webinar: Universal CVSS Calculator
OpenChain Webinar: Universal CVSS CalculatorOpenChain Webinar: Universal CVSS Calculator
OpenChain Webinar: Universal CVSS Calculator
 
Generative AI for Cybersecurity - EC-Council
Generative AI for Cybersecurity - EC-CouncilGenerative AI for Cybersecurity - EC-Council
Generative AI for Cybersecurity - EC-Council
 
How Does the Epitome of Spyware Differ from Other Malicious Software?
How Does the Epitome of Spyware Differ from Other Malicious Software?How Does the Epitome of Spyware Differ from Other Malicious Software?
How Does the Epitome of Spyware Differ from Other Malicious Software?
 
Why Choose Brain Inventory For Ecommerce Development.pdf
Why Choose Brain Inventory For Ecommerce Development.pdfWhy Choose Brain Inventory For Ecommerce Development.pdf
Why Choose Brain Inventory For Ecommerce Development.pdf
 
Top Software Development Trends in 2024
Top Software Development Trends in  2024Top Software Development Trends in  2024
Top Software Development Trends in 2024
 

Outsystems user group 2021 03 04 - cm app

  • 2. 2 | Speakers & team Add the presentation’s name
  • 3. Niels Favreau Speaker | Providit @ Niels.Favreau@providit.eu Joris Deckers Speaker | Providit @ Joris.Deckers@providit.eu Wannes Verdonck Speaker | Providit @ Wannes.Verdonck@providit.eu SCRUM master | Tech lead Developer | Backup SCRUM master Developer
  • 4. Kim Daems @ Kim.Daems@cm.be Bram Verlinden @ Bram.Verlinden@Providit.eu Lode Desplancke @ Lode.Desplancke@cm.be Developer| LCM Developer | LCM Developer | Providit Tineke Van Engeland Tineke.VanEngeland@cm.be Product Owner | LCM @ Pieter Matthieu @ Pieter.Matthieu@icapps.com UX & UI Designer | ICAPPS
  • 5. 5 | Agenda The My CM APP ● LCM ● Introduction to the CM APP ● Project approach ● Demo ● Current architecture ● Architecture next steps ● Challenges
  • 6. 6 | LCM The My CM APP ● Biggest health insurance in Belgium ● Registration mandatory for everybody that lives or works in Belgium ● Insurance against illness, accidents, hospitalization,… ● 4,5 Million members
  • 7. 7 | The App The My CM APP ● OutSystems mobile application ● Consult their CM/MC profile ● Personal/care data ● Dependants ● Consult the Reimbursements ● Request CM/MC advantages ● Contact CM/MC ● Request Yellow stickers ● Onboarding flow ● For new users and existing users ● Verification with ItsMe/CSAM (Identity provider for Belgian Identity cards) ● Fingerprint, face recognition and application pincode
  • 8. 8 | Project approach The My CM APP ● Agile mindset ● SCRUM ● Jira ● Sprint every 2 weeks ● Refinement ● Review ● Retrospective ● Planning ● Challenge: Everything started together
  • 9. 9 | Project results The My CM APP ● Delivered in time and scope ● First release was internal = CM employees ● Now available in the app store and google play store ● Marketing campaign ongoing to the public ● Development not stopped ● New roadmap
  • 10. Demo
  • 11. 11 | Current architecture full picture The My CM APP
  • 12. 12 | Current architecture The My CM APP ● Front-end module CM APP ● Multiple flows ● Based on the core modules ● Components ● Library modules
  • 13. 13 | Current architecture The My CM APP ● Core modules ● Business concept ● Local storage ● Sync ● Core widgets ● Will change in the future
  • 14. 14 | Current architecture The My CM APP ● BackOffices ● Creation of data ● By business ● Backend service modules ● Consumes internal services ● Exposes API wrappers
  • 15. 15 | Current architecture The My CM APP ● Oracle service bus ● Fetching of data ● Throttling ● Secures internal systems ● External system ● Fetching of data ● Authentication ● Verification mails, …
  • 16. 16 | Current architecture full picture The My CM APP
  • 17. 17 | Architecture next steps The My CM APP
  • 18. 18 | UX/UI The My CM APP Flowchart Wireframe/prototypes Figma Prototype app Design
  • 19. 19 | Flowcharts The My CM APP ● Overview reimbursements ● Accessible from dashboard ● Filter (sidebar) ● Detail screen (sidebar) ● Contributions paid ● Overview of your allowances
  • 20. 20 | Wireframes  Prototype  Design The My CM APP
  • 22. 22 | UX/UI The My CM APP ● Android back ● Notch - default OS 11 iPhone X detection, custom classes ● Tabs inside tabs ● Tablet design
  • 23. 23 | Android back button ● Android back button component ● Event ● Input parameters when needed ● Previous screen  destination = “default screen”  refresh of the app ● Dashboard  minimize app  this.cordova(getActivity().moveTaskToBack(true) ● Using Sidebars
  • 24. 24 | Notch ● iPhone ● .iphonex.portrait.header  padding-top: 50px ● Android devices and older iPhones ● .header  fixed height and padding
  • 27. 27 | Performance The My CM APP ● Slow API’s ● Split up the offline data sync ● Parallel processing ● No API data on first page ● Spinners ● Rework network flow
  • 28. 28 | External authentication The My CM APP ● Existing accounts ● eID verification ● Encrypted authorization ● OutSystems accounts ● Linked ● Automatically logged in
  • 29. 29 | Existing accounts The My CM APP ● Website compatible ● Api’s exposed ● Wrapped in service actions
  • 30. 30 | eID Verification The My CM APP ● Government site ● External flow APP wrapper Site government site 1 2 3 4 1: inappbrowser 2-3: redirects 4: deeplink
  • 31. 31 | eID Verification The My CM APP ● Client side credentials storage required ● No more device restriction ● Fingerprint/pincode login encrypted authorization on device
  • 32. 32 | Encrypted authorization The My CM APP ● Supported component ● OutSystems success guide source: https://success.outsystems.com/Support/Enterprise_Customers/Maintenance_and_Operations/Data_Encryption_at_Rest

Hinweis der Redaktion

  1. Consult their CM/MC profile Personal data Care data Dependants Consult the Reimbursements of themselves or their dependants Payments Prestations Contact CM/MC Using FAQ mechanisme If the FAQ doesn’t provide any answers, a form is available for the end users to fill in Request CM/MC advantages The type of advantages that are available to the end users are managed by the business in a backoffice.  The user is able to request them for themselves or their dependants They can provide files or pictures (editable in the app) along with their request All that in an intuitive and UX friendly way  For the first time, the user is guided through a tutorial flow Request Yellow stickers The user is able to request them for themselves or their dependants Those stickers are used by the CM/MC to process documents automatically using the barcode that is available on those yellow stickers. Onboarding flow For new users For existing users who still needs to be verified or upgraded (light users to secure users) Verification with ItsMe/CSAM (Identity provider for belgian Identity cards) All that in an intuitive and UX friendly way  The whole verification is being guided through a tutorial flow UX friendly and secure login mechanisme Fingerprint and face recognition configurable during the tutorial in the onboarding flow or in the settings once logged in into the app Application pincode configurable during the tutorial in the onboarding flow or in the settings once logged in into the app Backoffices for the business to configure and change app information/data on the fly without the need of deploys
  2. Our team consists of a Product Owner, a SCRUM master and development team (Developers, UX/UI designers, Solution architect,...). Since we approach the project using the agile mindset most of those roles could be picked up or backed up by another member of the team. For example, we do not have a dedicated tester in the team. But the whole team is testing each other's implementation before it was being tested by the BU once again. For the delivery of the project we are working in sprints consisting of 2 weeks using a tool called Jira. Our project has 2 boards: Development board The board that developers follow for the deliverables in the current sprint. Analysis board The board that the Product owner and the BU follow to prepare and create deliverables for the development team.  During the sprint, a sprint refinement meeting with the whole SCRUM team is taking place, where the following subjects are being discussed: Bottlenecks in the current sprint Questions that need answers Preparation of the next sprint in terms of stories, tasks and bugs State of the current sprint Discuss the backlog At the end of 2 weeks the following meetings are being planned: Sprint review A technical demo to everyone including stakeholders with the progress of the current sprint. What has changed? What is new? What has been fixed? The Product owner also show the progress of the business tasks to the stakeholders from the Analysis board on Jira. Sprint retrospective We discuss with the whole SCRUM team how the sprint went.  What are the good things? What are the bad things? What did we learn from the previous 2 weeks? What are the action points? Sprint planning During this time we decide what the goal of the new sprint will be, and based on all the preparation made during the sprint refinements, we can quickly fill it up using the backlog items. Some estimations on stories still have to be done.(sometimes a lot have already been done during sprint refinements)
  3. The first phase of the mobile application has been delivered with the required functionalities all within time and scope. The mobile application has been deployed and made available in the app store/ google play store. Which was first being communicated internally. Currently a marketing campaign is going in phases to communicate the full release of the app to the public.  Development has not stopped and a new roadmap with new functionalities are being implemented while keeping the current state of the app as a base of what’s to come.
  4. The current architecture of the mobile app in itself is very simple. We have front-end module that consists of multiple flows based on the core modules below.
  5. And based on each business concept we have their respective core module with their Local storage, sync and core widgets bundled together. (Will change in the future)
  6. Then we have backoffices with screens for the BU for the creation of data and service wrapper modules that provide the data to the mobile app through exposed REST API’s. Why do we use REST API’s instead of dependencies? Some internal data are not available in Outsystems tables, but wrappers are created and new API’s are exposed with a subset of data  based on more specific use cases. One example: An internal service API returns every personal information about a member. But we don’t want to send all that information to the app to process. The app doesn’t need all that information. That’s where the MemberInfo module becomes very important. It call’s that internal service API, but creates wrappers around a subset of that data and exposes it as a new API that is available for the app or in the future for other Outsystems applications. For the data that is available in Outsystems tables (for example Advantages) we also use exposed REST api’s because the API’s will be used by other applications in the future (Outsystems or not).
  7. As mentioned in the previous slide, currently each of the core modules of app are bundled with the sync, local storage and the core widgets together based on BU concept. The next steps are to split it even more up into their own core module if needed. Currently we didn’t do it because the app in itself is simple. However, the app is still in development and many new features are being added. So that’s why we are currently moving to this architecture. And will be very easy/fast to do so based on our current architecture. One last thing I would like to mention is that the core widget module will also be splitted into 2 types of modules: Mobile UI core modules and Mobile core widget modules. The reason why we also might split them up like in the picture above is because the core widgets might be reused across other mobile or even reactive applications.
  8. As designtool we used figma. Figma is a cloudbased graphics editor and prototyping tool. One of the nice things is that we could have some discussions and the designer could change the design in real time. We used Figma to build flowcharts, create wireframes and prototypes of the app and change them to make the final design. The UX/UI team also created a prototype app that they used to do the first usertests. We could then use the feedback from these usertests to change the design/flow of our app.
  9. As the name states the flowcharts is an overview of the flows between the different screens in the app. For this example I have used an overview of the payments of the users. The payments screen is accessible from the main dashboard of the app. On the first page the user gets an overview of all his reimbursements that he received from the cm. Inside this screen we also added a filter fow which we used the sidebar widget. When the user presses a reimbursement we also open a sidebar which has a webblock inside of it to show a full detail of the reimbursement On top of the screen the user has some buttons to move him from the reimbursements to his contributions overview which shows if he has paid his contributions to the cm. The user can also access an overview of the allowances
  10. Here you can see the full flow of designing a screen. We start with a wireframe which is a very basic design. We use this to get a general feeling and a visual guide of the screen. We agreed that the best option for our app were to have some tiles on the dashboard of the app. This way the user has a nice overview of the main functions of the app and gives them a quick and easy way to access them. The designers then started to make some prototypes. The image that you see in the middle is just one of many prototypes. As you can see we were pretty close to the final design of the app. They just decided that they wanted a little bit of a more clean look for the app to give the users a better overview of the mail functions of the app.
  11. First of all we used the Android back button from the forge to capture the back button click events. This way we could enable/disable all the back button triggers of the android users. This was necessary because on a lot of pages we have input parameters that need to be filled in. This couldn’t be done without this component. One of the issues we had with the android back button was that when de destionation was set to previous screen. En the page to which we would navigate was set to the default scree, which is the dashboard for our app. The app would refresh and the page wouldn’t recognise the locale of the app. We solved this problem by setting a fixed destionation on every page that would lead to our dashboard. During the user testing a lot of testers would complain about the fact that the app wouldn’t minimize when the pressed the backbutton on the dashboard. We solved this by adding a cordova plugin. On our Reimbursments screen we used 2 sidebars, one to filter and one to show details. These sidebars also capture the back button event. µ FilterTabOpen  close the filter  don’t trigger the filter DetailSidebarOpen  close the detail sidebar
  12. For the iphone we could use the .iphonex.portrait.Header class to detect the iphone and add some padding-top of 50px to make sure the title wasn’t stuck to the notch For android and older iphones we just added a header class with a fixed height that would cover the whole notch and some space below. And we then added all the titles and action buttons on the bottom of the container with placeholder.
  13. As you can see business wanted to have a page which had tabs inside tabs. We first tried to add 2 tabs widgets inside eachother, but outsystems would also change the bottom tab when we switched between the top tabs. Because they used the same active tab attribute. Becouse the pages of the top tabs are the same we created 2 screens with the same layout. And made the bottoms tabs out of containers with some css. When the user clicks on the top tab we just navigate to the second screen. Ans change the css to make it look like the second tab of the top tab is active. And for the lower tabs we just used the tabs widget of outSystems.
  14. Luckely for us the app was pretty good adapted for a tablet. Which is ofcourse one of the great things about outsystems. But sometime there would be some small design issues. Like you can see in the slide all the tabs would be aligned to much to the right. There were also some small other issues. But there were all pretty minor. If you want to make a custom class for tablets you just have to put .tablet in front of your class and then change the css to that class. Then every item with that class will have the tablet css when the tablet is detected.
  15. Slow api’s The problem we had was that the whole offline datasync took more then 10 seconds because of the complexity and legacy systems. We solved this by separating the offline datasync into smaller actions that we would call parallel. Together with our designers we created a flow that would hide performance issues form the users and gives them a more pleasant experience. When the user accesses a page that has data that he is waiting for The networkflow wasn’t optimized. There were some security components that slowed down the response times. We had a lot of meetings with the internal network team to rework this flow. This resulted in much needed performance improvements.
  16. The app is currently only available for logged in users that are clients of CM, so a solid login mechanism these are the main challenges we faced, I’ll go over them one by one and explain a bit more on how we solved them.
  17. One of the first challenges we faced was that we couldn’t just reuse Outsystems accounts and authentication out of the box. Existing users on the website needed to be able to log into the app seamlessly with their existing accounts. And vice versa our users would have to be able to use the website as well. The team responsable for these accounts exposed some of their api’s to be reusable by us. To avoid security issues we chose to call these api’s not directly from the app but rather from our Outsystems server wrapped in a separate application and exposed as service actions. This allows for weak dependency and allows us to add some of our own logic before using these.
  18. When users create a new account there is some extra complexity, we need users to prove to us who they are. For this we use a government website that handles eId verification through services like “itsme”. This way we can receive the users national number so we can link this to their account. Since the government site works with whitelisting and redirects that aren’t mobile-friendly: we use a wrapper site. This also allows us to reuse this wrapper site if needed. While this seems rather complex, because we provide the user with the necessary info in the app almost all users seem to be able to complete this flow. After completing this flow the user now has a verified account by which we can identify him and retrieve information.
  19. For technical reason we are required to store credentials client side, this is ofcourse a challenge since we need this to be done in a secure way. At first we used the keystorage plugin, this seems like a logical choice. After a while however while user testing we found that this discriminated against to many users. Users without a screenlock on their device can not use the app. This amounts to a big amount of users, in fact we were a bit surprised by how high this ratio is. These two reason led to the following decision: we need to encrypt this authorization.
  20. Luckily we are not the first ones to need encryption with Outsystems, so we have a component ready to use and a success guide that i’ve linked here. The schematics on this slide explain the principles of how this is done, I won’t go into great detail how this happens since the guide explains this very well but there are a few things I would like to point out. First on the right you see the KEK which refers to Key Encryption Key, this is a main encryption key that encrypts all other keys. This is a principle that’s called envelope key and ensures that even if a key is compromised it is not in a useable way to decrypt data.