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

Các công cụ dùng cho phát triển React Native

by
Length:LongLanguages:

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

Các công cụ, thư viện và dịch vụ là những phần quan trọng trong cuộc sống của mỗi nhà phát triển, bất kể bạn đang phát triển cho môi trường nào. Và React Native cũng không ngoại lệ. Trong bài viết này, tôi sẽ đưa bạn đi qua một số framework UI, thư viện, component, công cụ phát triển, và dịch vụ web tốt nhất để bạn trở thành một nhà phát triển React Native hạnh phúc và hiệu quả hơn.

Trình biên tập văn bản và IDE

Visual Studio Code là một trình biên tập văn bản hỗ trợ sẵn intelliSense, debugging (tìm kiếm lỗi) và tích hợp Git. Điều làm nó thực sự tốt cho việc phát triển React Native là các công cụ mở rộng cho React Native. Điều này cho phép bạn xử lý các lệnh React Native từ bảng lệnh, bổ sung IntelliSense cho React Native APIs và gỡ lỗi bên trong chính trình biên tập.

Để biết thêm thông tin về cách thiết lập Visual Studio Code cho React Native, hãy xem bài viết trên blog này: VSCode cho React Native.

Nếu bạn đang dùng Atom, bạn có thể cài đặt plugin Nuclide. Plugin này đặc biệt được xây dựng để làm việc với các dự án React Native, Flow và Hack. Atom có cơ chế gỡ lỗi dựng sẵn và trình kiểm tra phần tử với tất cả các tính năng bạn đã sử dụng trong Chrome Developer Tools. Flow support nghĩa là bạn có tính năng autocomplete (tự hoàn thành), type-hinting và code diagnostics (chẩn đoán vấn đề cho code).

Nếu bạn muốn khám phá thêm các chọn lựa cho IDE và trình biên tập, hãy xem bài viết trên blog này Top 10 Editors for React Native.

Công cụ phát triển

Các công cụ phát triển có phạm vi khá rộng, do đó tôi sẽ nhóm từng công cụ dựa những trọng tâm của nó:

  • SDK
  • code quality (chất lượng code)
  • testing (kiểm thử)
  • debugging (gỡ lỗi)

SDK

Khi nói đến SDK cho React Native, Expo là vô đối. Expo cho phép bạn dễ dàng tạo prototype (hình mẫu) cho ứng dụng mà không cần Android Studio hoặc Xcode. Nó gồm một tập hợp component và thư viện để giúp bạn tăng tốc độ phát triển.

Quy trình Expo gồm những điều sau đây:

  1. Tạo một dự án mới với create-react-native-app.
  2. Viết code trong trình biên tập ưa thích của bạn.
  3. Chạy ứng dụng bằng ứng dụng máy khách Expo.

Không cần kết nối điện thoại với máy tính của bạn. Chỉ cần quét mã QR trên thiết bị đầu cuối của bạn bằng ứng dụng máy khách Expo và nó sẽ tự động chạy ứng dụng của bạn. Nếu bạn đang sử dụng Genymotion, Expo cũng có hỗ trợ.

Khuyết điểm duy nhất khi sử dụng Expo là bạn không thể kèm bất kỳ package tùy biến nào để sử dụng chức năng nguyên bản của thiết bị. Expo đã kèm theo một số native package thông dụng như Camera, Facebook và Map. Nhưng nếu bạn cần sử dụng một package chưa được họ hỗ trợ, thì bạn sẽ phải "bỏ" ứng dụng của mình. Tại thời điểm này, ứng dụng của bạn như kiểu được tạo ra bằng react-native-init, và bạn sẽ mất khả năng vận hành nó với ứng dụng máy khách Expo.

Chất lượng code

Việc kiểm tra chất lượng code rất quan trọng, và đó la lý do những công cụ như ESLint tồn tại. Ngắn gọn thì một công cụ linting cho phép code của bạn nhất quán hơn thông qua việc kiểm tra với một style guide (hướng dẫn về kiểu). Ví dụ về style guide là JavaScript Style Guide của Airbnb, hướng dẫn này xác định các quy tắc về cách viết JavaScript như thế nào. Công cụ linting kiểm tra code của bạn có phù hợp với những quy tắc. Cũng có một style guide cho các dự án React.

Nếu bạn đang sử dụng Sublime Text, đây là một hướng dẫn hay để cấu hình nó để bạn có thể nhận những phản hồi theo thời gian thực về chất lượng code trong khi bạn đang lập trình. Sublime Linting for React and ES6. Nếu bạn đang sử dụng trình biên tập hoặc IDE khác, hãy đảm bảo tìm thấy một plugin tương ứng sử dụng ESLint.

Nếu bạn muốn bổ sung static typing (kiểu tĩnh) vào dự án, bạn có thể sử dụng Flow. Flow cho biết bổ sung thêm static-typing trên đầu trang của JavaScript mà không cần phải thực hiện bất kỳ thay đổi nào đối với codebase hiện tại của bạn. Điều này là do Flow cố gắng hiểu type (kiểu) mọi lúc mọi nơi. Tuy nhiên, đối với các dự án mới, bạn nên chỉ định type rõ ràng để tận dụng toàn bộ lợi ích khi sử dụng Flow.

Để bắt đầu sử dụng Flow, đây là hướng dẫn cho cách bạn có thể thiết lập Flow cho các dự án React Native.

Thử nghiệm

Enzyme là một tiện ích cho mục đích testing của React, cho phép bạn xác nhận, xử lý, và nghiên cứu kỹ các output component của bạn. Nó cung cấp các phương thức như shallow() để hiển thị component của bạn, find() để duyệt qua các component đã hiển thị, và expect() để xác nhận props hoặc nội dung đã hiển thị bên trong component.

Bạn có thể tuân theo hướng dẫn Using enzyme to Test Components in React Native để giúp ứng dụng React Native của bạn có thể kiểm tra bằng enzyme. Nếu bạn chưa biết về enzyme, bạn có thể đọc hướng dẫn này Testing React Components with Enzyme and Mocha.

Debugging (gỡ lỗi)

Reactotron là ứng dụng dành cho máy tính để bàn cho phép bạn gỡ lỗi cho ứng dụng React và React Native. Một số tính năng chính gồm inspecting (kiểm tra), modifying (sửa đổi) và đăng ký trạng thái ứng dụng, theo dõi các yêu cầu HTTP được thực hiện thông qua ứng dụng, đánh giá hiệu suất ứng dụng và truy nguyên các lỗi. Nếu bạn đang sử dụng Redux, bạn thậm chí có thể gửi các hành động và theo dõi các sagas từ bên trong Reactotron.

Boilerplates và UI Frameworks

Snowflake là một boilerplate (bản mẫu) cho phát triển full-stack của React Native. Gồm có tất cả mọi thứ từ front-end đến back-end của ứng dụng. Vì vậy, nếu bạn chỉ muốn một công cụ nhanh chóng giúp bạn bạn đầu thì Snowflake hữu ích đấy. Bạn có thể đọc các ghi chú để biết thêm thông tin về những package và công cụ thường được dùng để cấu trúc nên Snowflake.

Ngoài ra, bạn có thể dùng Ignite. Đó là một công cụ dòng lệnh, gồm cả boilerplate, generateor (trình tạo nội dung), style guide (hướng dẫn tạo kiểu) cho các UI component, công cụ kiểm tra API và nhiều nữa.

React Native đã có sẵn UI component mà bạn có thể sử dụng cho tương tác của người dùng. Vấn đề là chúng chỉ có kiểu cơ bản tối thiểu để phân biệt mỗi component (ví dụ: nút, hộp kiểm). Nếu bạn muốn thêm kiểu tùy chỉnh, bạn phải viết mã CSS của riêng mình.

Đây là lúc NativeBase xuất hiện. Ứng dụng này cho phép ứng dụng của bạn có giao diện thực sự giống với nguyên bản bằng cách triển khai cùng một thiết kế được sử dụng trong các ứng dụng Android nguyên gốc (Material Design) và iOS (hướng dẫn xây dựng giao diện cho người sử dụng). Bạn sẽ có được các thành phần tùy chỉnh như Floating Action Buttons, Spinners và tốt nhất là các Form component (thành phần biểu mẫu).

Thư viện và component

React Native sở hữu một cộng đồng khổng lồ ở phía sau nó, vì vậy có rất nhiều thư viện và component cho bạn sử dụng. Ta có thể dành cả ngày để nói về điều này, vậy ngắn gọn tôi sẽ tập trung vào các lĩnh vực sau:

  • navigation (điều hướng)
  • state management (quản lý trạng thái)
  • animations (hoạt hình)
  • những thư viện và component thường được sử dụng

Điều hướng

React Navigation cho phép bạn dễ dàng thực hiện điều hướng trong ứng dụng React Native thông qua việc sử dụng các trình điều hướng tích hợp sẵn như Stack Navigator, Tab Navigator và Drawer Navigator. Đó không phải là tất cả: ngoài điều hướng trong ứng dụng, cũng bao gồm deep linking (liên kết sâu), tích hợp Redux và tích hợp web. React Navigation thực sự là một thư viện mạnh để thực hiện điều hướng.

Quản lý trạng thái

MobX đề xuất chức năng cập nhật và quản lý trạng thái ứng dụng được React sử dụng. Điều khiến MobX trở thành ứng viên tuyệt vời cho phần quản lý trạng thái trong React là sự đơn giản và khả năng kiểm tra của nó. MobX cũng cần thời gian ngắn để học hiểu, vì vậy những thứ như các hàm async và các giá trị tính toán đã được xử lý ngầm.

Đối với các ứng dụng lớn và phức tạp hơn, Redux vẫn được khuyến khích sử dụng. Do MobX rất tự do, không giống như Redux có các quy tắc nghiêm ngặt về việc quản lý trạng thái. Vì vậy nó là một chọn lựa sáng suốt hơn cho dự án lớn có nhiều tham gia.

Hoạt hình

React Native đã có sẵn API hoạt hình. Thực tế, có đến 2 API đảm trách về hoạt hình: Animated API và LayoutAnimation. Cả hai đều rất mạnh mẹ nhưng có thể cồng kềnh, đặc biệt nếu bạn chỉ muốn áp những diễn hoạt cơ bản như di chuyển một đối tượng lên và xuống hoặc làm nó tung lên cao. Trong những trường hợp đó, component như Animatable sẽ trở nên hữu ích.

Các thư viện và component thường sử dụng

Đây là danh sách các component và thư viện thường được sử dụng trong các dự án React Native. Chúng tương thích với cả thiết bị Android và iOS:

  • styled-components: cho phép bạn viết code CSS để tạo kiểu cho các React component.
  • react-native-calendar: dùng hiển thị lịch cho người dùng tương tác.
  • react-native-datepicker: dùng để chọn ngày và giờ.
  • react-native-progress: dùng để tạo progress bar (thanh tiến độ) và spinner (các vòng xoay).
  • react-native-spinkit: bộ sưu tập những dấu hiệu đang tải trang.
  • Vector Icons: cho phép bạn dùng các icon bạn yêu thích từ nguồn font icon như Font Awesome và Material Icons.
  • react-native-swiper: chuyển bộ sưu tập các hình ảnh và container thành swiping component.
  • react-native-scrollable-tab-view: điều hướng kiểu tab cho phép bạn vút qua.
  • react-native-lightbox: để xem hình ảnh ở những cửa sổ toàn màn hình.
  • react-native-maps: cho phép tích hợp Google Maps vào ứng dụng của bạn. Không phải tất cả các tính năng có sẵn trong API Google Maps đều có sẵn, nhưng chức năng mà nó cung cấp phải đủ dùng trong đa số các trường hợp.
  • SGListView: một triển khai thân thiện với bộ nhớ của component dựng sẵn ListView của React Native. Nếu bạn cần hiển thị danh sách cực lớn trong ứng dụng của mình, hãy sử dụng SGListView thay cho ListView.
  • Formik: giúp bạn làm việc với các form trong React Native đỡ vất vả hơn. Cho phép bạn nhận các giá trị in và out khỏi form state, xác nhận các form của bạn và xử lý các submission của chúng.
  • react-native-i18n: để triển khai quốc tế hóa trong ứng dụng của bạn.
  • react-native-push-notification: triển khai gửi thông báo cục bộ và từ xa.
  • InstantSearch: bộ sưu tập các component cho triển khai tìm kiếm.
  • react-native-fs: cho phép truy xuất filesytem nguyên bản của thiết bị.
  • react-native-camera: một camera component cho phép bạn chụp ảnh và quay phim từ ứng dụng cua bạn.
  • react-native-video: dùng để phát video từ filesystem hoặc từ một URL.
  • react-native-sqlite-storage: để lưu và xử lý dữ liệu từ một database SQLite.
  • react-native-store: lưu trữ kiểu khoá-giá trị dựa theo AsyncStorage.
  • react-native-webrtc: dùng để triển khai WebRTC.

Các dịch vụ web

Bạn có thể xây dựng các ứng dụng không cần máy chủ và dễ dàng triển khai các ứng dụng React Native thông qua sử dụng các dịch vụ web. Có rất nhiều dịch vụ web trên mạng, nhưng tôi sẽ tập trung vào các lĩnh vực sau:

  • database (cơ sở dữ liệu)
  • analytics (phân tích)
  • push notifications (hiển thị thông báo)
  • code updates (cập nhật code)
  • continuous integration

Database

Realm là một database theo thời gian thực tập trung vào các ứng dụng dành cho thiết bị di động. Gồm các tính năng như đồng bộ hóa dữ liệu hai chiều, khả năng offline-first (hoạt động không cần internet) và data push (gửi dữ liệu đi). Realm Mobile Database là mã nguồn mở và đa nền tảng, nghĩa là bạn có thể lưu trữ Realm Object Server trên máy chủ riêng của bạn và sau đó sử dụng thư viện Realm JavaScript miễn phí.

Không phải tất cả các tính năng đều xuất hiện trong phiên bản cho nhà phát triển, nhưng đa số trường hợp sử dụng, bạn chỉ nên sử dụng phiên bản này vì nó gồm có các tính năng chính như Object Database (cở sở dữ liệu đối tượng), Realtime Synchronization (đồng bộ thời gian thực) và Authentication (xác thực). Đây là bản so sánh của mỗi phiên bản: Real Products and Pricing (sản phẩm và giá của Realm).

Nếu Realm vượt quá nhu cầu của bạn, bạn có thể dùng AsyncStorage API do React Native cung cấp.

Phân tích

Frabic là dịch vụ tất cả trong một cho phép bạn, trong số những thứ khác, bổ sung phân tích vào ứng dụng của bạn. Các câu trả lời cung cấp cho bạn số liệu thống kê theo thời gian thực về cách mà ứng dụng của bạn đang được sử dụng. Gồm số lượng người dùng đang hoạt động, độ dài của phiên và tỷ lệ người dùng nán lại. Ngoài ra còn có Crashlytics, cung cấp cho bạn khả năng báo cáo sự cố mạnh mẽ. Tất cả xảy ra theo thời gian thực và bạn có thể xem nó trong bảng điều khiển thời gian thực của Fabric. Bạn có thể sử dụng thư viện Fabric để dễ dàng thiết lập Fabric cho ứng dụng React Native của bạn.

Nếu bạn muốn gắn bó với một giải pháp đã được thử và kiểm tra như Google Analytics, cũng có một thư viện giúp bạn làm điều đó.

Gửi các thông báo

Không thực sự cạnh tranh khi nói đến việc triển khai push notification (gửi các thông báo) trong ứng dụng. Firebase Cloud Messaging (trước đây được gọi là Google Cloud Messaging) cho phép bạn push notification đến cả ứng dụng Android và iOS. Bạn có thể sử dụng package react-native-fcm package để giao tiếp với FCM từ ứng dụng của bạn.

Cập nhật code

CodePush cho phép bạn triển khai các bản cập nhật code cho ứng dụng di động theo kiểu trực tiếp đến thiết bị của người dùng. CodePush hoạt động như một repo trung tâm nơi bạn có thể triển khai các thay đổi cho HTML, CSS, JavaScript và các nội dung như hình ảnh. Code tương ứng của CodePush trong ứng dụng sẽ cập nhật những thay đổi này. Thất tốt để gửi các bản sửa lỗi cho ứng dụng mà không cần upload ứng dụng lên cửa hàng ứng dụng (app store) và đợi người dùng cập nhật ứng dụng. Bạn có thể sử dụng package này để lấy các bản cập nhật từ CodePush trong ứng dụng React Native của bạn.

Continuous Integration (tích hợp liên tục)

Bitrise là Continuos Delivery Service để phát triển ứng dụng di động. Nó cho phép bạn chạy thử nghiệm, xây dựng ứng dụng và tự động cập nhật lên thiết bị của người dùng mỗi khi bạn triển khai code của mình.

Bitrise tích hợp với một loạt các dịch vụ qua mỗi bước của quy trình phát triển của bạn. Ví dụ, khi bạn push code đến release branch của bạn trên GitHub, thông qua webhook Bitrise sẽ được thông báo về việc push này. Sau đó nó sẽ bắt đầu chạy test (thử nghiệm). Một khi vượt qua test, quá trình build bắt đầu. Nếu nó chỉ là một "soft release" (như thay đổi code JavaScript) thì thay đổi có thể được cập nhật đến người dùng bằng CodePush. Nhưng nếu có thay đổi đối với mã nguồn gốc (ví dụ: bạn đã thêm plugin máy ảnh), thì Bitrise cũng có thể tạo tệp APK hoặc IPA và triển khai nó lên Google Play hoặc iTunes Connect.

Fastlane là tập hợp các công cụ giúp tự động hóa quá trình xây dựng và phát hành cho các ứng dụng Android và iOS. Đối với iOS, Fastlane xử lý các tác vụ như chạy thử nghiệm, tạo ảnh chụp màn hình, code signing và phát hành ứng dụng tới cửa hàng ứng dụng. Fastlane cũng có các công cụ thử nghiệm beta như Pilot và Boarding. Pillot cho phép bạn tải ứng dụng lên iTunes Connect và quản lý thử nghiệm beta TestFlight ngay từ dòng lệnh. Boarding tạo trang đăng ký cho người thử nghiệm beta của TestFlight.

Các công cụ này hướng đến việc triển khai iOS, nhưng bạn cũng có thể hưởng lợi nếu bạn đang triển khai các ứng dụng Android. Hiện tại, chỉ có hai công cụ có sẵn để triển khai Android: Supply và Screengrab.

Supply cho phép bạn tự động upload các nội dung như biểu tượng ứng dụng, đồ họa quảng cáo và ảnh chụp màn hình của ứng dụng của bạn. Nó cũng cho phép bạn cập nhật các ứng dụng hiện có của mình trên Google Play Store.

Mặt khác, Screengrab tự động hóa việc tạo ra các ảnh chụp màn hình cho nhiều thiết bị. Mỗi ảnh chụp màn hình cũng có thể được bản địa hóa nếu ứng dụng của bạn hỗ trợ đa ngôn ngữ.

Tổng kết

Thế đấy! Trong bài viết này, bạn đã tìm hiểu về một số công cụ, thư viện và dịch vụ mà bạn có thể sử dụng khi phát triển các ứng dụng React Native. Thế còn bạn? Công cụ truy cập của bạn là gì khi phát triển ứng dụng trong React Native?

Và khi bạn vẫn ở đây, hãy xem qua một số bài viết khác của chúng tôi về phát triển ứng dụng React Native.

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.