flutter firebase starter

โครงการฐาน Flutter พร้อม Firebase

ภาษาอื่น ๆ : ภาษาอังกฤษ

คำอธิบาย

โครงการนี้มีจุดมุ่งหมายที่จะเป็นเทมเพลตพื้นฐานหรือ เริ่มต้น เพื่อเริ่มโครงการด้วย Flutter และ Firebase อย่างรวดเร็ว

การเดิมพันประกอบด้วยสองหน้าจอ: เข้าสู่ระบบ และ กลับบ้าน

หน้าจอเข้าสู่ระบบ

บนหน้าจอนี้ผู้ใช้สามารถ:

• เข้าสู่ระบบ Firebase ด้วยอีเมล/รหัสผ่าน
• เข้าสู่ระบบ Firebase ด้วยบัญชี Google
• ลงทะเบียนใน Firebase ด้วยอีเมล/รหัสผ่าน

หน้าจอหลัก

หน้าจอที่เรามาถึงเมื่อระบุและทำให้เราสามารถจบเซสชัน

ฐานข้อมูล

แอปพลิเคชันยังสร้างเอกสารในฐานข้อมูลที่เรียกว่า กิจกรรม ที่เวลาผู้ใช้และ ID ถูกบันทึกไว้ทุกครั้งที่คุณเข้าสู่ระบบ

จุดมุ่งหมาย

วัตถุประสงค์ของโครงการนี้คือ การแสดงให้เห็นถึงการใช้กระพือปีกร่วมกับ Firebase เพื่อสร้างแอปพลิเคชันอย่างรวดเร็วด้วยแบ็กเอนด์เพื่อจัดการผู้ใช้และการตรวจสอบและฐานข้อมูลเพื่อจัดเก็บข้อมูล

การติดตั้ง Flutter

ติดตั้ง Flutter ในทีมพัฒนา:

https://flutter.dev/docs/get-started/install/macos

ตรวจสอบให้แน่ใจว่าเราติดตั้ง Android Studio และ Xcode:

ดาวน์โหลด xcode

ดาวน์โหลด Android Studio (สำหรับ Mac)

เมื่อติดตั้งแล้วให้ตรวจสอบการติดตั้งด้วย:

flutter doctor

การติดตั้งโครงการ

git clone [email protected]:ramoncardena/flutter-firebase-starter.git flutter-firebase-starter

cd flutter-firebase-starter

flutter packages get

การกำหนดค่า

คำจำกัดความของรหัสมัดใน iOS

เราเปิดโครงการ iOS ใน xcode: ~/flutter-firebase-starter/ios

ในโครงสร้างของโครงการเราเลือก Root Runner และในส่วน ทั่วไป ในส่วน ข้อมูลประจำตัว เรากำหนด ID Bundle ( ตัวระบุชุดข้อมูล ) และเวอร์ชัน ( เวอร์ชัน )

จากนั้นเราไปที่ส่วน การลงนามและความสามารถ และในส่วน การลงนาม เราเลือกอุปกรณ์ที่เหมาะสม ( ทีม ) เพื่อลงนามในโครงการ

คำจำกัดความของรหัสแอปพลิเคชันใน Android

ไปที่โฟลเดอร์โครงการที่กำหนดการสำเร็จการศึกษาสำหรับแอปพลิเคชันใน: ~/flutter-firebase-starter/android/app/build.gradle

และเราแก้ไขส่วน defaultConfig ด้วย ID แอปพลิเคชัน ( ApplicationID ) และตั้งค่าเวอร์ชันขั้นต่ำของ SDK ( minsdkversion ) เป็น 21

 defaultConfig {
	applicationId "com.ramoncardena.firebasestarter"
	minSdkVersion 21
	targetSdkVersion 28
	versionCode flutterVersionCode.toInteger()
	versionName flutterVersionName
	testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
}

การกำหนดค่า firebase

เราจะค้นหาข้อมูลโดยละเอียดเป็นภาษาอังกฤษในบทความนี้

เราไปที่คอนโซล Firebase

เราสร้างโครงการใหม่และเมื่อสร้างขึ้นเพิ่มแอปพลิเคชันสองแอปพลิเคชันหนึ่ง Android และ iOS อื่น

แอปพลิเคชัน iOS

เราสร้างแอปพลิเคชัน iOS ใหม่จากคอนโซล Firebase และเติมข้อมูลพื้นฐาน

จากนั้นเราดาวน์โหลดไฟล์การกำหนดค่า googleservice-info.plist

สำคัญ: เราเปิด Xcode และด้วยปุ่มขวาบนโฟลเดอร์ Runner/Runner ให้เพิ่มไฟล์การกำหนดค่า Firebase และปิด XCode

นอกจากนี้สำหรับการรับรองความถูกต้องด้วย Google Sign-in เราต้องเพิ่มคีย์ที่เกี่ยวข้องในไฟล์ ios/Runner/Info.plist :

 <!-- Google Sign-in Section -->
<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleTypeRole</key>
    <string>Editor</string>
    <key>CFBundleURLSchemes</key>
    <array>
<!-- TODO Replace this value: -->
<!-- Copied from GoogleService-Info.plist key REVERSED_CLIENT_ID -->
<string>com.googleusercontent.apps.861823949799-vcuujjn0vvnmcvjppkn</string>
    </array>
  </dict>
</array>
<!-- End of the Google Sign-in Section -->

แอปพลิเคชัน Android

เราสร้างแอปพลิเคชัน Android ใหม่จากคอนโซล Firebase ด้วยข้อมูลพื้นฐาน

ในการเพิ่มปุ่ม SHA Signature จากเทอร์มินัลเราไปที่โฟลเดอร์โครงการและดำเนินการ:

keytool -list -v -alias androiddebugkey -keystore ~/.android/debug.keystore

(เป็นรหัสผ่านที่เราใช้ android )

จากส่วนนี้มีการใช้งานแล้วในโครงการมันเป็นข้อมูลเท่านั้น

จากนั้นเราดาวน์โหลดไฟล์ Google-Services การตั้งค่าและคัดลอกลงในโฟลเดอร์โครงการ: android/app

เมื่อคัดลอกไฟล์แล้วเราต้องกำหนดค่าการสำเร็จการศึกษาเพื่อทำงานกับ Firebase เราแก้ไขในตอนแรก android/build.gradle :

 buildscript {
  repositories {
    // Check that you have the following line (if not, add it):
    google()  // Google's Maven repository
  }

  // ...

  dependencies {
    // ...

    // Add the following line:
    classpath 'com.google.gms:google-services:4.3.3'  // Google Services plugin
  }
}
allprojects {
  // ...

  repositories {
    // Check that you have following line (if not, add it):
    google()  // Google's Maven repository
    // ...
  }
}

และบน android/app/build.gradle :

 dependencies {
// ...
}

// Add the following line to the bottom of the file:
apply plugin: 'com.google.gms.google-services'  // Google Play services Gradle plugin

ในที่สุดเราก็แก้ไขไฟล์ android/gradle.properties และเพิ่ม:

 android.useAndroidX=true
android.enableJetifier=true

ในที่สุดเราก็ดำเนินการ:

flutter packages get

การประหารชีวิต

เมื่อแก้ไข ID แล้วเราตรวจสอบว่าแอปพลิเคชันที่ติดตั้งใหม่จะถูกดำเนินการในสองระบบ (เราเชื่อมต่อ Android Mobile และ iPhone:

flutter packages get

flutter run -d all

(หรือเริ่มโครงการจาก Android Studio)

การติดตั้งปลั๊กอิน Firebase

ส่วนนี้ถูกนำไปใช้ในโครงการแล้วมันเป็นเพียงข้อมูล

เราเพิ่มปลั๊กอินที่เราต้องการ firebase ใน pubspec.yaml ในส่วน การพึ่งพา :

 dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2

  ## AQUÍ DEPENDENCIAS FIREBASE Y OTRAS...
  firebase_core: ^0.4.1+5
  firebase_analytics: ^5.0.6
  cloud_firestore: ^0.12.10
  firebase_auth: ^0.14.0+9
  google_sign_in: ^4.0.14
  rxdart: ^0.22.6
  provider: 2.0.0+1
  font_awesome_flutter: 8.4.0

เมื่อมีการกำหนดปลั๊กอินแล้วเราจะติดตั้ง:

flutter packages get

และเราดำเนินการแอปเพื่อดูว่าทุกอย่างใช้งานได้:

flutter run -d all

เกี่ยวกับฉัน

คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับฉันบนเว็บไซต์ของฉันหรืออ่านบทความของฉันในบล็อก