Get Started "Firebase"

Transcript

1. GET STARTED ”FIREBASE” 11/29 SmileHackathon study group kkeeth @kuwahara_jsri @clown0082
2. WHO AM I
3. SPEAKER const my_info = { Name: ‘Kuwahara KEETH Kiyohito’, Company: ‘Yumemi Inc’, Position: ‘FE Tech Lead/Board’, Skills: ‘Riot.js/Next.js/Nuxt.js’, }
4. PUBLISHED
5. npmjs.com/~kkeeth
6. Let’s start 😆
7. WHAT IS FIREBASE
8. OUTLINE ▸ Founded in 2011 ▸ Acquired by google in 2014 ▸ mBaaS(mobile Backend as a Service) ▸ Very similar to AWS Amplify ▸ Recommended for small business, personal development, start-up ▸ We can use a lot of functions even for free
9. SERVICES
10. FIREBASE SERVICES Image by: https:// fi rebase.google.com/docs?authuser=0
11. FIREBASE HOSTING ▸ Deliver content over a secure connection ▸ Deliver content at high speed ▸ Deploy new versions with a single command Image by: https://www.topgate.co.jp/ fi rebase01-what-is- fi rebase
12. CLOUD FIRESTORE ▸ NoSQL type Database ▸ Realtime updates ▸ Sophisticated query processing ▸ Of fl ine support Image by: https://www.topgate.co.jp/ fi rebase01-what-is- fi rebase
13. REALTIME DATABASE ▸ NoSQL type Database ▸ Realtime updates ▸ Scaling across multiple databases ▸ Of fl ine support Image by: https://www.topgate.co.jp/ fi rebase01-what-is- fi rebase
14. CLOUD FIRESTORE OR REALTIME DATABASE or cloud fi restore realtime database https:// fi rebase.google.com/docs/ fi restore/rtdb-vs- fi restore?authuser=0
15. AUTHENTICATION ▸ Drop-in Authentication Solution ▸ Email and password based authentication ▸ Integration with Federation Identity Providers Image by: https://www.topgate.co.jp/ fi rebase01-what-is- fi rebase
16. CLOUD STORAGE FOR FIREBASE ▸ Robust operations ▸ Strong security ▸ High scalability Image by: https://www.topgate.co.jp/ fi rebase01-what-is- fi rebase
17. CLOUD FUNCTIONS ▸ Firebase platform integration ▸ Maintenance free ▸ Maintain con fi dentiality and security of logic Image by: https://www.topgate.co.jp/ fi rebase01-what-is- fi rebase
18. TODAY, WE USE cloud fi restore fi rebase hosting
19. GET STARTED!
20. PRECONDITION
21. TODO LIST ▸ Create TODO app with React ▸ Deploy to fi rebase Hosting ▸ Manage data with fi rebase fi restore ▸ Add authentication capabilities with fi rebase auth
22. PRECONDITION ※ inlucde command ⊕
23. NODEJS AND NPM INSTALLER Image by: https://nodejs.org/ja/
24. CHECK INSTALLED NODEJS AND NPM
25. CRAETE TODO APP
26. DEMO APP
27. DEMO APP URL: https://github.com/kkeeth/todo-app-with-react- fi rebase
28. CHECK INSTALLED NODEJS AND NPM
29. SORRY… 🙇Sorry…🙇 This demo application is created using React. I will explain the code as needed, but I assume you have a basic knowledge of HTML/CSS/JavaScript, so if you don't understand it, it would be helpful if you could copy the code I write.
30. HOSTING
31. ACCESS TO FIREBASE CONSOLE Image by: https://console. fi rebase.google.com/?hl=ja
32. CREATE PROJECT Image by: https://console. fi rebase.google.com/?hl=ja
33. CREATE PROJECT Image by: https://console. fi rebase.google.com/?hl=ja
34. ADD APP TO PROJECT Image by: https://console. fi rebase.google.com/project/todo-app-xxxxxx/overview?hl=ja
35. ADD APP TO PROJECT Image by: https://console. fi rebase.google.com/project/todo-app-xxxxxx/overview?hl=ja
36. ADD APP TO PROJECT Image by: https://console. fi rebase.google.com/project/todo-app-xxxxxx/overview?hl=ja
37. ADD APP TO PROJECT Image by: https://console. fi rebase.google.com/project/todo-app-xxxxxx/overview?hl=ja We'll use it later, so please copy it 📝
38. SETUP ENVIRONMENT
39. SETUP ENVIRONMENT
40. SETUP ENVIRONMENT
41. SETUP ENVIRONMENT
42. DEPLOY
43. DEPLOY
44. DEPLOY
45. DEPLOY
46. DEPLOY
47. CHECK SITE Image by: https://console. fi rebase.google.com/project/todo-app-xxxxxx/hosting/sites?hl=ja
48. FIRESTORE
49. SETUP FIRESTORE Image by: https://console. fi rebase.google.com/project/todo-app-xxxxxx/hosting/sites?hl=ja
50. SETUP FIRESTORE Image by: https://console. fi rebase.google.com/project/todo-app-xxxxxx/hosting/sites?hl=ja
51. SETUP FIRESTORE Image by: https://console. fi rebase.google.com/project/todo-app-xxxxxx/hosting/sites?hl=ja
52. SETUP FIRESTORE Image by: https://console. fi rebase.google.com/project/todo-app-xxxxxx/hosting/sites?hl=ja
53. CREATE FIREBASE INSTANCE
54. CREATE FIREBASE INSTANCE
55. CREATE FIREBASE INSTANCE
56. CREATE FIREBASE INSTANCE
57. FIRESTORE CONSOLE Image by: https://console. fi rebase.google.com/project/todo-app-xxxxxx/hosting/sites?hl=ja
58. FIRESTORE CONSOLE
59. FIRESTORE CONSOLE
60. AT THE END
61. AT THE END ▸ There's nothing new today’s contents ▸ There is a lot of information on the internet ▸ We have to walk your own path beyond the introduction ▸ This is the same for academia and IT.
62. HAVE FUN WITH “FIREBASE” 😆