การดาวน์โหลด stencil firebase - stencil firebase ซอร์สโค้ดดาวน์โหลด

stencil firebase

ข้อมูลเว็บไซต์

vicon icons

ดาวน์โหลด

stencil + firebase

นี่คือหม้อไอน้ำสำหรับการสร้าง WebApp โดยใช้ Stencil + Firebase + Stencil Store

คุณสมบัติ ?

การตั้งค่า Firebase
การตั้งค่า Stencil Store
เข้าสู่ระบบ/ลงทะเบียน/อัปเดตโปรไฟล์/ฟังก์ชั่นการออกจากระบบ (พื้นฐานพื้นฐาน)
ปกป้องเส้นทางที่เข้าถึงได้หลังจากเข้าสู่ระบบ

เริ่มต้น

ในการเริ่มใช้แผ่นหม้อต้มนี้ให้โคลน repo นี้เป็นไดเรกทอรีใหม่:

git clone https://github.com/ranjeetsinghbnl/stencil-firebase.git

และวิ่ง:

npm install

การใช้งาน?

การตั้งค่าการกำหนดค่า firebase

โปรดตั้งค่าการกำหนดค่า firebase ในไฟล์

 src -> config -> config.ts

 const firebaseConfig = {
  apiKey : "" ,
  authDomain : "" ,
  databaseURL : "" ,
  projectId : "" ,
  storageBucket : "" ,
  messagingSenderId : "" ,
  appId : ""
} ;

คุณสามารถค้นหาเพิ่มเติมเกี่ยวกับ Firebase Web Config การตั้งค่า Firebase Web Config

ในการเริ่มต้นโครงการ Run:

npm run start

เพื่อสร้างแอพสำหรับการผลิต Run:

npm run build

ในการเรียกใช้การทดสอบหน่วยหนึ่งครั้งให้เรียกใช้:

 npm run test

ในการเรียกใช้การทดสอบหน่วยและดูการเปลี่ยนแปลงไฟล์ในระหว่างการพัฒนาให้เรียกใช้:

 npm run test.watch

โครงสร้างโครงการ? ️

บริการ

คลาสนี้จะจัดการคุณสมบัติการรับรองความถูกต้องของแอปพลิเคชันไปยัง Firebase

 src -> services -> auth.service.ts -> Class FirebaseAuthService

คุณสามารถสร้างคลาสเพิ่มเติมเพื่อจัดกลุ่มฟังก์ชันการทำงาน

เก็บ

ร้านแอปพลิเคชัน

 src -> store -> app.store.ts

การเชื่อมต่อ

อินเทอร์เฟซที่ใช้ในแอปพลิเคชัน

 src -> interface -> interface.ts

คุณประโยชน์

ยูทิลิตี้สำหรับการแยกวิเคราะห์ข้อความแอปพลิเคชันและการกำหนดค่าแบบฟอร์มการถือครอง

 src -> util -> util.ts

การกำหนดค่า

การกำหนดค่าระดับแอปพลิเคชัน

 src -> config -> config.ts

สินทรัพย์

สินทรัพย์ระดับแอปพลิเคชัน

 src -> assets

ส่วนประกอบ

ส่วนประกอบระดับแอปพลิเคชัน

 src -> components ->
1. <app-flash-message> for showing alert messages
2. <app-home> Dashboard 
3. <app-root> entry component of the application
4. <common> sidebar functional component used in login/register components
5. <page> for showing pages
6. <auth> -> having login/register/update-profile components

จัดแต่งทรงผม?

ฉันใช้ scss สำหรับส่วนประกอบการจัดแต่งทรงผม THS Boilerplate มีการออกแบบขั้นพื้นฐานเช่นมันมุ่งเน้นไปที่การกำหนดค่าและการใช้ Firebase ในแอพ stencil Web พร้อมกับ stencil store คุณสามารถปรับแต่งรูปลักษณ์ตามความต้องการของคุณ