Ở đó, phát triển ứngdụng đa nền tảng giúp một tay và cho phép các công ty đưa ra các ứng dụnghoạt động trơn tru có thể chạy trên nhiều thiết bị và nền tảng khác nhau.. Các framework lập
TỔNG QUAN VỀ LẬP TRÌNH ĐA NỀN TẢNG
Lập trình đa nền tảng là gì?
Ứng dụng đa nền tảng (cross-platform hay multi-platform) là một thuật ngữ chỉ các phần mềm máy tính hay các phương thức điện toán và các khái niệm được thực thi đầy đủ và vận hành cùng nhau trên nhiều nền tảng máy tính. Tại hội nghị TechCrunch ở San Francisco, Mark Zuckerberg đã nói:
Sai lầm lớn nhất mà chúng tôi đã làm với tư cách là một công ty là đặt cược vào HTML5 so với native.
Tuy nhiên, thế giới phần mềm đã thay đổi rất nhiều kể từ khi Zuckerberg đưa ra tuyên bố đó vào năm 2012 Ngày nay, tương lai nằm trong tay các framework lập trình đa nền tảng.
Các framework lập trình đa nền tảng cho phép các lập trình viên tạo ra các ứng dụng di động tương thích với nhiều hệ điều hành, trong trường hợp này là iOS và Android Nó cung cấp cho họ khả năng viết code một lần và sau đó chạy nó ở bất kỳ đâu cho các nền tảng khác, từ đó cho phép phát hành sản phẩm/ phần mềm nhanh hơn, an toàn hơn và với chất lượng tốt hơn.
Sự khác biệt giữa phát triển ứng dụng native và lập trình đa nền tảng
Native và đa nền tảng là một cuộc tranh luận không hồi kết khiến cộng đồng công nghệ chia rẽ trong nhiều năm Có một số chuyên gia thích các ứng dụng native hơn các ứng dụng lập trình đa nền tảng, mặt khác, các công ty như Uber đang đưa ra framework lập trình đa nền tảng của họ là Ribs – để viết lại ứng dụng trình điều khiển của họ.
Cả công nghệ phát triển ứng dụng native và đa nền tảng đều ở trong tình trạng tiến hóa không ngừng Tính chất thay đổi của công nghệ này báo hiệu rằng các chủ đề này nên được xem xét lại theo thời gian để kiểm tra xem những tùy chọn nào hiện đang dyn đầu trò chơi.
Phát triển ứng dụng native tránh sự phức tạp của việc tạo ra một sản phẩm bền vững trải rộng trên nhiều nền tảng và thay vào đó tập trung vào việc tạo ra một thiết kế gần với nền tảng mục tiêu, Android, iOS, v.v.
Các framework đa nền tảng tìm cách tạo ra một ứng dụng tiếp cận với càng nhiều người theo dõi thương hiệu của bạn càng tốt bằng cách bao phủ nhiều thiết bị đầu cuối trong quá trình lập trình
Parameters Native Apps Cross-Platform Apps
Cost High cost of development Relatively low cost of development
Works for a single platform Single code can be used for multiple platforms, for an easy portability
Platform SDK ensures access to device’s APIs without any hindrance
No assured access to all device APIs
UI Consistency Consistent with the UI components of the device Limited consistency with the UI components of the device
Seamless performance, given the app is developed for the device’s OS
High on performance, but lags and hardware compatibility issues are not uncommon
Bảng 1.1 So sánh giữa Native Apps & Cross-Platform Apps
Lợi ích của việc phát triển ứng dụng đa nền tảng
Theo Gautam Agrawal, giám đốc quản lý sản phẩm tại Sencha tuyên bố rằng:
Có sự gia tăng theo cấp số nhân của chi phí phát triển và nhu cầu thời gian nhanh chóng ra thị trường, lập trình đa nền tảng là con đường dành cho doanh nghiệp.
- Tái sử dụng code: Dễ sử dụng lại code là một trong những ưu điểm lớn nhất mà phát triển ứng dụng hybrid cung cấp Một code duy nhất có thể được sử dụng cho nhiều nền tảng Vì vậy, đó là một nửa nỗ lực và thời gian so với phát triển ứng dụng native.
- Hiệu quả chi phí: Nó cung cấp một chi phí lập trình đa nền tảng tương đối thấp hơn so với phát triển ứng dụng native vì code được viết một lần và được sử dụng cho cả hai (hoặc nhiều) nền tảng.
- Tính nhất quán trong các thành phần UI: Các ứng dụng lập trình đa nền tảng cung cấp một mức độ nhất quán cao trong các thành phần UI gốc của thiết bị Cái nhìn và cảm nhận là thống nhất nhau.
- Hosting dễ dàng: Thật dễ dàng để host trên các cửa hàng ứng dụng tương ứng khi tất cả các yêu cầu đã được đáp ứng.
- Tích hợp đám mây: Tích hợp với môi trường đám mây rất dễ dàng Bạn thậm chí có thể tích hợp chúng nhanh chóng với các plugin cấp doanh nghiệp do đó cung cấp khả năng tương thích phổ quát cao hơn.
- Ít rào cản kỹ thuật hơn: Các lập trình viên gặp ít rào cản kỹ thuật hơn vì không cần phải học các ngôn ngữ cụ thể như Objective-C hoặc Swift Thành thạo HTML, JavaScript và CSS3 đã đủ để phát triển ứng dụng đa nền tảng.
- Thời gian ra thị trường ngắn hơn: Các ứng dụng như vậy cung cấp thời gian ngắn hơn để tiếp cận thị trường rộng lớn Và vì ứng dụng có sẵn trên nhiều nền tảng cùng một lúc, nó giúp tiết kiệm công sức tiếp thị.
Hình 1.1 Các lợi ích của ứng dụng đa nền tảng
Các framework phát triển ứng dụng di động đa nền tảng phổ biến
Bạn có thể gọi nó là khung đa nền tảng phổ biến nhất được sử dụng bởi một số Công ty Phát triển ứng dụng di động để tạo các ứng dụng di động Đây là một Framework nguồn mở có sẵn miễn phí Các công nghệ như HTML, CSS trong JavaScript được sử dụng trong Framework này và có thể thêm vào các kỹ năng của nhà phát triển
Framework này kế thừa các yếu tố nhất định từ Android và IOS Framework ion cũng khiến một cộng đồng lớn cung cấp hỗ trợ tuyệt vời và các nhà phát triển có thể xây dựng một ứng dụng gốc giống như di động Các tính năng bao gồm:
+ Có thể sử dụng một mã duy nhất
+ Để phát triển cấu trúc của ứng dụng, nó cũng có thể sử dụng AngularJS + Cung cấp một thư viện các công cụ và thành phần.
Thuộc sở hữu của Microsoft, đây là một trong những khung chính hoạt động trên ghi một khi chạy bất kỳ mô hình nào (WORA) Nó là một nền tảng nguồn mở được ra mắt để giải quyết các vấn đề của ngăn xếp công nghệ Native không liên kết Khung này sử dụng tay mã C #; nó có thể hoạt động trên nền tảng máy chủ.
Một tính năng khác có thể làm bạn ngạc nhiên là mã được viết trong Framework này có thể dễ dàng được sử dụng cho các nền tảng khác nhau Nó dựa trên các nhà phát triển NET cũng có thể truy cập vào API gốc với gói NuGet và Plug-in
Các tính năng của nó bao gồm:
+ Các nhà phát triển sử dụng Windows và nền tảng lâu đời nhất
+ Có thể được thử nghiệm trên nhiều thiết bị với sự trợ giúp của các dịch vụ đám mây
+ Cung cấp một công cụ phát triển ứng dụng đa nền tảng cho giao diện
Khung nền tảng chéo này đã được Facebook ra mắt vào năm 2013 Các công ty phát triển ứng dụng di động có thể thuê nhà phát triển Native có thể sử dụng JavaScript với khung này.
Việc thiết kế khung này cho phép nhà phát triển sử dụng các thành phần được khai báo để tích hợp giao diện người dùng di động phong phú
Khung này cho phép các nhà phát triển xem trước dự trữ của họ và nó cũng lưu trữ khả năng sử dụng lại mã Các tính năng này hoàn toàn rút ngắn khung thời gian phát triển React khung gốc cũng bao gồm phản ứng sử dụng JavaScript để xây dựng các ứng dụng liên quan đến thiết bị di động và web.
Các tính năng của nó bao gồm:
+ Là một khung phát triển nguồn mở
+ Phát triển web dễ dàng được hỗ trợ bởi khung này
+ React Native cũng có một cộng đồng hỗ trợ
+ Một số trình cắm thêm được cung cấp cho các nhà phát triển
1.4.4 Adobe PhoneGap or Apache Cordova
Adobe PhoneGap trước đây được biết đến với cái tên Apache Cordova là một khung nền tảng chéo được sở hữu bởi Adobe Khung này sử dụng HTML5, CSS và JavaScript để phát triển và cho phép người dùng chia sẻ ứng dụng mà họ đang phát triển với nhóm để họ có thể nhận được phản hồi tích cực Trong trường hợp nhà phát triển muốn xây dựng ứng dụng trực tiếp, thì nó cũng cung cấp giải pháp đám mây Nó mang đến sự độc lập đối với các lệnh văn bản phức tạp và quyền truy cập vào các công cụ và thành phần của bên thứ ba Với sự trợ giúp của khung phát triển di động này, các nhà phát triển có thể xem sự thay đổi trong động lực một cách dễ dàng
Các tính năng của nó bao gồm:
+ Khung này có thể được sử dụng để phát triển các ứng dụng cho các hệ điều hành khác nhau
+ Với sự trợ giúp của plugin, nhà phát triển có thể thêm nhiều chức năng hơn
+ Khung này không có bất kỳ hạn chế phần cứng nào
Thuộc sở hữu của Google, Flutter là một khung phát triển ứng dụng đa nền tảng , nguồn mở Nó được thiết kế để phát triển các giao diện gốc cho Android cũng như iOS có thời gian tương đối ít hơn.
Các nhà phát triển trên toàn thế giới sử dụng khung này vì nó cũng có thể hoạt động trên mã có sẵn Khung này cũng có thể sử dụng công cụ kết xuất 2D để phát triển hình ảnh, như- Skia
Khung phát triển ứng dụng di động là khía cạnh quan trọng của các công ty phát triển ứng dụng di động Các nền tảng kinh doanh đang sử dụng các khung phát triển ứng dụng này để tận dụng các khả năng của chúng vì chúng cũng thân thiện với chi phí và tiết kiệm thời gian.
Hình 1.2 Độ phổ biến của các ứng dụng đa nền tảng hiện nay
GIỚI THIỆU VỀ FLUTTER
Flutter là gì?
Flutter là SDK dành cho thiết bị di động của Google để tạo ra các giao diện native chất lượng cao trên iOS và Android trong thời gian ngắn Flutter làm việc với source code có sẵn, được sử dụng bởi các nhà phát triển và các tổ chức trên khắp thế giới, đồng thời nó open-source và miễn phí.
Phiên bản đầu tiên của Flutter được gọi là "Sky" và chạy trên hệ điều hành Android Nó được công bố tại hội nghị nhà phát triển Dart 2015, với dự định ban đầu để có thể kết xuất ổn định ở mức 120 khung hình trên giây Trong bài phát biểu chính ở hội nghị Google Developer Days tại Thượng Hải, Google công bố phiên bản Flutter Release Preview 2, đây là phiên bản lớn cuối cùng trước Flutter 1.0 Vào ngày 4 tháng 12 năm 2018, Flutter 1.0 đã được phát hành tại sự kiện Flutter Live, là phiên bản"ổn định"đầu tiên của khung ứng dụng này. Đến nay flutter đã ra tới phiên bản 1.22.5 vào ngày 11 tháng 12 năm 2020 là phiên bản mới nhất của framework này
Flutter gồm 2 thành phần quan trọng:
Một SDK (Software Development Kit): Một bộ sưu tập các công cụ sẽ giúp bạn phát triển các ứng dụng của mình Điều này bao gồm các công cụ để biên dịch mã của bạn thành mã máy gốc (mã cho iOS và Android).
Một Framework (UI Library based on widgets): Một tập hợp các thành phần giao diện người dùng (UI) có thể tái sử dụng (button, text inputs,slider, v.v.) giúp bạn có thể cá nhân hóa tùy theo nhu cầu của riêng mình.
Flutter sử dụng ngôn ngữ gì?
Flutter sử dụng ngôn ngữ DART.
Dart là ngôn ngữ lập trình đa mục đích, được phát triển bởi Google Dart có thể sử dụng cho lập trình Web, Server, Mobile app và các thiết bị IoT. Ngôn ngữ Dart chịu nhiều ảnh hưởng bởi các ngôn ngữ khác, nhưng ngôn ngữ ảnh hưởng lớn nhất đối với Dart là JAVA Điều này là 1 lợi thế cho bạn nào đã biết về JAVA thì học ngôn ngữ Dart rất nhanh và khi code Dart sẽ thấy có khá nhiều điểm tương đồng với JAVA.
Do ảnh hưởng bởi JAVA nên ngôn ngữ Dart là ngôn ngữ lập trình hướng đối tượng (OOP); và tất nhiên sẽ có các tính chất như: đóng gói, đa hình, trừu tượng và kế thừa.
Các nhà phát triển tại Google và các nơi khác sử dụng Dart để tạo các ứng dụng chất lượng cao, quan trọng cho iOS, Android và web Với các tính năng nhắm đến sự phát triển phía khách hàng, Dart rất phù hợp cho cả ứng dụng di động và web Dart giúp bạn tạo ra những trải nghiệm đẹp, chất lượng cao trên tất cả các màn hình, với:
Một ngôn ngữ được tối ưu hóa cho client
Những ưu điểm của Dart
Năng suất Cú pháp Dart rõ ràng và súc tích, công cụ của nó đơn giản nhưng mạnh mẽ Type-safe giúp bạn xác định sớm các lỗi tinh tế Dart có các thư viện cốt lõi và một hệ sinh thái gồm hàng ngàn package.
Nhanh Dart cung cấp tối ưu hóa việc biên dịch trước thời hạn để có được dự đoán hiệu suất cao và khởi động nhanh trên các thiết bị di động và web.
Di động Dart biên dịch thành mã ARM và x86, để các ứng dụng di động của
Dart có thể chạy tự nhiên trên iOS, Android và hơn thế nữa Đối với các ứng dụng web, chuyển mã từ Dart sang JavaScript.
Dễ gần Dart quen thuộc với nhiều nhà phát triển hiện có, nhờ vào cú pháp và định hướng đối tượng không gây ngạc nhiên của nó Nếu bạn đã biết C ++, C # hoặc Java, bạn có thể làm việc hiệu quả với Dart chỉ sau vài ngày.
Reactive Dart rất phù hợp với lập trình Reactive, với sự hỗ trợ để quản lý các đối tượng tồn tại trong thời gian ngắn, chẳng hạn như các widget UI, thông qua phân bổ đối tượng nhanh và GC Dart hỗ trợ lập trình không đồng bộ thông qua các tính năng ngôn ngữ và API sử dụng các đối tượng Future và Stream.
Những đặc điểm của Flutter
2.3.1 Phát triển ứng dụng nhanh chóng
Tính năng hot reload của Flutter giúp bạn nhanh chóng và dễ dàng thử nghiệm, xây dựng giao diện người dùng, thêm tính năng và sửa lỗi nhanh hơn. Trải nghiệm tải lại lần thứ hai, mà không làm mất trạng thái, trên emulator, simulator và device cho iOS và Android
Hình 2.1 Chức năng hot-reload trên Flutter
2.3.2 UI đẹp và biểu cảm
Thỏa mãn người dùng của bạn với các widget built-in đẹp mắt của Flutter theo Material Design và Cupertino (iOS-flavor), các API chuyển động phong phú, scroll tự nhiên mượt mà và tự nhận thức được nền tảng.
Hình 2.2 Một ứng dụng viết bằng Flutter
2.3.3 Framework hiện đại và reactive
Dễ dàng tạo giao diện người dùng của bạn với framework hiện đại, reactive của Flutter và tập hợp các platform, layout và widget phong phú Giải quyết các thách thức giao diện người dùng khó khăn của bạn với các API mạnh mẽ và linh hoạt cho 2D, animation, gesture, hiệu ứng và hơn thế nữa.
2.3.4 Truy cập các tính năng và SDK native
Làm cho ứng dụng của bạn trở nên sống động với API của platform, SDK của bên thứ ba và native code Flutter cho phép bạn sử dụng lại mã Java, Swift và Object C hiện tại của mình và truy cập các tính năng và SDK native trên iOS và Android.
2.3.5 Phát triển ứng dụng thống nhất
Flutter có các công cụ và thư viện để giúp bạn dễ dàng đưa ý tưởng của mình vào cuộc sống trên iOS và Android Nếu bạn chưa có kinh nghiệm phát triển trên thiết bị di động, thì Flutter là một cách dễ dàng và nhanh chóng để xây dựng các ứng dụng di động tuyệt đẹp Nếu bạn là một nhà phát triển iOS hoặcAndroid có kinh nghiệm, bạn có thể sử dụng Flutter cho các View của bạn và tận dụng nhiều code Java / Kotlin / ObjC / Swift hiện có của bạn.
Kiến trúc của Flutter
Flutter được thiết kế như một hệ thống nhiều lớp, có thể mở rộng Nó tồn tại dưới dạng một loạt các thư viện độc lập mà mỗi thư viện phụ thuộc vào lớp bên dưới Không có lớp nào có quyền truy cập đặc quyền vào lớp bên dưới và mọi phần của mức khung được thiết kế để trở thành tùy chọn và có thể thay thế Thông thường, các nhà phát triển tương tác với Flutter thông qua Flutter framework, cung cấp một framwork phản ứng hiện đại được viết bằng ngôn ngữ Dart Nó bao gồm một bộ thư viện nền tảng, bố cục và nền tảng phong phú, bao gồm một loạt các lớp Làm việc từ dưới lên trên, chúng tôi có:
Các lớp nền tảng ( foundational ) cơ bản và các dịch vụ khối xây dựng như animation, painting và cử chỉ (gestures) cung cấp các nội dung trừu tượng thường được sử dụng trên nền tảng cơ bản.
Lớp kết xuất (rendering layer) cung cấp một sự trừu tượng để xử lý bố cục Với lớp này, bạn có thể xây dựng một cây các đối tượng có thể kết xuất Bạn có thể thao tác động các đối tượng này, với cây tự động cập nhật bố cục để phản ánh các thay đổi của bạn.
Lớp vật dụng (widgets layer) là một sự trừu tượng hóa thành phần Mỗi đối tượng kết xuất trong lớp kết xuất có một lớp tương ứng trong lớp vật dụng Ngoài ra, lớp vật dụng cho phép bạn xác định tổ hợp các lớp mà bạn có thể sử dụng lại Đây là lớp mà tại đó mô hình lập trình phản ứng được giới thiệu.
Các thư viện Material và Cupertino cung cấp các bộ điều khiển toàn diện sử dụng các cấu trúc nguyên thủy của lớp widget để triển khai ngôn ngữ thiết kế Material hoặc iOS.
Hình 2.3 Kiến trúc của Flutter
Phía trên là hình ảnh kiến trúc high-level của Flutter Khi chúng ta dùng Dart để viết một app Flutter thì t c là chúng ta đang dùng đến tầng Framework của kiếnứ trúc (màu xanh lá) Tầng Framework sẽ giao tiếp v i tầng Engine (xanh dớ ương) thông qua một l p abstract gọi là Window L p abstract này sẽ cung cấp mộtớ ớ tập các API để giao tiếp, một cách không tr c tiếp, v i thiết bị.ự ớ
Cũng thông qua l p abstract này mà tầng Engine sẽ có hành động notify tầngớ Framework khi có các s kiện sau:ự
Cấu hình thiết bị thi thay đổi (orientation, setting, trạng thái chạy của ngứ dụng…)
Có tương tác của user v i màn hình (gesture).ớ
Platform channel truyền d liệu lên tầng Framework.ữ
Và phần l n là khi tầng Engine sẵn sàng để render frame mớ ới.
Ưu nhược điểm của Flutter
Ngôn ngữ Dart: Dart - OOP, nó khá dài, nhưng những người quen viết bằng Java / C # sẽ vui vẻ với Dart.
Ít phải viết các thiết lập khi tạo dự án mới theo cách thủ công, ngược lại với React Native.
Chỉ cần tải về Flutter từ git, chạy “flutter doctor”, và nó sẽ cho bạn biết những loại vấn đề bạn có thể có trong hệ thống Sau đó, tạo một dự án từ Android Studio hoặc bất kỳ IDE nào sau khi cài đặt Flutter Plug-in sơ bộ và bắt đầu dự án Ngoài ra nó còn có Hot-reload giống như trong React- Native.
Trình điều hướng tích hợp sẵn Sau khi tạo ra một ứng dụng trên Flutter, bạn có thể ngạc nhiên rằng nó có Navigator được xây dựng sẵn Bạn có thể tạo một route mới mà không cần kết nối bất kỳ thứ gì (không giống như trong RN, nơi bạn cần kết nối bất kỳ package điều hướng gốc nào vv);
Giải pháp quản lý dữ liệu được tạo sẵn, ví dụ trong Flutter này là "Mọi thứ đều có một Widget" cho nó Có một StatefulWidget đặc biệt, với sự giúp đz của nó mà chúng ta có thể quản lý trạng thái widget và thay đổi nó một cách năng động.
Hỗ trợ tốt trên các IDE là: Android Studio, IntelliJ, Visual Studio Code.
Có một rào cản lớn cho những người chỉ học JS, hoặc đến từ RN Do thực tế là Dart được sử dụng, với sự thừa kế, đa hình của nó và tất cả các thứ về OOP.
Không có JSX mà tất cả chúng ta đã quen khi làm RN Nhìn vào tệp Dart trong đó không có phân chia thành template, styling và làm việc với dữ liệu, nó trở nên khó chịu.
Styling là một nỗi đau Xem xét thực tế là không có sự tách biệt thànhStyles, templates và controller, có một vấn đề khi mô tả một thành phần,chúng ta cũng cần mô tả các styles cùng một lúc.
Animation còn khó khăn hơn Mặc dù nó có một animation tốt, nhưng nó sẽ khó hơn khi tạo hiệu ứng động không giống như trong RN.
Tối ưu hóa Trong Fluter, chỉ có thừa kế widget với các điều kiện có thể thay đổi (trạng thái) và không thể thay đổi (không trạng thái) Trong khi ở React-Native chúng ta có thể quản lý vòng đời Ngoài ra, một nhược điểm lớn là thiếu các công cụ để lưu trạng thái của ứng dụng, vấn đề này có thể, tuy nhiên, được giải quyết bằng cách tuần tự hóa trạng thái hiện tại.
So sánh giữa Flutter và React Native
Cả hai đều được thiết kế để phát triển cross-platform app: React Native và
Flutter đều cung cấp hiệu suất ứng dụng vượt trội, nhanh chóng và chất lượng cao trên nhiều platform bao gồm Android, iOS và UWP (Lưu ý: Flutter hỗ trợ platform Android và iOS)
Cả hai framework được hỗ trợ bởi các cộng đồng công nghệ khổng lồ:
React Native được cung cấp bởi Facebook còn Flutter là SDK nguồn mở của Google để phát triển mobile app Cả hai đều có cộng đồng các developer mạnh mẽ
Nguồn mở, miễn phí và nhanh chóng: React Native và Flutter là các SDK nguồn mở và miễn phí cho phép các developer tạo ra các app tuyệt vời một cách nhanh chóng dựa vào native performance của chúng.
Documentation chi tiết và luôn được cập nhật: Các cộng đồng của cả hai framework này luôn nỗ lực hết sức để liên tục cập nhập documentation mới nhất với các tài liệu tham khảo API và tài nguyên toàn diện.
Hỗ trợ UI và Native Experience tuyệt vời: React Native sử dụng các yếu tố xây dựng UI cơ bản trong Android / iOS để mang lại native experience Flutter cũng sử dụng các widget để cung cấp native experience đáng chú ý trên platform Android và iOS.
Hot reloading và sửa đổi nhanh:
React Native hỗ trợ “Hot reloading” cho phép đồng thời chạy code mới và giữ trạng thái ứng dụng, thay vì phải recompile Tính năng này làm cho sự phát triển nhanh hơn, tức thì và hiệu quả.
Flutter cũng không hề kém cạnh “Stateful Hot Reloading” của nó hỗ trợ phản ánh các thay đổi ngay lập tức mà không cần restart hoặc trong trường hợp mất trạng thái ứng dụng.
Nhà phát triển Google Facebook
Time-to-Market of App Nhanh hơn Chậm hơn so với
Tài liệu Chính xác, rõ ràng và cập nhật hàng ngày Cập nhật và không chính xác
Các ứng dụng hiện có
Alibaba, Reflectly, Google Greentea, Tencent, Google Ads,
Facebook, Instagram, Printerest, Uber, Tesla, Walmart, Baidu Moblie,…
Lợi thế cạnh tranh Ứng dụng gốc đơn giản hơn, nhanh hơn và hiện đại bằng cách sử dụng Flutter SDK dễ sử dụng
Hơn 3 năm trên thị trường với khả năng cung cấp trải nghiệm ứng dụng.
Bảng 2.1 So sánh giữa Flutter & React Native
GIỚI THIỆU VỀ ALAN AI
Tổng quan
Alan là một Nền tảng AI bằng giọng nói tiên tiến cho phép bạn thêm giao diện giọng nói vào ứng dụng của mình mà không tốn phí.
Alan cung cấp một môi trường không máy chủ hoàn chỉnh để xây dựng các chatbot và trợ lý giọng nói trong ứng dụng mạnh mẽ và đáng tin cậy Không cần tạo mô hình ngôn ngữ nói, đào tạo phần mềm nhận dạng giọng nói, triển khai và lưu trữ các thành phần giọng nói - phần phụ trợ Alan AI thực hiện phần lớn công việc Trải nghiệm giọng nói cho ứng dụng của bạn có thể được xây dựng và phát triển bởi một nhà phát triển duy nhất chứ không phải một nhóm các chuyên gia Máy học và Dev Ops Với Alan, bạn có thể vượt xa khả năng của các giao diện cảm ứng và nhập liệu và giọng nói cho phép bất kỳ quy trình hoặc chức năng phức tạp nào trong ứng dụng của bạn Tập lệnh thoại được viết bằng JavaScript, giúp chúng có thể tùy chỉnh và linh hoạt cao.
Giao diện giọng nói được tạo với Alan được xây dựng một lần và triển khai ở bất kỳ đâu - bạn sẽ không phải xây dựng lại chúng cho các nền tảng cụ thể Alan cung cấp các SDK đơn giản để tích hợp với:
Và nếu cần thay đổi giao diện giọng nói, bạn có thể đẩy những thay đổi này mà không cần phải phát hành phiên bản ứng dụng mới Do môi trường không máy chủ của Alan, bất kỳ thay đổi nào đối với giao diện giọng nói đều có sẵn cho người dùng ngay lập tức.
Cấu trúc hoạt động của Alan AI
Để cho phép bạn xây dựng trợ lý giọng nói, Alan cung cấp nền tảng AI đàm thoại Nền tảng này bao gồm một tập hợp các công cụ và thành phần để thiết kế, nhúng và lưu trữ giao diện giọng nói trong ứng dụng của bạn:
Hình 3.1 Kiến trúc hoạt động của Alan AI
Alan Studio là một cổng web nơi các nhà phát triển có thể tạo tập lệnh thoại cho ứng dụng của họ Studio cung cấp một bộ công cụ để viết và kiểm tra kịch bản thuận tiện, bao gồm:
Trình chỉnh sửa mã nguồn: một IDE dựa trên web đơn giản nhưng mạnh mẽ
Công cụ kiểm tra và gz lỗi: Trò chuyện gz lỗi Alan, chế độ xem Chế độ kiểm tra và Sân chơi Alan
Công cụ phân tích để nhận thống kê về tương tác của người dùng Alan Studio cho phép lưu các phiên bản script khác nhau và quay lại chúng khi được yêu cầu Hơn nữa, nó cung cấp các môi trường độc lập để phát triển, thử nghiệm và đưa các kịch bản thoại vào sản xuất.
3.2.2 Alan SDKs Để cho phép người dùng giao tiếp với ứng dụng của bạn bằng giọng nói và thực hiện các lệnh từ tập lệnh thoại, bạn cần thêm nút Alan vào ứng dụng của mình Bạn có thể làm điều đó với Alan SDK Alan cung cấp SDK cho các nền tảng khác nhau:
Sau khi tích hợp ứng dụng của mình với Alan, bạn sẽ thấy một nút nhỏ có thể kéo trên đầu giao diện người dùng ứng dụng Nút Alan kích hoạt giao diện giọng nói và cho biết trạng thái xử lý.
Quá trình tích hợp cho tất cả các nền tảng rất đơn giản và dễ dàng Sau khi tích hợp, bạn sẽ không phải xây dựng lại và thiết kế lại ứng dụng của mình. Nếu bạn cần mở rộng tập lệnh thoại, bạn có thể thêm lệnh thoại trong Alan Studio và nâng cấp phiên bản tập lệnh Tất cả các thay đổi sẽ được áp dụng nhanh chóng và người dùng thậm chí sẽ không phải khởi động lại ứng dụng của họ.
Với Alan, bạn không cần phải lập kế hoạch và triển khai các máy chủ và cơ sở hạ tầng CNTT khác để chạy các tập lệnh thoại Kiến trúc giải pháp là không có máy chủ: các tập lệnh thoại được chạy trên các máy ảo trong đám mây được quản lý cho bạn. Được hỗ trợ bởi đám mây, Alan có khả năng mở rộng cao Nó có thể mở rộng quy mô lên đến hàng triệu người dùng khi yêu cầu của bạn tăng lên Tất cả các tài nguyên để hỗ trợ khối lượng công việc cần thiết đều được Alan cung cấp tự động. Đám mây là nơi các tập lệnh thoại bạn tạo được thực thi và tất cả các quá trình xử lý giọng nói diễn ra Alan tận dụng các thuật toán nâng cao để xử lý các lệnh thoại và các luồng hộp thoại ở mọi mức độ phức tạp Bạn không cần thực hiện bất kỳ khóa đào tạo giọng nói nào: Alan đào tạo về ý định sử dụng thuật ngữ cho ứng dụng của bạn và học cách hiểu logic miền của bạn.
Các tùy chọn triển khai với Alan
Alan cung cấp các tùy chọn triển khai sau cho cơ sở hạ tầng AI của Alan:
Trên máy chủ hoặc đám mây riêng
Alan Cloud là kịch bản triển khai mặc định Trong trường hợp này, tất cả các tài nguyên như máy ảo có tập lệnh thoại và thành phần giọng nói VUI được lưu trữ trên đám mây công cộng Alan sở hữu và quản lý những tài nguyên này và cung cấp chúng cho bạn dựa trên nhu cầu của bạn.
Những ưu điểm của môi trường Alan Cloud là:
Môi trường không máy chủ: bạn không cần quan tâm đến việc lập kế hoạch và cung cấp tài nguyên, tất cả các thành phần đều được triển khai và thiết lập cho bạn Bạn truy cập Alan Studio và các ứng dụng của bạn giao tiếp với các tập lệnh thoại chạy trong đám mây qua Internet.
Không cần bảo trì: Alan cung cấp dịch vụ bảo trì cho bạn.
Khả năng mở rộng không giới hạn: khi số lượng người dùng ứng dụng tăng lên, Alan ngay lập tức bổ sung tài nguyên để đáp ứng yêu cầu của ứng dụng của bạn. Đám mây công cộng là một môi trường có nhiều đối tượng thuê Tức là bạn chia sẻ tài nguyên cơ sở hạ tầng với các công ty khác sử dụng nền tảng AI của Alan Alan chăm sóc bảo mật dữ liệu để dữ liệu của mỗi công ty được cách ly và vô hình đối với các công ty khác Nó phân bổ các máy ảo chuyên dụng để chạy các tập lệnh thoại cho các ứng dụng cụ thể, vì vậy chỉ bạn mới có quyền truy cập vào dữ liệu của mình Và để đảm bảo bảo mật dữ liệu bổ sung trên đám mây, Alan mã hóa dữ liệu khi truyền và ở trạng thái nghỉ.
Hình 3.2 Mô hình hoạt động chung của Alan Cloud
3.3.2 Trên máy chủ hoặc đám mây riêng
Cơ sở hạ tầng Alan có thể được triển khai dễ dàng ở mọi nơi bằng cách sử dụng các thùng chứa: tại cơ sở hoặc trong đám mây riêng Kịch bản này có thể được sử dụng nếu công ty của bạn muốn chạy dịch vụ thoại cục bộ hoặc một số quy định ngăn bạn đặt dữ liệu trong đám mây công cộng Trong trường hợp này, các thành phần giọng nói của Alan được đặt trên trang web của công ty và lưu lượng thoại vyn nằm trong mạng riêng.
Hình 3.3 Mô hình hoạt động cá nhân của Alan Cloud
Xử lý giọng nói
Trong cơ sở hạ tầng Alan, tất cả quá trình xử lý giọng nói được thực hiện trên đám mây Alan Đám mây Alan là phần mềm phụ trợ AI của Nền tảng AI Alan Đây là nơi các tập lệnh thoại được lưu trữ và các nhiệm vụ Hiểu ngôn ngữ nói (SLU) và Xử lý ngôn ngữ tự nhiên (NLP) được hoàn thành.
Về cơ bản, đám mây Alan sử dụng sự kết hợp của các công cụ và công nghệ AI bằng giọng nói để mô phỏng hộp thoại giống như con người giữa người dùng và ứng dụng Cùng với nhau, chúng cho phép Alan diễn giải giọng nói của con người, tạo phản hồi và thực hiện các hành động cần thiết trong ứng dụng Các công nghệ giọng nói chính được Alan sử dụng là:
Xử lý ngôn ngữ tự nhiên (NLP)
Hiểu ngôn ngữ nói (SLU)
Nhận dạng giọng nói tự động (ASR)
Chuyển giọng nói thành văn bản (STT) và chuyển văn bản thành giọng nói (TTS)
3.4.1 Cách xử lý giọng nói hoạt động
Mục tiêu chính của Alan là khớp những gì người dùng nói với một khẩu lệnh cụ thể trong tập lệnh Để làm điều này, Alan cần sắp xếp lại dữ liệu phi cấu trúc trong đầu vào của người dùng để nó có thể được phân tích và xử lý ở cấp độ máy Mỗi cụm từ được người dùng nói đều trải qua một số bước:
Alan sử dụng công cụ Nhận dạng giọng nói tự động (ASR) và Chuyển giọng nói thành văn bản (STT) để nhận dữ liệu nhập của người dùng và chuyển đổi nó thành các đoạn văn bản.
Với sự trợ giúp của Hệ thống hiểu ngôn ngữ nói (SLU) và Nhận dạng đối tượng được đặt tên (NER), Alan đánh giá các myu cụm từ, rút ra ý định và các từ có nghĩa, chẳng hạn như vị trí, ngày và giờ, từ cụm từ Để đối sánh chính xác cao, Alan sử dụng Mô hình ngôn ngữ miền cho ứng dụng của bạn.
Alan đối sánh cụm từ với khẩu lệnh trong tập lệnh Alan Đây là nơi các thuật toán Alan AI Machine Learning (ML) được tận dụng Mỗi cụm từ được cho một điểm xác suất, với ‘1’ là kết quả khớp chính xác nhất.
Nếu Alan được cho là phải đưa ra phản hồi, Alan sẽ sử dụng công nghệ Chuyển văn bản thành giọng nói (TTS) để tổng hợp giọng nói nghe có vẻ tự nhiên.
Hình 3.4 Sơ đồ cách xử lí giọng nói của Alan AI
3.4.2 Alan ASR và Mô hình ngôn ngữ tên miền
Trong quá trình xử lý giọng nói, công cụ ASR chuyển đổi giọng nói thành văn bản Và một trong những thành phần quan trọng trong ASR là mô hình ngôn ngữ Mô hình ngôn ngữ đánh giá xác suất của các chuỗi từ, cho phép ASR phân biệt giữa các từ phát âm giống nhau.
Bên cạnh mô hình ngôn ngữ toàn cầu, Alan còn tạo mô hình ngôn ngữ miền (DLM) cho mọi ứng dụng DLM dựa trên các thuật ngữ, tên và cụm từ duy nhất được sử dụng trong công ty hoặc miền của bạn Nó cho phép ASR của Alan dự đoán với độ chính xác cao những gì người dùng có thể nói trong một ngữ cảnh cụ thể và giải quyết những điều không rõ ràng. Để xây dựng một DLM, bạn không cần phải cung cấp một tập dữ liệu lớn với các biến thể của cách nói hoặc để tạo các mô hình ngôn ngữ nói Alan tự động đào tạo trên các tập dữ liệu nhỏ hiện có và tạo các mô hình với các cụm từ và ý định cho ứng dụng của bạn Do đó, bạn sẽ có một trợ lý giọng nói thông minh hiểu sâu sắc về giao diện người dùng, quy trình làm việc và logic kinh doanh của ứng dụng của bạn.
Hình 3.5 Mô hình Alan ARS & Alan Domain
Một điều khác có thể ảnh hưởng đến độ chính xác của động cơ ASR là tiếng ồn.Alan sử dụng NLU xác suất của mình để đối mặt với vấn đề này Nó xử lý các lỗi nhận dạng giọng nói và đảm bảo trợ lý giọng nói hoạt động đáng tin cậy trong môi trường ồn ào.
XÂY DỰNG ỨNG DỤNG NGHE NHẠC BẰNG FLUTTER & ALAN AI
Cài đặt các công cụ cần thiết
Trong việc xây dựng ứng dụng ở đây em có sử dụng IDE Visual Studio làm công cụ lập trình và sử dụng simulator của iOS (Xcode) & Android Studio để phục vụ cho việc chạy thực nghiệm.
Visual Studio: cài thêm những extensions hỗ trợ cho Flutter như Dart,
Flutter và đặc biệt là Pubspec Assist để có thể tự động thêm thư viện nhanh hơn.
Hình 4.1 Visual Studio Code với Flutter
Đối với Xcode và Android studio là nơi chúng ta khởi tạo máy ảo của 2 hệ điều hành phổ biến của di động hiện nay là iOS và Android để kiểm tra chức năng của ứng dụng có hoạt động ổn định trên cả hai nền tảng hay không.
Khởi tạo ứng dụng
Để bắt đầu lập trình với Flutter thì ta cần Flutter SDK được tải từ: https://flutter.dev/docs/get-started/install tùy vào từng phiên bản hệ điều hành có thể lựa chọn để tương tích.
Tạo ứng dụng Flutter mới bằng cách chạy dòng lệnh sau trong Terminal:
Thư mục AI-Radio được tạo, chứa ứng dụng dành cho người mới bắt đầu củaFlutter Trỏ đến và chạy thư mục này:
Tạo giao diện cho ứng dụng
Sử dụng pubspec assist thêm các thư viện cần thiết như hình dưới
Hình 4.2 Các thư viện cần thêm vào ứng dụng qua pubspec
Hình 4.3 Kết nối API với ứng dụng
Hình 4.4 Giao diện ứng dụng khi hoàn tất
Tiếp theo ta vào pub.dev và gõ từ khóa alanvoice để import thư viện vào ứng dụng để có thể sử dụng Alan AI
Hình 4.5 Tìm kiếm thư viện trong pub.dev
Thiết lập Alan AI
Thực hiện đăng nhập vào Alan AI thông qua website: https://studio.alan.app/login sau khi thành công thì ta sẽ tạo một bản trợ lý giọng nói mới đặt tên là AIRadio.
Hình 4.6 Tạo thư mục trong Alan Studio
Hình 4.7 Giao diện chính của Alan Studio
Sau đó tạo một Script mới tên AI_Data
Hình 4.8 Tạo thư mục mới
Lấy một file json chứa các API nhạc đã chuẩn bị sẵn ở đây em sử dụng mộtAPI miễn phí có tên là radio.json.
Hình 4.9 Thư mục chứa các API nhạc thêm vào ứng dụng
Sau đó copy toàn bộ file này và dán vào trong AI_Data mới tạo trong Anlan Studio.
Hình 4.10 Thêm file json vào thư mực mới tạo từ Alan Studio
Tùy chỉnh nút AI radio và các thiết lập có thể sử dụng.
4.11 Tùy chỉnh giao diện, cài đặt bổ sung của Alan button
Hình 4.12 Thiết lập hội thoại với Alan AI
Hình 4.13 Kết nối nút Alan AI trong ứng dụng
Hình 4.14 Giao diện ứng dụng trên Android và iO