Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. React Native
Code

Khởi đầu với một mẫu ứng dụng React Native

by
Difficulty:BeginnerLength:LongLanguages:

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

Thiết kế một ứng dụng React Native từ đầu thường là một quá trình rườm rà—đặc biệt là phần thiết kế, bởi vì bạn phải lên kế hoạch cho cả thiết bị Android và iOS. Không chỉ vậy, mà bạn cũng cần phải đảm bảo rằng ứng dụng của bạn trông đẹp trên những kích cỡ màn hình khác nhau.

Đây chính là nơi các mẫu template thật sự có ích. Chúng giúp giải quyết vấn đề thiết kế ban đầu cho bạn để cho ứng dụng của bạn trông đẹp, giảm thiểu công sức bạn bỏ ra để thiết kế. Hiện có một số mẫu template tại CodeCanyon, một chợ chuyên bán các mẫu template và plugin. Ở đó, bạn có thể tìm thấy các loại mẫu template khác nhau hướng đến các loại ứng dụng cụ thể mà bạn muốn xây dựng.

Trong hướng dẫn này, chúng ta sẽ xem xét cách làm thế nào để sử dụng mẫu BeoStore. Tên của nó đã nói lên tất cả, BeoStore là một mẫu ứng dụng thương mại điện tử dựa trên React Native.

Tải về mẫu template từ Market

Bạn có thể tải về mẫu template bằng cách vào trang sản phẩm của BeoStore tại CodeCanyon. Nó là một mẫu có phí, nhưng nó đáng để đầu tư, bởi vì nó có hầu hết các tính năng cần thiết trong một ứng dụng thương mại điện tử. Tất cả những gì bạn cần làm là cấu hình mẫu template và tùy chỉnh nó theo ý thích của bạn. Để có được một cái nhìn về những gì mà nó cung cấp cho bạn, hãy xem qua một số các tính năng nổi bật:

  • Tích hợp đầy đủ với WooCommerce: nếu bạn đang chạy một trang web WooCommerce, ứng dụng có thể hiển thị các sản phẩm tương tự mà bạn có trên trang web hiện tại của bạn.
  • Hỗ trợ cho cả iOS và Android: ứng dụng chạy và có giao diện đẹp trên nền tảng Android và iOS.
  • Đăng nhập mạng xã hội: khách hàng có thể đăng nhập bằng tài khoản Facebook hoặc Google của họ.
  • Tuỳ biến dễ dàng: tất cả mọi thứ được chia nhỏ thành các thành phần. Điều này đảm bảo rằng bạn có thể dễ dàng tuỳ biến mẫu template dựa trên thương hiệu của bạn.
  • Thông báo đẩy: điều này tự động thông báo khách hàng của bạn khi có một cập nhật cho tình trạng của đơn hàng mà họ đặt. Bạn cũng có thể gửi các thông báo đẩy cho các chương trình khuyến mãi sản phẩm. Các thông báo đẩy được thực hiện với Firebase.
  • Hỗ trợ đa ngôn ngữ: mặc định tiếng Anh là ngôn ngữ chính. Tiếng Việt sẵn có như là một lựa chọn thứ hai, nhưng bạn cũng có thể thêm ngôn ngữ của bạn.
  • Tích hợp cổng thanh toán bảo mật: thanh toán được thực hiện với PayPal.

Nếu bạn vẫn chưa có một tài khoản Envato, bạn có thể đăng ký ở đây. Sau khi đăng ký xong, hãy đăng nhập vào tài khoản mà bạn mới được tạo ra. Sau đó, bạn có thể quay trở lại trang BeoStore và nhấp vào nút Buy Now.

Thiết lập dự án

Một khi bạn đã mua mẫu template, bạn sẽ nhận được một liên kết tải về tập tin nén của template. Giải nén nó và bạn sẽ nhận được một thư mục CodeCanyon chứa MStore 2.2.

MStore 2.2 là thư mục dự án cho mẫu template. Hãy vào và mở một cửa sổ Terminal mới bên trong thư mục đó và thực hiện lệnh sau đây:

Điều này sẽ cài đặt tất cả các phụ thuộc của dự án. Việc này có thể mất một lúc tùy thuộc vào tốc độ tải về của bạn, bởi vì nó có để tải về rất nhiều phụ thuộc. Hãy nhìn vào package.json nếu bạn muốn xem các gói mà nó cần phải tải về.

Khi đã xong, thêm một bước nữa nếu bạn muốn xây dựng ứng dụng cho các thiết bị iOS. Tìm đến thư mục iOS và thực thi lệnh sau đây:

Tiếp theo, đối với Android, kết nối điện thoại di động với máy tính của bạn và chạy:

Việc này sẽ liệt kê tất cả các thiết bị Android đang được kết nối với máy tính của bạn. Nếu đây là lần đầu tiên bạn kết nối thiết bị, bạn sẽ nhận được một lời nhắc yêu cầu bạn có muốn cho phép máy tính gỡ lỗi USB hay không. Chỉ cần chạm vào yes khi bạn nhận được dấu nhắc đó.

Bây giờ bạn có thể chạy ứng dụng trên thiết bị Android của bạn:

Đối với iOS:

Nếu bạn không gặp phải bất kỳ lỗi nào, bạn sẽ được chào đón với trang sau:

MStore Template Home page

Để cung cấp cho bạn một cái nhìn về các trang khác nhau sẵn có trong mẫu template, dưới đây là một vài ảnh chụp màn hình:

MStore Template Cart
MStore Template Checkout
MStore Template Login
MStore Template Product Page

Khắc phục sự cố thiết lập dự án

Trong phần này, tôi đã soạn một danh sách các lỗi phổ biến trong việc thiết lập dự án và giải pháp cho chúng.

Máy chủ phát triển không chạy

Nếu như máy chủ phát triển không tự động chạy khi bạn thực thi react-native run-android hoặc react-native run-ios, thì bạn có thể chạy nó thủ công bằng cách thực thi lệnh:

Tác vụ Watch tải quá lâu

Nếu bạn gặp lỗi tương tự như sau:

Điều này là bởi vì một đối tượng Watchman hiện đang chạy. Đây là một thành phần của máy chủ phát triển React Native. Bạn có thể giải quyết lỗi này và tắt Watchman bằng cách thực hiện các lệnh sau đây:

Không thể chạy ADB Reverse

Nếu bạn bị lỗi sau:

Nó có nghĩa là thiết bị Android của bạn đang chạy trên một phiên bản thấp hơn 5.0 (Lollipop). Đây không thực sự là một lỗi. Nó chỉ có nghĩa là thiết bị Android của bạn không hỗ trợ adb reverse, được sử dụng để kết nối máy chủ phát triển với thiết bị của bạn thông qua USB debugging. Nếu điều này không có sẵn, React Native trở lại gỡ lỗi bằng cách sử dụng Wi-Fi. Bạn có thể tìm hiểu thêm về nó ở đây: Chạy ứng dụng trên thiết bị.

Những thứ khác có thể làm cho quá trình build của bạn thất bại. Bạn có thể cuộn Terminal lên trên để xem nếu có bất kỳ lỗi nào xảy ra trước đó.

Không thể tìm thấy biến _fbBatchedBridge

Nếu bạn nhận được lỗi sau và server phát triển đang chạy trong chế độ Wi-Fi, điều này có nghĩa rằng bạn đã không thiết lập IP máy tính trong thiết bị Android của bạn. (Điều này thường chỉ xuất hiện với các thiết bị Android dưới phiên bản 5.0.)

Bạn có thể chạy lệnh sau để hiển thị các tùy chọn nhà phát triển React Native trên thiết bị của bạn:

Chọn Dev Settings từ menu hiện lên. Trong phần Debugging, chạm vào Debug server host & port for device. Nhập IP cục bộ được chỉ định bởi router của bạn cùng với cổng mà máy chủ phát triển đang chạy và nhấn OK:

Trở về màn hình chính của ứng dụng và chạy adb shell input keyevent 82 lần nữa. Lần này chọn Reload để nạp lại ứng dụng.

Không thể tìm thấy Firebase, App Compat, hoặc GMS Play Services

Nếu bạn nhận được lỗi "could not find", điều này có nghĩa là bạn chưa cài đặt gói tương ứng sử dụng Android SDK Manager.

Dưới đây là các gói cần phải được cài đặt:

  • Android Support Repository
  • Android Support Library
  • Google Play Services
  • Google Repository

Đảm bảo rằng bạn cũng cập nhật các gói hiện có nếu có một bản cập nhật mới.

Các vấn đề khác

Nếu vấn đề của bạn không liên quan gì đến những lỗi ở trên, bạn có thể thử những thứ sau đây:

  • Đọc tài liệu khắc phục sự cố.
  • Xem bình luận về template. Bạn có thể tìm kiếm các lỗi mà bạn đang gặp phải. Cố gắng tổng hợp và rút ngắn thông báo lỗi—đừng chỉ tìm kiếm toàn bộ thông lỗi. Nếu bạn không tìm thấy lỗi, bạn có thể thử hỏi câu hỏi của bạn trong bình luận. Nhóm hỗ trợ thường sẽ sớm đưa ra câu trả lời.
  • Hãy thử tìm kiếm lỗi trên Google. Ngay cả khi các kết quả mà bạn tìm thấy không liên quan gì đến việc sử dụng template, thì chúng cũng sẽ cấp cho bạn một ý tưởng về cách làm thế nào để giải quyết vấn đề.
  • Tìm kiếm trên StackOverflow hoặc đặt một câu hỏi mới. Đảm bảo rằng bạn bao gồm tất cả các chi tiết cần thiết (ví dụ: thông báo lỗi, các bước bạn đã thực hiện). Có một bài viết khá hay về cách đặt câu hỏi trên StackOverflow.

Tùy biến mẫu template

Một nơi tốt để bắt đầu tìm hiểu cách làm các thứ trong mẫu template là tài liệu hướng dẫn của nó:

  • Bố cục dự án: chỉ ra nơi để tìm các tập tin khác nhau trong mẫu template và chúng đang sử dụng vào việc gì.
  • Di chuyển WooCommerce: chỉ ra cách bạn có thể di trú trang web WooCommerce hiện tại của bạn thành ứng dụng. Chuyển trang web WooCommerce của bạn thành ứng dụng có nghĩa là nó sẽ có thể lấy tất cả các loại và các sản phẩm trong cửa hàng WooCommerce hiện tại của bạn.
  • Di chuyển các dịch vụ: chỉ ra cách làm thế nào để cấu hình tên ứng dụng, Firebase (cho thông báo đẩy) và đăng nhập mạng xã hội.
  • Tuỳ biến: tuỳ biến theme và ngôn ngữ.

Hãy chắc chắn xem qua những cái đó! Tôi sẽ không lặp lại những gì đã được đề cập trong tài liệu hướng dẫn. Thay vào đó, những gì chúng ta sẽ làm trong phần này là thật sự tuỳ biến mẫu template để nó trông giống như cách mà chúng ta muốn.

Hầu hết các cài đặt cấu hình dự án được lưu trữ bên trong tập tin app/Constants.js. Dưới đây là một vài ví dụ về những thứ mà bạn có thể thay đổi từ tập tin này:

Tích hợp WooCommerce: URL của trang web cửa hàng WooCommerce được sử dụng bởi ứng dụng. Theo mặc định, nó sử dụng mstore.io.

Đăng nhập mạng xã hội: điều này được cài đặt bằng cách sử dụng Auth0, một nền tảng xác thực. Mặc định, template chỉ hỗ trợ đăng nhập Google và Facebook. Nhưng bạn có thể thêm bất kỳ dịch vụ nào mà Auth0 hỗ trợ.

Biểu tượng: Bạn có thể sử dụng bất kỳ biểu tượng nào từ Fontawesome, nhưng bạn nên thêm tiền tố vào tên với ios-.

Theme: Màu sắc cho các thành phần khác nhau tạo nên mỗi trang cũng có thể được cập nhật. Ví dụ, nếu bạn muốn thay đổi màu nền của tiêu đề, bạn có thể cập nhật các giá trị cho TopBar:

Hình ảnh: Màn hình khởi động và các hình ảnh khác cũng có thể được cập nhật bằng cách chỉ định một đường dẫn mới đến mỗi cái trong số những cái sau:

Những hình ảnh này được lưu trữ trong thư mục app/images, bạn có thể chỉ cần thay thế chúng nếu bạn không muốn giữ lại những hình ảnh cũ.

  • Bạn cũng có thể thay đổi tùy chọn PayPal từ tập tin này. Hãy chắc chắn tạo Tài khoản Nhà phát triển PayPal của riêng bạn để có được clientIDsecretKey. Đừng quên cập nhật sandBoxMode thành false khi bạn triển khai ứng dụng của bạn, vì mặc định nó sử dụng chế độ sandbox do đó không có tiền thật được chi cho các giao dịch.
  • Để tùy biến từng trang riêng biệt, bạn cần phải đi vào thư mục app/container. Đây là nơi bạn sẽ tìm thấy các tập tin cho mỗi trang. Ví dụ, nếu bạn muốn tuỳ biến trang chủ, hãy chuyển đến thư mục home và mở tập tin index.js. Khi mở ra, bạn sẽ thấy rằng trang sử dụng các thành phần <ImageCard> để hiển thị mỗi loại sản phẩm. Vì vậy, nếu bạn muốn thêm một phong cách chung cho thành phần <ImageCard>, thì bạn phải cập nhật tập tin app/Components/ImageCard/index.js. Nếu không, bạn chỉ cần cập nhật các phong cách trong trang riêng của nó:

Kết luận

Hướng dẫn này không ngoài mục đích hướng dẫn toàn diện về cách sử dụng mẫu template BeoStore. Nhưng chúng tôi đã khái quát khá nhiều thứ, đặc biệt là trên thiết lập khắc phục sự cố, những gì mà tài liệu chính thức còn thiếu.

Bước tiếp theo là chuyển trang web WooCommerce của bạn sang ứng dụng hoặc thậm chí thay đổi mục đích sử dụng của nó để nó có thể được sử dụng cho các loại ứng dụng khác.

Hãy tải về mẫu template ngay hôm nay, hoặc nếu bạn muốn tìm hiểu thêm về nó, bạn có thể xem qua tài liệu hướng dẫn tại đây. Bạn cũng có thể tìm thấy nhiều mẫu template React Native trên CodeCanyon.

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.