Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. NativeScript
Code

Viết một Ứng dụng NativeScript Theo thời gian thực: Đăng nhập Thông qua Mạng Xã hội và Firebase

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Code a Real-Time NativeScript App.
Code a Real-Time NativeScript App: SQLite
Code a Real-Time App With NativeScript: Push Notifications

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

NativeScript là một framework dùng để xây dựng các ứng dụng di động đa nền tảng bằng XML, CSS và JavaScript. Trong loạt bài này, chúng ta đang thử nghiệm một số tính năng tuyệt vời mà bạn có thể thực hiện với một ứng dụng NativeScript: định vị địa lý và tích hợp Google Maps, cơ sở dữ liệu SQLite, tích hợp Firebase và thông báo đẩy. Cùng với đó, chúng ta đang xây dựng một ứng dụng theo dõi tập luyện thể thao với các khả năng theo thời gian thực sẽ sử dụng từng tính năng này.

Trong hướng dẫn này, bạn sẽ học cách cài đặt đăng nhập thông qua Facebook trong ứng dụng NativeScript. Bạn cũng sẽ học cách sử dụng Firebase để lưu trữ dữ liệu những phiên đi bộ trong ứng dụng.

Kết quả sau cùng

Tiếp tục từ hướng dẫn trước, bây giờ hãy thêm nội dung cho tab Social. Mặc định, một nút để đăng nhập với Facebook được hiển thị như sau:

not logged in

Khi người dùng đăng nhập lần đầu tiên, ứng dụng Facebook yêu cầu quyền truy cập vào hồ sơ công khai và địa chỉ email:

Facebook permissions

Nó cũng yêu cầu danh sách bạn bè như là một quyền bổ sung.

Một khi người dùng đã đăng nhập, màn hình sau đây sẽ được hiển thị:

Social tab

Đây là nơi thông tin về người dùng đã đăng nhập hiện tại và bảng thành tích cho các phiên đi bộ được hiển thị. Lưu ý rằng chỉ có phiên đi bộ gần đây nhất được ghi lại.

Thiết lập Dự án

Nếu bạn đã theo dõi bài viết trước trong loạt bài này, về SQLite, bạn có thể sử dụng cùng một dự án và xây dựng các tính năng mà chúng ta sẽ thêm vào trong hướng dẫn này. Nếu không, bạn có thể tạo một dự án mới và sao chép các tập tin khởi đầu vào thư mục app của dự án.

Sau đó, bạn cũng sẽ cần phải cài đặt các plugin định vị địa lý, Google Maps và SQLite:

Một khi đã cài đặt xong, bạn cần thiết lập cấu hình plugin Google Maps. Bạn có thể đọc hướng dẫn hoàn chỉnh về cách thực hiện việc này bằng cách đọc phần về Cài đặt Plugin Google Maps trong hướng dẫn trước.

Sau đó, bạn cũng cần phải cài đặt fecha, một thư viện để định dạng ngày tháng:

Một khi tất cả những điều đó đã được hoàn tất, bạn có thể tiếp tục thực hiện theo hướng dẫn này.

Chạy Dự án

Bạn có thể chạy dự án bằng cách thực thi lệnh tns run android. Nhưng vì ứng dụng này sẽ sử dụng chức năng định vị địa lý, nên tôi khuyên bạn nên sử dụng một GPS Emulator để nhanh chóng cài đặt và thay đổi vị trí của bạn. Bạn có thể tìm hiểu về cách thực hiện điều đó trong phần Chạy Ứng dụng từ hướng dẫn trước đó.

Thiết lập một Ứng dụng Firebase

Điều đầu tiên bạn cần làm khi làm việc với Firebase là tạo một ứng dụng Firebase. Bạn có thể làm điều đó bằng cách vào console.firebase.com và nhấp chuột vào Add project. Nhập tên của dự án và nhấp vào nút Create project. Đảm bảo là tên của dự án giống với tên của ứng dụng. Trong trường hợp này, ID của ứng dụng là com.yourname.fitApp, vì vậy tên của ứng dụng là fitApp.

create Firebase project

Một khi ứng dụng đã được tạo, bạn sẽ được chuyển đến trang điều khiển của ứng dụng. Từ đó bạn có thể nhấp vào Add Firebase to your Android app, nhập ID của ứng dụng và nhấp vào nút Register App.

Add Firebase to Android app

Tiếp theo, tải về tập tin google-services.json và sao chép nó vào thư mục app/App_Resources/android. Tập tin đó chứa tất cả cài đặt cần thiết cho ứng dụng để giao tiếp với Firebase.

Bước tiếp theo được liệt kê trong bảng điều khiển Firebase là bao gồm Firebase SDK. Nhưng điều đó đã được thực hiện trong plugin, vì vậy chúng ta không cần phải làm việc đó nữa.

Thiết lập một Ứng dụng Facebook

Vì chúng ta sẽ đăng nhập thông qua Facebook, nên chúng ta cũng cần phải tạo một ứng dụng Facebook. Truy cập developers.facebook.com và tạo một ứng dụng Facebook mới:

Create Facebook app

Một khi ứng dụng đã được tạo, bạn sẽ được chuyển đến bảng điều khiển ứng dụng. Từ đó, nhấp vào menu + Add Product và chọn Facebook Login.

Trong phần Client OAuth Settings, kích hoạt tất cả mọi thứ ngoại trừ Force Web OAuth Reauthentication và Login from Devices. Đối với Valid OAuth redirect URIs, bạn có thể lấy cái đó bằng cách quay lại bảng điều khiển Firebase, nhấp vào Authentication và kích hoạt Facebook như là một phương thức xác thực:

Authentication methods

Trước khi có thể kích hoạt nó, bạn phải nhập ID và khóa bí mật của ứng dụng Facebook. Bạn có thể lấy cái đó từ bảng điều khiển ứng dụng Facebook mà bạn đã tạo ra trước đó.

Một khi điều đó đã được hoàn tất, nhấp vào Save và sao chép OAuth redirect URI qua cài đặt ứng dụng Facebook. Đừng quên lưu lại các thay đổi.

Tiếp theo, bạn cũng cần thiết lập Android làm nền tảng. Bạn có thể làm điều đó bằng cách đi đến cài đặt Basic và nhấp vào Add Platform:

Android settings

Thiết lập com.yourname.fitApp làm giá trị cho Google Play Package Name và com.tns.NativeScriptActivity cho Class Name.

Lưu ý rằng, nếu bạn có ý định phát hành ứng dụng lên cửa hàng ứng dụng sau này, bạn sẽ cần phải tạo ra một mã băm cho tập tin .apk của ứng dụng và thêm nó vào trong trường key hashes. Cũng cần lưu ý rằng đối với thử nghiệm, bạn sẽ chỉ có thể sử dụng tài khoản nhà phát triển Facebook mà bạn đã sử dụng để tạo ứng dụng. Nếu bạn muốn thêm những tài khoản Facebook khác để thử nghiệm, bạn có thể thêm chúng trong phần oles.

Cài đặt Plugin Firebase

Để tích hợp Firebase, chúng ta cần phải cài đặt plugin Firebase cho NativeScript. Việc này giúp dễ dàng cài đặt việc đăng nhập thông qua Facebook và tính năng cơ sở dữ liệu theo thời gian thực trong Firebase:

Một khi nó đã được cài đặt xong, trình cài đặt sẽ hỏi bạn một vài câu hỏi về các tính năng Firebase mà bạn sẽ sử dụng trong ứng dụng. Trả lời yes cho Facebook login và no cho những phần còn lại.

Cấu hình Tích hợp Facebook

Bạn cần cho phép ứng dụng biết ứng dụng Facebook nào mà nó sẽ giao tiếp. Bạn có thể làm điều đó bằng cách mở tập tin app\App_Resources\Android\AndroidManifest.xml và thêm <meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/facebook_app_id"/> bên dưới thẻ <application>:

Tiếp theo, tạo một tập tin app\App_Resources\Android\values​​\facebooklogin.xml và thêm code sau đây:

Đảm bảo là bạn thay thế YOUR_FACEBOOK_APP_ID bằng app ID của ứng dụng Facebook mà bạn đã tạo ra trước đó.

Khắc phục Lỗi khi Build

Nếu bạn gặp phải những lỗi khi build sau khi cài đặt plugin, hãy tham khảo phần Các sự cố được biết đến trên Android trong tập tin README của repo. Nếu vấn đề cụ thể của bạn không có ở đó, hãy thử tìm hiểu thông qua trang sự cố.

Đối với tôi, vấn đề chính mà tôi gặp phải là vấn đề về khả năng tương thích với plugin Google Maps. Vì plugin đó cũng sử dụng Google Play Services, nên đã có một sự xung đột với các phiên bản khác nhau đang được sử dụng. Để giải quyết vấn đề đó, tôi phải mở tập tin app/App_Resources/Android/app.gradle và chỉ định phiên bản Google Play Services để sử dụng:

Khi viết bài hướng dẫn này, nó đang ở phiên bản 11.0. Nhưng hãy chắc chắn kiểm tra phiên bản hiện được cài đặt cho bạn thông qua Android SDK.

Một khi điều đó đã được thực hiện xong, bạn phải gỡ cài đặt nền tảng android (tns platform remove android) và thử chạy lại ứng dụng (tns run android).

Nếu điều đó không giải quyết được vấn đề của bạn và bạn vẫn gặp phải lỗi về build, bạn có thể cần phải bắt đầu lại từ đầu bằng cách tạo một dự án mới. Nhưng lần này, hãy thử cài đặt plugin Firebase trước plugin Google Maps. Sau đó thực hiện các thay đổi cấu hình cần thiết trước khi chạy ứng dụng.

Thêm Code

Bây giờ chúng ta đã sẵn sàng để thêm code. Đầu tiên, chúng ta sẽ thêm XML, sau đó là JavaScript, và cuối cùng là CSS.

Thêm Markup cho UI

Chúng ta sẽ làm việc chủ yếu bên trong tab social. Trước tiên, thêm markup để hiển thị thông tin cho người dùng hiện đã đăng nhập cũng như một nút để đăng xuất:

Dưới đây là markup để hiển thị bảng thành tích. Việc này lặp qua friends_data để hiển thị tên người dùng, khoảng cách và số bước đi được bởi những người bạn của người dùng cũng như người dùng.

Nếu hiện chưa có người dùng nào đăng nhập, chúng ta sẽ hiển thị nút đăng nhập bằng Facebook:

Import Thư viện

Mở tập tin main-view-model.js và thêm code dưới đây vào bên dưới code để import thư viện fecha:

Chúng ta đang sử dụng nativescript-plugin-firebase để giao tiếp với Firebase, http để tạo các yêu cầu HTTP tới Graph API của Facebook và application-settings để lưu trữ dữ liệu đăng nhập của người dùng.

Khởi tạo Firebase

Tiếp theo, hãy khởi tạo Firebase bằng hàm init(). Hàm này nhận một đối tượng chứa các tùy chọn cho các tính năng khác nhau được hỗ trợ bởi Firebase (ví dụ, xác thực, cơ sở dữ liệu thời gian thực, cloud message).

Bên dưới đây, chúng ta thêm tùy chọn persist, giúp cho Firebase lưu dữ liệu cục bộ để ứng dụng vẫn có thể sử dụng được trong khi offline. Sau đó, chúng ta sẽ thêm listener để khi trạng thái xác thực thay đổi (khi người dùng đăng nhập hoặc đăng xuất khỏi ứng dụng).

Đăng nhập Người dùng

Tiếp theo, thêm code để thực thi khi người dùng nhấn vào nút đăng nhập vào Facebook. Code này sử dụng hàm login, nhận một đối tượng có chứa typefacebookOptions.

type là phương thức xác thực được sử dụng để đăng nhập. Trong trường hợp này, đó là Facebook. facebookOptions là một đối tượng có chứa một mảng có tên là scope. Các phần tử của mảng này là các quyền truy cập mà bạn muốn ứng dụng yêu cầu từ người dùng.

Một khi người dùng đã đăng nhập và đồng ý với tất cả các quyền truy cập đang được yêu cầu, thì promise sẽ phân giải và thực thi hàm đầu tiên được tryền vào then(). Các chi tiết về người dùng Facebook được truyền như một đối số cho hàm này, nhưng thứ duy nhất mà chúng ta cần là access token. Chúng ta có thể sử dụng nó sau này để tạo các yêu cầu đến Graph API của Facebook để lấy thêm thông tin.

Tiếp theo, chúng ta sẽ đưa ra một truy vấn đến cơ sở dữ liệu Firebase để kiểm tra xem người dùng có tồn tại hay không. Đối với điều này, chúng ta sử dụng phương thức query(). Hàm này nhận vào hàm để thực thi khi một phản hồi được trả về như là đối số đầu tiên. Đối số thứ hai là đường dẫn mà trong đó truy vấn được thực thi, và thứ ba chính là truy vấn.

Nếu người dùng đã tồn tại, thì query() sẽ trả về dữ liệu của người dùng. Sau đó chúng ta lưu dữ liệu cục bộ bằng cách sử dụng các cài đặt ứng dụng. Chúng ta sẽ cần truy cập vào dữ liệu này sau đó khi mà chúng ta lắng nghe các thay đổi trạng thái xác thực và khi chúng ta cập nhật phiên đi bộ gần đây nhất của người dùng trên Firebase.

Tạo Người dùng Mới

Bây giờ hãy thêm code dùng để lưu dữ liệu cho một người dùng mới. Bắt đầu bằng cách tạo đối tượng chứa dữ liệu người dùng. Sau đó tạo một yêu cầu đến Graph API của Facebook để lấy ID của người dùng Facebook (chỉ có hiệu lực đối với ứng dụng cụ thể này).

Sau đó, chúng ta sẽ sử dụng ID này để kiểm tra xem một người dùng Firebase cụ thể có là bạn của người dùng hiện tại hay không. Firebase không trả về ID này khi bạn đăng nhập, đó là lý do tại sao chúng ta cần tạo một yêu cầu riêng.

Một khi phản hồi được trả về, chúng ta sẽ sử dụng phương thức push() của Firebase để lưu dữ liệu của người dùng trong đường dẫn /users. Hàm này trả về khóa đóng vai trò như là ID cho người dùng cụ thể này. Chúng ta sẽ sử dụng nó sau này để cập nhật phiên đi bộ gần đây nhất của người dùng. Đó là lý do tại sao chúng ta cũng cần lưu nó cục bộ cùng với dữ liệu của người dùng và access token của Facebook.

Bây giờ thì chúng ta đã thêm code cho việc đăng nhập người dùng, bước tiếp theo là quay trở lại cuộc gọi đến hàm firebase.init() và thêm onAuthStateChanged. Hàm này sẽ được thực thi mỗi khi trạng thái xác thực thay đổi (khi người dùng đăng nhập hoặc đăng xuất). Nếu người dùng đăng nhập, chúng ta cần cập nhật UI để hiển thị người dùng hiện tại.

Lưu ý rằng, chúng ta đang bao gói nó bên trong setTimeout() với độ trễ 5 giây bởi vì phải mất vài giây sau khi đăng nhập để dữ liệu người dùng (khoá người dùng Firebase, người dùng Firebase và Facebook Access Token) sẵn sàng.

Tiếp theo, chúng ta thêm code để lấy về bạn bè của người dùng. Graph API trả về ID và tên cho mỗi người bạn của người dùng, nhưng chúng ta chỉ cần các ID. Chúng ta cũng cần đến ID cho người dùng hiện tại vì chúng ta cũng sẽ hiển thị nó trên bảng thành tích.

Hiển thị Bảng thành tích

Tiếp theo, thêm code để lắng nghe những thay đổi trong cơ sở dữ liệu. Cho đến lúc này, chúng ta vẫn chưa thật sự cài đặt phần "thời gian thực" của ứng dụng này. Đây là lúc chúng ta thêm nó.

Đối với phần này, chúng ta sử dụng phương thức addValueEventListener(). Phương thức này nhận vào hàm mà bạn muốn thực thi khi một sự thay đổi được thực hiện cho đường dẫn mà bạn chỉ định như là một đối số thứ hai. Toàn bộ giá trị (result) được truyền vào như một đối số cho hàm này.

Không có chức năng nào để chỉ định một truy vấn để chỉ lọc kết quả theo các ID cụ thể. Do đó, sử dụng mảng ID bạn bè (friends_ids), chúng ta lặp qua result và kiểm tra xem dòng hiện tại là người dùng hiện tại hay bạn bè của họ. Chỉ khi đó, chúng ta mới đẩy giá trị cho dòng hiện tại. Từ đó, chúng ta chỉ cần sắp xếp và định dạng dữ liệu để hiển thị trên giao diện người dùng.

Cập nhật Phiên đi bộ Gần đây nhất

Khi người dùng dừng theo dõi vị trí hiện tại của họ, chúng ta cập nhật distance (khoảng cách) và steps (số bước) của người dùng trên Firebase:

Đăng xuất Người dùng

Tiếp theo, thêm code để đăng xuất người dùng. Việc này thiết lập lại giao diện người dùng về trạng thái mà người dùng chưa đăng nhập và nó cũng xóa dữ liệu cục bộ.

Thêm phong cách

Cuối cùng, hãy mở tập tin app/app.css và thêm code dưới đây vào bên dưới code hiện có:

Tóm tắt

Vậy đấy! Trong hướng dẫn này bạn đã học được cách tích hợp tính năng đăng nhập bằng Facebook và Firebase vào một ứng dụng NativeScript. Như bạn có thể để ý thấy trong tài liệu hướng dẫn cho plugin Firebase của NativeScript, bạn thật sự có thể làm được nhiều việc hơn với plugin này. Trên thực tế, chúng ta sẽ sử dụng tính năng Cloud Message của nó để cài đặt tính năng cuối cùng cho ứng dụng này: Thông báo đẩy. Vì vậy hãy chú ý theo dõi nhé!

Và trong lúc chờ đợi, hãy tham khảo một số bài viết khác của chúng tôi về NativeScript và các ứng dụng di động đa nền tảng!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.