Trong phần tiếp theo, chúng ta sẽ xem xét Ionic Framework và cách cài đặt nó trên Ubuntu 20.04. Khuôn khổ này sẽ cho phép người dùng thực hiện các dự án với các khuôn khổ khác như Angular. Ionic là một SDK mã nguồn mở đầy đủ để phát triển ứng dụng di động kết hợp được tạo bởi Max Lynch, Ben Sperry và Adam Bradley của Drifty Co. vào năm 2013. Phiên bản gốc được phát hành vào năm 2013 và được xây dựng dựa trên AngularJS và Apache Cordova. Tuy nhiên, phiên bản mới nhất đã được xây dựng lại dưới dạng một tập hợp các thành phần web, cho phép người dùng chọn thực hiện các dự án Angular, React hoặc Vue.js. Nó cũng cho phép sử dụng các thành phần Ionic mà không cần bất kỳ khung giao diện người dùng nào.
Ionic cung cấp các công cụ và dịch vụ để phát triển các ứng dụng web kết hợp giữa máy tính để bàn, thiết bị di động và ứng dụng web tiến bộ dựa trên các công nghệ và thực tiễn phát triển web hiện đại. Đối với điều này, các công nghệ web như CSS, HTML5 và Sass có thể được sử dụng. Với khuôn khổ này, chúng tôi có thể phát triển các ứng dụng với công nghệ web tương thích với iOS, Android hoặc chính web. Nó cũng cung cấp một công cụ CLI mạnh mẽ để chúng tôi có thể quản lý và tạo các dự án.
Đặc điểm chung của Ionic
- Khung này là miễn phí và mã nguồn mở. Nó cung cấp một thư viện các công cụ và thành phần giao diện người dùng được tối ưu hóa cho thiết bị di động để tạo ra các ứng dụng nhanh và có tính tương tác cao.
- Ionic sử dụng Cordova, và gần đây là các trình cắm thêm để có quyền truy cập vào các chức năng của hệ điều hành máy chủ như GPS, máy ảnh, đèn pin, v.v.
- Người dùng có thể tạo ứng dụng của họ và sau đó tùy chỉnh chúng cho Android, iOS, Windows, máy tính để bàn (với Electron) hoặc các trình duyệt hiện đại.
- Ionic bao gồm các bộ phận chuyển động, kiểu chữ hoặc chủ đề cơ sở có thể mở rộng.
- Khi sử dụng Thành phần Web, Ionic cung cấp các thành phần và phương pháp tùy chỉnh để tương tác với chúng. Một trong những thành phần đó, cuộn ảo, cho phép người dùng cuộn qua danh sách hàng nghìn mục mà không có bất kỳ tác động nào về hiệu suất. Một thành phần khác, Tabs, tạo giao diện theo thẻ hỗ trợ điều hướng kiểu gốc và quản lý trạng thái lịch sử.
- Ngoài SDK, Ionic cũng cung cấp các dịch vụ mà nhà phát triển có thể sử dụng để kích hoạt các tính năngchẳng hạn như triển khai mã hoặc xây dựng tự động.
- cũng cung cấp IDE riêng được gọi là Ionic Studio.
- Nó cũng cung cấp một giao diện của Dòng lệnh (CLI) để tạo các dự án. CLI cũng cho phép các nhà phát triển thêm các gói và plugin Cordova bổ sung, kích hoạt thông báo đẩy, tạo biểu tượng ứng dụng, màn hình giật gân và tạo các tệp nhị phân gốc.
Cài đặt Ionic trên Ubuntu 20.04
Việc cài đặt framework này khá đơn giản. Để bắt đầu, chúng ta chỉ cần mở một thiết bị đầu cuối (Ctrl + Alt + T) và cập nhật các gói hệ thống của chúng tôi:
sudo apt update; sudo apt upgrade
Sau đó chúng ta sẽ cài đặt một số gói cần thiết. Trong cùng một thiết bị đầu cuối, chúng ta sẽ phải sử dụng lệnh:
sudo apt install curl gnupg2 wget git
Bước tiếp theo sẽ là cài đặt NodeJS. Ví dụ này tôi đã thử nghiệm với phiên bản 14.x. Để cài đặt phiên bản này, chúng tôi sẽ bắt đầu bằng cách thêm kho lưu trữ cần thiết:
curl -sL https://deb.nodesource.com/setup_14.x | sudo bash -
Sau đó chúng ta có thể cài đặt NodeJS chạy lệnh khác này:
sudo apt install nodejs
Ionic yêu cầu Apache Cordova. Cần làm rõ rằng đây là một tập hợp các API thiết bị cho phép nhà phát triển ứng dụng di động, sử dụng JavaScript, truy cập các chức năng gốc của thiết bị, chẳng hạn như máy ảnh hoặc gia tốc kế.
Sau khi cài đặt NodeJS, chúng ta có thể cài đặt cordova đang chạy:
sudo npm install -g cordova
Tại thời điểm này, chúng ta có thể chuyển sang cài đặt Ionic bằng npm:
sudo npm i -g @ionic/cli
Sau khi cài đặt, chúng tôi có thể kiểm tra phiên bản đã cài đặt bằng lệnh:
ionic -v
Một ứng dụng ví dụ
Để biết liệu cài đặt đã được thực hiện đúng hay chưa, chúng ta có thể bắt đầu bằng cách tạo một ứng dụng ví dụ nhỏ. Để làm điều này, chúng tôi sẽ chỉ phải chạy lệnh sau tạo ví dụ:
ionic start
Khi chạy lệnh này bạn sẽ phải xác định loại dự án bạn muốn tạo. Đối với ví dụ này, tôi đã chọn Angular. Ngoài ra, bạn sẽ phải đặt tên cho dự án của mình và chọn mẫu. Tất cả điều này bạn sẽ phải chọn từ một màn hình tương tự như sau:
Sau khi thiết lập, một thư mục sẽ được tạo với tên mà chúng tôi đã đặt cho dự án. Truy cập thư mục này để xem cấu trúc dự án.
Để xem dự án, trong cùng một thiết bị đầu cuối, chúng ta sẽ thực hiện lệnh khác này:
ionic serve --host 0.0.0.0 --port 8000
Với lệnh này chúng tôi sẽ cho phép bất kỳ máy chủ nào truy cập vào cổng 8000.
Khi mọi thứ bạn cần được tải, mở trình duyệt web của bạn và đi tới http://localhost:8000 o http://IP-de-tu-servidor:8000 và bạn sẽ thấy trang mẫu vừa được tạo.
Ionic là một khuôn khổ hiện đại cho phép chúng tôi phát triển các ứng dụng đa nền tảng một cách đơn giản và thanh lịch. Nó có thể được lấy thêm thông tin và tài liệu về cài đặt và hoạt động của nó trong trang web dự án.