Mở đầu : Ionic Framework

      

ghi chú của tôi:

1/ Cài đặt ionic CLI:

$ npm install -g @ionic/cli

Nếu đã có bản cài đặt ionc CLI trước đó, nó cần được gỡ cài đặt do thay đổi tên gói.

$ npm ubunstall -g ionic

$ npm install -g @ionic/cli

Tạo ứng dụng Ionic bằng một trong các mẫu ứng dụng được tạo sẵn hoặc mẫu trống để bắt đầu làm mới. Ba bộ khởi động phổ biến nhất là bộ blank khởi động, tabs bộ khởi động và sidemenu bộ khởi động. Bắt đầu với ionic start lệnh:

$ ionic start myApp tabs

Phần lớn phát triển ứng dụng Ionic có thể được sử dụng ngay trong trình duyệt bằng ionic serve lệnh:

$ cd myApp

$ ionic serve

Agular

Khi sử dụng Ionic Framework trong dự án Angular, hãy cài đặt @ionic/angulargói mới nhất từ npm. Điều này đi kèm với tất cả các thành phần Ionic Framework cũng như các dịch vụ và tính năng cụ thể của Angular.

$ npm install @ionic/agular@latest --save           

    Mỗi lần có một bản phát hành Ionic Framework mới, điều này phiên bản sẽ cần được cập nhật để có các tính năng và bản sửa lỗi mới nhất. Phiên bản có thể được cập nhật bằng npm, cũng.

Để thêm Ionic vào một dự án Angular đã có, hãy sử dụng ng add tính năng của Angular CLI .

        $ ng add @ionic/angular

Điều này sẽ thêm các nhập cần thiết vào @ionic/angular gói cũng như thêm các kiểu cần thiết.

React

Để thêm Ionic Framework vào một dự án React đã có, hãy cài đặt @ionic/reactvà @ionic/react-routerđóng gói.                             

$npm install @ionic/react

$ npm install @ionic/react-router

Vue

Để thêm Ionic Framework vào dự án Vue hiện có, hãy cài đặt gói @ionic/vuevà @ionic/vue-router.

$ npm install @ionic/vue @ionic/vue-router

Sau đó, bạn sẽ cần cài đặt IonicVueplugin trong ứng dụng Vue của mình. 

main.js

import { IonicVue } from '@ionic/vue';

import App from './App.vue'

import router from './router';

const app = createApp(App)

  .use(IonicVue)

  .use(router);

router.isReady().then(() => {

  app.mount('#app');

});

Đảm bảo gắn kết ứng dụng của bạn sau khi router.isReady() giải quyết xong.

Bắt đầu một ứng dụng Ionic mới cực kỳ đơn giản. Từ dòng lệnh, chạy ionic startlệnh và CLI sẽ xử lý phần còn lại.

Ionic CLI sẽ hiển thị lời nhắc yêu cầu tên của dự án mới và mẫu nào sẽ sử dụng. Các chi tiết này có thể được cung cấp dưới dạng đối số lệnh:

$ionic start myApp tabs

Đây, myApplà tên của dự án, tabslà mẫu khởi động và là loại dự án angular. tabs không phải là mẫu dự án duy nhất có sẵn. Giữa tất cả các loại dự án, có sẵn ba mẫu:

tabs: Bố cục dựa trên tab

sidemenu: Một bố cục dựa trên menu phụ

blank: Một dự án trống với một trang duy nhất

Xem tất cả các mẫu có sẵn bằng lệnh sau:

$ionic start --list

Các mẫu này cung cấp một điểm khởi đầu tuyệt vời cho bất kỳ ứng dụng nào và bao gồm tất cả các phương pháp hay nhất để tạo thang cơ sở mã.

2/ chạy cục bộ trong trình duyệt web

Để làm như vậy, hãy chạy ionic servetừ dòng lệnh trong thư mục của dự án.

Ionic CLI sẽ hiển thị lời nhắc yêu cầu tên của dự án mới và mẫu nào sẽ sử dụng. Các chi tiết này có thể được cung cấp dưới dạng đối số lệnh:ionic serveđang chạy, tiếp tục phát triển ứng dụng của bạn. Khi bạn lưu các thay đổi, ứng dụng sẽ tải lại với những thay đổi đó được áp dụng.

 làm đồ án cơ sở:

npm install -g @ionic/cli native-run cordova-res

ionic start photo-gallery tabs --type=react --capacitor

cd photo-gallery

npm install @ionic/react-hooks @ionic/pwa-elements

npm install cordova-instagram-plugin

npm install @ionic-native/instagram

ionic cap sync

Tạo dự án mới

ionic start sharePhoto blank --type=angular --capacitor

cài thêm trang mới:

ionic g page pickerPage

npm i @ionic/pwa-elements

npm i @byteowls/capacitor-filesharer 

Tạo thư viên API:

ionic g service services/photo

ionic g service services/api

nhúng thư viện instafram:

npm i cordova-instagram-plugin

npm uninstall cordova-instagram-plugin

npm install --save @ionic-native/instagram @ionic-native-camera

Build app:

ionic build

npx cap add ios

npx cap add android

đồng bộ mã nguồn: ionic cap copy

run lên thiết bị đầu cuối:

ionic capacitor run ios --livereload --external

ionic capacitor run android --livereload --external

Mở trên thiết bị đầu cuối:

ionic cap open android

ionic cap open ios

Gói Ionic

Ionic cung cấp các gói khác nhau có thể được sử dụng để nhanh chóng bắt đầu sử dụng Ionic Framework hoặc Ionicons trong môi trường thử nghiệm, Angular, bất kỳ framework nào khác hoặc không có.Angular , React và Vue .
Bắt đầu xây dựng bằng cách cài đặt Ionic hoặc làm theo Hướng dẫn ứng dụng đầu tiên của chúng tôi để tìm hiểu các khái niệm chính.
Tổng quát
Ionic Framework tập trung vào giao diện người dùng và giao diện người dùng tương tác của một ứng dụng - điều khiển giao diện người dùng, tương tác, cử chỉ, hoạt ảnh. Nó dễ học và tích hợp với các thư viện hoặc khuôn khổ khác, chẳng hạn như Angular , React hoặc Vue . Ngoài ra, nó có thể được sử dụng độc lập mà không cần bất kỳ khung giao diện người dùng nào bằng cách sử dụng một tập lệnh đơn giản.

Một cơ sở mã chạy mội nơi

Ionic là ngăn xếp ứng dụng dành cho thiết bị di động duy nhất cho phép các nhà phát triển web tạo ứng dụng cho tất cả các cửa hàng ứng dụng lớn và web di động từ một cơ sở mã duy nhất. Và với Tạo kiểu thích ứng , các ứng dụng Ionic trông và cảm nhận như ở nhà trên mọi thiết bị.

Tập trung vào hiệu suất

Ionic được xây dựng để thực hiện và hoạt động tuyệt vời trên các thiết bị di động mới nhất với các phương pháp hay nhất như chuyển đổi tăng tốc phần cứng hiệu quả và cử chỉ được tối ưu hóa bằng cảm ứng.

Native and Web optimized

Ionic mô phỏng các nguyên tắc về giao diện người dùng ứng dụng gốc và sử dụng SDK gốc, mang các tiêu chuẩn giao diện người dùng và các tính năng thiết bị của ứng dụng gốc cùng với toàn bộ sức mạnh và tính linh hoạt của web mở. Ionic sử dụng Tụ điện (hoặc Cordova) để triển khai nguyên bản hoặc chạy trong trình duyệt dưới dạng Ứng dụng web tiến bộ.

Thiết kế đẹp

Sạch sẽ, đơn giản và đầy đủ chức năng. Ionic Framework được thiết kế để hoạt động và hiển thị đẹp mắt trên tất cả các nền tảng. Bắt đầu với các thành phần được thiết kế trước, kiểu chữ, mô hình tương tác và một chủ đề cơ sở tuyệt đẹp (nhưng có thể mở rộng).

Khả năng tương thích cao

Trong khi các bản phát hành trước đây của Ionic được kết hợp chặt chẽ với Angular, phiên bản 4.x của framework đã được thiết kế lại để hoạt động như một thư viện Web Component độc lập , với các tích hợp cho các khung JavaScript mới nhất, như Angular. Ionic có thể được sử dụng trong hầu hết các khuôn khổ giao diện người dùng thành công, bao gồm cả React và Vue, mặc dù một số khung công tác cần một miếng đệm để hỗ trợ Thành phần Web đầy đủ.

Angular

Angular luôn là trung tâm của những gì làm cho Ionic trở nên tuyệt vời. Mặc dù các thành phần cốt lõi đã được viết để hoạt động như một thư viện Thành phần Web độc lập, nhưng @ionic/angulargói này giúp cho việc tích hợp với hệ sinh thái Angular trở nên dễ dàng. @ionic/angularbao gồm tất cả các chức năng mà các nhà phát triển Angular mong đợi đến từ Ionic 2/3 và tích hợp với các thư viện Angular cốt lõi, như bộ định tuyến Angular.

React

Ionic hiện đã hỗ trợ chính thức cho thư viện React phổ biến. Ionic React cho phép các nhà phát triển React sử dụng các kỹ năng web hiện có của họ để xây dựng các ứng dụng nhắm mục tiêu iOS, Android, web và máy tính để bàn. Với @ionic/react, bạn có thể sử dụng tất cả các thành phần Ionic cốt lõi, nhưng theo cách giống như sử dụng các thành phần React gốc.

Vue

Ionic hiện đã hỗ trợ chính thức cho thư viện Vue 3 phổ biến. Ionic Vue cho phép các nhà phát triển Vue sử dụng các kỹ năng web hiện có của họ để xây dựng các ứng dụng nhắm mục tiêu iOS, Android, web và máy tính để bàn. Với @ionic/vue, bạn có thể sử dụng tất cả các thành phần Ionic cốt lõi, nhưng theo cách giống như sử dụng các thành phần Vue gốc.