Xây dựng ứng dụng Android với html5 CSS JavaScript
Câu trả lời ngắn. Có, bạn có thể phát triển ứng dụng bằng HTML/CSS/Javascript. Tham gia hai Hướng dẫn về WebView và gọi cho tôi vào buổi sáng Show
Câu trả lời dài. Nếu bạn muốn viết ứng dụng cho Android sử dụng HTML/CSS/Javascript, ít nhất bạn sẽ phải tạo trình bao bọc WebView gốc. Điều này tương đối dễ thực hiện -- trừ khi bạn muốn kết nối với các chức năng gốc, chẳng hạn như gia tốc kế, máy ảnh hoặc thậm chí là Tin nhắn bánh mì nướng (các tin nhắn nhỏ bật lên khi có điều gì đó xảy ra) Truy cập phần cứng và phần mềm gốc thông qua chế độ xem web yêu cầu bạn phải viết JavascriptAdapter (có sẵn trong Android 2+) và xác định một số phương thức Javascript tùy chỉnh trong JavascriptAdapter. Các phương thức đó ánh xạ tới một hàm java, KHÔNG có quyền truy cập vào các cơ sở hệ điều hành gốc Các khung như Appcelerator và PhoneGap thực hiện chính xác điều này, ngoại trừ việc chúng đã viết sẵn các hàm javascript cho bạn, vì vậy nó giúp bạn không phải tự viết các hàm đó Theo nghĩa đó, nếu bạn định viết một ứng dụng cho Android bằng HTML/CSS/Javascript, bạn nên sử dụng một khung. Nếu không, bạn đang tự làm công việc đó Đối với nhiều nhà phát triển web, những người có thể chỉ quen thuộc với HTML, CSS và JavaScript, việc phát triển một ứng dụng di động gốc có thể là một lãnh thổ xa lạ. Về mặt kỹ thuật, các ứng dụng dành cho thiết bị di động trong Android, iOS và Windows Phone được xây dựng bằng các ngôn ngữ lập trình hoàn toàn khác nhau; . BỌC LƯỚI Nhưng giờ đây, bất kỳ ai có kiến thức cơ bản về HTML, CSS và JavaScript đều có thể xây dựng ứng dụng di động. Một lợi thế chính của việc sử dụng công nghệ web để xây dựng ứng dụng của bạn là Tính di động. Sử dụng trình đóng gói/trình biên dịch, như PhoneGap, bạn sẽ có thể chuyển và cài đặt ứng dụng của mình trên nhiều nền tảng khác nhau Có một số khung làm cho điều này có thể. Họ cũng đã hoàn thành một nửa công việc khó khăn để thu hẹp khoảng cách giữa nền tảng web và di động. Ở đây chúng tôi đã tập hợp 10 khung di động tốt nhất mà chúng tôi có thể tìm thấy. Nếu bạn đã sẵn sàng xây dựng ứng dụng tỷ đô tiếp theo, hãy xem danh sách đề xuất đọc. 30 Cheatsheets và Infographics dành cho nhà phát triển ứng dụng di động 1. jQuery di độngjQueryMobile là một khung phát triển di động mạnh mẽ để xây dựng ứng dụng đa nền tảng di động. jQuery Mobile hỗ trợ nhiều nền tảng khác nhau, từ máy tính để bàn thông thường, điện thoại thông minh, máy tính bảng hoặc thiết bị đọc sách điện tử như Nook hoặc Kindle. Tương tự như người anh em của nó, Giao diện người dùng jQuery, jQuery Mobile bao gồm một số Giao diện người dùng, trong trường hợp này, được tối ưu hóa cho thiết bị di động và thiết bị hỗ trợ cảm ứng Vì vậy, bạn đã thấy tiêu đề và bạn đang tự hỏi làm thế nào bạn có thể xây dựng một ứng dụng di động thực tế chỉ bằng cách sử dụng kiến thức về các công nghệ web cơ bản mà không cần phải học phát triển Android hoặc IOS? . Bằng cách này, chúng tôi sẽ đạt được một loại ứng dụng được gọi là Ứng dụng web lũy tiến (PWA) Trong bài viết này, chúng ta sẽ tìm hiểu cách tận dụng sức mạnh của HTML, CSS và Javascript để xây dựng một ứng dụng di động đơn giản. Chúng tôi sẽ không sử dụng các framework như Ionic hoặc React Native. Điều này là do hướng dẫn này tập trung vào việc chỉ ra cách một ứng dụng web cơ bản có thể được tạo ra để cảm nhận và hoạt động giống như một ứng dụng di động gốc có thể được cài đặt và chạy trên thiết bị di động bằng phương pháp đơn giản nhất với ít trừu tượng nhất Để tiếp tục, chúng ta hãy giới thiệu ngắn gọn về PWAs Ứng dụng web lũy tiến là gì?Theo Tài liệu web MDN chính thức
Nói một cách đơn giản, về cơ bản, chúng là các trang web được tạo kiểu giống như các ứng dụng có thể chạy bên trong trình duyệt trang web hoặc được cài đặt trực tiếp trên thiết bị di động và được truy cập như một ứng dụng gốc Có ba thành phần chính của PWA;
PWA có ưu và nhược điểm. Trong số những người trước đây
Về mặt tiêu cực
Bạn nên cân nhắc sử dụng/xây dựng Ứng dụng web lũy tiến nếu bạn đáp ứng các tiêu chí sau
Chúng tôi sẽ xây dựng ứng dụng di động “Todo List” bằng HTML, CSS và Javascript. Trước tiên, chúng tôi sẽ xây dựng một ứng dụng web trong khi sử dụng IndexedDB cho cơ sở dữ liệu của chúng tôi, hộp làm việc để làm cho nó hoạt động ngoại tuyến và bảng kê khai web để làm cho nó có thể cài đặt được trên các thiết bị. Kết quả cuối cùng sẽ như sau Chúng tôi bắt đầu bằng cách tạo một thư mục trống có tên Ứng dụng Todo, sau đó tạo ba tệp bên trong có tên là Copy9, Copy0, Copy1 và thư mục nội dung (sẽ chứa logo của chúng tôi) Cấu trúc HTML của chúng tôiChuyển đến tệp Copy9 và nhập các dòng mã sau Copy Tại đây, chúng tôi đã tạo bố cục trang HTML và liên kết cả Copy0 và Copy1 của chúng tôi. Bây giờ, hãy tiếp tục và thêm một số kiểu dáng Tạo kiểu cho ứng dụng của chúng tôi bằng CSSCập nhật tệp Copy0 bằng mã bên dưới Copy Phát lại phiên mã nguồn mởOpenReplay là bộ phát lại phiên mã nguồn mở cho phép bạn xem những gì người dùng làm trên ứng dụng web của bạn, giúp bạn khắc phục sự cố nhanh hơn. OpenReplay tự lưu trữ để kiểm soát hoàn toàn dữ liệu của bạn Bắt đầu tận hưởng trải nghiệm sửa lỗi của bạn - bắt đầu sử dụng OpenReplay miễn phí Thiết lập Dexie. js để làm việc với IndexedDBHãy chuyển sang tệp Javascript của chúng tôi. Nhưng trước tiên, hãy định cấu hình cơ sở dữ liệu IndexedDB của chúng tôi, một cơ sở dữ liệu trong trình duyệt sẽ lưu trữ tất cả các todo của chúng tôi Ghi chú. Đây không phải là bộ nhớ cục bộ mà là cơ sở dữ liệu thực tế nằm trong trình duyệt Để tương tác với cơ sở dữ liệu này, chúng tôi sẽ cần cài đặt Copy6, một trình bao bọc xung quanh IndexedDB sẽ giúp chúng tôi quản lý cơ sở dữ liệu của mình một cách dễ dàng. Đi đến dexie. js và tải xuống tệp script. Thêm phần sau vào thẻ đầu của bạn trong Copy9 ________số 8 Sau đó, trong tệp Copy1, chúng tôi khởi tạo cơ sở dữ liệu mới bằng cách sử dụng Copy6 Copy1 Trong mẫu mã trên, chúng tôi đã triển khai các chức năng cơ bản mà ứng dụng của chúng tôi nên có. Chúng tôi có thể thêm, hiển thị và xóa todos khỏi cơ sở dữ liệu của mình. Bây giờ chúng ta đã thiết lập ứng dụng cơ bản, đã đến lúc tập trung vào những gì sẽ làm cho ứng dụng của chúng ta hoạt động giống như một ứng dụng di động thông thường. Trước tiên, chúng tôi sẽ làm cho ứng dụng của mình có chức năng ngoại tuyến, chức năng này sẽ cho phép ứng dụng hoạt động mà không cần kết nối internet Thiết lập Hộp làm việcGoogle workbox là công cụ sẽ tạo ra service worker, giúp ứng dụng của chúng ta hoạt động mà không cần kết nối internet. Trước tiên, hãy cài đặt hộp làm việc trên toàn cầu trên máy của chúng tôi. Chạy Copy2 Sau đó, để định cấu hình hộp làm việc của chúng tôi, hãy chạy Copy3 Trong bảng điều khiển, bạn sẽ được yêu cầu đăng ký đường dẫn gốc của ứng dụng của mình. Chọn Nhập đường dẫn thủ công, sau đó sử dụng. / làm đường dẫn gốc Sau đó, chọn bộ đệm tất cả các tệp. Ngoài ra, đồng ý lưu cho nhân viên dịch vụ và cấu hình, và cuối cùng chọn không cho tùy chọn cuối cùng Sau đó, chúng ta sẽ thấy rằng một tệp có tên Copy0 đã được tạo. Ngay sau đó, hãy chạy lệnh này để tạo nhân viên dịch vụ Copy5 Bây giờ hãy thêm đoạn mã dưới đây vào thẻ đầu của tệp HTML. Nó sẽ đăng ký nhân viên dịch vụ khi cửa sổ được tải Copy6 Truy cập trình duyệt của bạn, nhấp chuột phải và nhấp vào kiểm tra, sau đó điều hướng đến các ứng dụng và tìm nhân viên dịch vụ. Bạn sẽ thấy rằng nhân viên dịch vụ đã chạy Trước khi chúng tôi tiếp tục, hãy đẩy mã của bạn vào repo GitHub của bạn và lưu trữ nó. Đối với bài viết này, tôi đang lưu trữ với các trang GitHub Làm cho ứng dụng có thể cài đặt đượcChúng tôi phải thêm một bảng kê khai web vào ứng dụng của mình để đạt được điều này. Đây là tệp JSON sẽ lưu trữ các chi tiết cần thiết về ứng dụng của chúng tôi, chẳng hạn như logo, tên ứng dụng, mô tả, v.v. Chuyển đến thư mục gốc của thư mục ứng dụng và tạo Copy1. Sau đó thêm mã này dưới đây Copy8 Sau đó, thêm liên kết đến tệp kê khai vào phần đầu của tệp Copy9 của chúng tôi. Bây giờ hãy đẩy những thay đổi này vào repo của bạn Thử nghiệm ứng dụng trên thiết bị di độngCuối cùng, chúng tôi đã hoàn thành ứng dụng Di động của mình chỉ bằng cách sử dụng HTML, CSS và Javascript. Hãy tiếp tục và truy cập URL được lưu trữ của bạn và cài đặt ứng dụng của bạn trên thiết bị di động của bạn Phần kết luậnchúc mừng. về làm cho nó ở đây. Bạn đã học cách thiết lập ứng dụng dành cho thiết bị di động bằng kiến thức về công nghệ web cơ bản và tổng quan về PWAs. Bạn có thể tiến xa hơn và mở rộng kiến thức của mình bằng cách sử dụng các khung khác để giúp bạn thêm nhiều khả năng hơn vào ứng dụng của mình Chúng tôi có thể tạo ứng dụng bằng HTML CSS và JavaScript không?Câu trả lời ngắn. Có, bạn có thể phát triển ứng dụng bằng HTML/CSS/Javascript . Tham gia hai Hướng dẫn về WebView và gọi cho tôi vào buổi sáng. Câu trả lời dài. Nếu bạn muốn viết ứng dụng cho Android sử dụng HTML/CSS/Javascript, ít nhất bạn sẽ phải tạo trình bao bọc WebView gốc.
Chúng tôi có thể sử dụng HTML CSS trong ứng dụng Android không?Vâng, bạn đã đọc nó ngay trong tiêu đề của bài viết này. Trong bài viết này, chúng ta sẽ xây dựng Ứng dụng Android bằng HTML, CSS và JavaScript trong Android Studio .
Tôi có thể xây dựng Ứng dụng Android bằng JavaScript không?Dễ dàng hơn bạn nghĩ. Nếu bạn có thể xây dựng một trang web, bạn có thể xây dựng một ứng dụng Android. Android JS là một khung để tạo các ứng dụng gốc bằng các công nghệ web như JavaScript, HTML và CSS . Nó xử lý các phần khó để bạn có thể tập trung vào cốt lõi của ứng dụng của mình. |