Ứng dụng Đặt phòng là một ứng dụng demo để đặt vé máy bay và lên kế hoạch cho các chuyến đi. Ứng dụng này cho phép tìm kiếm vé, đặt phòng khách sạn cho những ngày mong muốn và thuê ô tô
Bạn có thể tải xuống ứng dụng này và sử dụng nó làm mẫu tạo sẵn cho dự án của mình. Các mẫu giúp tiết kiệm thời gian làm việc của các nhà phát triển và hiểu rõ hơn về đặc thù của thư viện Webix UI
Trong hướng dẫn này, chúng ta sẽ xây dựng Ứng dụng đặt chỗ sự kiện bằng HTML, CSS, JavaScript và Firebase
- Lập kế hoạch ứng dụng của chúng tôi
- đánh dấu
- tạo kiểu
- Tương tác với Firebase
- Tìm nạp sự kiện
- Tạo một sự kiện
- Đặt một sự kiện
- Hiển thị và cập nhật dữ liệu bằng JavaScript
Lập kế hoạch ứng dụng của chúng tôi
Chúng tôi sẽ không xây dựng một ứng dụng đặt sự kiện hoàn chỉnh với tất cả các chức năng. Chúng tôi không cần phải bao gồm tất cả mọi thứ chỉ trong một hướng dẫn. Vì tôi chỉ muốn giữ mọi thứ đơn giản và dễ hiểu, chúng tôi sẽ đề cập đến phần xác thực trong một bài viết riêng
Vì vậy, Ứng dụng đặt sự kiện của chúng tôi sẽ có các chức năng sau
- Người dùng có thể tạo một sự kiện và lưu trữ nó vào Firestore
- Người dùng có thể tìm nạp tất cả các sự kiện trong thời gian thực
- Người dùng có thể đặt một sự kiện
- Người dùng không thể đặt sự kiện nhiều lần
Bây giờ chúng ta đã biết ứng dụng của mình sẽ trông như thế nào, hãy bắt đầu xây dựng nó trong phần tiếp theo
đánh dấu
Tệp HTML của chúng tôi sẽ tương đối đơn giản. Chúng tôi sẽ giữ thanh điều hướng và sự kiện mới nhất trong thẻ
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxx",
authDomain: "xxxxxxxxxxxxxxxxxxxxxxxx",
databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxxx",
projectId: "xxxxxxxxxxxxxxxxxxxxxxxxx",
storageBucket: "xxxxxxxxxxxxxxxxxxxxxxxxx",
messagingSenderId: "xxxxxxxxxxxxxxxxxxxxxxxxx",
appId: "xxxxxxxxxxxxxxxxxxxxxxxxx"
};
// Initialize Firebase
firebase.initializeApp[firebaseConfig];
const db = firebase.firestore[]
0- trong
0// Your web app's Firebase configuration var firebaseConfig = { apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxx", authDomain: "xxxxxxxxxxxxxxxxxxxxxxxx", databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxxx", projectId: "xxxxxxxxxxxxxxxxxxxxxxxxx", storageBucket: "xxxxxxxxxxxxxxxxxxxxxxxxx", messagingSenderId: "xxxxxxxxxxxxxxxxxxxxxxxxx", appId: "xxxxxxxxxxxxxxxxxxxxxxxxx" }; // Initialize Firebase firebase.initializeApp[firebaseConfig]; const db = firebase.firestore[]
Eventic
- Home
- Events
- New Event
Events
New Event
Free
Paid
Save
Tiếp theo, thẻ
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxx",
authDomain: "xxxxxxxxxxxxxxxxxxxxxxxx",
databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxxx",
projectId: "xxxxxxxxxxxxxxxxxxxxxxxxx",
storageBucket: "xxxxxxxxxxxxxxxxxxxxxxxxx",
messagingSenderId: "xxxxxxxxxxxxxxxxxxxxxxxxx",
appId: "xxxxxxxxxxxxxxxxxxxxxxxxx"
};
// Initialize Firebase
firebase.initializeApp[firebaseConfig];
const db = firebase.firestore[]
1 sẽ bao bọc danh sách các sự kiện và biểu mẫu cho phép chúng ta tạo một sự kiện mớiCác sự kiện sẽ được hiển thị sau với sự trợ giúp của JavaScript
- trong
0// Your web app's Firebase configuration var firebaseConfig = { apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxx", authDomain: "xxxxxxxxxxxxxxxxxxxxxxxx", databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxxx", projectId: "xxxxxxxxxxxxxxxxxxxxxxxxx", storageBucket: "xxxxxxxxxxxxxxxxxxxxxxxxx", messagingSenderId: "xxxxxxxxxxxxxxxxxxxxxxxxx", appId: "xxxxxxxxxxxxxxxxxxxxxxxxx" }; // Initialize Firebase firebase.initializeApp[firebaseConfig]; const db = firebase.firestore[]
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxx",
authDomain: "xxxxxxxxxxxxxxxxxxxxxxxx",
databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxxx",
projectId: "xxxxxxxxxxxxxxxxxxxxxxxxx",
storageBucket: "xxxxxxxxxxxxxxxxxxxxxxxxx",
messagingSenderId: "xxxxxxxxxxxxxxxxxxxxxxxxx",
appId: "xxxxxxxxxxxxxxxxxxxxxxxxx"
};
// Initialize Firebase
firebase.initializeApp[firebaseConfig];
const db = firebase.firestore[]
Tiếp theo, chúng tôi cần kết nối ứng dụng của mình với Firebase để có thể lưu trữ dữ liệu của chúng tôi
Để có những thông tin đăng nhập này, bạn sẽ cần tạo một ứng dụng mới trong Bảng điều khiển Firebase. Và sau khi dự án được tạo, hãy nhấp vào biểu tượng mã
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxx",
authDomain: "xxxxxxxxxxxxxxxxxxxxxxxx",
databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxxx",
projectId: "xxxxxxxxxxxxxxxxxxxxxxxxx",
storageBucket: "xxxxxxxxxxxxxxxxxxxxxxxxx",
messagingSenderId: "xxxxxxxxxxxxxxxxxxxxxxxxx",
appId: "xxxxxxxxxxxxxxxxxxxxxxxxx"
};
// Initialize Firebase
firebase.initializeApp[firebaseConfig];
const db = firebase.firestore[]
3 nằm bên cạnh biểu tượng iOS và Android để đăng ký ứng dụng của bạnBây giờ, để tạo thông tin đăng nhập, bạn phải đăng ký tên ứng dụng của mình.
Và cuối cùng, đặt thông tin đăng nhập vào tệp HTML như tôi làm ở đây.
Tiếp theo, sao chép thẻ
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxx",
authDomain: "xxxxxxxxxxxxxxxxxxxxxxxx",
databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxxx",
projectId: "xxxxxxxxxxxxxxxxxxxxxxxxx",
storageBucket: "xxxxxxxxxxxxxxxxxxxxxxxxx",
messagingSenderId: "xxxxxxxxxxxxxxxxxxxxxxxxx",
appId: "xxxxxxxxxxxxxxxxxxxxxxxxx"
};
// Initialize Firebase
firebase.initializeApp[firebaseConfig];
const db = firebase.firestore[]
4 đầu tiên và thay đổi
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxx",
authDomain: "xxxxxxxxxxxxxxxxxxxxxxxx",
databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxxx",
projectId: "xxxxxxxxxxxxxxxxxxxxxxxxx",
storageBucket: "xxxxxxxxxxxxxxxxxxxxxxxxx",
messagingSenderId: "xxxxxxxxxxxxxxxxxxxxxxxxx",
appId: "xxxxxxxxxxxxxxxxxxxxxxxxx"
};
// Initialize Firebase
firebase.initializeApp[firebaseConfig];
const db = firebase.firestore[]
5 thành
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxx",
authDomain: "xxxxxxxxxxxxxxxxxxxxxxxx",
databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxxx",
projectId: "xxxxxxxxxxxxxxxxxxxxxxxxx",
storageBucket: "xxxxxxxxxxxxxxxxxxxxxxxxx",
messagingSenderId: "xxxxxxxxxxxxxxxxxxxxxxxxx",
appId: "xxxxxxxxxxxxxxxxxxxxxxxxx"
};
// Initialize Firebase
firebase.initializeApp[firebaseConfig];
const db = firebase.firestore[]
6 vì chúng tôi sẽ sử dụng Firestore trong dự án nàySau đó, khởi tạo
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxx",
authDomain: "xxxxxxxxxxxxxxxxxxxxxxxx",
databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxxx",
projectId: "xxxxxxxxxxxxxxxxxxxxxxxxx",
storageBucket: "xxxxxxxxxxxxxxxxxxxxxxxxx",
messagingSenderId: "xxxxxxxxxxxxxxxxxxxxxxxxx",
appId: "xxxxxxxxxxxxxxxxxxxxxxxxx"
};
// Initialize Firebase
firebase.initializeApp[firebaseConfig];
const db = firebase.firestore[]
7 với cấu hình và khai báo một biến
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxx",
authDomain: "xxxxxxxxxxxxxxxxxxxxxxxx",
databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxxx",
projectId: "xxxxxxxxxxxxxxxxxxxxxxxxx",
storageBucket: "xxxxxxxxxxxxxxxxxxxxxxxxx",
messagingSenderId: "xxxxxxxxxxxxxxxxxxxxxxxxx",
appId: "xxxxxxxxxxxxxxxxxxxxxxxxx"
};
// Initialize Firebase
firebase.initializeApp[firebaseConfig];
const db = firebase.firestore[]
8 sẽ được sử dụng sau này để tương tác với FirebaseBây giờ, chúng tôi đã đánh dấu và đã liên kết thành công dự án của mình với Firebase. Vì vậy, hãy bắt đầu tạo kiểu cho nó trong phần tiếp theo
tạo kiểu
File CSS hơi dài nên mình sẽ không trình bày hết trong bài viết này. Tôi sẽ chỉ nhấn mạnh những phần quan trọng nhất. Tuy nhiên, đừng lo, bạn sẽ tìm thấy mã nguồn ở cuối bài viết
Như thường lệ, chúng tôi bắt đầu bằng cách nhập phông chữ của mình và thực hiện một số đặt lại để ngăn hành vi mặc định
- Trong
9// Your web app's Firebase configuration var firebaseConfig = { apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxx", authDomain: "xxxxxxxxxxxxxxxxxxxxxxxx", databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxxx", projectId: "xxxxxxxxxxxxxxxxxxxxxxxxx", storageBucket: "xxxxxxxxxxxxxxxxxxxxxxxxx", messagingSenderId: "xxxxxxxxxxxxxxxxxxxxxxxxx", appId: "xxxxxxxxxxxxxxxxxxxxxxxxx" }; // Initialize Firebase firebase.initializeApp[firebaseConfig]; const db = firebase.firestore[]
Eventic
- Home
- Events
- New Event
Events
New Event
Free
Paid
Save
2Tiếp theo, chúng tôi sử dụng Biến CSS để lưu trữ màu sắc của mình và đặt
Eventic
- Home
- Events
- New Event
Events
New Event
Free
Paid
Save
20 thành
Eventic
- Home
- Events
- New Event
Events
New Event
Free
Paid
Save
21 để chúng tôi có hiệu ứng cuộn đẹp mắt khi người dùng nhấp vào liên kết thanh điều hướngTuy nhiên, hãy cẩn thận với
Eventic
- Home
- Events
- New Event
Events
New Event
Free
Paid
Save
20, vì nó không được hỗ trợ bởi tất cả các trình duyệt. Bạn có thể kiểm tra tính tương thích của trình duyệt tại đây- Trong
9// Your web app's Firebase configuration var firebaseConfig = { apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxx", authDomain: "xxxxxxxxxxxxxxxxxxxxxxxx", databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxxx", projectId: "xxxxxxxxxxxxxxxxxxxxxxxxx", storageBucket: "xxxxxxxxxxxxxxxxxxxxxxxxx", messagingSenderId: "xxxxxxxxxxxxxxxxxxxxxxxxx", appId: "xxxxxxxxxxxxxxxxxxxxxxxxx" }; // Initialize Firebase firebase.initializeApp[firebaseConfig]; const db = firebase.firestore[]
Eventic
- Home
- Events
- New Event
Events
New Event
Free
Paid
Save
7Đối với thanh điều hướng, theo mặc định, nền sẽ trong suốt. Để có khả năng sử dụng tốt hơn, nó sẽ thay đổi khi người dùng bắt đầu cuộn
Ứng dụng đặt chỗ sự kiện của chúng tôi đang bắt đầu hình thành. Bây giờ, hãy bắt đầu triển khai Firebase và kết nối ứng dụng của chúng ta với Firestore
HomeEvents
New Event
Free Paid Save- Trong
25Eventic
- Home
- Events
- New Event
Events
New Event
Free Paid Save
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxx",
authDomain: "xxxxxxxxxxxxxxxxxxxxxxxx",
databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxxx",
projectId: "xxxxxxxxxxxxxxxxxxxxxxxxx",
storageBucket: "xxxxxxxxxxxxxxxxxxxxxxxxx",
messagingSenderId: "xxxxxxxxxxxxxxxxxxxxxxxxx",
appId: "xxxxxxxxxxxxxxxxxxxxxxxxx"
};
// Initialize Firebase
firebase.initializeApp[firebaseConfig];
const db = firebase.firestore[]
1Với sự trợ giúp của
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxx",
authDomain: "xxxxxxxxxxxxxxxxxxxxxxxx",
databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxxx",
projectId: "xxxxxxxxxxxxxxxxxxxxxxxxx",
storageBucket: "xxxxxxxxxxxxxxxxxxxxxxxxx",
messagingSenderId: "xxxxxxxxxxxxxxxxxxxxxxxxx",
appId: "xxxxxxxxxxxxxxxxxxxxxxxxx"
};
// Initialize Firebase
firebase.initializeApp[firebaseConfig];
const db = firebase.firestore[]
8, giờ đây chúng tôi có thể truy cập bộ sưu tập của mình
Eventic
- Home
- Events
- New Event
Events
New Event
Free
Paid
Save
28. Đó chỉ là tên của cơ sở dữ liệu của chúng tôi và nếu nó không tồn tại, Firestore sẽ nhanh chóng tạo nó cho chúng tôiĐối tượng bộ sưu tập có một phương thức rất tiện dụng có tên là
Eventic
- Home
- Events
- New Event
Events
New Event
Free
Paid
Save
29. Nó giúp chúng tôi lắng nghe cơ sở dữ liệu trong thời gian thực. Điều này có nghĩa là bất cứ khi nào có thay đổi xảy ra trên nó, nó sẽ phản ứng và trả lại thay đổi theo thời gian thựcHome
Events
New Event
Free Paid SaveBây giờ, để hiển thị các sự kiện trên giao diện người dùng, chúng ta phải gọi các chức năng cần thiết của mình là
Eventic
- Home
- Events
- New Event
Events
New Event
Free
Paid
Save
71 và
Eventic
- Home
- Events
- New Event
Events
New Event
Free
Paid
Save
72. Sau đó, chúng tôi chuyển sự kiện và id cho chúng dưới dạng tham sốBây giờ chúng tôi có thể tìm nạp các sự kiện từ Firestore, nhưng chúng tôi vẫn không có bất kỳ sự kiện nào để hiển thị. Hãy lưu trữ sự kiện đầu tiên của chúng tôi trong cơ sở dữ liệu của chúng tôi
Tạo một sự kiện
Để lấy các giá trị do người dùng nhập vào, trước tiên chúng ta phải chọn thẻ
Eventic
- Home
- Events
- New Event
Events
New Event
Free
Paid
Save
73 và sử dụng thẻ này để chọn id của từng đầu vào và lấy giá trị đã nhập- Trong
25Eventic
- Home
- Events
- New Event
Events
New Event
Free Paid Save
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxx",
authDomain: "xxxxxxxxxxxxxxxxxxxxxxxx",
databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxxx",
projectId: "xxxxxxxxxxxxxxxxxxxxxxxxx",
storageBucket: "xxxxxxxxxxxxxxxxxxxxxxxxx",
messagingSenderId: "xxxxxxxxxxxxxxxxxxxxxxxxx",
appId: "xxxxxxxxxxxxxxxxxxxxxxxxx"
};
// Initialize Firebase
firebase.initializeApp[firebaseConfig];
const db = firebase.firestore[]
0Biến
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxx",
authDomain: "xxxxxxxxxxxxxxxxxxxxxxxx",
databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxxx",
projectId: "xxxxxxxxxxxxxxxxxxxxxxxxx",
storageBucket: "xxxxxxxxxxxxxxxxxxxxxxxxx",
messagingSenderId: "xxxxxxxxxxxxxxxxxxxxxxxxx",
appId: "xxxxxxxxxxxxxxxxxxxxxxxxx"
};
// Initialize Firebase
firebase.initializeApp[firebaseConfig];
const db = firebase.firestore[]
8 [hãy nhớ rằng nó là tham chiếu đến
Eventic
- Home
- Events
- New Event
Events
New Event
Free
Paid
Save
76] có một phương pháp khác để lưu dữ liệu vào Firestore. chức năng
Eventic
- Home
- Events
- New Event
Events
New Event
Free
Paid
Save
77. Đó là một lời hứa và sau khi hoàn thành, giờ đây chúng ta có thể đặt lại các giá trị của biểu mẫu và hiển thị thông báo thành công cho người dùngBây giờ, hãy tiếp tục và xử lý trường hợp khi người dùng muốn đặt sự kiện
Đặt một sự kiện
Như tôi đã nói trước đó, chúng tôi không thể kiểm tra xem người dùng có được xác thực hay không, vì vậy họ có thể đăng ký sự kiện nhiều lần
Vì vậy, để xử lý việc này, tôi sẽ sử dụng
Eventic
- Home
- Events
- New Event
Events
New Event
Free
Paid
Save
78 để tránh trùng lặp đặt phòng- Trong
25Eventic
- Home
- Events
- New Event
Events
New Event
Free Paid Save
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxx",
authDomain: "xxxxxxxxxxxxxxxxxxxxxxxx",
databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxxx",
projectId: "xxxxxxxxxxxxxxxxxxxxxxxxx",
storageBucket: "xxxxxxxxxxxxxxxxxxxxxxxxx",
messagingSenderId: "xxxxxxxxxxxxxxxxxxxxxxxxx",
appId: "xxxxxxxxxxxxxxxxxxxxxxxxx"
};
// Initialize Firebase
firebase.initializeApp[firebaseConfig];
const db = firebase.firestore[]
6Và như bạn có thể thấy ở đây, trước tiên chúng tôi kiểm tra xem id sự kiện có được lưu trữ trong localStorage hay không. Nếu đúng như vậy, người dùng không thể đặt lại cùng một sự kiện. Nếu không, họ sẽ có thể đặt sự kiện
Và để cập nhật quầy đặt phòng, chúng ta sử dụng lại
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxx",
authDomain: "xxxxxxxxxxxxxxxxxxxxxxxx",
databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxxx",
projectId: "xxxxxxxxxxxxxxxxxxxxxxxxx",
storageBucket: "xxxxxxxxxxxxxxxxxxxxxxxxx",
messagingSenderId: "xxxxxxxxxxxxxxxxxxxxxxxxx",
appId: "xxxxxxxxxxxxxxxxxxxxxxxxx"
};
// Initialize Firebase
firebase.initializeApp[firebaseConfig];
const db = firebase.firestore[]
8 để cập nhật sự kiện trên FirestoreTệp
Eventic
- Home
- Events
- New Event
Events
New Event
Free
Paid
Save
25 hiện đã hoàn tất, Vì vậy, hãy chuyển sang phần cuối cùng và kết nối dự án của chúng ta với
Eventic
- Home
- Events
- New Event
Events
New Event
Free
Paid
Save
25Hiển thị và cập nhật dữ liệu bằng JavaScript
Như thường lệ, chúng tôi bắt đầu bằng cách chọn các yếu tố cần thiết
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxx",
authDomain: "xxxxxxxxxxxxxxxxxxxxxxxx",
databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxxx",
projectId: "xxxxxxxxxxxxxxxxxxxxxxxxx",
storageBucket: "xxxxxxxxxxxxxxxxxxxxxxxxx",
messagingSenderId: "xxxxxxxxxxxxxxxxxxxxxxxxx",
appId: "xxxxxxxxxxxxxxxxxxxxxxxxx"
};
// Initialize Firebase
firebase.initializeApp[firebaseConfig];
const db = firebase.firestore[]
0Trước đó trong bài viết này, chúng tôi đã chuyển dưới dạng tham số cho hàm
Eventic
- Home
- Events
- New Event
Events
New Event
Free
Paid
Save
72, sự kiện được tìm nạp từ Firestore trong tệp
Eventic
- Home
- Events
- New Event
Events
New Event
Free
Paid
Save
25Bây giờ chúng ta có thể kéo các giá trị được giữ trên đối tượng sự kiện và hiển thị nó. Và, khi người dùng click vào nút đặt sự kiện, chúng ta sẽ gọi hàm
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxx",
authDomain: "xxxxxxxxxxxxxxxxxxxxxxxx",
databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxxx",
projectId: "xxxxxxxxxxxxxxxxxxxxxxxxx",
storageBucket: "xxxxxxxxxxxxxxxxxxxxxxxxx",
messagingSenderId: "xxxxxxxxxxxxxxxxxxxxxxxxx",
appId: "xxxxxxxxxxxxxxxxxxxxxxxxx"
};
// Initialize Firebase
firebase.initializeApp[firebaseConfig];
const db = firebase.firestore[]
15 để xử lý
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxx",
authDomain: "xxxxxxxxxxxxxxxxxxxxxxxx",
databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxxx",
projectId: "xxxxxxxxxxxxxxxxxxxxxxxxx",
storageBucket: "xxxxxxxxxxxxxxxxxxxxxxxxx",
messagingSenderId: "xxxxxxxxxxxxxxxxxxxxxxxxx",
appId: "xxxxxxxxxxxxxxxxxxxxxxxxx"
};
// Initialize Firebase
firebase.initializeApp[firebaseConfig];
const db = firebase.firestore[]
4Như bạn có thể thấy, phương thức của
Eventic
- Home
- Events
- New Event
Events
New Event
Free
Paid
Save
71 khá giống với
Eventic
- Home
- Events
- New Event
Events
New Event
Free
Paid
Save
72, chỉ khác ở phần tử dùng để hiển thị sự kiệnVà, khi mô tả hơi dài, chúng tôi sử dụng
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxx",
authDomain: "xxxxxxxxxxxxxxxxxxxxxxxx",
databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxxx",
projectId: "xxxxxxxxxxxxxxxxxxxxxxxxx",
storageBucket: "xxxxxxxxxxxxxxxxxxxxxxxxx",
messagingSenderId: "xxxxxxxxxxxxxxxxxxxxxxxxx",
appId: "xxxxxxxxxxxxxxxxxxxxxxxxx"
};
// Initialize Firebase
firebase.initializeApp[firebaseConfig];
const db = firebase.firestore[]
18 để cắt bớt giá trịTiếp theo, chúng tôi lắng nghe phần tử
Eventic
- Home
- Events
- New Event
Events
New Event
Free
Paid
Save
73 để xử lý sự kiện gửi và lưu trữ nó vào Firestore với
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxx",
authDomain: "xxxxxxxxxxxxxxxxxxxxxxxx",
databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxxx",
projectId: "xxxxxxxxxxxxxxxxxxxxxxxxx",
storageBucket: "xxxxxxxxxxxxxxxxxxxxxxxxx",
messagingSenderId: "xxxxxxxxxxxxxxxxxxxxxxxxx",
appId: "xxxxxxxxxxxxxxxxxxxxxxxxx"
};
// Initialize Firebase
firebase.initializeApp[firebaseConfig];
const db = firebase.firestore[]
00Và để làm cho mọi thứ trông đẹp mắt, khi người dùng cuộn, chúng tôi thêm màu nền và bóng hộp vào thanh điều hướng
Với sự thay đổi đó, giờ đây chúng tôi đã có Ứng dụng đặt lịch sự kiện bằng JavaScript và Firebase
cảm ơn đã đọc bài viết này
Bạn có thể kiểm tra trực tiếp tại đây hoặc tìm Mã nguồn tại đây
Đọc thêm các bài viết trên blog của tôi - Đăng ký nhận bản tin của tôi - Theo dõi tôi trên twitter
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
Người đam mê JavaScript, nhà phát triển Full-stack & blogger
Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn
Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu