Giới thiệu về Billin
Khi chúng tôi bắt tay vào xây dựng Billin - ứng dụng tạo hóa đơn thông minh dành cho các freelancer, doanh nghiệp nhỏ và chuyên gia, chúng tôi đã quyết tâm mang đến trải nghiệm sạch sẽ, đáng tin cậy giúp người dùng tạo, gửi và theo dõi hóa đơn chuyên nghiệp chỉ trong vài giây.
Trên Android, điều này khá đơn giản: Kotlin và Jetpack Compose đã cung cấp cho chúng tôi hiệu suất cần thiết, và người dùng rất thích những kết quả nhanh chóng, tinh tế. Nhưng chúng tôi không muốn dừng lại ở đó. Các freelancer và doanh nghiệp nhỏ thường làm việc trên nhiều thiết bị và hệ sinh thái khác nhau, và nhiều người trong số họ đã yêu cầu một phiên bản iOS. Đó là lý do tại sao Compose Multiplatform (CMP) trở nên cần thiết.
Tại sao chọn Compose Multiplatform?
Với Billin, người dùng có thể xem trước hóa đơn dưới dạng PDF, theo dõi thanh toán, quản lý khách hàng và quản lý kho dịch vụ - tất cả từ điện thoại của họ. Để mang trải nghiệm này đến iOS, chúng tôi có hai lựa chọn:
- Xây dựng một ứng dụng SwiftUI hoàn toàn riêng biệt.
- Tận dụng các công cụ mà chúng tôi đã yêu thích (Kotlin + Compose) và mở rộng chúng sang iOS.
Chúng tôi đã chọn phương án thứ hai - và Compose Multiplatform (CMP) đã chứng minh là quyết định đúng đắn.
Thách thức và giải pháp
Việc chuyển đổi từ Android sang CMP đã gặp một số khó khăn. Ví dụ:
- Trên Android, chúng tôi dựa vào thành phần PDF Preview của AndroidX để hiển thị hóa đơn. Trên iOS, điều này không khả dụng. Giải pháp của chúng tôi là tạo các hình ảnh xem trước của hóa đơn, điều này hoạt động hoàn hảo trên cả hai nền tảng.
- Một số quy ước UI đơn giản không chuyển đổi tốt. Chúng tôi đã vô hiệu hóa hiệu ứng ripple trên iOS và thay thế một số chuyển tiếp màn hình bằng các hoạt ảnh cảm thấy tự nhiên hơn trong hệ sinh thái của Apple.
- Chúng tôi đã cẩn thận điều chỉnh bố cục và khoảng cách để người dùng iOS không cảm thấy họ đang sử dụng một ứng dụng Android "được chuyển đổi".
Tin tốt là hầu hết các thư viện Jetpack Compose mà chúng tôi đã sử dụng đều hỗ trợ đa nền tảng. Và với thư viện mã nguồn mở của riêng chúng tôi, pale-blue-kmp-core, chúng tôi đã có một lợi thế lớn trong việc chia sẻ logic giữa các nền tảng.
Kiến trúc của Billin
Billin được xây dựng trên một kiến trúc dựa trên dịch vụ, điều này đã giúp phát triển đa nền tảng hiệu quả. Đây là cách mà chúng tôi thực hiện:
- Chúng tôi sử dụng một lớp
SystemServiceđể trừu tượng hóa các tương tác mức hệ thống (như lưu trữ tệp hoặc chia sẻ). - Với cơ chế
expect/actualcủa Kotlin, chúng tôi triển khai mã cụ thể cho từng nền tảng trong khi giữ lại phần lớn logic chung. - Mô hình monorepo của chúng tôi cho phép chia sẻ các mô hình, logic kinh doanh, và thậm chí một số mã backend giữa Android, iOS và máy chủ của chúng tôi.
Nói về máy chủ, backend của chúng tôi cũng được viết bằng Kotlin (Spring). Điều này có nghĩa là Billin không chỉ là một ứng dụng đa nền tảng trên di động - nó là một phần của hệ sinh thái Kotlin thống nhất chạy trên frontend, backend và các thư viện chia sẻ.
Cung cấp thiết kế đa nền tảng mà vẫn tự nhiên
Với Billin, chúng tôi đã thực hiện một lựa chọn thiết kế có chủ đích: ứng dụng nên trông sạch sẽ và hiện đại, nhưng không quá gắn bó với thiết kế Material Design của Android hay Guidelines Giao diện của iOS. Thay vào đó, chúng tôi đặt mục tiêu tạo ra một phong cách thị giác trung lập nhưng thanh lịch mà cảm thấy quen thuộc trên cả hai nền tảng.
Dù vậy, chúng tôi không bỏ qua các quy ước của nền tảng. Chúng tôi vẫn sử dụng các phần tử UI và hoạt ảnh gốc nơi mà chúng có ý nghĩa - ví dụ, các chuyển tiếp trên iOS hoạt động như người dùng iOS mong đợi, và các hộp thoại hệ thống tuân theo các hướng dẫn của nền tảng. Bằng cách kết hợp ngôn ngữ thiết kế chung, không gắn bó với nền tảng với các điểm nhấn gốc, Billin cảm thấy nhất quán và chuyên nghiệp nhưng vẫn tự nhiên trên bất kỳ thiết bị nào bạn đang sử dụng.
Đơn giản hóa việc mua hàng trong ứng dụng với RevenueCat
Một lĩnh vực mà chúng tôi đặc biệt ấn tượng là mua hàng trong ứng dụng. Việc thiết lập IAP trong Play Console và App Store Connect vẫn là điều cần thiết, nhưng việc quản lý chúng trên cả hai nền tảng có thể rất phức tạp - giữ cho ID sản phẩm nhất quán, đảm bảo giá cả phù hợp, và sau đó kết nối mọi thứ lại với nhau trong ứng dụng. RevenueCat đã giải quyết phần lớn sự phức tạp đó bằng cách cung cấp một paywall động, có thể cấu hình mà kéo các sản phẩm đúng vào thời gian chạy.
Điều này không chỉ có nghĩa là chúng tôi không phải mã cứng danh sách sản phẩm, mà còn cho phép chúng tôi A/B kiểm tra thông điệp marketing và chiến lược giá chỉ với vài cú nhấp chuột. Hơn nữa, báo cáo thống nhất trên cả hai nền tảng giúp dễ dàng có cái nhìn tổng quan về đăng ký và doanh thu. Và thực tế là RevenueCat đi kèm với một SDK Kotlin Multiplatform (KMP) là một lợi thế lớn - việc tích hợp nó vào kiến trúc hiện tại của chúng tôi rất mượt mà và thân thiện với lập trình viên.
Những gì Billin cung cấp
Cốt lõi của Billin là một công cụ hóa đơn được thiết kế để giúp các freelancer và doanh nghiệp nhỏ quản lý quy trình lập hóa đơn trên di động. Ứng dụng hỗ trợ:
- Tạo hóa đơn - tạo hóa đơn với hỗ trợ cho thuế, giảm giá và tổng tự động.
- Theo dõi và báo cáo - giữ một bản ghi các khoản thanh toán, các mục quá hạn, chi phí và tóm tắt khách hàng.
- Quản lý thực thể - duy trì các mặt hàng và dịch vụ mà bạn cung cấp để tạo hóa đơn nhanh chóng.
- Truy cập đa nền tảng - xem trước hóa đơn dưới dạng PDF hoặc hình ảnh, chia sẻ chúng một cách an toàn, và truy cập dữ liệu từ nhiều thiết bị.
Chức năng này được bao bọc trong một thiết kế sạch sẽ và hiện đại, cố ý không gắn bó quá chặt chẽ với các hệ thống thiết kế của Android hoặc iOS, trong khi vẫn sử dụng các phần tử UI và hoạt ảnh gốc để cảm thấy tự nhiên trên mỗi nền tảng.
Sức mạnh của CMP
Đối với chúng tôi, Compose Multiplatform (CMP) không chỉ là viết ít mã hơn. Nó còn nhằm tạo ra một trải nghiệm đa nền tảng liền mạch trong khi giữ cho quy trình phát triển của chúng tôi hiệu quả và có thể mở rộng.
Billin hiện tại vừa là một ứng dụng Android gốc vừa là một ứng dụng iOS tuyệt vời, được xây dựng từ cùng một nền tảng chia sẻ. Với những điều chỉnh cẩn thận, nó cảm thấy hoàn toàn tích hợp vào mỗi hệ sinh thái trong khi vẫn duy trì trải nghiệm nhất quán trên nhiều nền tảng. Kết hợp với backend Kotlin/Spring và cách tiếp cận monorepo của chúng tôi, chúng tôi đã tạo ra một ngăn xếp thống nhất nơi các mô hình, logic và dịch vụ có thể được tái sử dụng ở mọi nơi.
Cách tiếp cận này đã cho phép chúng tôi di chuyển nhanh hơn, giảm thiểu sự trùng lặp và cung cấp các ứng dụng cảm thấy tự nhiên trên cả Android và iOS trong khi vẫn trung thành với một thiết kế sạch sẽ, không gắn bó với nền tảng.
