Get Started "Firebase"

Transcript

1. GET STARTED
   
   
   ”FIREBASE”
   11/29 SmileHackathon study group
   kkeeth @kuwahara_jsri @clown0082
   

   View Slide

2. WHO AM I
   

   View Slide

3. SPEAKER
   const my_info = {
   
   
   Name: ‘Kuwahara KEETH Kiyohito’,
   
   
   Company: ‘Yumemi Inc’,
   
   
   Position: ‘FE Tech Lead/Board’,
   
   
   Skills: ‘Riot.js/Next.js/Nuxt.js’,
   
   
   }
   

   View Slide

4. PUBLISHED
   

   View Slide

5. npmjs.com/~kkeeth
   

   View Slide

6. Let’s start 😆
   

   View Slide

7. WHAT IS FIREBASE
   

   View Slide

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
   

   View Slide

9. SERVICES
   

   View Slide

10. FIREBASE SERVICES
    Image by: https://
    fi
    rebase.google.com/docs?authuser=0
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

16. CLOUD STORAGE FOR FIREBASE
    ▸ Robust operations
    
    
    ▸ Strong security
    
    
    ▸ High scalability
    Image by: https://www.topgate.co.jp/
    fi
    rebase01-what-is-
    fi
    rebase
    

    View Slide

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
    

    View Slide

18. TODAY, WE USE
    cloud
    fi
    restore
    fi
    rebase hosting
    

    View Slide

19. GET STARTED!
    

    View Slide

20. PRECONDITION
    

    View Slide

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
    

    View Slide

22. PRECONDITION
    ※ inlucde command
    ⊕
    

    View Slide

23. NODEJS AND NPM INSTALLER
    Image by: https://nodejs.org/ja/
    

    View Slide

24. CHECK INSTALLED NODEJS AND NPM
    

    View Slide

25. CRAETE TODO APP
    

    View Slide

26. DEMO APP
    

    View Slide

27. DEMO APP
    URL: https://github.com/kkeeth/todo-app-with-react-
    fi
    rebase
    

    View Slide

28. CHECK INSTALLED NODEJS AND NPM
    

    View Slide

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.
    

    View Slide

30. HOSTING
    

    View Slide

31. ACCESS TO FIREBASE CONSOLE
    Image by: https://console.
    fi
    rebase.google.com/?hl=ja
    

    View Slide

32. CREATE PROJECT
    Image by: https://console.
    fi
    rebase.google.com/?hl=ja
    

    View Slide

33. CREATE PROJECT
    Image by: https://console.
    fi
    rebase.google.com/?hl=ja
    

    View Slide

34. ADD APP TO PROJECT
    Image by: https://console.
    fi
    rebase.google.com/project/todo-app-xxxxxx/overview?hl=ja
    

    View Slide

35. ADD APP TO PROJECT
    Image by: https://console.
    fi
    rebase.google.com/project/todo-app-xxxxxx/overview?hl=ja
    

    View Slide

36. ADD APP TO PROJECT
    Image by: https://console.
    fi
    rebase.google.com/project/todo-app-xxxxxx/overview?hl=ja
    

    View Slide

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 📝
    

    View Slide

38. SETUP ENVIRONMENT
    

    View Slide

39. SETUP ENVIRONMENT
    

    View Slide

40. SETUP ENVIRONMENT
    

    View Slide

41. SETUP ENVIRONMENT
    

    View Slide

42. DEPLOY
    

    View Slide

43. DEPLOY
    

    View Slide

44. DEPLOY
    

    View Slide

45. DEPLOY
    

    View Slide

46. DEPLOY
    

    View Slide

47. CHECK SITE
    Image by: https://console.
    fi
    rebase.google.com/project/todo-app-xxxxxx/hosting/sites?hl=ja
    

    View Slide

48. FIRESTORE
    

    View Slide

49. SETUP FIRESTORE
    Image by: https://console.
    fi
    rebase.google.com/project/todo-app-xxxxxx/hosting/sites?hl=ja
    

    View Slide

50. SETUP FIRESTORE
    Image by: https://console.
    fi
    rebase.google.com/project/todo-app-xxxxxx/hosting/sites?hl=ja
    

    View Slide

51. SETUP FIRESTORE
    Image by: https://console.
    fi
    rebase.google.com/project/todo-app-xxxxxx/hosting/sites?hl=ja
    

    View Slide

52. SETUP FIRESTORE
    Image by: https://console.
    fi
    rebase.google.com/project/todo-app-xxxxxx/hosting/sites?hl=ja
    

    View Slide

53. CREATE FIREBASE INSTANCE
    

    View Slide

54. CREATE FIREBASE INSTANCE
    

    View Slide

55. CREATE FIREBASE INSTANCE
    

    View Slide

56. CREATE FIREBASE INSTANCE
    

    View Slide

57. FIRESTORE CONSOLE
    Image by: https://console.
    fi
    rebase.google.com/project/todo-app-xxxxxx/hosting/sites?hl=ja
    

    View Slide

58. FIRESTORE CONSOLE
    

    View Slide

59. FIRESTORE CONSOLE
    

    View Slide

60. AT THE END
    

    View Slide

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.
    

    View Slide

62. HAVE FUN WITH “FIREBASE” 😆
    

    View Slide

63. View Slide