Lecture 3 React Native with Database.pptx
- 1. Lecture 3 React Native with Database Prepared by: Eng Yee Wei
- 2. Introduction to Firebase • Firebase is a comprehensive mobile and web application development platform provided by Google. It offers a suite of cloud-based services and tools that help developers build, deploy, and manage applications more efficiently.
- 3. Steps on Integrating Data Adding to Firebase • 1. First, you need to create a Firebase project • 2. https://console.firebase.google.com • 3. Add a new Firebase Project • 4. Create config.js in React Native Project. • 5. Codes integration with React Native and view data changes in Firebase
- 4. Section 1: Adding Data to Firebase
- 5. Name your firebase project
- 6. Configure Google Analytics (Create one if you do not own any)
- 7. Make sure the project created is ready
- 9. Add Firebase to your web app and name it, then register app
- 10. Then it will show this page
- 11. Build –> Realtime Database
- 17. Set default GCP resource location
- 18. Standy the codes needed for config.js
- 19. Create a new project FirebaseApp • npx create-expo-app FirebaseApp • Go to project folder directory, npm i [email protected] (The stable release for firebase version in Javascript) • Create a new file named as ‘config.js’
- 20. In config.js
- 21. Create ‘src’ folder and code the structure out • Inside the src folder, create ‘index.js’
- 22. Set node in dataAddOn function
- 24. Styling
- 25. App.js
- 27. Type something and see result from Realtime Database
- 28. Section 2: Retrieve Data from Firebase
- 29. Create a blank template and name app
- 31. Build index.js in ‘src’ folder, then build config.js (Copy the same from previous)
- 32. In index.js
- 34. In stylesheet
- 35. Add data in previous app/ directly add from firebase
- 36. Notice the successive of data retrieval
- 37. Thank you