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ố 1

Đáp án đúng: "Reactotron". Reactotron là ứng dụng desktop để theo dõi ứng dụng React Native khi phát triển, có plugin reactotron-redux hiển thị từng action được dispatch cùng state của store trước và sau, cho phép xem và thậm chí sửa state, nên rất hợp để soi thay đổi của Redux. "Chrome DevTools" dùng được để debug JavaScript, đặt breakpoint, xem console, nhưng tự nó không có màn hình chuyên cho luồng action và state Redux nếu không cài thêm công cụ. "Safari Developer Tools" chủ yếu để debug JavaScriptCore trên iOS hoặc trang web, không chuyên về Redux. "LogBox" chỉ hiển thị lỗi và cảnh báo ngay trong ứng dụng lúc phát triển, không ghi lại diễn biến state.

Đáp án đúng: "flexDirection: 'row' aligns children horizontally.". flexDirection quyết định trục chính (main axis) của Flexbox: với 'row' trục chính nằm ngang nên các con xếp từ trái sang phải thành một hàng, còn với 'column' trục chính nằm dọc nên các con xếp từ trên xuống dưới; trong React Native giá trị mặc định là column. Vì thế đổi giữa hai giá trị làm thay đổi hẳn hướng xếp, đồng thời đổi ý nghĩa của justifyContent (căn theo trục chính) và alignItems (căn theo trục phụ). "flexDirection: 'row' aligns children vertically." sai vì xếp dọc là hành vi của column. "Both align children in the same way." sai vì hai giá trị cho hai hướng trục chính vuông góc nhau. "flexDirection: 'column' aligns children horizontally." sai vì column xếp các con theo chiều dọc.

Đáp án đúng: "The code will display "Hello Android" on Android and "Hello iOS" on iOS.". Platform.OS trả về chuỗi tên nền tảng đang chạy, 'android' hoặc 'ios'. Biểu thức điều kiện Platform.OS === 'android' ? 'Hello Android' : 'Hello iOS' được tính ngay khi render: trên Android phép so sánh đúng nên Text hiển thị Hello Android, trên iOS phép so sánh sai nên rơi vào nhánh sau dấu hai chấm và hiển thị Hello iOS. "The code will display "Hello Android" only on iOS." đảo ngược điều kiện, vì chuỗi Hello Android chỉ xuất hiện khi Platform.OS bằng 'android'. "The code will crash on Android devices." sai vì Platform và Text đều là API lõi, đoạn mã hợp lệ trên cả hai nền tảng. "The code will display "Hello iOS" on both platforms." sai vì trên Android điều kiện đúng nên nhánh Hello iOS không được chọn.

Đáp án đúng: "It provides the root component for the navigation structure". NavigationContainer là component bọc ngoài cùng của toàn bộ cây điều hướng: nó giữ trạng thái điều hướng (navigation state), nối với nút Back của Android và deep linking, và mọi navigator như Stack hay Tab đều phải nằm bên trong nó; thường chỉ đặt đúng một lần ở App.js. "It holds the state of the application's theme" không đúng vì theme chỉ được truyền vào qua prop theme để tô màu header, tab, còn quản lý theme của cả ứng dụng không phải nhiệm vụ của nó. "It provides custom transitions between screens" thuộc cấu hình của từng navigator, ví dụ option animation của Stack. "It configures the appearance of the navigation bar" cũng làm trong options của từng màn hình như headerStyle, headerTitle, không phải ở NavigationContainer.

Đáp án đúng: "AsyncStorage". Tuỳ chọn giao diện (theme) của người dùng phải còn nguyên sau khi tắt và mở lại ứng dụng, nên cần lưu bền (persist) trên thiết bị; AsyncStorage là kho lưu trữ khoá–giá trị bất đồng bộ, lưu bền trên máy, rất hợp cho dữ liệu nhỏ như chế độ sáng hay tối. "Redux only" giữ state trong bộ nhớ, mất khi ứng dụng bị đóng nếu không kết hợp thêm cơ chế lưu như redux-persist (mà bản thân thường ghi xuống AsyncStorage). "Component state" chỉ sống trong một component và biến mất khi component bị gỡ, không chia sẻ được cho toàn ứng dụng. "URL parameters" là tham số điều hướng truyền giữa các màn hình, tạm thời và không phải chỗ lưu cấu hình người dùng.

Đáp án đúng: "keyExtractor". keyExtractor là hàm nhận item và index rồi trả về chuỗi key duy nhất mà FlatList gọi cho từng phần tử, giúp React biết phần tử nào được thêm, xoá hay di chuyển khi danh sách đổi, nhờ đó tái sử dụng ô và giữ state đúng chỗ. "data" sai vì đây là mảng dữ liệu nguồn mà FlatList hiển thị, nó không ánh xạ ra key. "renderItem" sai vì đây là hàm vẽ giao diện cho từng phần tử, trả về JSX chứ không trả về key. "key" là prop đặc biệt của React đặt trên từng phần tử khi tự map một mảng, nhưng FlatList tự sinh các phần tử con nên ta không đặt key trực tiếp lên chúng được; với FlatList cách đúng là cung cấp keyExtractor hoặc để mỗi item có sẵn trường key.

Đáp án đúng gồm hai ý: "Call setTheme with an integer representing the theme." và "Use SharedPreferences.edit().putString("theme", value) and commit the changes.". Trên Android, theme là một style khai báo trong tài nguyên, và Activity.setTheme nhận một số nguyên chính là ID tài nguyên style dạng R.style.TenTheme; vì vậy native module (mô-đun gốc viết bằng Java hoặc Kotlin, phơi ra cho JavaScript qua phương thức gắn @ReactMethod) lấy Activity hiện tại rồi gọi setTheme với số nguyên đó, thường kèm recreate để giao diện vẽ lại. Còn để nhớ lựa chọn của người dùng qua các lần mở app, module lưu giá trị theme vào SharedPreferences (kho khoá–giá trị nhỏ của Android) bằng edit().putString rồi commit để ghi xuống. "Use ReactContext.getTheme() and update it directly." sai vì ReactContext không cung cấp getTheme để sửa theme trực tiếp; theme gắn với Activity chứ không phải với ngữ cảnh của cầu nối React. "Call setTheme and pass in a String." không khớp chữ ký của Activity.setTheme vốn chỉ nhận ID nguyên; nó chỉ đúng trong trường hợp bạn tự viết một hàm @ReactMethod nhận chuỗi từ JavaScript rồi tự quy chuỗi đó về ID style trước khi gọi setTheme, tức cuối cùng vẫn phải truyền số nguyên.

Đáp án đúng gồm hai ý: "FlatList only renders the items currently visible on the screen, improving performance by reducing the number of components rendered at the same time." và "FlatList will render each item in the data array using the renderItem prop, allowing you to customize how each item is displayed." FlatList là danh sách ảo hoá: nó chỉ dựng các phần tử trong và gần vùng nhìn thấy rồi dựng tiếp khi cuộn, nên số component tồn tại cùng lúc nhỏ; mỗi phần tử của mảng data được truyền vào hàm renderItem (nhận item và index) để ta quyết định giao diện từng dòng. Phát biểu "automatically groups data based on the key if you do not provide the keyExtractor prop" sai vì FlatList không gom nhóm dữ liệu (chia nhóm là việc của SectionList); thiếu keyExtractor nó chỉ lấy item.key, rồi tới index, làm khoá. Phát biểu "FlatList requires you to pass a children prop to display the items." sai vì FlatList không dùng children mà dùng cặp data và renderItem.

Đáp án đúng: "Modular architecture.". Kiến trúc mô-đun (modular architecture) chia ứng dụng thành các component và module độc lập, mỗi phần có ranh giới và giao diện rõ ràng, nên nhiều lập trình viên làm song song trên những phần khác nhau mà ít giẫm chân nhau, đồng thời dễ tái sử dụng và chia sẻ module giữa các dự án qua npm hay thư mục dùng chung. "Limiting third-party plugins." không giúp cộng tác, chỉ thu hẹp lựa chọn công cụ của cả nhóm. "Live Reload feature." giúp từng người thấy thay đổi ngay khi lưu mã, tăng tốc vòng phát triển cá nhân, nhưng không tổ chức việc chia sẻ dự án. "Utilizing separate APIs for iOS and Android." đi ngược mục tiêu đa nền tảng, buộc tách mã theo nền tảng nên việc phối hợp và chia sẻ lại khó hơn.

Đáp án đúng: "To show errors and warnings during development". LogBox là cơ chế hiển thị lỗi và cảnh báo có sẵn trong React Native từ bản 0.63: ở chế độ phát triển, cảnh báo (console.warn) hiện thành thông báo nhỏ ở cuối màn hình, lỗi nghiêm trọng hoặc lỗi cú pháp hiện toàn màn hình kèm stack trace, và có thể ẩn bớt bằng LogBox.ignoreLogs; nó không chạy trong bản production. "To display network requests" là việc của công cụ như Flipper hay Reactotron. "To inspect component hierarchies" là việc của React DevTools hoặc Element Inspector. "To manage application state" là vai trò của useState, Context hay Redux, không liên quan LogBox.

Đáp án đúng gồm hai ý: "To access native (operating system) APIs that JavaScript does not support by default." và "To use available native libraries already written in Java (for Android) or Objective-C/Swift (for iOS).". Native Module (mô-đun gốc) là lớp mã Java/Kotlin hoặc Objective-C/Swift được đăng ký với React Native để JavaScript gọi tới; nó cần thiết vì JavaScript chỉ thấy những gì framework đã phơi ra, còn các API hệ điều hành khác như Bluetooth, cảm biến đặc thù hay SDK thanh toán phải được bọc lại mới dùng được, và đó cũng là cách tái sử dụng thư viện native có sẵn thay vì viết lại. "To completely replace JavaScript with native code." sai vì Native Module chỉ bổ sung từng chức năng, phần lớn logic và giao diện vẫn viết bằng JavaScript; thay hẳn thì không còn là React Native. "To write more maintainable user interface code." sai vì mã native thường khó bảo trì hơn, phải giữ hai bản cho hai nền tảng; giao diện dễ bảo trì là nhờ component React, không phải nhờ Native Module.

Đáp án đúng: "To access real-time or updated information". Ứng dụng gọi API từ xa (remote API) qua fetch hoặc axios để lấy dữ liệu nằm trên máy chủ như tin tức, giá cả, tin nhắn, vốn thay đổi liên tục, nhờ vậy người dùng luôn thấy thông tin mới mà không phải cập nhật bản ứng dụng. "To change the app’s language settings" không cần dữ liệu từ xa: ngôn ngữ là cấu hình cục bộ, chuyển bằng thư viện i18n và lưu ngay trong máy. "To modify the device's operating system" sai vì ứng dụng chạy trong sandbox, không thể sửa hệ điều hành, còn API từ xa chỉ trả dữ liệu. "To improve the app’s visual design" là việc của component và StyleSheet, không phải mục đích của việc lấy dữ liệu từ máy chủ.

Đáp án đúng gồm hai ý: "TouchableNativeFeedback allows you to place multiple child Views, as long as they are all wrapped inside a single parent View." và "TouchableNativeFeedback only supports a single child View inside it. You cannot place multiple child Views directly inside TouchableNativeFeedback.". TouchableNativeFeedback là component chạm của Android tạo hiệu ứng ripple (gợn sóng) bằng drawable gốc của hệ điều hành; nó không tự vẽ một View bao ngoài mà gắn thuộc tính ripple vào chính View con, nên chỉ nhận đúng một View con. Muốn đặt nhiều thành phần, ta bọc chúng trong một View cha rồi đưa View cha đó vào làm con duy nhất; hai phát biểu này là hai mặt của cùng một giới hạn khi dùng. Phát biểu "is implemented by replacing the original View with an RCTView" mô tả cách component được cài đặt bên trong, nội dung không sai, nhưng đó là chi tiết hiện thực chứ không phải một giới hạn người dùng gặp khi viết mã, nên không trả lời câu hỏi. Phát biểu "on both iOS and Android if you add a platform check" sai vì TouchableNativeFeedback chỉ có trên Android; thêm kiểm tra Platform.OS chỉ giúp tránh dùng nó trên iOS, ở iOS phải thay bằng TouchableOpacity hay TouchableHighlight, nghĩa là component này không hề dùng được trên cả hai nền tảng.

Đáp án đúng: "Supporting API design, deployment, and monitoring". API platform (nền tảng API) là bộ công cụ quản lý cả vòng đời của API: thiết kế đặc tả, giả lập (mock), kiểm thử, triển khai, quản lý phiên bản, tài liệu, rồi giám sát lưu lượng, lỗi và độ trễ; Postman hay các API gateway là ví dụ quen thuộc. "Replacing all manual testing in the development process" sai vì nền tảng API giúp tự động hoá kiểm thử API nhưng không thay được mọi kiểm thử thủ công như kiểm tra giao diện hay trải nghiệm người dùng. "Managing cloud infrastructure exclusively" là việc của nền tảng hạ tầng đám mây, và chữ exclusively (chỉ duy nhất) làm phát biểu càng lệch. "Developing front-end applications" là việc của framework giao diện như React Native, còn nền tảng API phục vụ lớp giao tiếp giữa client và server.

Đáp án đúng: "They complicate style reuse". Platform.OS trả về 'ios' hoặc 'android'; rải các phép kiểm Platform.OS khắp nơi trong hệ thống style lớn khiến mỗi style bị gắn chặt với nền tảng, phải lặp nhánh điều kiện ở nhiều component, khó gom vào một bộ token hay theme dùng chung, nên tái sử dụng style trở nên rắc rối; cách gọn hơn là Platform.select hoặc tệp đuôi .ios.js và .android.js đặt ở một chỗ. "They slow down compilation" sai vì phép so sánh chuỗi này chạy lúc thực thi, gần như không tốn chi phí và không ảnh hưởng thời gian biên dịch. "They lack type safety" sai vì với TypeScript, Platform.OS có kiểu union rõ ràng. "They are deprecated" sai vì Platform.OS vẫn là API chính thức đang được dùng.

Đáp án đúng: "Native Modules provide the ability to execute native code (Java/Objective-C/Swift) from within JavaScript.". Mỗi Native Module phơi ra một tập phương thức (đánh dấu @ReactMethod trên Android hoặc RCT_EXPORT_METHOD trên iOS); JavaScript lấy module qua NativeModules hoặc TurboModule rồi gọi, lời gọi được chuyển qua bridge (hoặc JSI ở kiến trúc mới) sang mã native, kết quả trả về bằng callback hoặc Promise. "Native Modules directly convert JavaScript code into C++." sai vì không có bước dịch JavaScript sang C++; mã JavaScript vẫn chạy trên engine như Hermes, Native Module chỉ là đích của lời gọi. "Native Modules only support Android and not iOS." sai vì cơ chế này có trên cả hai nền tảng, mỗi bên viết bằng ngôn ngữ riêng. "Native Modules act as a bridge between the interface layer and the database." sai vì nó là cầu nối giữa JavaScript và mã native nói chung, không chuyên cho cơ sở dữ liệu; dùng nó để truy cập SQLite chỉ là một trường hợp cụ thể.

Đáp án đúng: "Replace FlatList with ScrollView.". Câu hỏi tìm cách KHÔNG cải thiện hiệu năng. ScrollView render toàn bộ phần tử con ngay một lúc, với hàng nghìn mục sẽ ngốn bộ nhớ và làm chậm; FlatList thì ảo hoá danh sách (virtualization), chỉ render các mục gần vùng nhìn thấy, nên đổi sang ScrollView chỉ khiến app lag hơn. "Use keyExtractor to provide stable keys." đúng là có ích: key ổn định giúp React nhận diện từng mục, tránh gỡ đi dựng lại không cần thiết. "Wrap item components with React.memo." cũng có ích vì component mục chỉ render lại khi props của nó thay đổi. "Use extraData when items depend on external state." là cách dùng đúng được khuyến nghị: báo cho FlatList biết khi nào cần cập nhật theo state bên ngoài, giữ danh sách chính xác mà không phải render lại toàn bộ; vì đều là biện pháp hợp lệ nên chúng không được chọn.

Đáp án đúng gồm hai ý: "The position where the drawer appears (e.g., from the left or right side of the screen) is determined by the drawerPosition prop." và "The content of the drawer (navigation drawer) is displayed using the renderNavigationView prop, which accepts a function to render the drawer content.". DrawerLayoutAndroid là component chỉ dùng trên Android, bọc nội dung chính của màn hình và cho phép kéo ra một ngăn kéo điều hướng từ mép màn hình; drawerPosition nhận giá trị left hoặc right để chọn mép xuất hiện, còn renderNavigationView là hàm trả về giao diện bên trong ngăn kéo. Phát biểu "always displayed by default on the screen" sai vì ngăn kéo mặc định đóng, chỉ hiện khi người dùng vuốt hoặc khi gọi openDrawer() qua ref. Phát biểu "The main content of the application is placed in the navigationView prop" sai vì nội dung chính phải là children trực tiếp của DrawerLayoutAndroid, còn nội dung ngăn kéo mới đi qua renderNavigationView.

Đáp án đúng: "6MB". AsyncStorage là kho khoá giá trị (key-value) bất đồng bộ, lưu chuỗi không mã hoá trên thiết bị. Trên Android, bản cài đặt mặc định dựa trên SQLite và giới hạn tổng dung lượng cơ sở dữ liệu khoảng 6MB, mỗi mục nên nhỏ hơn khoảng 2MB; con số tổng này có thể nới bằng cấu hình AsyncStorage_db_size_in_MB trong gradle.properties. Trên iOS dữ liệu lưu thành tệp nên không bị chặn chặt như vậy, nhưng mốc 6MB thường được nêu như giới hạn chung cần tính tới. "Unlimited" sai vì ít nhất trên Android có trần mặc định, và AsyncStorage vốn không được thiết kế cho dữ liệu lớn. "1MB" sai vì thấp hơn nhiều so với trần mặc định. "10MB" sai vì vượt trần mặc định; muốn tới mức đó phải chủ động tăng cấu hình.