웹용 Flutter에서 Firebase 사용하기

11686 단어 FirebaseFirebaseAuthFirestoreFlutter

소개



Flutter에서의 iOS/Android 앱 개발을 반년 정도 해왔고, 대부분의 Flutter에 익숙해져 왔다.
반대로 Flutter만 하고 있어 HTML이나 CSS를 쓰는 것이 괴로워져 왔기 때문에, Flutter for Web을 사용해 웹 앱을 만들어 보기로 했다.

Flutter for Web은 현재(2020년 10월 시점) 베타판으로서의 제공 때문에 불안이 있었지만, 간단한 어플이라면 특히 문제 없게 만들 수 있었다.

다만, Firebase의 각종 서비스와의 제휴에 관해서, 네이티브 앱과 비교하면 정보가 적었기 때문에, 여기에 적어 둔다.

결론



먼저 결론을 써두면 for Web이라면 Firebase 관련은 어렵지 않다.
"네이티브 앱과 달리 패키지가 지원되지 않음"
처음에는 이것에 전율을 기억했지만 (오해), 이것은 오래된 정보이다.

현재는 거의 대응하고 있어 네이티브 앱과 같이 사용할 수 있다.
즉, Flutter의 경험은 있지만, web는 처음이라고 하는 분이면, 특히 문제는 없을 것이다.

초기 설정이 약간 다르기 때문에 본 기사에서는 그 순서를 소개한다.

웹 앱 추가



Firebase의 프로젝트 작성은 완료하고 있는 전제로 진행해 간다.

Firebase 콘솔 화면의 왼쪽 메뉴에서 설정 화면을 열고 웹 앱을 추가합니다.


앱 이름을 입력하고 등록 버튼을 클릭합니다.
나중에 Firebase Hosting

②이후의 순서는 스킵하고, 「다음」을 클릭하여 등록을 완료시킨다.

Firebase를 앱 코드에 추가



위의 웹 앱 추가가 완료된 후 다시 설정 화면을 엽니 다.
다음과 같이 방금 추가한 앱 정보가 표시됩니다.



여기서 Firebase SDK snippet의 "CDN"을 선택하고 표시된 코드를 복사합니다.



앱의 web/index.html를 열고 다음 위치에 붙여 넣습니다.

web/index.html
<script>
    if ('serviceWorker' in navigator) {
      window.addEventListener('flutter-first-frame', function () {
        navigator.serviceWorker.register('flutter_service_worker.js');
      });
    }
 </script>

<!-- ここにコピーする -->

 <script src="main.dart.js" type="application/javascript"></script>

그런 다음 <script src="https://www.gstatic.com/firebasejs/{バージョン}/firebase-app.js"></script> 아래에 다음을 추가하여 auth와 firestore를 사용할 수 있습니다.
버전 부분은 Firebase의 설정 화면에서 복사한 수치.

<script src="https://www.gstatic.com/firebasejs/{バージョン}/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/{バージョン}/firebase-firestore.js"></script>

최종 web/index.html 는 다음과 같다.

web/index.html
<!DOCTYPE html>
<html>
<head>

  <base href="/">

  <meta charset="UTF-8">
  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
  <meta name="description" content="A new Flutter project.">

  <!-- iOS meta tags & icons -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="honmemo_web">
  <link rel="apple-touch-icon" href="icons/Icon-192.png">

  <!-- Favicon -->
  <link rel="icon" type="image/png" href="favicon.png"/>

  <title>honmemo_web</title>
  <link rel="manifest" href="manifest.json">
</head>
<body>
  <script>
    if ('serviceWorker' in navigator) {
      window.addEventListener('flutter-first-frame', function () {
        navigator.serviceWorker.register('flutter_service_worker.js');
      });
    }
  </script>

  <!-- 7.24.0の部分は、異なる場合があるため、Firebaseの設定画面からコピーした値に合わせる -->
  <script src="https://www.gstatic.com/firebasejs/7.24.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.24.0/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.24.0/firebase-firestore.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.24.0/firebase-analytics.js"></script>

  <script>
    var firebaseConfig = {
      apiKey: "コピーした値",
      authDomain: "コピーした値",
      databaseURL: "コピーした値",
      projectId: "コピーした値",
      storageBucket: "コピーした値",
      messagingSenderId: "コピーした値",
      appId: "コピーした値",
      measurementId: "コピーした値"
    };
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    firebase.analytics();
  </script>
  <script src="main.dart.js" type="application/javascript"></script>

</body>
</html>

이것으로 Firebase를 사용할 준비가 완료 = 종료.

결론



firestore 등의 사용법은 생략한다.
처음에도 말했지만 네이티브 앱 개발과 마찬가지로 패키지를 사용하면 OK

firebase_auth: htps // 푸 b. V / Pac 게이 s / 푹신 푹신하다 _ th
cloud_firestore: htps // 푸 b. v / pa c ga s / c ぉ d_ 흠 s

참고 기사



Cloud Firestore : htps : //이-c와 r. 사쿠라. 네. jp / 후 t /? p=42522
Firestore 보안 규칙 설정 설정
CloudFirestore를 사용하는 간단한 방법(Android)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage