This document discusses IBM MobileFirst and React Native frameworks. It provides an overview of IBM MobileFirst for building, integrating, securing and managing mobile applications. React Native is described as a framework for building native Android and iOS apps using React. The document then discusses a sample bank application project that uses these technologies, including a mobile app built with React Native that authenticates with a MobileFirst server through Java adapters. It also outlines some typical screens and features of such a banking mobile app.

1. IBM MOBILE FIRST
REACT NATIVE
Prepared by Cuong - System Architecture
Reviewed & Modified by Paul Dao - CIO
Email: info@htgsoft.com
Version 1

2. CONTENT
1. IBM MobileFirst Overview
2. React Native Overview
3. Bank applications (Typical project)
a) Mobile application (client-side)
b) Adapter (server-side)

3. IBM MOBILEFIRST OVERVIEW

4. IBM MOBILEFIRST OVERVIEW

5. IBM MOBILEFIRST OVERVIEW

6. IBM MOBILEFIRST OVERVIEW

7. IBM MOBILEFIRST OVERVIEW
IBM MobileFirst Platform: Build, Integrate, Secure, Manage and Scale

8. IBM MOBILEFIRST OVERVIEW

9. IBM MOBILEFIRST OVERVIEW

10. IBM MOBILEFIRST OVERVIEW

11. IBM MOBILEFIRST OVERVIEW

12. IBM MOBILEFIRST OVERVIEW

13. IBM MOBILEFIRST OVERVIEW

14. IBM MOBILEFIRST OVERVIEW

15. IBM MOBILEFIRST OVERVIEW
• Mobile is everywhere
• 5 trends with significant implications for the enterprise.
1 Mobile is primary
91% of mobile users keep their within arm’s reach 100% of the time
2 Insights form mobile data provide new opportunities
75% of mobile shoppers take action after receiving a location based messages
3 Mobile is about transacting
96% year to year increase in mobile cyber Monday sales between 2012 and 2011
4 Mobile must create a continuous brand experience
90% of users use multiple screens as channels come together to create integrated
experiences
5 Mobile enables the Internet of Things
Global Machine-to-Machine connections will increase from 2 billion in 2011 to 18 billion at
the end of 2022

16. REACT NATIVE OVERVIEW

17. REACT NATIVE OVERVIEW

18. REACT NATIVE OVERVIEW

19. REACT NATIVE OVERVIEW

20. REACT NATIVE OVERVIEW

21. REACT NATIVE OVERVIEW

22. REACT NATIVE OVERVIEW

23. REACT NATIVE OVERVIEW

24. REACT NATIVE OVERVIEW

25. REACT NATIVE OVERVIEW

26. BANK APPLICATION PROJECT
Background
• Bank needed to develop a mobile application for it’s customer
interact to Bank.
Bank needs
• Customer can buy deal, coupon, claim reward, etc…
• Customer can get the notifications in foreground &
background.
• Supported Android, IOS.
Benefits
• Authenticates every request is made from Mobile app to
MobileFirst Server via Java adapter.
• Customer easy to get promotion policy, get and claim coupon,
receive notification via mobile app, etc…
Alias Name

27. BANK MOBILE APPLICATION
• Technology
• React Native (Bank requests)
• IBM MobileFirst
• Some screens:
Splash, Login, Home.
Alias Name
Alias Name

28. BANK MOBILE APPLICATION
• Profile

29. BANK MOBILE APPLICATION
• Enrolment

30. BANK MOBILE APPLICATION
• Privileges, Coupons, Card Benefits, etc…

31. BANK MOBILE APPLICATION
• World Master Card,Treats Points, QR Code

32. BANK MOBILE APPLICATION

33. IBM MOBILEFIRST ADAPTERS
• JavaScript adapters
• JavaScript HTTP adapter
• Using SSL in JavaScript HTTP adapter
• JavaScript SQL adapter
• Using java in JavaScript adapter
• Java adapters
• Java SQL adapter
• Java HTTP adapter

34. PROJECT INVESTMENT SOCIAL NETWORK
(SAMPLE PROJECT)
Overview:
• NEWRICHWORLD.com is where you can choose to live in abundance, spiritually
and financially, passionate about life and being a truly rich person .
Technology:
• ReactJS, API, Back-End
• UX/UI design, BA
• Android & iOS
• React Native
Needs:
• Customer/user can investment, buy deal, coupon, manage profile, chat, discuss,
comments, etc…
• Customer can get the notifications in foreground & background.
• Supported Android, IOS.
Benefits
• Its mission is to help people find their life purpose; grow financially and spiritually
so that they can enjoy prosperity, abundance and happiness.

35. INVESTMENT SOCIAL NETWORK
(SAMPLE PROJECT)

36. MOBILE & WEB APPS
(SAMPLE PROJECT)
Ø Technology:
§ AngularJS 2.0, React Na4ve
§ BA, UX/UI, Front-End
§ API, Back-End
§ Android & iOS

37. Q & A
THANKS