Chuyển đổi html5 sang ứng dụng ios

Nếu bạn đang đọc phần này, có lẽ bạn đã có một ý tưởng hay về ứng dụng di động HTML5 là gì, nhưng bạn có thể không biết cách thực sự tải một ứng dụng trên Apple App Store hoặc Google Play

Bạn có thể gửi một ứng dụng được xây dựng hoàn toàn bằng công nghệ web tới cả hai cửa hàng này giống như bạn gửi một ứng dụng gốc (ngay cả khi bạn không có máy Mac) và đối với phần lớn các trường hợp sử dụng, ứng dụng có thể trông, cảm nhận và hoạt động giống như

Người dùng các ứng dụng dành cho thiết bị di động đã mong đợi một mức chất lượng và thiết kế nhất định từ các ứng dụng họ sử dụng. Các ứng dụng Android và iOS có một tập hợp các tiêu chuẩn - nếu bạn đi xa khỏi chúng - có thể khiến ứng dụng của bạn trông nghiệp dư và xấu (hoặc như nhiều người có thể nói là "không bản địa"). Một vấn đề với công nghệ web là nó có rào cản gia nhập thấp và nó sẽ cho phép bạn làm bất cứ điều gì, ngay cả khi những gì bạn xây dựng cuối cùng không giống như một ứng dụng di động "nên" trông như thế nào. Điều này đã mang lại cho các ứng dụng di động HTML5 một chút tiếng xấu, vì việc tạo các ứng dụng di động bằng công nghệ web HTML5 rất dễ dàng, đương nhiên có rất nhiều ứng dụng tồi ngoài kia

Nếu bạn chú ý đến thiết kế/chất lượng và dành một khoảng thời gian thích hợp để học cách xây dựng các ứng dụng di động tốt với công nghệ web, thì bạn có thể tạo các ứng dụng chất lượng cao không thể phân biệt được với các ứng dụng gốc tiêu chuẩn trong hầu hết các trường hợp (một vấn đề khác với danh tiếng của HTML5 dành cho thiết bị di động . mọi người cho rằng những ứng dụng tốt chỉ là ứng dụng gốc "bình thường". )

Có một vài bước giữa đây và đó, mặc dù. Có một số khác biệt về khái niệm cần hiểu khi tạo ứng dụng di động HTML5 và bạn có thể dễ dàng gặp khó khăn ở đâu đó trên đường đi

Tôi đã tạo hướng dẫn từng bước này để chỉ cho bạn đi đúng hướng - bất kể bạn đang ở đâu trên hành trình cửa hàng ứng dụng của mình, bài viết này sẽ giúp cung cấp cho bạn ngữ cảnh mà bạn cần

1. Hiểu sự khác biệt giữa các ứng dụng gốc, lai và ứng dụng web

Trước khi bắt đầu, bạn nên hiểu lý do tại sao bạn đang xây dựng ứng dụng di động với công nghệ web và sự khác biệt chính xác giữa ứng dụng web và ứng dụng thường được gọi là ứng dụng lai và ứng dụng gốc tiêu chuẩn

Nếu bạn không có nhiều thời gian, thì đây là một đồ họa thông tin nhỏ mà tôi đã làm để làm nổi bật sự hấp dẫn của phương pháp kết hợp theo một cách rất đơn giản. Xin lưu ý rằng có rất nhiều yếu tố không có trong đồ họa thông tin này và cách tiếp cận kết hợp không phải lúc nào cũng là giải pháp tốt nhất

Hãy nhớ rằng mục đích của hình ảnh này là để làm nổi bật lợi ích của phương pháp kết hợp, tôi không cố gắng nói "Hãy nhìn. Phương pháp kết hợp có 3/3 dấu tích trong các lĩnh vực này và do đó, là giải pháp tốt nhất có thể"

Thật dễ dàng để hiểu ứng dụng gốc là gì. một ứng dụng được mã hóa bằng ngôn ngữ bản địa của nền tảng. Điều này có nghĩa là sử dụng Objective-C/Swift/XCode cho iOS hoặc Java/Kotlin/Android Studio cho Android. Một ứng dụng gốc có quyền truy cập ngay vào mọi thứ mà nền tảng cung cấp mà không có bất kỳ hạn chế nào. Nhược điểm của phương pháp này là các ứng dụng riêng biệt cần được xây dựng cho từng nền tảng

Ứng dụng web là một ứng dụng được cung cấp bởi trình duyệt (thường được tải qua Internet). Một ứng dụng web thường được xây dựng bằng HTML, CSS và JavaScript và có thể được cung cấp thông qua trình duyệt trên máy tính để bàn hoặc thiết bị di động. Một ứng dụng web có thể được xây dựng để bắt chước cảm giác và hành vi của một ứng dụng gốc thông thường, nhưng thay vào đó chỉ chạy qua một trình duyệt. Sử dụng phương pháp này có nghĩa là bạn sẽ không có quyền truy cập vào tất cả các chuông và còi mà một ứng dụng gốc thực hiện (tôi. e. API gốc) và bạn không thể phân phối ứng dụng của mình thông qua hầu hết các cửa hàng ứng dụng. Tuy nhiên, xây dựng Ứng dụng web lũy tiến - về cơ bản chỉ có nghĩa là ứng dụng web di động hiện đại/có khả năng ngoại tuyến - đang trở thành một phương pháp phân phối rất phổ biến

Ứng dụng kết hợp là sự kết hợp giữa cách tiếp cận gốc và web cho phép bạn xây dựng ứng dụng một lần và gửi nó đến nhiều cửa hàng ứng dụng. Ứng dụng lai sử dụng trình đóng gói gốc như Cordova hoặc Capacitor, về cơ bản kết hợp chế độ xem web của trình duyệt thành ứng dụng gốc và hiển thị ứng dụng web của bạn thông qua ứng dụng đó. Với phương pháp này, người dùng ứng dụng sẽ không còn có thể thấy trình duyệt mà ứng dụng đang chạy qua (vì vậy nó sẽ chỉ xuất hiện giống như một ứng dụng gốc bình thường đối với họ), bạn có quyền truy cập vào chức năng gốc thông qua Cordova/Capacitor và bạn

Câu hỏi rõ ràng nhất có thể phát sinh từ điều này là

Nếu các ứng dụng Hybrid quá tuyệt vời và cung cấp những gì tốt nhất của cả hai thế giới, thì tại sao mọi người không sử dụng chúng?

Để đi sâu vào tất cả những khác biệt giữa cách tiếp cận lai và bản địa sẽ cần một công việc lớn. Nhưng tóm lại, lợi ích chính của việc xây dựng bản địa là nó cung cấp bộ tính năng và hiệu suất tốt nhất có thể. Bạn không xử lý các khái niệm trừu tượng, công cụ hoặc giới hạn bổ sung dưới bất kỳ hình thức nào

Điều này không có nghĩa là nếu bạn xây dựng tự nhiên thay vì theo cách tiếp cận dựa trên web thì ứng dụng của bạn vốn dĩ sẽ tốt hơn. Trong hầu hết các trường hợp, sự lựa chọn chỉ tùy thuộc vào sở thích cá nhân và các kỹ năng có sẵn trong nhóm của bạn. Hầu hết các bộ yêu cầu có thể được đáp ứng bằng cách tiếp cận gốc hoặc kết hợp. Mặc dù các ứng dụng gốc có tiềm năng mang lại hiệu suất cao hơn nhiều, nhưng trong hầu hết các trường hợp, nó không tạo ra bất kỳ sự khác biệt đáng chú ý nào (một lần nữa, giả sử rằng ứng dụng được thiết kế tốt). Có những trường hợp mà cách tiếp cận kết hợp không khả thi và một số trường hợp không lý tưởng/khả thi, nhưng những trường hợp này rất ít và tốt hơn nhiều. Gần như bất kỳ ứng dụng phong cách kinh doanh nào cũng có thể được xây dựng bằng công nghệ web. Nếu bạn đang xem xét việc thiết kế một ứng dụng phụ thuộc nhiều vào sức mạnh xử lý, trò chơi, đồ họa 3D hoặc tích hợp nhiều với các tính năng gốc, bạn sẽ cần phải cẩn thận hơn về quyết định của mình. Hầu hết các ứng dụng "điển hình" có thể dễ dàng hài lòng với công nghệ web

Tôi thường lấy ví dụ về việc mua một chiếc siêu xe hiệu suất cao để lái xe trong thành phố. Nếu bạn chưa bao giờ lái xe nhanh hơn 60km/ph thì việc xe của bạn có thể di chuyển với tốc độ 300km/ph cũng khó có thể tạo ra sự khác biệt. Nó không bao giờ cần, vì vậy nó không quan trọng. Mọi người thường rơi vào cái bẫy khi họ xây dựng thứ gì đó không hoạt động tốt và nghĩ rằng nếu họ có quyền tiếp cận nhiều hơn (e. g. nếu ứng dụng hoàn toàn gốc) thì nó sẽ hoạt động tốt hơn. Không quan trọng bạn có bao nhiêu hiệu suất, nếu thứ gì đó được thiết kế kém thì nó vẫn sẽ hoạt động kém - bất kể bạn đang sử dụng công nghệ web hay mã gốc

Nếu bạn muốn biết thêm suy nghĩ của tôi về cách tiếp cận dựa trên web để xây dựng các ứng dụng di động, hãy xem trang chủ của tôi hoặc bài viết của tôi về hiệu suất của Ionic

Bạn sẽ tìm thấy rất nhiều ý kiến ​​về cách tiếp cận nào là tốt nhất để tạo ứng dụng di động giữa các tùy chọn như

• iOS/Android bản địa
• ion
• Phản ứng tự nhiên
• Xamarin
• Chớp cánh
• Bản địa

và nhiều hơn nữa. Cuối cùng, tất cả đều hoàn toàn có khả năng tạo ra những ứng dụng tuyệt vời trong hoàn cảnh phù hợp và với đúng người. Câu trả lời hợp lý duy nhất cho cách tiếp cận nào là tốt nhất luôn là "nó phụ thuộc". Bài viết này đặc biệt nói về cách sử dụng phương pháp lai/HTML5 để xây dựng ứng dụng di động, vì vậy tôi sẽ tập trung vào các khía cạnh liên quan đến điều đó

2. Thiết kế ứng dụng của bạn

Trước khi cam kết thực hiện một phương pháp cụ thể, hãy đảm bảo rằng bạn đã xác định các yêu cầu của mình và phương pháp của bạn sẽ đáp ứng các yêu cầu đó

Nếu bạn muốn tạo một ứng dụng web lũy tiến (một ứng dụng chạy hoàn toàn qua Internet, thay vì được phân phối qua các cửa hàng ứng dụng gốc), thì bạn chỉ có quyền truy cập vào các tính năng có sẵn cho trình duyệt. Đảm bảo rằng tất cả các chức năng bạn yêu cầu đều có sẵn ở đây. Đừng lo lắng nếu sau này bạn quyết định đưa vào chức năng gốc, thật dễ dàng để chuyển đổi PWA của bạn thành ứng dụng kết hợp và phân phối nó thông qua các cửa hàng ứng dụng gốc

Nếu bạn muốn truy cập vào một số API gốc hoặc muốn gửi ứng dụng của mình tới các cửa hàng ứng dụng (hoặc cả hai) thì phương pháp kết hợp sẽ là lựa chọn tốt nhất của bạn. Quy trình chung để tạo ứng dụng cũng giống như một ứng dụng web/PWA thông thường, ngoại trừ việc chúng tôi gói nó trong một gói gốc. Chúng tôi sẽ nói nhiều hơn về việc tích hợp Cordova/Capacitor để truy cập API gốc và bao bọc ứng dụng của bạn sau, nhưng hãy đảm bảo rằng chức năng bạn yêu cầu có sẵn dưới dạng API plugin trong Cordova hoặc Capacitor hoặc có sẵn plugin Cordova/Capacitor của bên thứ 3

Khi thiết kế ứng dụng của bạn, hãy ghi nhớ Nguyên tắc giao diện con người iOS và Nguyên tắc thiết kế Android. Hãy nhớ rằng một số thông tin trong các hướng dẫn này sẽ dành riêng cho các ứng dụng gốc, vì vậy đừng quá lo lắng về điều đó. Chỉ cần đảm bảo rằng bạn tuân theo các nguyên tắc thiết kế tốt phổ biến trong hầu hết các ứng dụng dành cho thiết bị di động - ứng dụng của bạn sẽ trông/hành xử/cảm thấy tương tự như các ứng dụng gốc tiêu chuẩn

Nếu bạn đang xây dựng một ứng dụng để phân phối thông qua cửa hàng ứng dụng Apple và Google Play, bạn cần tuân theo luật của họ. Đảm bảo bạn tuân thủ Nguyên tắc đánh giá của Apple App Store và Chính sách chương trình dành cho nhà phát triển của Google Play. Đây là lúc lợi ích của việc phân phối ứng dụng của bạn dưới dạng Ứng dụng web lũy tiến phát huy tác dụng – sử dụng web mở có nghĩa là chúng tôi không cần phải nhảy qua vòng của người khác

Đặc biệt, Apple có thể hơi hay thay đổi trong việc áp dụng các nguyên tắc của họ, nhưng nếu bạn vi phạm bất kỳ nguyên tắc nào trong số đó (đôi khi ngay cả khi bạn không làm như vậy), đơn đăng ký của bạn có thể bị từ chối và bạn sẽ phải khắc phục sự cố và gửi lại. Dưới đây là một số vấn đề cần chú ý vì có thể khiến đơn đăng ký của bạn bị từ chối

• Ứng dụng của bạn giống một trang web hơn là một ứng dụng di động
• Bạn không xử lý các trạng thái trực tuyến/ngoại tuyến
• Ứng dụng của bạn chậm hoặc không phản hồi
• Ứng dụng của bạn không sử dụng các tính năng gốc (tôi. e. thực sự không có lý do gì để nó được phân phối dưới dạng ứng dụng gốc thay vì trang web tiêu chuẩn)

Apple thường nghiêm ngặt hơn Google khi nói đến quá trình xem xét

3. Xây dựng ứng dụng của bạn bằng Framework và UI Kit/Hệ thống thiết kế

Bộ giao diện người dùng HTML5/Hệ thống thiết kế (như Ionic) và các khung (như Angular, StencilJS, React và Vue) là nền tảng để phát triển các ứng dụng di động HTML5 chất lượng cao. Cố gắng tự mình xây dựng toàn bộ ứng dụng di động từ đầu về cơ bản là vô nghĩa và vô ích. Bạn sẽ dành rất nhiều thời gian để cố gắng sao chép giao diện người dùng trên thiết bị di động - với tất cả các hoạt ảnh, tương tác và chuyển đổi màn hình mượt mà có liên quan - và rất có thể, bạn sẽ không đạt được chất lượng mà bạn có thể nhận được từ Ionic. . Họ đã làm rất nhiều công việc khó khăn cho bạn, không cần phải phát minh lại bánh xe

Ionic cung cấp một tập hợp các thành phần web để xây dựng giao diện người dùng của ứng dụng - giao diện này bao gồm các thành phần phổ biến như danh sách, nút, tab, thanh điều hướng, đầu vào, v.v. Với Ionic, để tạo một danh sách di động điển hình hoạt động tốt và cuộn mượt mà, tất cả những gì chúng ta phải làm là thả thứ gì đó như thế này vào mẫu của mình

<ion-list>
  <ion-item> Apple ion-item>
  <ion-item> Banana ion-item>
  <ion-item> Coconuts ion-item>
  <ion-item> Durian ion-item>
  <ion-list>ion-list
>ion-list>

và công việc đã hoàn thành. Nếu bạn cố gắng tự mình tạo lại hành vi của một danh sách cuộn mượt mà tự nhiên với khả năng tăng tốc và giảm tốc, bạn có thể sẽ không đạt được kết quả tốt nếu không có nhiều nỗ lực – và rất có thể đơn đăng ký của bạn sẽ bị từ chối. . Với Ionic, tất cả đều được tích hợp sẵn

Tuy nhiên, có nhiều thứ để xây dựng một ứng dụng di động hơn là chỉ giao diện người dùng. Những điều cần phải xảy ra. Khi người dùng nhấp vào nút, chúng tôi có thể muốn bắt đầu một số quy trình hoặc điều hướng đến màn hình khác. Chúng tôi có thể muốn lưu trữ dữ liệu và tải dữ liệu đó sau. Có tất cả các loại logic mà chúng tôi muốn diễn ra trong ứng dụng của mình

Các thành phần web Ionic không chỉ mang tính thẩm mỹ mà còn có rất nhiều chức năng được tích hợp bên trong mà chúng ta có thể tương tác. Nói chung, chúng tôi vẫn cần một thứ gì đó hơn là Ionic hoặc bất kỳ Bộ giao diện người dùng/Hệ thống thiết kế nào khác để quản lý việc xây dựng một ứng dụng. Chúng tôi cần một cái gì đó để quản lý kiến ​​trúc tổng thể và logic/chức năng của ứng dụng - những thứ hậu trường. Ionic và các hệ thống tương tự được thiết kế chủ yếu để xử lý giao diện

Để xử lý mọi thứ khác, chúng tôi thường kết hợp hệ thống Thiết kế/Bộ giao diện người dùng của mình với một số loại khung JavaScript

Mặc dù Ionic đã từng được xây dựng riêng cho khung Angular, nhưng giờ đây nó hoàn toàn độc lập với khung và có thể được sử dụng với bất kỳ thứ gì

Đối với một cách tiếp cận gọn nhẹ, bạn thực sự có thể xây dựng toàn bộ ứng dụng Ionic bằng cách sử dụng StencilJS của riêng nhóm Ionic - điều này mang lại cho bạn rất nhiều lợi ích của một khung mà không thực sự cần sử dụng một khung truyền thống để xây dựng ứng dụng của bạn. StencilJS không giống như một khung truyền thống, nó là một "trình biên dịch thành phần web", vì vậy bản dựng cuối cùng của ứng dụng của bạn hầu như chỉ chạy trên chức năng tiêu chuẩn được tích hợp trong trình duyệt, thay vì yêu cầu thời gian chạy lớn từ một khung (StencilJS chỉ có 6kb

Mặt khác, bạn có thể sử dụng một khung như Angular để xây dựng ứng dụng Ionic. Angular là thứ ban đầu được sử dụng để xây dựng các ứng dụng Ionic và nó vẫn là lựa chọn phổ biến nhất hiện nay. Mặc dù Angular là một khung "nặng hơn" và có nhiều quan điểm hơn, nhưng nó cung cấp gần như mọi thứ bạn cần ngay lập tức và rất phù hợp với các ứng dụng lớn/phức tạp/doanh nghiệp. Đường cong học tập cho Angular có thể hơi dốc vì có khá nhiều khái niệm cụ thể về Angular mà bạn sẽ cần học, nhưng một khi đã học, bạn sẽ có một công cụ rất mạnh theo ý của mình

Như tôi đã đề cập, Ionic có thể được sử dụng với hầu hết mọi thứ - vì vậy nếu bạn có một khung ưa thích, bạn có thể sử dụng nó. Ionic hiện cũng đang xây dựng hỗ trợ dành riêng cho React và Vue

4. Kiểm tra ứng dụng của bạn thông qua trình duyệt

Điều tuyệt vời khi phát triển ứng dụng di động với HTML5 là bạn có thể kiểm tra nó ngay thông qua trình duyệt của mình

Các khung khác nhau có thể được chạy theo những cách khác nhau nhưng thông thường bạn sẽ có thể truy cập ứng dụng của mình thông qua máy chủ web cục bộ bằng cách truy cập

http://localhost:8100

trong trình duyệt của bạn. Nếu bạn đang sử dụng Công cụ dành cho nhà phát triển Chrome, bạn thậm chí có thể mô phỏng thiết bị mà bạn đang thiết kế bằng cách nhấp vào biểu tượng thiết bị di động ở trên cùng bên trái

Từ đây, bạn có thể gỡ lỗi ứng dụng của mình theo nội dung yêu thích bằng cách sử dụng các công cụ gỡ lỗi khác nhau do trình duyệt cung cấp

Nếu bạn đang xây dựng một ứng dụng web/PWA, thì sau khi bạn hoàn thành giai đoạn này, ứng dụng của bạn sẽ ổn và sẵn sàng hoạt động. Bạn chỉ cần triển khai nó lên web. Nhưng nếu bạn muốn tạo một ứng dụng kết hợp có thể truy cập API gốc và được gửi tới các cửa hàng ứng dụng, thì bây giờ là lúc để đóng gói ứng dụng

5. Đóng gói ứng dụng của bạn

Bạn có thể sử dụng công nghệ như Cordova hoặc Capacitor (được xây dựng bởi nhóm Ionic) để bọc ứng dụng web của bạn trong một trình bao bọc riêng và đóng vai trò là cầu nối giữa ứng dụng của bạn và API gốc của thiết bị

Nếu bạn muốn xây dựng ứng dụng iOS nhưng không có máy Mac, bạn có thể sử dụng dịch vụ như PhoneGap Build hoặc dịch vụ Gói riêng của Ionic. Để xây dựng cho iOS, bạn cần cài đặt SDK thích hợp trên máy của mình và bạn cần có máy Mac để làm điều đó, tuy nhiên, nếu bạn không muốn sử dụng một trong những dịch vụ xây dựng này, bạn cũng có thể thực hiện một số thao tác ưa thích như thiết lập máy ảo để

Vai trò cơ bản mà Cordova/Capacitor thực hiện là đây

• Cordova/Capacitor tạo một ứng dụng gốc chứa chế độ xem web
• Tất cả các tài nguyên cho ứng dụng của bạn được lưu trữ bên trong ứng dụng gốc này
• Cordova/Capacitor tải ứng dụng dựa trên web của bạn vào chế độ xem web (người dùng không thể nhìn thấy chế độ xem web)
• Chế độ xem web hiển thị ứng dụng của bạn cho người dùng

Ứng dụng của chúng tôi thực sự vẫn chỉ là một ứng dụng web vì nó được cung cấp bởi trình duyệt, nhưng bây giờ chúng tôi cũng có quyền truy cập vào thiết bị thông qua Cordova/Capacitor và nó có thể được cài đặt như một ứng dụng gốc bình thường khi được phân phối qua các cửa hàng ứng dụng

6. Truy cập API gốc (tùy chọn)

Bạn chỉ có thể sử dụng Cordova/Capacitor để đóng gói ứng dụng của mình để có thể gửi ứng dụng tới các cửa hàng ứng dụng, nhưng tại sao lại dừng lại ở đó?

Với Cordova hoặc Capacitor, chúng ta có thể truy cập mọi thứ mà ứng dụng gốc có thể. Thay vì tương tác trực tiếp với thiết bị, chúng ta có thể sử dụng Cordova để truyền tin nhắn giữa thiết bị và ứng dụng của mình

Thông thường, chức năng gốc sẽ có sẵn thông qua một số đối tượng Javascript toàn cầu. Chúng tôi sẽ sử dụng API máy ảnh Cordova làm ví dụ. Để kích hoạt camera, tất cả những gì chúng ta cần làm là chạy đoạn JavaScript sau

navigator.camera.getPicture(onSuccess, onFail, {
  quality: 50,
  destinationType: Camera.DestinationType.DATA_URL,
});

function onSuccess(imageData) {
  var image = document.getElementById('myImage');
  image.src = 'data:image/jpeg;base64,' + imageData;
}

function onFail(message) {
  alert('Failed because: ' + message);
}

Điều này yêu cầu Cordova yêu cầu thiết bị khởi chạy máy ảnh và sau đó chúng tôi có thể lấy dữ liệu hình ảnh kết quả từ chức năng onSuccess. Trong trường hợp này, chức năng có sẵn thông qua đối tượng máy ảnh có thể tìm thấy tại bộ điều hướng. Máy ảnh. Tuy nhiên, đôi khi, chẳng hạn như trong trường hợp của plugin AdMob, chức năng này sẽ có sẵn trực tiếp thông qua một đối tượng có sẵn trên toàn cầu như

admob.someMethod();

Nếu bạn đang sử dụng Capacitor, thì việc tương tác với Camera API có thể giống như thế này

import { Plugins, CameraResultType } from '@capacitor/core';

const { Camera } = Plugins;

async takePicture() {
  const image = await Camera.getPhoto({
    quality: 90,
    allowEditing: true,
    resultType: CameraResultType.Uri
  });

  console.log(image.webPath);
}

7. Kiểm tra ứng dụng của bạn trên thiết bị

Tôi đã đề cập trước đó rằng một trong những điều tuyệt vời về các ứng dụng HTML5 là bạn có thể kiểm tra chúng thông qua trình duyệt của mình. Sau khi bạn bắt đầu tích hợp Cordova/PhoneGap/Capacitor và API gốc mặc dù thử nghiệm thông qua trình duyệt không được tốt lắm

Để kiểm tra một ứng dụng đang truy cập API gốc, bạn sẽ cần chạy ứng dụng trên một thiết bị thực tế. Nhưng làm thế nào để bạn gỡ lỗi mà không có công cụ gỡ lỗi trình duyệt của bạn? . Bạn vẫn có thể gỡ lỗi trực tiếp trên thiết bị của mình và truy cập cùng các công cụ gỡ lỗi của trình duyệt, bạn có thể xem các video bên dưới để biết thêm thông tin về cách thực hiện chính xác

• Gỡ lỗi các ứng dụng Ionic khi được triển khai trên thiết bị Android
• Gỡ lỗi các ứng dụng Ionic khi được triển khai trên thiết bị iOS

Trong mọi trường hợp, đây là một bước quan trọng để kiểm tra trên thiết bị, cho dù bạn có đang sử dụng chức năng gốc hay không. Hành vi trên một thiết bị thực tế có thể khác so với khi nó được xem qua trình duyệt trên máy tính để bàn

8. Ký đơn của bạn

Để phân phối ứng dụng của bạn trên các cửa hàng ứng dụng, bạn sẽ cần "ký" ứng dụng của mình và trong trường hợp iOS, bạn cần ký ứng dụng của mình trước khi có thể cài đặt ứng dụng đó trên thiết bị

Đối với ứng dụng iOS, bạn sẽ cần tạo một. tệp thông tin cá nhân p12 và hồ sơ cung cấp. Bạn có thể dễ dàng ký ứng dụng iOS hơn nếu bạn có máy Mac và XCode nhưng cũng có thể ký ứng dụng iOS mà không cần máy Mac (bài viết tôi đã liên kết ở trên mô tả cách thực hiện điều đó)

Để ký một ứng dụng Android, bạn chỉ cần tạo một tệp kho khóa duy nhất. Tài liệu Ionic có một số ví dụ về cách thực hiện quy trình ký

Nếu bạn muốn sử dụng Tụ điện để phân phối các ứng dụng của mình, tôi có hướng dẫn đầy đủ về ký/phân phối có sẵn tại đây

• Triển khai các ứng dụng Capacitor cho Android (Phát triển & Phân phối)
• Triển khai các ứng dụng Capacitor cho iOS (Phát triển & Phân phối)

9. Phân phối ứng dụng của bạn

Giả sử rằng bạn muốn phân phối ứng dụng của mình trong các cửa hàng ứng dụng gốc, bạn sẽ cần đăng ký Chương trình dành cho nhà phát triển iOS (trên thực tế, bạn sẽ phải làm điều này để tạo hồ sơ cung cấp của mình, v.v.) và với tư cách là Google

Nếu bạn muốn xuất bản ứng dụng của mình dưới dạng Ứng dụng web lũy tiến, bạn không cần thực hiện việc này (và bạn cũng không cần lo lắng về việc ký tên vào ứng dụng của mình)

Bạn sẽ cần chuẩn bị danh sách cửa hàng ứng dụng cho cả hai nền tảng và cung cấp một số chi tiết về ứng dụng của mình. Để gửi tới Google Play, bạn chỉ cần tải lên. apk thông qua bảng điều khiển dành cho nhà phát triển. Tuy nhiên, để gửi tới Apple App Store mà không cần máy Mac, bạn sẽ cần sử dụng chương trình Trình tải ứng dụng hoặc XCode, chỉ khả dụng trên máy Mac. Bạn có thể sử dụng một dịch vụ như Macincloud. com để giải quyết vấn đề này, mặc dù

Tóm lược

Tôi hy vọng rằng bài viết này có thể cung cấp cho bạn một số ngữ cảnh xung quanh con đường xây dựng và triển khai ứng dụng di động HTML5 cho Apple App Store và Google Play. Tất nhiên, có rất nhiều bước ở giữa và đây chỉ là một cái nhìn tổng quan ở cấp độ rất cao

Để có hướng dẫn đầy đủ về cách tạo ứng dụng từ đầu (bao gồm cả việc tự học Ionic) và gửi ứng dụng đó đến các cửa hàng ứng dụng, bạn có thể quan tâm đến việc xem Xây dựng ứng dụng di động với Ionic & Angular hoặc Tạo ứng dụng Ionic với StencilJS

Bạn có thể tạo ứng dụng iOS bằng HTML không?

Tôi có thể chuyển đổi HTML sang ứng dụng dành cho thiết bị di động không?

Bạn có thể sử dụng HTML5 để tạo ứng dụng không?

Tôi có thể chuyển đổi trang web thành ứng dụng không?