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

Get Started "Firebase"

kkeeth
November 29, 2021
93

Get Started "Firebase"

kkeeth

November 29, 2021
Tweet

Transcript

  1. GET STARTED


    ”FIREBASE”
    11/29 SmileHackathon study group
    kkeeth @kuwahara_jsri @clown0082

    View full-size slide

  2. SPEAKER
    const my_info = {


    Name: ‘Kuwahara KEETH Kiyohito’,


    Company: ‘Yumemi Inc’,


    Position: ‘FE Tech Lead/Board’,


    Skills: ‘Riot.js/Next.js/Nuxt.js’,


    }

    View full-size slide

  3. npmjs.com/~kkeeth

    View full-size slide

  4. Let’s start 😆

    View full-size slide

  5. WHAT IS FIREBASE

    View full-size slide

  6. 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 full-size slide

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

    View full-size slide

  8. 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 full-size slide

  9. 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 full-size slide

  10. 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 full-size slide

  11. 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 full-size slide

  12. 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 full-size slide

  13. CLOUD STORAGE FOR FIREBASE
    ▸ Robust operations


    ▸ Strong security


    ▸ High scalability
    Image by: https://www.topgate.co.jp/
    fi
    rebase01-what-is-
    fi
    rebase

    View full-size slide

  14. 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 full-size slide

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

    View full-size slide

  16. GET STARTED!

    View full-size slide

  17. PRECONDITION

    View full-size slide

  18. 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 full-size slide

  19. PRECONDITION
    ※ inlucde command

    View full-size slide

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

    View full-size slide

  21. CHECK INSTALLED NODEJS AND NPM

    View full-size slide

  22. CRAETE TODO APP

    View full-size slide

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

    View full-size slide

  24. CHECK INSTALLED NODEJS AND NPM

    View full-size slide

  25. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  32. 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 full-size slide

  33. SETUP ENVIRONMENT

    View full-size slide

  34. SETUP ENVIRONMENT

    View full-size slide

  35. SETUP ENVIRONMENT

    View full-size slide

  36. SETUP ENVIRONMENT

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  42. CREATE FIREBASE INSTANCE

    View full-size slide

  43. CREATE FIREBASE INSTANCE

    View full-size slide

  44. CREATE FIREBASE INSTANCE

    View full-size slide

  45. CREATE FIREBASE INSTANCE

    View full-size slide

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

    View full-size slide

  47. FIRESTORE CONSOLE

    View full-size slide

  48. FIRESTORE CONSOLE

    View full-size slide

  49. 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 full-size slide

  50. HAVE FUN WITH “FIREBASE” 😆

    View full-size slide