Multiplatform Mobile App Development - Phát triển ứng dụng di động đa nền tảng
Ôn luyện MMA301 – Phát triển ứng dụng di động đa nền tảng với React Native: ngân hàng câu hỏi trắc nghiệm có giải thích chi tiết, luyện thi cuối kỳ hiệu quả. Nội dung bao quát React Native, Expo, component & navigation, styling Flexbox, quản lý state bằng hooks/Redux/Context API, FlatList/SectionList, thông báo đẩy, lưu trữ AsyncStorage/SQLite/Firebase, tích hợp Gemini AI và xuất bản ứng dụng iOS/Android. Môn 3 tín chỉ tại FPT University, tiên quyết FER202.
React Native có một số rủi ro và hạn chế. Đầu tiên, nó có thể gặp phải vấn đề về bảo mật (Low security). Điều này là do React Native sử dụng các thư viện và công nghệ mở, có thể chứa các lỗ hổng bảo mật. Thứ hai, thời gian khởi động (Long initialization time) của ứng dụng React Native có thể lâu hơn so với các ứng dụng native. Điều này là do ứng dụng React Native cần thời gian để tải và khởi động các thư viện và module cần thiết. Cuối cùng, React Native có thể gặp phải hạn chế về truy cập vào các tính năng của thiết bị (Limited access to device features). Điều này là do React Native sử dụng các thư viện và công nghệ mở, có thể không hỗ trợ tất cả các tính năng của thiết bị.
A'HomeScreen is focused' initially, followed by 'HomeScreen is not focused'
B'HomeScreen is focused' only
C'HomeScreen is not focused' only
D'HomeScreen is not focused' initially, followed by 'HomeScreen is focused'
Lời giải
Khi sử dụng hook `useIsFocused`, chúng ta có thể kiểm tra xem một thành phần có đang được tập trung hay không. Trong ví dụ này, chúng ta có một thành phần `HomeScreen` và muốn biết khi nào thành phần này được tập trung và khi nào không. Nếu thành phần được tập trung ban đầu và sau đó mất tập trung, thì log sẽ ghi lại hai dòng: 'HomeScreen is focused' (thành phần HomeScreen đang được tập trung) và 'HomeScreen is not focused' (thành phần HomeScreen không còn được tập trung). Điều này cho phép chúng ta theo dõi trạng thái tập trung của thành phần trong suốt quá trình chạy ứng dụng.
Trước khi thực hiện quá trình rendering, khi có thay đổi trong props hoặc state của một thành phần, phương pháp được sử dụng là shouldComponentUpdate(). Phương pháp này giúp kiểm tra xem thành phần có cần được cập nhật hay không. Nếu thành phần không cần được cập nhật, quá trình rendering sẽ được bỏ qua, giúp tăng hiệu suất cho ứng dụng. Trong trường hợp này, phương pháp shouldComponentUpdate() được sử dụng để kiểm tra và quyết định xem thành phần có cần được cập nhật hay không.
CCreating separate style modules for different components
DUsing CSS-in-JS libraries
Lời giải
Để đảm bảo tính mở rộng và duy trì trong một dự án React Native, bạn nên sử dụng phương pháp tổ chức kiểu (style) một cách hiệu quả. Phương pháp này bao gồm việc tạo các mô-đun kiểu riêng biệt cho từng thành phần. Điều này giúp giảm thiểu sự trùng lặp và tăng tính tái sử dụng của mã nguồn. Ngoài ra, việc sử dụng các mô-đun kiểu riêng biệt cũng giúp dễ dàng cập nhật và duy trì kiểu cho từng thành phần mà không ảnh hưởng đến các thành phần khác. Điều này giúp dự án trở nên linh hoạt và dễ dàng duy trì.
BEnhancing user experience with location-based services
CIncreasing battery consumption significantly
DOffering turn-by-turn navigation
Lời giải
Khi đánh giá lợi ích của việc sử dụng địa điểm trong ứng dụng di động, chúng ta cần xem xét các lợi ích và hạn chế của nó. Địa điểm có thể cung cấp thông tin vị trí thực thời gian, giúp người dùng có trải nghiệm tốt hơn với các dịch vụ dựa trên vị trí. Ngoài ra, địa điểm cũng có thể cung cấp hướng dẫn đường đi chi tiết, giúp người dùng dễ dàng di chuyển. Tuy nhiên, một trong những hạn chế của địa điểm là nó có thể làm tăng tiêu thụ pin đáng kể, điều này có thể ảnh hưởng đến hiệu suất của thiết bị. Vì vậy, trong các lựa chọn trên, tăng tiêu thụ pin đáng kể là một hạn chế, không phải là một lợi ích.
Geolocation API sử dụng các phương pháp khác nhau để xác định vị trí người dùng. Trong số các phương pháp này, có GPS, Wi-Fi và địa chỉ IP. Tuy nhiên, Bluetooth không phải là phương pháp được sử dụng bởi Geolocation API để xác định vị trí người dùng. Điều này là vì Bluetooth chủ yếu được sử dụng cho việc truyền dữ liệu giữa các thiết bị gần nhau, và không phải là phương pháp chính xác để xác định vị trí địa lý. Vì vậy, phương pháp không được sử dụng bởi Geolocation API để xác định vị trí người dùng là Bluetooth.
Khi sử dụng API vị trí địa lý, có hai phương thức chính để lấy vị trí hiện tại: watchPosition và getCurrentPosition. Phương thức watchPosition được sử dụng để theo dõi vị trí thay đổi liên tục, trong khi getCurrentPosition chỉ cung cấp một lần cập nhật vị trí. Điều này có nghĩa là nếu bạn sử dụng watchPosition, ứng dụng của bạn sẽ liên tục cập nhật vị trí của thiết bị, ngay cả khi vị trí không thay đổi. Ngược lại, nếu bạn sử dụng getCurrentPosition, ứng dụng của bạn sẽ chỉ cập nhật vị trí một lần và không theo dõi vị trí thay đổi sau đó. Vì vậy, câu trả lời đúng là watchPosition liên tục theo dõi vị trí thay đổi.
Chọn đáp án đúng cho câu hỏi này bằng cách hiểu về các thuộc tính mà ImagePicker trong React Native cung cấp. ImagePicker là một thành phần quan trọng trong React Native, giúp người dùng chọn và tải ảnh lên ứng dụng. Để quản lý thành phần này, ImagePicker cung cấp một số thuộc tính quan trọng. Trong số các lựa chọn trên, "Media Type" và "Quality" là hai thuộc tính chính mà ImagePicker cung cấp. "Media Type" cho phép người dùng chọn loại phương tiện muốn chọn (ví dụ: ảnh, video,...), trong khi "Quality" cho phép người dùng chọn chất lượng ảnh muốn tải lên. Các thuộc tính khác như "Font Size", "Quality" không liên quan trực tiếp đến việc quản lý ImagePicker. Vì vậy, đáp án đúng cho câu hỏi này là "Media Type" và "Quality".
Để đánh dấu một phương thức có thể được gọi từ JavaScript trong các mô-đun bản địa Android, bạn cần sử dụng một annotation đặc biệt. Trong Android, annotation '@ReactMethod' được sử dụng để chỉ định một phương thức có thể được gọi từ JavaScript. Điều này cho phép bạn tạo ra các chức năng được gọi từ JavaScript mà không cần phải viết mã JavaScript. Annotation '@ReactMethod' được sử dụng trong các mô-đun bản địa Android để tạo ra các chức năng có thể được gọi từ JavaScript, giúp tăng cường khả năng tương tác giữa JavaScript và mã bản địa.
RCTBridge là một lớp quan trọng trong các mô-đun bản địa iOS. Lớp này có mục đích chính là để kết nối giữa mã JavaScript và mã bản địa. Nó cho phép JavaScript gọi các phương thức của mã bản địa và ngược lại. Điều này giúp cho các nhà phát triển có thể xây dựng các ứng dụng di động đa nền tảng với sự hỗ trợ của cả JavaScript và các ngôn ngữ bản địa như Objective-C hoặc Swift. RCTBridge sử dụng các kỹ thuật như giao tiếp giữa các lớp và các hàm callback để thực hiện việc kết nối này. Nó cũng cung cấp các phương thức để quản lý và cập nhật các kết nối này.
ATo access native platform APIs not available in JavaScript
BTo write CSS styles
CTo manage text alignment
DTo handle basic UI components
Lời giải
Các mô-đun bản địa được sử dụng trong React Native để truy cập các API nền tảng bản địa không có sẵn trong JavaScript. Điều này cho phép các ứng dụng React Native tương tác với các tính năng và dịch vụ của nền tảng di động, chẳng hạn như camera, GPS, và các tính năng khác. Các mô-đun bản địa cũng giúp tăng cường hiệu suất và giảm thiểu thời gian tải trang. Ngoài ra, chúng cũng cho phép các nhà phát triển sử dụng các thư viện và công cụ bản địa để xây dựng các thành phần UI và chức năng phức tạp. Tóm lại, các mô-đun bản địa là một phần quan trọng của React Native, giúp tạo ra các ứng dụng di động đa nền tảng và mạnh mẽ.
Trong Flexbox, thuộc tính flexShrink được sử dụng để xác định xem các thành phần con có thể co lại để phù hợp với kích thước của container hay không. Nếu flexShrink được đặt thành 0, các thành phần con sẽ không thể co lại và sẽ giữ nguyên kích thước ban đầu của chúng. Điều này có nghĩa là các thành phần con sẽ không thể giảm kích thước để phù hợp với kích thước của container, dẫn đến việc chúng không thể được chứa hoàn toàn trong container.
Để cài đặt Expo CLI toàn cầu, bạn cần sử dụng lệnh npm install -g expo-cli. Lệnh này cho phép bạn cài đặt Expo CLI trên toàn hệ thống, không chỉ trong dự án hiện tại. Điều này giúp bạn có thể sử dụng các công cụ và tính năng của Expo CLI ở bất kỳ đâu trên máy tính. Khi bạn cài đặt Expo CLI toàn cầu, bạn có thể sử dụng nó để tạo, xây dựng và chạy các dự án Expo mới mà không cần phải cài đặt lại Expo CLI cho từng dự án riêng lẻ. Ngoài ra, việc cài đặt Expo CLI toàn cầu cũng giúp bạn có thể sử dụng các công cụ khác của Expo, như Expo Go, để phát triển và thử nghiệm các ứng dụng di động.
AChild elements will be arranged from bottom to top in the container.
BIf there is wrapping (when child elements overflow the container and need to wrap to the next line), the next line will start from the left at the bottom of the container.
CThe main axis is from left to right.
Dcolumn-reverse is equivalent to row-reverse but vertically.
Lời giải
Trong React Native, flexDirection: 'column-reverse' có nghĩa là các yếu tố con sẽ được sắp xếp từ dưới lên trên trong container. Điều này có nghĩa là các yếu tố con sẽ được sắp xếp theo chiều ngược lại so với flexDirection: 'column' mặc định. Ngoài ra, 'column-reverse' cũng tương đương với 'row-reverse' nhưng theo chiều dọc. Điều này có nghĩa là nếu có wrapping (khi các yếu tố con vượt quá kích thước container và cần phải lật sang dòng tiếp theo), dòng tiếp theo sẽ bắt đầu từ trái sang phải tại phần dưới của container. Vì vậy, câu trả lời đúng là: 'Child elements will be arranged from bottom to top in the container.' và 'column-reverse is equivalent to row-reverse but vertically.'
BTo handle touch interactions with visual feedback
CTo display images
DTo create lists
Lời giải
Trong React Native, <TouchableHighlight> là một thành phần quan trọng giúp xử lý tương tác chạm (touch) trên màn hình. Nó cung cấp phản hồi thị giác khi người dùng chạm vào một phần tử trên màn hình. Ví dụ, khi bạn chạm vào một nút, <TouchableHighlight> sẽ tạo ra một hiệu ứng bóng mờ xung quanh nút đó, giúp người dùng biết rằng nút đó đang được nhấn. Điều này giúp cải thiện trải nghiệm người dùng và làm cho ứng dụng trở nên thân thiện hơn.
AThe content of the drawer (navigation drawer) is displayed using the renderNavigationView prop, which accepts a function to render the drawer content.
BThe main content of the application is placed in the navigationView prop instead of being a direct child component of DrawerLayoutAndroid.
CThe drawer is a component that is always displayed by default on the screen.
DThe position where the drawer appears (e.g., from the left or right side of the screen) is determined by the drawerPosition prop.
Lời giải
DrawerLayoutAndroid là một thành phần trong React Native giúp tạo giao diện drawer cho ứng dụng. Để hiển thị nội dung của drawer, bạn cần sử dụng prop renderNavigationView, đây là một hàm có thể được sử dụng để render nội dung của drawer. Vị trí xuất hiện của drawer (ví dụ từ bên trái hoặc bên phải màn hình) được xác định bởi prop drawerPosition. Điều này cho phép bạn dễ dàng tùy chỉnh vị trí của drawer dựa trên nhu cầu của ứng dụng. Ngoài ra, nội dung chính của ứng dụng được đặt trong navigationView prop thay vì là một thành phần con trực tiếp của DrawerLayoutAndroid. Điều này giúp bạn dễ dàng quản lý và tùy chỉnh nội dung của ứng dụng.
Trong FlatList của React Native, có một số cách để render mỗi mục trong danh sách. Tuy nhiên, có một prop được sử dụng phổ biến nhất để thực hiện việc này. Prop đó là renderItem. Nó được sử dụng để chỉ định một hàm sẽ được gọi để render mỗi mục trong danh sách. Hàm này sẽ nhận vào một đối tượng có chứa thông tin của mỗi mục và sẽ trả về một thành phần sẽ được render. Ví dụ, bạn có thể sử dụng renderItem để render một danh sách các item có chứa tên, ảnh và thông tin khác nhau. Ngoài ra, bạn cũng có thể sử dụng renderItem để render một danh sách các item có chứa các thành phần khác nhau như text, hình ảnh, nút bấm, v.v. Tóm lại, renderItem là một prop quan trọng trong FlatList và được sử dụng để render mỗi mục trong danh sách.
Trong React Native, có nhiều cách để thiết kế văn bản. Tuy nhiên, cách hiệu quả nhất là sử dụng styled components. Styled components cho phép bạn tạo ra các thành phần có thiết kế riêng biệt và tái sử dụng chúng trong ứng dụng của mình. Điều này giúp giảm thiểu mã nguồn và tăng cường tính linh hoạt khi thiết kế. Ngoài ra, styled components cũng hỗ trợ tính năng tự động cập nhật khi thiết kế thay đổi, giúp bạn tiết kiệm thời gian và công sức. So với việc sử dụng inline styles, styled components cung cấp một cách tiếp cận linh hoạt và hiệu quả hơn. Vì vậy, nếu bạn đang tìm kiếm một cách thức thiết kế văn bản hiệu quả cho ứng dụng React Native của mình, hãy xem xét việc sử dụng styled components.
ABy directly assigning a value to it in the constructor.
BBy using the "set" accessor of the property.
CBy calling a specific method provided by the property.
DBy using the "readonly" keyword before the property declaration.
Lời giải
Để gán giá trị cho một thuộc tính init-only, bạn có thể thực hiện theo các cách sau. Trước hết, bạn có thể gán giá trị trực tiếp cho thuộc tính trong constructor. Điều này có nghĩa là bạn sẽ gán giá trị cho thuộc tính ngay khi tạo đối tượng. Ví dụ:
Lời giải
class Person {constructor(public name: string){}}
let person = new Person('John');
Trong trường hợp này, thuộc tính 'name' đã được gán giá trị 'John' ngay khi tạo đối tượng. Ngoài ra, bạn cũng có thể sử dụng các phương thức khác nhau để gán giá trị cho thuộc tính init-only, nhưng cách này là phổ biến nhất và được sử dụng rộng rãi nhất.
Nếu bạn đặt dữ liệu (data prop) của FlatList thành null hoặc undefined, thì nó sẽ không ném lỗi và không gây ra sự cố. Thay vào đó, nó sẽ không hiển thị bất kỳ mục nào trong danh sách. Điều này xảy ra vì FlatList được thiết kế để xử lý dữ liệu không xác định hoặc không tồn tại mà không gây ra lỗi. Tuy nhiên, nếu bạn muốn hiển thị thông báo hoặc placeholder khi dữ liệu không tồn tại, bạn có thể sử dụng thuộc tính renderItem để tạo ra một thành phần placeholder khi dữ liệu không có.
