Mở đầu 1: Ionic framework

  

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 script include đơn giản. Nếu bạn muốn tìm hiểu thêm về Ionic Framework trước khi đi sâu vào, chúng tôi  để hướng dẫn bạn những kiến ​​thức cơ bản

Một mã nguồn,chạy trên mọi nền tảng

Ionic là ngăn xếp ứng dụng 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 Adaptive Styling, 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.

Thiết kế sạch,đơn giản, và thận thiện người dùng

Ionic được thiết kế để hoạt động và hiển thị đẹp mắt trên mọi nền tảng và thiết bị di động hiện nay. Với các thành phần làm sẵn, kiểu chữ và chủ đề cơ sở tuyệt đẹp (nhưng có thể mở rộng) thích ứng với từng nền tảng, bạn sẽ xây dựng theo phong cách.

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ộ.

Đa nền tảng

Xây dựng và triển khai các ứng dụng hoạt động trên nhiều nền tảng, chẳng hạn như iOS gốc, Android, máy tính để bàn và web dưới dạng Ứng dụng web tiến bộ - tất cả đều có một cơ sở mã. Viết một lần, chạy mọi nơi.

Web Standarsds-based

Ionic Framework được xây dựng trên nền tảng đáng tin cậy, Công nghệ web tiêu chuẩn hóa: HTML, CSS và JavaScript, sử dụng các API Web hiện đại như Phần tử tùy chỉnh và Shadow DOM. Do đó, các thành phần Ionic có một API ổn định và không phải là ý thích của một nhà cung cấp nền tảng duy nhất.

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).

Đơn giản

Ionic Framework được xây dựng với mục đích đơn giản, để việc tạo các ứng dụng Ionic trở nên thú vị, dễ học và có thể truy cập được đối với bất kỳ ai có kỹ năng phát triển web.

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

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 đủ.

JavaScript

Một trong những mục tiêu chính khi chuyển Ionic Framework sang Web Components là loại bỏ bất kỳ yêu cầu cứng nào trên một khuôn khổ duy nhất để lưu trữ các thành phần. Điều này giúp các thành phần cốt lõi có thể hoạt động độc lập trong một trang web chỉ với một thẻ script. Mặc dù làm việc với các khung công tác có thể tuyệt vời cho các nhóm lớn hơn và các ứng dụng lớn hơn, nhưng giờ đây có thể sử dụng Ionic như một thư viện độc lập trong một trang duy nhất ngay cả trong ngữ cảnh như WordPress.

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.

Hỗ trợ trong tương lai

Hỗ trợ cho các khuôn khổ khác sẽ được xem xét trong các bản phát hành trong tương lai.

Thiết lập môi trường:

bắt đầu với ionic framework,yêu cầu môi trường Node.js và npm. chúng ta ưu tiên một trình soạn thảo Visual Studio.

Hầu hết  tất cả công cụ cho dự án javaScript hiện tại chạy trên nền tảng node.js. node.js được đóng gói với npm trong trình quản lý gói cho javaScript. Để kiểm tra cài đặt chúng ta mở một cửa sổ đầu cuối và nhập:

$ node --version

$ npm --version

Cài đặt Ionic CLI

để cài đặt : $ npm install -g @ionic/cli

nếu có cài đặt ionic CLI trước đó chúng ta cần gỡ bỏ chúng và cài lại để tương thích hơn.

$ npm uninstall -g ionic

$ npm install -g @ionic/cli

Thiết bị đầu cuối

chúng ta có 3 mẫu ứng dụng được tạo sẵn hoặc là mẫu trống phổ biến nhất là blank, tabs và sidemenu. bây giờ chúng ta bắt đầu với ionic start để tạo mới một dự án :

$ ionic start MyApp tabs

$ ionic start MyApp blank

$ ionic start MyApp sidemenu

chúng ta có thể chạy một trong ba lệnh trên để bắt đầu dự án mới .để tìm hiểu thêm về cách khởi động ứng dụng ionic hãy xem:Hướng dẫn bắt đầu.

Chạy ứng dụng

Phần lớn phát triển ứng ứng dụng ionic chúng ta có thể trực tiếp chạy trong trình duyêt bằng lệnh ionic serve: 

$ cd MyApp

$ ionic serve 

Ionic Framework CDN

Ionic + Angular

    Khi sử dụng ionic framework là angular trong dự án chúng ta hãy cài đặt @ionic/angular gói mới nhất trong npm. điều này sẽ đi kèm với tất 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/angular@latest --save

    Mỗi lần có một bản phát hành mới  phiên bản sẽ tự động cập nhật để có các tính năng và bản sửa lỗi mới nhất.

    Để 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 cập nhật cần thiết vào .

Ionic + React

Để thêm ionicframework  vào một dự án react đã có sẵn hãy cài đặt @ionic/react và @ionic/react-router :

$ npm install @ionic/react 

 $ npm install @ionic/react-router

CSS: để bao gồm css cần thiết trong một dự án react,hãy thêm mã nguồn sau vào ứng dụng gốc:

/* Core CSS required for Ionic components to work properly */

import '@ionic/react/css/core.css';

/* Basic CSS for apps built with Ionic */

import '@ionic/react/css/normalize.css';

import '@ionic/react/css/structure.css';

import '@ionic/react/css/typography.css';

/* Optional CSS utils that can be commented out */

import '@ionic/react/css/padding.css';

import '@ionic/react/css/float-elements.css';

import '@ionic/react/css/text-alignment.css';

import '@ionic/react/css/text-transformation.css';

import '@ionic/react/css/flex-utils.css';

import '@ionic/react/css/display.css';

Ionic + Vue

Để thêm ionicframework  vào một dự án Vue đã có sẵn hãy cài đặt @ionic/vue và @ionic/vue-router :

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

Sau đó bạn cần cài đặt IonicVue plugin 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 liên kết ứng dụng của bạn sau khi router.isReady() giải quyết xong.

Định tuyến

khi thiết lập định tuyến trong ứng dụng Vue của mình,bạn sẽ cần nhập các phần phụ thuộc của mình từ @ionic/vue-router thay vì vue-router.

router / index.js

import { createRouter, createWebHistory } from '@ionic/vue-router';

const routes = [

  // routes go here

]

const router = createRouter({

  history: createWebHistory(process.env.BASE_URL),

  routes

})

export default router;

để bao gồm Css cần thiết trong dự án Vue hãy thêm phần sau vào main.js của bạn:

/* Core CSS required for Ionic components to work properly */

import '@ionic/vue/css/core.css';

/* Basic CSS for apps built with Ionic */

import '@ionic/vue/css/normalize.css';

import '@ionic/vue/css/structure.css';

import '@ionic/vue/css/typography.css';

/* Optional CSS utils that can be commented out */

import '@ionic/vue/css/padding.css';

import '@ionic/vue/css/float-elements.css';

import '@ionic/vue/css/text-alignment.css';

import '@ionic/vue/css/text-transformation.css';

import '@ionic/vue/css/flex-utils.css';

import '@ionic/vue/css/display.css';

Ionicons CND

ionicons được đóng gói theo mặc định với ionicframework hãy thêm mã nguồn sau vào <script> gần cuối trang của bạn ngay trước thẻ </body>.

<script type="module" src="https://cdn.jsdelivr.net/npm/ionicons/dist/

ionicons/ionicons.esm.js"></script>

<script nomodule src="https://cdn.jsdelivr.net/npm/ionicons/dist/

ionicons/ionicons.js"></script>