Cross-platform Mobile Development

Posted on by Thanh Le
0

Đến thời điểm hiện tại, React-Native, Xamarin và Flutter theo thứ tự được xem là 3 frameworks phổ biến nhất cho phép phát triển app trên smartphone sử dụng các hệ điều hành, hay nền tảng khác nhau (cross-platform mobile development), mà thông dụng nhất là iOS và Android. Với các frameworks này, một chương trình được viết có thể chạy trên tất cả các nền tảng; cụ thể hơn, chỉ cần phát triển 1 project nhưng có thể tạo ra các apps chạy trên smartphone sử dụng iOS, Android hoặc Windows Phone.

Sự xuất hiện các frameworks nói trên đã hình thành các trường phái và cộng đồng phát triển app, kèm theo là những tranh luận về việc đánh giá xếp hạng cho các frameworks này. Giống như tranh luận về chủ nhân quả bóng vàng hàng năm vậy. Để hiểu rõ hơn về vấn đề cũng như có cách nhìn khoa học khách quan, nghiên cứu này sẽ thực hiện cài đặt 1 project trên cả 3 frameworks, sau đó thử nghiệm, phân tích và đưa ra các kết quả đánh giá.

PROJECT: Phát triển app cho phép thuyết trình với smartphone và slides được soạn thảo trong Microsoft PowerPoint, đồng thời khai thác các thiết bị projector, microphone và speaker kết nối với smartphone sử dụng HDMI/Airplay/Miracast/Cast/Wifi/Bluetooth.

Các yêu cầu chính vs app

  • Màn hình smartphone hiển thị danh sách slides, slide hiện hành và notes (nếu có) để phục vụ người thuyết trình.
  • Màn hình projector chỉ hiển thị nội dung slide hiện hành để phục vụ người tham dự.
  • Khai thác hệ thống âm thanh kết nối với smartphone, cho phép người thuyết trình sử dụng smartphone như Mic.
  • Chỉ khi người thuyết trình chọn chức năng Mic thì app mới yêu cầu quyền khai thác RECORD_AUDIO. App phải hạn chế độ trễ thu phát, tự động nhận biết và điều phối các thiết bị kết nối với smartphone.
    ☞ Lập trình mức thấp (native) cho yêu cầu ở các mục kể trên, trừ mục đầu tiên.
Ứng dụng hỗ trợ thuyết trình với smartphone

Công tác chuẩn bị:
Về phần cứng: Sử dụng Mac laptop và cài đặt các phần mềm dưới đây. Tuy nhiên, có thể dùng 1 Mac desktop chia sẽ cho các thành viên trong team sử dụng Windows hoặc Chromebook laptop để build iOS app và test trên iPhone emulator/device.
Về phần mềm: Mac laptop (XCode), Mac/Windows laptop (Visual Studio 2019 w/ Xamarin, NodeJs & npm, Flutter, Visual Studio Code – VSCode, VSCode extensions Flutter, React-Native).

Sách để tham khảo:
Flutter: (2019) Beginning App Development with Flutter, (2019) Flutter Recipes, (2020) Flutter in Action.
React-Native: (2019) React Native in Action, (2019) React Native for Mobile Development; iOS and Android.
Xamarin: (2019) Building Xamarin.Forms Mobile Apps using XAML, (2018) Xamarin.Forms Solutions, (2019) Understanding Game Application Development.
☞ Các tài liệu này giúp làm quen với platforms và các vấn đề thông thường. Một số vấn đề đặc biệt trong project yêu cầu tham khảo các nguồn khác trên Internet.

Khởi tạo projects trên các frameworks:
Flutter: Create project (Dart/Java/Objective-C, with options: -i objc -a java), các packages: document picker, docviewer.
Reac-Native: Init project (javascript/Java/Objective-C), packages: canvas, document picker, low level recorder + player, projector and docviewer;
Xamarin: Create Blank Xamarin.Forms project (C#), packages: canvas, document picker, PPTX docviewer.

Kỹ thuật lập trình: Để xử lý các vấn đề liên quan platform ở mức thấp (native), MainActivity (android) và AppDelegate (iOS) được sử dụng; ví dụ xử lý quyền sử dụng và tình trạng thiết bị ngoại vi (kết nối, bật, tắt). Mặc dù được xem là full tech stack và sử dụng duy nhất ngôn ngữ C#, trong khi các frameworks khác dùng ít nhất 3 ngôn ngữ lập trình, việc cài đặt project trên Xamarin yêu cầu code nhiều hơn vì APIs không có sẵn. Tuy nhiên, tài liệu hỗ trợ online bởi Microsoft khá tốt nên việc coding không gặp khó khăn.

Framework test: Nhiều nghiên cứu đã thực hiện test các frameworks về tốc độ đọc-ghi thiết bị lưu trữ. Trong nghiên cứu này, các frameworks được test về độ trễ truyền tín hiệu audio, bao gồm thu từ wired microphone và phát ra wired speaker. Thiết bị sử dụng là Samsung S5 (android) kết nối dây audio 2 chiều với Windows laptop thực hiện phát và thu dữ liệu để kiểm tra. Dữ liệu audio được sử dụng là đoạn nhạc thời lượng 42s định dạng PCM (pulse-code modulation), chuẩn mono với sample-rate = 44100Hz và bit-depth = 16 (2bytes). Thiết lập này nhằm tránh nhiễu và trễ do wireless và CPU. Đoạn nhạc được phát và thu 300 lần, samples được ngắt theo giây (88200 bytes) xen kẽ blanks để kiểm tra. Trung bình trễ của tất cả mỗi giây được tính là độ trễ 1 lượt phát-thu. Kết quả 300 quan sát được plot như trong hình dưới đây.

App performance comparison

Kết quả cho thấy chức năng Mic của phiên bản Xamarin vận hành tốt nhất, với độ trễ thấp và có tính ổn định cao.

Tuy nhiên, khi trải nghiệm giao diện thì các phiên bản của React-Native và Flutter mang lại cảm nhận tốt hơn (đồ họa mượt hơn, đồng bộ cao với thiết bị ngoại vi). Vấn đề là đánh giá phần mềm ở góc độ này khá phức tạp do nền tảng, kỹ thuật thực hiện, packages… khác nhau, và chưa có hệ thống tiêu chí cũng như giải pháp đánh giá tổng quát có tính thuyết phục. Chúng tôi sẽ bàn đến điều này trong 1 nghiên cứu khác. Công bằng mà nói, với một số tiêu chí như tốc độ đọc-ghi, thu-phát tín hiệu thì vẫn chưa đủ cơ sở để kết luận framework nào là ưu việt nhất. Mặc dù vậy, trong quá trình triển khai, cài đặt và thử nghiệm project với các frameworks và platforms, chúng tôi đúc kết một số nhận xét thú vị như sau:

  • Về platforms: Nền tảng iOS ổn định hơn Android, và cung cấp các APIs hữu dụng, hợp lý. Do đó, khi phát triển cross-platform app, bạn nên chọn iOS làm chuẩn cho logic của phần mềm. Đến lúc cài đặt cho Android, nếu phát sinh vấn đề về API thì có thể cài đặt bổ sung. Ví dụ: APIs kiểm tra và yêu cầu permissions cho app. Cài đặt cho project trên iOS khá đơn giản, nhưng trên Android thì phức tạp hơn 1 chút. Tuy việc sử dụng React-Native cho phép vấn đề được giải quyết nhanh chóng nhờ PermissionsAndroid (built-in), nhưng với Xamarin và Flutter thì mất thêm thời gian coding với MainActivity (có thể xem đây là thực trạng, và cũng là điểm cộng của React-Native).
  • Về frameworks: framework nào tốt nhất là vấn đề tranh cãi muôn thuở mà người tham gia tranh luận thường lý lẽ theo góc nhìn, hay chính xác hơn là theo sở trường của mình. Dựa trên trải nghiệm cũng như những phân tích ở trên, thì không có hơn/kém đáng kể giữa các frameworks này. Do đó, nếu bạn thích javascript thì chọn React-Native. Nếu bạn là tính đồ C# và .Net thì chọn Xamarin, lại có thể làm được ứng dụng cho Mac. Nếu bạn biết Java/C++ hoặc chưa biết gì thì chọn Flutter vì hiện nay Google đang thúc đẩy framework này. Nếu bạn đã biết cả 3 frameworks thì chọn cái nào là tùy theo yêu cầu của từng project cụ thể. Nói là vậy, nhưng khi chọn framework cho project ở trên cũng nhiều đắn đo: tồn tại hay không? một framework có sẵn nhiều thứ như React-Native, chạy mượt như Flutter mà tổ chức tinh tế, OOP như Xamarin.
  • Về phần cứng: Nếu bạn cân nhắc giữa Mac và Windows laptop cho việc đầu tư phát triển mobile app thì Mac laptop là lựa chọn tốt hơn vì nó cho phép XCode, VSCode và những thứ Code khác. Nếu như bạn chỉ xem laptop như thứ thời trang công nghệ thì Mac cũng tốt hơn nốt 🙂
  • Cuối cùng, về IDE: Microsoft Visual Studio vẫn là IDE hàng đầu suốt nhiều năm qua. Nếu bạn là người mới hoặc không chuyên IT thì việc thử nghiệm React-Native và Flutter sẽ có chút e ngại vì phải cài đặt và sử dụng nhiều phần mềm. Khi test trên iOS lại phải di tản code lên máy Mac, hoặc phải dùng VSCode từ xa nếu muốn làm việc từ Windows laptop. Trong khi đó, việc cài đặt Visual Studio chỉ với 1 cái click, giao diện thân thiện, tiện lợi và hơn nữa có sẵn iPhone ảo ngay trên Windows (yêu cầu 1 chiếc Mac trên cùng mạng LAN hỗ trợ).

Có thể tải phần mềm tại đây. Cảm ơn bạn đã đọc bài viết này nhân dịp ở nhà tránh COVID-19.

Thanh Le