Câu hỏi: MMA301 Phát triển ứng dụng di động đa nền tảng – Bộ ôn tập cuối kỳ số 2

Đáp án đúng: "Bluetooth". Câu hỏi tìm phương thức KHÔNG được Geolocation API dùng để xác định vị trí. Geolocation API dựa vào các nguồn mà hệ điều hành cung cấp: GPS từ vệ tinh cho độ chính xác cao ngoài trời, mạng WIFI quanh máy đối chiếu với cơ sở dữ liệu điểm phát, và vị trí suy ra từ địa chỉ IP khi các nguồn kia không có; Bluetooth là kết nối tầm ngắn giữa các thiết bị, không nằm trong các nguồn mà API này dùng. "GPS" là nguồn chính nên được dùng, vì thế không phải đáp án. "WIFI" được dùng để định vị nhanh trong nhà và trong đô thị nên cũng bị loại. "IP Geolocation" là cách ước lượng thô theo địa chỉ mạng, vẫn thuộc các phương thức API dùng, nên không phải phương thức bị hỏi.

Đáp án đúng: "Geolocation". Geolocation API là giao diện chuẩn để lấy vị trí địa lý của thiết bị (vĩ độ, kinh độ, độ chính xác) qua các hàm getCurrentPosition và watchPosition; trong React Native nó có trong thư viện @react-native-community/geolocation và chỉ trả dữ liệu sau khi người dùng cấp quyền vị trí. "LocationPicker" sai vì đây không phải API có sẵn, chỉ là tên thường dùng cho component tự viết để chọn địa điểm trên bản đồ. "Location" là tên module của Expo trong gói expo-location, một gói riêng chứ không phải tên chuẩn của API định vị mà câu hỏi nhắc tới. "Picker" sai vì đây là component chọn một giá trị trong danh sách thả xuống, không liên quan tới định vị.

Đáp án đúng: "Whether the picker accepts images, videos, or both". Trong thư viện chọn ảnh như expo-image-picker hay react-native-image-picker, tuỳ chọn media type (mediaTypes hoặc mediaType) giới hạn loại tệp người dùng được chọn từ thư viện máy hoặc camera: chỉ ảnh, chỉ video, hoặc cả hai. "The quality of the image or video" do một tuỳ chọn riêng là quality đảm nhiệm, nhận số từ 0 tới 1. "The format of text displayed on the picker" sai vì bộ chọn dùng giao diện của hệ điều hành, tuỳ chọn này không đụng tới chữ. "The color of the image picker interface" cũng sai, màu giao diện bộ chọn không do media type quyết định.

Đáp án đúng: "ImagePicker". Chụp ảnh bằng camera hoặc chọn ảnh từ thư viện thường được làm qua ImagePicker, ví dụ expo-image-picker với hàm launchCameraAsync hoặc react-native-image-picker với launchCamera; nó mở giao diện camera native của hệ điều hành, xin quyền truy cập rồi trả về URI của ảnh vừa chụp để hiển thị hay tải lên. "Picker" là ô chọn một giá trị trong danh sách nhiều mục, giống dropdown, không liên quan tới camera. "Image" chỉ hiển thị ảnh từ nguồn có sẵn như tệp cục bộ qua require hoặc đường dẫn uri, tự nó không chụp được ảnh. "View" là vùng chứa cơ bản để bố cục và áp style, tương tự thẻ div trên web, không có khả năng truy cập camera.

Đáp án đúng: "AsyncStorage.clearAll()". Câu hỏi tìm phương thức KHÔNG có trong AsyncStorage. Phương thức xoá toàn bộ dữ liệu của AsyncStorage tên là clear(), không có clearAll(), nên gọi AsyncStorage.clearAll() sẽ báo lỗi hàm không tồn tại. "AsyncStorage.mergeItem(key, value)" là phương thức có thật, gộp một chuỗi JSON mới vào giá trị JSON đang lưu ở khoá đó, nên không phải đáp án. "AsyncStorage.removeItem(key)" có thật, xoá một cặp khoá–giá trị, nên cũng bị loại. "AsyncStorage.getAllKeys()" có thật, trả về mảng mọi khoá mà ứng dụng đã lưu, nên không phải phương thức bị hỏi.

Đáp án đúng: "It increases the accuracy of location data.". enableHighAccuracy là tuỳ chọn truyền vào getCurrentPosition hoặc watchPosition; khi đặt true, thiết bị ưu tiên GPS thay vì chỉ ước lượng qua Wi-Fi hay trạm di động, nên toạ độ chính xác hơn, đổi lại tốn pin hơn và có thể lâu hơn mới có kết quả. "It reduces energy consumption." sai vì GPS tốn năng lượng hơn, nên bật tuỳ chọn này làm tăng mức tiêu thụ pin. "It decreases the accuracy of location data." sai vì đi ngược ý nghĩa của tuỳ chọn; muốn tiết kiệm pin với độ chính xác thấp hơn thì đặt false. "It has no effect on location accuracy." sai vì tuỳ chọn này đổi nguồn định vị được dùng nên ảnh hưởng trực tiếp tới độ chính xác, dù ở trong nhà nơi GPS yếu thì chênh lệch có thể nhỏ.

Đáp án đúng: "To bridge JavaScript and native code". Trong kiến trúc cũ của React Native trên iOS, RCTBridge là lớp Objective-C quản lý cầu nối: nó nạp bundle JavaScript, khởi tạo các native module được đăng ký và chuyển thông điệp đã tuần tự hoá giữa thread JavaScript và mã native theo cả hai chiều. "To create a new JavaScript bridge" nhầm vai trò: cầu nối chính là đối tượng RCTBridge tạo ra lúc khởi động, mục đích của lớp không phải sinh thêm cầu nối. "To delete an existing bridge" chỉ là thao tác dọn dẹp khi huỷ, không phải lý do lớp này tồn tại. "To update a bridge" cũng chỉ là thao tác vòng đời như nạp lại bundle, không mô tả chức năng nối hai thế giới.

Đáp án đúng: "Integrating with a platform-specific API like Google Play services". Native Module cần đến khi JavaScript phải gọi một API riêng của nền tảng mà React Native chưa bọc sẵn, như Google Play services, SDK thanh toán, cảm biến hay phần cứng đặc thù; khi đó ta viết mã Java/Kotlin hoặc Objective-C/Swift rồi export phương thức cho JS gọi. "Adding a basic button to the app" đã có sẵn Button, Pressable, TouchableOpacity trong lõi React Native nên không cần mã native. "Displaying static text content" chỉ cần component Text. "Adjusting padding and margin of elements" làm bằng thuộc tính style như padding, margin trong StyleSheet, hoàn toàn ở phía JavaScript; cả ba việc này đều là thao tác giao diện cơ bản đã được React Native hỗ trợ sẵn.

Đáp án đúng: "@ReactMethod". Trong Native Module Android, lớp module kế thừa ReactContextBaseJavaModule, đặt tên qua getName(), và mỗi phương thức muốn JavaScript gọi được phải gắn annotation @ReactMethod; phương thức đó trả kết quả qua Callback hoặc Promise vì lời gọi qua Bridge là bất đồng bộ. "@JavaScriptMethod" không phải annotation có trong React Native, tên nghe hợp lý nhưng không tồn tại. "@NativeMethod" cũng không tồn tại, dù gợi đến mã gốc. "@CallableMethod" không phải annotation của React Native, phương thức chỉ gắn nó sẽ không được đưa ra JavaScript. Bên iOS, vai trò tương ứng là macro RCT_EXPORT_METHOD.

Đáp án đúng: "Modifying the AndroidManifest.xml to declare the native module". AndroidManifest.xml khai báo activity, service, receiver và quyền của ứng dụng; Native Module không phải thành phần Android nên không cần khai báo ở đó. Chỉ khi module cần quyền đặc biệt như camera hay vị trí thì mới thêm uses-permission, nhưng đó là khai báo quyền chứ không phải khai báo module. "Creating a Java class that extends ReactContextBaseJavaModule" là bước bắt buộc: lớp này chứa logic, đặt tên qua getName và phơi phương thức bằng @ReactMethod. "Registering the module in a Package class that implements ReactPackage" cũng bắt buộc, vì createNativeModules của Package trả danh sách module cho React Native. "Adding the native module to the MainApplication.java file" là bước thêm Package vào getPackages để React Native nạp lúc khởi động; với thư viện có autolinking bước này tự động, còn module tự viết trong app thì phải tự thêm.

Đáp án đúng: "JavaScript has lower security standards.". Mã JavaScript của ứng dụng React Native được đóng thành một bundle nằm trong gói cài đặt; dù đã rút gọn hoặc biên dịch sang bytecode của Hermes, kẻ xấu vẫn có thể giải nén và đọc lại logic, khoá API hay chuỗi bí mật dễ hơn nhiều so với mã native, và các gói npm bên thứ ba còn mở thêm rủi ro chuỗi cung ứng; vì vậy JavaScript bị xem là điểm yếu bảo mật, buộc phải giữ bí mật ở máy chủ hoặc Keychain/Keystore. "JavaScript lacks flexibility." sai vì linh hoạt chính là thế mạnh của JavaScript. "JavaScript makes apps more expensive." sai vì dùng chung một mã JavaScript cho hai nền tảng còn giảm chi phí. "JavaScript reduces community support." sai vì cộng đồng JavaScript thuộc loại lớn nhất.

Đáp án đúng: "It simplifies the division of application functions into independent blocks.". Kiến trúc mô-đun (modular architecture) của React Native xoay quanh component: mỗi chức năng được tách thành khối độc lập có props đầu vào rõ ràng, có thể phát triển, kiểm thử và tái sử dụng riêng rồi ghép lại thành màn hình, nhờ đó ứng dụng dễ mở rộng và bảo trì. "It allows developers to handle data binding more securely." lệch chủ đề: React dùng luồng dữ liệu một chiều qua props và state, còn độ an toàn của dữ liệu không do việc chia module quyết định. "It limits the app to a single platform." sai vì React Native nhắm tới chạy đa nền tảng trên iOS và Android. "It reduces the number of third-party plugins needed." cũng không đúng, vì số thư viện cần dùng tuỳ vào tính năng của app chứ không giảm đi nhờ chia module.

Đáp án đúng gồm hai ý: "renderItem receives an element from the data array of each individual section and renders a React Element, representing that item in the section." và "renderSectionHeader receives an element from the sections array to create and display the header for that section.". SectionList hiển thị danh sách chia nhóm: prop sections là mảng các đối tượng nhóm, mỗi nhóm có tiêu đề và mảng data riêng; renderItem được gọi cho từng phần tử trong data của từng nhóm, còn renderSectionHeader được gọi một lần cho mỗi đối tượng trong sections để vẽ tiêu đề nhóm. Phát biểu "receives an element directly from the data array (i.e., the data of all sections combined)" sai vì tiêu đề nhóm nhận đối tượng section chứ không nhận phần tử dữ liệu, và không có mảng gộp mọi nhóm. Phát biểu "Both props (renderItem and renderSectionHeader) receive an element from the sections array" sai vì hai prop nhận hai loại dữ liệu khác nhau và có vai trò khác nhau.

Đáp án đúng: "Stack Navigator". Stack Navigator của React Navigation quản lý màn hình như một chồng: mỗi lần navigate thì đẩy màn mới lên, quay lại thì gỡ màn trên cùng xuống, và màn chỉ được dựng khi cần; vì không có thanh điều hướng nào phải hiển thị cùng lúc mọi màn, số màn có thể tăng lên 10 hay nhiều hơn mà giao diện không rối, nên đây là lựa chọn dễ mở rộng nhất. "Tab Navigator" hợp với ba đến năm mục chính luôn hiện trên thanh tab; nhồi 10 tab thì thanh quá chật và người dùng khó chọn. "Drawer Navigator" hợp làm menu cho các khu vực cấp cao, nhưng 10 mục đã thành một danh sách dài, và nó không có sẵn lối đi tiến lùi giữa các màn chi tiết. "Bottom Sheet Navigator" không phải bộ điều hướng dựng sẵn của React Navigation; bottom sheet là tấm trượt từ đáy dùng cho thao tác phụ, không phải nơi tổ chức cả chục màn hình. Trong thực tế, app nhiều màn thường kết hợp: drawer hoặc tab cho vài khu vực chính, mỗi khu vực lồng một stack chứa các màn bên trong.

Đáp án đúng: "Instantly seeing UI changes during development". Hot reloading (nay là Fast Refresh) cho phép lưu tệp là thấy thay đổi giao diện ngay trên máy ảo hay điện thoại, thường giữ nguyên state hiện tại của component, nên lập trình viên chỉnh style, bố cục hay chữ mà không phải build lại hay thao tác lại từ đầu tới màn hình đang làm. "Deploying an app to the Play Store" sai vì phát hành lên cửa hàng cần build bản release, hoàn toàn nằm ngoài cơ chế nạp nóng lúc phát triển. "Optimizing app performance on low-end devices" sai vì hot reloading chỉ phục vụ chế độ phát triển, không ảnh hưởng hiệu năng bản phát hành. "Accessing native camera APIs" sai vì truy cập camera cần thư viện hoặc Native Module; thay đổi mã native còn đòi build lại, hot reloading không giúp được.

Đáp án đúng: "The purpose of SafeAreaView is to render content within the safe area boundaries of a device". SafeAreaView tự thêm phần đệm sao cho nội dung nằm trong vùng an toàn, tránh bị tai thỏ, thanh trạng thái, góc bo màn hình và home indicator che mất (bản lõi của React Native chỉ có tác dụng trên iOS 11 trở lên). Phát biểu "automatically adjusts the font size of text elements" sai vì SafeAreaView chỉ đổi phần đệm quanh nội dung, cỡ chữ do style và cài đặt trợ năng của máy quyết định. Phát biểu "provides a secure environment for rendering sensitive user data" hiểu nhầm chữ safe là an toàn bảo mật, trong khi ở đây safe chỉ vùng hiển thị không bị che. "All of the above" sai vì hai phát biểu vừa bác không đúng.

Đáp án đúng: "By defining a custom renderItem function and passing it to the FlatList component". FlatList nhận mảng data và hàm renderItem; với mỗi mục, FlatList gọi renderItem với đối tượng chứa item và index để lấy phần tử cần vẽ, kèm keyExtractor để có key ổn định. Điểm mạnh là ảo hoá (virtualization): chỉ các mục gần vùng nhìn thấy được render, mục đã cuộn xa bị gỡ khỏi bộ nhớ, nên danh sách dài vẫn mượt. "By using a ScrollView component with a map function to render each item" render toàn bộ mục ngay một lúc, danh sách càng dài càng tốn bộ nhớ và chậm. "By manually iterating over the list of items and rendering each item individually" về bản chất cũng là tự lặp và dựng hết, đánh mất cơ chế ảo hoá cùng các tối ưu như initialNumToRender, windowSize mà FlatList cung cấp. "By using a ListView component provided by third-party libraries" không hợp lý vì ListView là component cũ đã bị gỡ khỏi React Native và được chính FlatList thay thế, không cần tìm tới thư viện ngoài.

Đáp án đúng: "Text". Text là component lõi để hiển thị chữ, hỗ trợ lồng nhau, định dạng (fontSize, fontWeight), xử lý chạm qua onPress và giới hạn số dòng bằng numberOfLines; trong React Native mọi chuỗi chữ bắt buộc nằm trong Text, đặt chuỗi trần trong View sẽ báo lỗi. "TextView" là widget hiển thị chữ của Android gốc, React Native dùng ở tầng dưới nhưng không cung cấp component tên đó. "TextComponent" không phải component có trong React Native. "TextInput" dùng để người dùng nhập chữ, không phải để hiển thị một khối văn bản tĩnh.

Đáp án đúng: "trackColor". trackColor nhận đối tượng có hai khoá false và true để tô phần rãnh (track) của Switch theo trạng thái; khoá true là màu rãnh khi công tắc đang bật, khoá false là màu khi tắt. "thumbColor" đổi màu núm tròn (thumb) trượt trên rãnh, không phải màu rãnh. "onColor" không tồn tại trong API của Switch; màu khi bật được khai báo qua khoá true của trackColor. "offColor" cũng không tồn tại; màu khi tắt đặt bằng khoá false của trackColor, và trên iOS còn có ios_backgroundColor cho nền khi tắt.