Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Ionic
Code

Bắt đầu với các dịch vụ Ionic: Deploy

by
Difficulty:IntermediateLength:LongLanguages:

Vietnamese (Tiếng Việt) translation by Andrea Ho (you can also view the original English article)

Một trong những thế mạnh của Ionic là trong các dịch vụ mà nó cung cấp trên nền của framework. Gồm có các dịch vụ để xác thực người dùng ứng dụng của bạn, push notification (thông báo đẩy) và phân tích. Trong loạt bài này, chúng ta sẽ tìm hiểu về các dịch vụ đó bằng cách tạo ra các ứng dụng sử dụng chúng.

Trong bài này, chúng ta sẽ xem xét Ionic Deploy. Dịch vụ này cho phép bạn xuất bản các thay đổi đối với ứng dụng Ionic của bạn mà không cần phải biên dịch lại và gửi lại ứng dụng đến cửa hàng ứng dụng. Điều này rất hữu ích để nhanh chóng push các bản sửa lỗi, cập nhật nhỏ và các thay đổi khác cho ứng dụng. Với tính năng "Deploy Channels", bạn có thể thực hiện kiểm thử A/B bằng cách áp dụng những thay đổi code khác nhau cho các bản triển khai khác nhau.

Tuy nhiên, không phải tất cả các thay đổi mà bạn muốn áp dụng cho ứng dụng của mình đều có thể được push thông qua Ionic Deploy. Chỉ những thay đổi đối với HTML, CSS, JavaScript và nội dung trong thư mục www của bạn mới có thể được xử lý theo cách này. Các thay đổi nhị phân như các cập nhật cho phiên bản của nền tảng Cordova, những plugin của Cordova (cập nhật các plugin hiện có hoặc bổ sung các plugin mới) và các tài nguyên cho ứng dụng như biểu tượng và màn hình splash không thể được push qua Ionic Deploy.

Ionic Deploy hoạt động như thế nào

Trong ứng dụng Ionic của bạn, bạn có dùng code sẽ kiểm tra các triển khai sẵn có (bản cập nhật). Mặc định, nó sẽ kiểm tra các triển khai trong kênh production. Nhưng bạn cũng có thể chỉ định các kênh khác để nhận cập nhật.

Sau đó, bạn có thể push các thay đổi của mình bằng lệnh ion upload. Thao tác này sẽ upload các thay đổi của bạn lên Ionic Cloud. Sau khi chúng được tải lên, bạn có thể chọn kênh bạn muốn triển khai và xem liệu bạn có thực hiện triển khai bây giờ hay không.

Việc triển khai đến kênh mà ứng dụng của bạn đang theo dõi sẽ kích hoạt để xử lý code trong ứng dụng của bạn. Code này đó sau đó chịu trách nhiệm tải xuống bản cập nhật, giải nén và nạp lại ứng dụng để áp dụng các thay đổi.

Kết quả mà bạn sẽ tạo ra

Trong bài này, bạn sẽ sử dụng các lệnh để push các thay đổi và kiểm tra liệu triển khai có hoạt động như mong đợi không. Để đơn giản, những thay đổi mà chúng tôi sẽ giới thiệu sẽ chủ yếu là giao diện người dùng. Trong mỗi lần triển khai, chúng tôi sẽ thay đổi số phiên bản được hiển thị cho ứng dụng. Chúng tôi cũng sẽ thay đổi hình ảnh được hiển thị trên ứng dụng để cho thấy rằng nội dung cũng có thể được cập nhật.

Thiết lập

Bây giờ bạn đã có biết về cách thức hoạt động của Ionic Deploy và những gì bạn sẽ xây dựng, đã đến lúc bạn bắt tay vào thực hành bằng cách tạo ra một ứng dụng sử dụng Ionic Deploy. Bắt đầu bằng cách khởi động một ứng dụng Ionic mới:

Lệnh trên sẽ tạo một ứng dụng mới bằng cách sử những tab template. DI chuyển vào trong thư mục deployApp sau khi hoàn tất cài đặt:

Tiếp đến, bạn cần cài đặt gói @ionic/cloud-angular. Đây là thư viện JavaScript dùng cho dịch vụ Ionic Cloud. Thư viện này cho phép chúng ta tương tác với dịch vụ Ionic Deploy và các dịch vụ Ionic khác thông qua code JavaScript.

Sau khi cài đặt xong, bạn có thể khởi tạo ứng dụng Ionic mới dựa trên ứng dụng này. Trước khi thực hiện, hãy chắc rằng bạn đã có một tài khoản Ionic. Công cụ dòng lệnh sẽ nhắc nhở bạn đăng nhập bằng tài khoản Ionic nếu bạn chưa làm điều đó.

Thực thi này sẽ tạo một ứng dụng mới có tên "deployApp" (hoặc tên bất kỳ do bạn đặt lúc khởi động ứng dụng Ionic mới) nằm trong dashboard các ứng dụng Ionic của bạn.

Khi bạn đã chắc rằng ứng dụng xuất hiện trong sanh sách ứng dụng trong dashboard của Ionic, hãy trở lại terminal và cài đặt plugin Deploy:

Lưu ý rằng plugin này thực sự sẽ gánh vác những nhiệm vụ chủ chốt. Package @ionic/cloud-angular chỉ hiển thị những API cần thiết để dễ dàng làm việc với các dịch vụ Ionic bên trong ứng dụng Ionic.

Thao tác với các bản triển khai

Bây giờ bạn đã hoàn thành tất cả các thiết lập cần thiết, đã đến lúc bổ sung code để kiểm tra và áp dụng các bản cập nhật. Nhưng trước khi bạn làm điều đó, đầu tiên hãy chạy ứng dụng thông qua trình duyệt của bạn:

Điều này cho phép bạn kiểm tra xem code bạn đã thêm có hoạt động hay không. Với cách này, bạn có thể thực hiện các chỉnh sửa cần thiết ngay khi bạn thấy lỗi.

Mở file src/app/app.module.ts. Trong phần import của SplashScreen, hãy import các dịch vụ cần thiết để làm việc với Ionic Cloud:

Tiếp theo, thêm app_id của ứng dụng Ionic của bạn. Bạn có thể tìm thấy giá trị này trên dashboard của ứng dụng Ionic, ngay bên dưới tên ứng dụng.

Sau khi bạn đã bổ sung giá trị đó, bạn hiện có thể thêm nó thành một trong các mô-đun của ứng dụng:

Kế tiếp, mở file src/app/app.component.ts. Ngay bên dưới phần import TabsPage, thêm vào phần sau đây:

Trong constructor(), bổ sung các dịch vụ mà chúng ta đã import trước đó:

Thiết lập kênh triển khai

Khi ta vẫn đang phát triển ứng dụng, hãy thiết lập kênh triển khai thành dev:

Sau đó, nếu bạn muốn chuyển sang kênh production, bạn chỉ cần xóa dòng này vì product là kênh mặc định dành cho các triển khai. Nếu bạn đã tạo một kênh khác, bạn cũng có thể kèm tên của kênh đó ở đây.

Làm việc với snapshot

Bạn có thể truy xuất một mảng các snapshot đã được ứng dụng tải xuống trước đây. Biến snapshots là một mảng chứa các ID của từng snapshot.

Chúng tôi sẽ không thực sự dùng snapshot cho ứng dụng này, nhưng bạn nên biết rằng ứng dụng đang lưu trữ kiểu thông tin này để sau này sử dụng. Trong ví dụ bên dưới, chúng tôi sẽ xem qua danh sách snapshot cũ và xóa từng cái để giải phóng dung lượng trên thiết bị.

Kiểm tra bản cập nhật

Để kiểm tra các bản cập nhật, hãy sử dụng phương thức check(). Phương thức này trả về một giá trị boolean cho bạn biết một snapshot mới có sẵn để dùng không. Mặc định, bản triển khai mới nhất sẽ tạo một snapshot mới. Vì vậy, chỉ có bản triển khai mới nhất được áp dụng nếu bạn đã push liên tiếp hai bản cập nhật.

Nếu một snapshot sẵn sàng để tải xuống, bạn có thể nhận thêm thông tin về nó bằng cách gọi phương thức getMetaData(). Metadata này có thể được bổ sung vào bản triển khai thông qua dashboard ứng dụng Ionic. Cặp khóa-giá trị có thể được thêm vào đây và mỗi giá trị trở thành một thuộc tính cho đối tượng metadata. Sau đó, chúng tôi sẽ sử dụng metadata để thay đổi các thông báo được hiển thị trong ứng dụng mỗi khi có bản cập nhật mới.

Tiếp theo, hiển thị thông điệp cảnh báo xác nhận để người dùng quyết định xem họ có muốn tải xuống bản cập nhật hay không:

Bạn có thể lo ngại rằng điều này sẽ làm phiền đến người dùng nếu họ liện tục nhận được lời nhắc cập nhật ứng dụng của họ khi họ vẫn phản hồi là "không." Đa số là vậy mặc dù nhắc nhở này thực sự là một điều tốt. Không có lý do gì người dùng từ chối một bản cập nhất nếu nó nâng cấp trải nghiệm của họ.

Tải xuống và áp dụng bản cập nhật

Khi người dùng đồng ý, bạn có thể tiếp tục tải xuống bản cập nhật. Quá trình này có thể mất một lúc tùy thuộc vào kết nối internet và thiết bị của bạn. Sau khi tải xuống bản cập nhật, hãy hiển thị loader để thu hút sự chú ý của người dùng trong khi nó được trích xuất. Sau khi được trích xuất, hãy nạp lại ứng dụng và ẩn loader đi.

File app.components.ts đã cập nhật sẽ giống như thế này sau khi đã thay đổi.

Cài đặt ứng dụng lên thiết bị

Bây giờ code để kiểm tra triển khai được thêm vào, chúng tôi có thể xây dựng ứng dụng và cài đặt nó trên thiết bị. Phần còn lại của những thay đổi mà chúng tôi sẽ giới thiệu sẽ chủ yếu được push thông qua dịch vụ Ionic Deploy.

Hãy tiếp tục thêm nền tảng Android vào dự án Ionic của bạn và tạo file .apk bằng các lệnh sau:

Thao tác này sẽ tạo file android-debug.apk trong thư mục platforms/android/build/outputs/apk. Sao chép file vào thiết bị của bạn và cài đặt.

Push (gửi) các thay đổi

Bây giờ là lúc để chúng tôi push một số thay đổi cho ứng dụng. Để dùng thử, chỉ cần thực hiện một số thay đổi nhỏ đối với giao diện người dùng ứng dụng. Và bây giờ bạn có thể tải lên các thay đổi:

Bổ sung thêm metadata

Sau khi tải lên xong, một mục mới sẽ được liệt kê trong Recent Activity của bạn. Nhấp vào liên kết Edit của mục đó. Điều này sẽ cho phép bạn bổ sung ghi chú, thông tin phiên bản và metadata cho bản phát hành cụ thể đó. Bạn nên thêm ghi chú để bạn biết bản phát hành cụ thể đó là gì. Khi bạn đã hoàn tất, hãy nhấp vào tab Metadata và thêm vào thông tin sau đây:

add metadata

Sau đó nhấp vào nút Save để commit các thay đổi của bạn. Sau cùng, nhấp nút Deploy để triển khai bản phát hành. Sau khi ứng dụng cập nhật thay đổi, metada mà bạn đã cung cấp sẽ sẵn sàng sử dụng.

Giờ bạn có thể thấy con số phiên bản của bản phát hành:

version number

Phiên bản

Đôi khi bạn sẽ push một bản cập nhật ra với Ionic Deploy, mà còn dựng lại và chuyển các package đó đến ứng dụng đi kèm trong App Store. Tuy nhiên, hãy cận trọng vì Ionic không biết rằng ứng dụng của bạn đã chứa bản cập nhật đó và ứng dụng của bạn sẽ nhắc nhở người dùng tải xuống các bản cập nhật mới nhất trong lần chạy ứng dụng đầu tiên của bạn.

Tính năng tạo phiên bản có thể giúp ngăn chặn điều này. Với tính năng tạo phiên bản, bạn có thể chỉ định phiên bản của ứng dụng để lấy các bản cập nhật:

  • Minimum: chỉ triển khai nếu phiên bản ứng dụng hiện tại cao hơn hoặc bằng phiên bản này.
  • Maximum: chỉ triển khai nếu phiên bản ứng dụng hiện tại bằng hoặc thấp hơn phiên bản này.
  • Equivalent: không thực hiện triển khai nếu phiên bản ứng dụng hiện tại bằng phiên bản này.

Bạn có thể bổ sung thông tin về phiên bản thông qua liên kết EDIT trên một bản phát hành cụ thể và sau đó chuyển đến tab VERSIONING. Từ đó, bạn có thể chỉ định các phiên bản (iOS hoặc Android) mà bạn muốn hướng đến.

Versioning

Ionic so sánh phiên bản này với phiên bản mà bạn đã chỉ định trong file config.xml:

Nếu phiên bản ứng dụng trong khoảng minimum (tối thiểu) và maximum (tối đa) được chỉ định, bản phát hành sẽ được chọn. Và nếu phiên bản ứng dụng bằng với phiên bản equivalent (tương đương), bản phát hành sẽ bị bỏ qua. Vì vậy, đối với ảnh chụp màn hình phía trên, nếu phiên bản trong file config.xml 0.0.1, bản phát hành sẽ bị ứng dụng bỏ qua.

Cập nhật nội dung

Thay đổi tiếp theo mà chúng ta sẽ thực hiện là hiển thị một hình ảnh.

Điều đầu tiên mà bạn cần làm là tìm một hình ảnh. Đặt nó vào trong thư mục src/assets/img và liên kết nó từ file src/pages/home/home.html:

Tải lên các thay đổi của bạn dưới dạng bản phát hành mới cho Ionic Deploy.

Sau khi tải lên, hãy chuyển tới trang dashboard ứng dụng Ionic của bạn và cập nhật bản phát hành bằng một ghi chú và version (phiên bản) tương ứng trong metadata. Lưu các thay đổi và triển khai nó.

Khi mở ứng dụng sẽ cập nhật bản phát hành mới này và điều này sẽ áp dụng các thay đổi cho giao diện người dùng.

asset changes

Các kênh triển khai

Theo mặc định, Ionic Deploy có ba kênh mà bạn có thể triển khai: dev, stagingproduction. Nhưng bạn cũng có thể tạo các kênh mới cho ứng dụng của mình cho các bản cập nhật. Bạn có thể làm điều đó bằng cách nhấp vào biểu tượng bánh răng trên tab Ionic Deploy trên dashboard của ứng dụng:

Create Deploy Channel

Điều này rất hữu ích cho các thử nghiệm kiểu A/B, vì vậy bạn có thể gửi các thay đổi cụ thể cho người dùng cụ thể.

Đừng quên cập nhật code của bạn để sử dụng kênh triển khai cụ thể đó:

Rollback (khôi phục phiên bản cũ)

Nếu bạn đã gửi cái không nên gửi, bạn có thể sử dụng tính năng rollback. Với tính năng này, bạn có thể khôi phục bản phát hành trước đó trở lại cho người dùng của mình.

Chú ý rằng bạn không thể sửa code bị lỗi bằng cách rollback! Ví dụ: nếu bạn có lỗi cú pháp trong code JavaScript của mình, điều này sẽ phá hỏng toàn bộ ứng dụng và code để kiểm tra các bản cập nhật sẽ không chạy. Để khắc phục các lỗi kiểu đó, điều duy nhất bạn có thể làm là phát hành phiên bản mới trên cửa hàng ứng dụng.

Bạn có thể khôi phục bằng cách nhấp vào liên kết Roll back to here trên bất kỳ bản triển khai nào.

Rollback

Điều này sẽ yêu cầu bạn xác nhận xem bạn có muốn khôi phục hay không. Một khi được xác nhận, nó sẽ tự động thiết lập thành bản phát hành hiện tại. Vì vậy, code để cập nhật các bản phát hành mới sẽ nhận ra đó là bản phát hành mới nhất và sẽ nhắc người dùng cập nhật. Bản phát hành đã khôi phục sẽ có biểu tượng làm mới màu cam.

Bạn cũng có thể triển khai một bản phát hành cụ thể bằng cách nhấp vào liên kết Deploy nằm bên cạnh bản phát hành mà bạn muốn triển khai.

Sử dụng Git Hooks

Bạn có thể tự động triển khai các bản cập nhật ứng dụng trên Ionic Deploy bằng Git hooks. Git hooks cho phép bạn xử lý các kịch bản trước hoặc sau các sự kiện Git cụ thể như commit, push và receive. Trong trường hợp này, chúng ta sẽ sử dụng pre-push để tải lên các thay đổi lên Ionic Cloud ngay trước khi lệnh git push xử lý.

Bắt đầu bằng cách đổi tên mã kịch bản mẫu pre-push thành tên thực sự mà Git nhận biết:

Mở file trong trình chỉnh sửa văn bản của bạn và thay thế nội dung của file bằng nội dung sau:

Bây giờ commit thay đổi của bạn và push chúng lên một remote repo:

Ngay trước khi lệnh git push được xử lý, ionic upload sẽ được thực thi.

Bạn cũng có thể tự động triển khai bản phát hành nếu muốn:

Tuy nhiên, ví dụ của chúng ta không áp dụng được, bởi vì bạn không thể xác định metadata!

Nếu bạn muốn nâng cấp quy trình triển khai, tôi khuyên bạn nên xem qua HTTP API for Ionic Deploy. Bài viết này cho phép bạn lập trình triển khai các thay đổi cho ứng dụng của mình từ máy chủ Continuous Integration (tích hợp liên tục) của bạn. Nó cho phép bạn cập nhật số lượng phiên bản và metadata trên các triển khai của bạn. Tất cả điều được xử lý tự động và không cần dùng đến dashboard của ứng dụng Ionic.

Tổng kết

Thế đấy! Trong hướng dẫn này, bạn đã tìm hiểu về Ionic Deploy và cách bạn có thể sử dụng để cập nhật các ứng dụng Ionic của bạn. Đây là một tính năng hiệu cho phép bạn xây dựng hệ thống phiên bản và cập nhật nhanh chóng vào ứng dụng của mình.

Hãy theo dõi để xem thêm nội dung về Ionic và các dịch vụ đám mây như Ionic Deploy! Nếu bạn muốn bài giới thiệu đầy đủ để bắt đầu phát triển ứng dụng Ionic 2, hãy xem khóa học của chúng tôi trên Envato Tuts+.

Và xem qua số bài viết khác của chúng tôi về Ionic và phát triển ứng dụng di động đa nền tảng.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.