Responsive Ui with Realtime Database
Download as PPTX, PDF2 likes291 views
The document discusses implementing a responsive UI that interacts with real-time databases, specifically using Firebase. It covers topics such as event-driven responses, integration with other applications, and use cases like real-time communication and collaboration. Key components include the Firebase Realtime Database, event handling, and improvements in user experience through synchronization of data.
Responsive Ui with Realtime Database
- 1. | Responsive UI with Realtime Databases Responsive UI with Realtime Databases How to interact your User Interface to data changes?
- 2. | Responsive UI with Realtime Databases| Responsive UI with RealTime Databases Martijn Habraken Business Unit Manager | Transfer Solutions @ in martijn.habraken@transfer-solutions.com /martijnhabraken
- 3. | Responsive UI with Realtime Databases In 20 minutes you should learn more about: ● Firebase Realtime Database; ● Set-up in Google Cloud Console; ● Use of Firebase components in OutSystems; ● What’s already available in the OutSystems Forge;
- 4. | Responsive UI with Realtime Databases Firebase The Firebase Realtime Database is a cloud- hosted database. Data is stored as JSON and synchronized in realtime to every connected client. When you build cross- platform apps with our iOS, Android, and JavaScript SDKs, all of your clients share one Realtime Database instance and automatically receive updates with the newest data.
- 5. | Responsive UI with Realtime Databases Use cases ● Realtime Communication; ■ Chat; ● Realtime Collaboration; ● Realtime Integration; ● Offline cache; ● Multi device applications;
- 6. | Responsive UI with Realtime Databases
- 7. | Responsive UI with Realtime Databases| Change session name in master slide Process
- 8. | Responsive UI with Realtime Databases Event A event occurs, your application should response to this event without the user having to take any action. Save JSON Record The event saves a record in the Firebase Realtime Database. This record is saved in JSON this is a Key : Value structure. Listener Activated The page that should respond to this event should have a listener that is now activated. Response It’s up to you how you want to respond: ● Redirect the user to another page; ● Refresh an Aggregate / SQL; ● Show / Hide specific information; ● Or anything else...
- 9. | Responsive UI with Realtime Databases Event An event can be triggered by different sources. ● OutSystems Application ■ Other User; ■ Other Application; ● Webhook; ● Other Integration; ● (Light)-BPT Process;
- 10. | Responsive UI with Realtime Databases Save JSON Record
- 11. | Responsive UI with Realtime Databases Listener Activated
- 12. | Responsive UI with Realtime Databases Response OnNotify… ● Redirect the user to another page; ● Refresh an Aggregate / SQL; ● Show / Hide specific information; ● Or anything else...
- 13. | Responsive UI with Realtime Databases| Change session name in master slide Demo
- 14. | Integrate OutSystems with Office 365| Integrate OutSystems with Office 365 Please visit our other presentations Oct 29. 15:30 - The 4 Layer Canvas in Practise (Marlies Quaadgras) Oct 30. 13:50 - Integrate with Office 365 (Martijn Habraken) Oct 30. 14:35 - Responsive UI With Realtime database (Martijn Habraken) Oct 30. 15:30 - Enter the O-Zone: OutSystems & Oracle (Matthieu de Graaf) Oct 30. 15:30 - Unattended OutSystems Installation (Herman Slange & Nicolay Moot)
- 15. | Responsive UI with Realtime Databases Thank You! @ in martijn.habraken@transfer-solutions /martijnhabraken