Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Get Started "Firebase"

3135a28c51dfa27396bb525e9972db95?s=47 kkeeth
November 29, 2021
68

Get Started "Firebase"

3135a28c51dfa27396bb525e9972db95?s=128

kkeeth

November 29, 2021
Tweet

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” 😆

  63. None