Tìm hiểu angular, ionic framework và xây dựng ứng dụng minh

PHẦN 0: MỤC ĐÍCH ĐỀ TÀICordova Framework và các yêu cầu cần thiết để triển khai cho một ứng dụng trên hai nền tảng iOS và Android baogồm trình mô phỏng và thiết bị.. Tổng quan 1.1 Khái n

ĐẠI HỌC QUỐC GIA TP HCM ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

-  

-BÁO CÁO ĐỒ ÁN 2 Lớp : SE122.L11

ĐỀ TÀI: TÌM HIỂU ANGULAR, IONIC FRAMEWORK VÀ XÂY DỰNG ỨNG DỤNG

MINH

GIÁO VIÊN HƯỚNG DẪN:

ThS Huỳnh Nguyễn Khắc Huy

NHÓM THỰC HIỆN:

Nguyễn Mạnh Tùng – 17521236Trương Văn Thành – 17521062

TPHCM, Ngày 4 tháng 1 năm 2020

LỜI CẢM ƠN

Sau quá trình học tập và rèn luyện tại khoa Công nghệ phần mềm trường Đại học Công nghệThông tin chúng em đã được trang bị các kiến thức cơ bản, các kỹ năng thực tế để có thể hoànthành đồ án môn học của mình

Chúng em xin gửi lời cảm ơn chân thành đến thầy Huỳnh Nguyễn Khắc huy đã quan tâm,hướng dẫn, truyền đạt những kiến thức và kinh nghiệm cho chúng em trong suốt thời gian học tậpmôn Đồ án 2

Trong quá trình thực hiện nhóm chúng em chắc chăn không tránh khỏi được những sai sót,chính vì vậy, chúng em rất mong nhận được sự góp ý của thầy cô và các bạn nhằm hoàn thiệnnhững kiến thức mà nhóm chúng em đã học tập và là hành trang để thực hiện tiếp các đề tài kháctrong tương lai

Nhóm em xin chân thành cảm ơn quý Thầy Cô!

TP Hồ Chí Minh, ngày 4 tháng 1 năm 2020

NHẬN XÉT (của giảng viên)

MỤC LỤC

LỜI CẢM ƠN 2

MỤC LỤC 4

PHẦN 0: MỤC ĐÍCH ĐỀ TÀI 9

PHẦN 1: TÌM HIỂU IONIC ANGULAR 10

CHƯƠNG 1: TỔNG QUAN IONIC 10

1 Tổng quan 10

1.1 Khái niệm 10

1.2 Mục Tiêu 10

1.3 Ưu điểm 11

1.4 Nhược điểm 12

1.5 Giấy phép 12

CHƯƠNG 2: TỔNG QUAN ANGULAR 19

1 Khái niệm 19

2 Những đặc điểm nổi bật 20

3 Ưu điểm 21

4 Nhược điểm 22

5 Cài đặt 22

CHƯƠNG 3: HƯỚNG DẪN CÀI ĐẶT VÀ CHẠY ỨNG DỤNG IONIC 22

1 Cài đặt môi trường 22

2 Cài đặt CLI 23

3 Triển khai trên Android 25

3.1 Yêu cầu 25

3.2 Hướng dẫn thiết lập Android Studio 25

3.3 Thiết lập dự án 26

3.4 Chạy ứng dụng với Capacitor hoặc Cordova 27

4 Triển khai trên iOS 28

4.1 Yêu cầu 28

4.2 Thiết lập dự án 28

4.3 Chạy ứng dụng với Xcode 29

CHƯƠNG 4: LAYOUT 30

1 Cấu trúc 30

1.1 Header and Footer Layout 30

1.2 Tabs Layout 30

1.3 Menu Layout 31

2 Responsive Grid 33

3 Css 33

3.1 Colors 33

3.2 Text Modification 35

3.3 Element Placement 37

3.4 Element Display 38

3.5 Content Space 38

3.6 Flex Properties 40

3.7 Border Display 43

3.8 Ionic Breakpoints 44

CHƯƠNG 5: COMPONENTS 45

CHƯƠNG 6: NATIVE 48

1 Giới thiệu 48

2 Thiết lập 48

2.1 Ionic Native Community là gì? 48

2.2 Usage 48

3 Ionic Native FAQ 55

3.1 Use the Ionic CLI to add/update/delete plugins 55

3.2 Upgrade plugins by removing, then re-adding them 56

3.3 Install explicit versions 56

3.4 Restore Cordova in an existing Ionic project 56

3.5 Troubleshoot Cordova issues with Ionic CLI commands 56

PHẦN 2: XÂY DỰNG ỨNG DỤNG MINH HỌA 56

CHƯƠNG 1: PHÁT BIỂU BÀI TOÁN 56

1.1 Giới thiệu bài toán cần giải quyết 57

1.1.1 Nhu cầu thực tế của đề tài 57

1.1.2 Mục tiêu đề tài 57

1.2 Mô tả quy trình thực hiện 57

CHƯƠNG 2: KHẢO SÁT HIỆN TRẠNG 58

2.1 Hiện trạng tổ chức 58

2.1.1 Sơ đồ tổ chức hệ thống 58

2.1.2 Chức năng của Người dùng 58

2.2 Hiện trạng tin học 58

2.3 Hiện trạng nghiệp vụ 58

2.3.1 Mô tả nghiệp vụ 58

2.3.2 Sơ đồ hiện trạng nghiệp vụ 59

2.3.3 Bảng mô tả công việc 59

CHƯƠNG 3: XÁC ĐỊNH CÁC YÊU CẦU PHẦN MỀM 61

3.1 Yêu cầu chức năng 61

3.2 Yêu cầu phi chức năng 61

CHƯƠNG 4: MÔ HÌNH USE-CASE 63

4.1 Sơ đồ Use-case tổng quát: 63

4.2 Danh sách các Actor 63

4.3 Danh sách các Use-case 64

4.4 Đặc tả Use-case 65

4.4.1 Đặc tả Use-case “Tìm kiếm liên hệ” 65

4.4.2 Đặc tả Use-case “Thêm liên hệ” 66

4.4.3 Đặc tả Use-case “Xóa liên hệ” 67

4.4.4 Đặc tả Use-case “Cập nhật liên hệ” 68

4.4.5 Đặc tả Use-case “Gọi điện thoại” 69

4.4.6 Đặc tả Use-case “Thêm ưa thích” 70

4.4.7 Đặc tả Use-case “Tìm địa chỉ liên hệ” 71

CHƯƠNG 5: PHÂN TÍCH 72

5.1 Sơ đồ lớp 72

5.1.1 Sơ đồ lớp (mức phân tích) 72

5.1.2 Danh sách các lớp đối tượng và quan hệ 74

5.1.3 Mô tả chi tiết từng lớp đối tượng 74

5.2 Sơ đồ sequence 75

5.2.1 Cập nhật liên hệ 75

5.2.2 Thêm mới liên hệ 76

5.2.3 Xóa thông tin liên hệ 76

CHƯƠNG 6: THIẾT KẾ DỮ LIỆU 78

6.1 Sơ đồ logic 78

6.2 Danh sách các bảng dữ liệu trong sơ đồ 78

6.3 Mô tả chi tiết các kiểu dữ liệu trong sơ đồ logic 79

6.3.1 Bảng CONTACT 79

6.3.2 Bảng PHOTO 80

CHƯƠNG 7: THIẾT KẾ KIẾN TRÚC 81

7.1 Kiến trúc hệ thống 81

7.2 Mô tả chi tiết từng thành phần trong mô hình 81

7.2.1 View 81

7.2.2 View Model 81

7.2.3 Model 81

CHƯƠNG 8: THIẾT KẾ GIAO DIỆN 82

8.1 Sơ đồ liên kết các màn hình 82

8.2 Danh sách các màn hình 82

8.3 Mô tả chi tiết các màn hình 84

8.3.1 Màn hình Contacts và Favorite 84

8.3.2 Màn hình Thêm liên hệ 85

8.3.3 Màn hình Tìm kiếm liên hệ 86

8.3.4 Màn hình Chỉnh sửa liên hệ 87

8.3.5 Màn hình gọi thoại 88

8.3.6 Màn hình quét QR code 89

8.3.7 Màn hình QR code 90

8.3.8 Màn hình Chi tiết liên hệ 91

8.3.9 Màn hình địa chỉ google map 92

CHƯƠNG 9: NHẬN XÉT VÀ KẾT LUẬN 93

9.1 Môi trường phát triển và Môi trường triển khai 93

9.1.1 Môi trường phát triển ứng dụng 93

9.1.2 Môi trường triển khai ứng dụng 93

9.2 Kết quả đạt được 93

9.3 Nhận xét 93

9.3.1 Ưu điểm 93

9.3.2 Khuyết điểm 94

9.4 Hướng phát triển 94

BẢNG PHÂN CHIA CÔNG VIỆC 95

TÀI LIỆU THAM KHẢO 96

PHẦN 0: MỤC ĐÍCH ĐỀ TÀI

Cordova Framework

và các yêu cầu cần thiết để triển khai cho một ứng dụng trên hai nền tảng iOS và Android (baogồm trình mô phỏng và thiết bị )

Angular và Ionic với một số API do Cordova cung cấp: Camera, Native Storage, Call

Number,

PHẦN 1: TÌM HIỂU IONIC ANGULAR

CHƯƠNG 1: TỔNG QUAN IONIC

1 Tổng quan

1.1 Khái niệm

Ionic là một Framework cung cấp bộ công cụ giao diện người dùng mã nguồn

mở để xây dựng các ứng dụng di động và máy tính để bàn chất lượng cao sử dụng công nghệ web - HTML, CSS và JavaScript

Kết hợp với các framework javascript phổ biến khác:

công nghệ web tiêu chuẩn hóa: HTML, CSS và JavaScript, sử dụng các APIWeb hiện đại như Custom Elements và Shadow DOM Bởi vì điều này, các

thành phần Ionic có một API ổn định, và không theo ý thích của một nhà cung cấp nền tảng duy nhất

Ionic Framework được thiết kế để hoạt động và hiển thị tuyệt đẹp

out-of-the-box 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ế sẵn, kiểu chữ, mô hình tương tác và chủ đề cơ sở tuyệt đẹp (nhưng có thể mở rộng)

gian cũng như chi phí đào tạo nói riêng và thời gian cũng như chi phí dành cho dự

án nói chung

thiết kế tùy ứng (responsive design) của web

framework cho ứng dụng hybrid khác

Pull-to-Refresh, Infinite-loader, tabs,

mạnh, giúp cho việc tìm hiểu và hỗ trợ dễ dàng hơn

- Tận dụng các tính năng khác của thiết bị di động như GPS, camera

native

1.4 Nhược điểm

1.5 Giấy phép

Ionic Framework là một dự án mã nguồn mở và miễn phí, được phát hành theo giấy phép MIT Điều này có nghĩa là nó có thể được sử dụng trong các dự án cá nhân hoặcthương mại miễn phí MIT là giấy phép tương tự được sử dụng bởi các dự án phổ biến như jQuery và Ruby on Rails

2.1 Cordova

Apache Cordova (trước kia được gọi là PhoneGap) là một framework phát triển ứng dụng

di động nổi tiếng được tạo ra bởi Nitobi Adobe Systems đã mua Nitobi vào năm 2011, đổi tên nó thành PhoneGap, và sau đó đã phát hành một phiên bản mã nguồn mở được gọi là Apache Cordova Cordova là một nền tảng để xây dựng những ứng dụng di

động (hybrid mobile applications) sử dụng HTML, CSS và Javascript Những ứng dụng này có thể chạy trên nhiều nền tảng khác nhau như Android, iOS, Windows Phone… dựa trên các API để giao tiếp với thiết bị.

Khi sử dụng Cordova API, một ứng dụng có thể được xây dựng mà không phải sử dụng bất kỳ một đoạn mã native code nào Thay vào đó, công nghệ web sẽ được sử dụng, và chúng sẽ được tổ chức trên chính ứng dụng đấy chứ không cần thông qua một server nào

Và bởi vì những API Javascript này là thống nhất trên tất cả các nền tảng thiết bị vàđược xây dựng trên chuẩn web nên những ứng dụng được viết trên nền tảng này có thểđược sử dụng trên các nền tảng khác mà có thể không cần có bất cứ sự thay đổi nào

Cordova cung cấp một tập hợp các thư viện Javascript đã được chuẩn hóa để cóthể sử dụng Cordova hiện có thể sử dụng cho các nền tảng như iOS, Android,Blackberry, Windows Phone, Palm WebOS, Bada và Symbian

Một số APIs được Cordova cung cấp cần thiết cho di động như: Camera, GPS,

firebase, SQLite, Call Phone Number, Native Storage,

Cordova đưa ra nền tảng để xây dựng các hybrid app, nên chúng ta có thể phát triển

các ứng dụng chạy trên nhiều nền tảng khác nhau như IOS, Android, Windows

Phone, Amazon-fireos, blackberry, Firefox OS, Ubuntu và tizien

Sử dụng cordova sẽ nhanh hơn rất nhiều so với phát triển các ứng dụng thuần

android, hay iOS

Chỉ cần sử dụng Javascript khi làm việc với Cordova nên ta không cần thiết phải biếttừng ngôn ngữ lập trình cho từng loại hệ điều hành

2.1.3 Hạn chế

Hiệu suất của hybrid app thì sẽ chậm hơn các native app, nên chúng ta không dùng Cordova để xây dựng các ứng dụng lớn, yêu cầu nhiều dữ liệu và chức năng.Các plugin có thể không tương thích với một số thiết bị và nền tảng Một số API cũng chưa được hỗ trợ để giao tiếp với thiết bị

Bước 1: Cài Nodejs https://nodejs.org/en/ Cordova hoạt động dựa trên nodejs, nó

sẽ genarate các file tương ứng từ source code

Bước 2: Cài Cordova Các command-line của Cordovar chạy trên nền Node.js, mởTerminal và gõ:

npm install -g cordova

Bước 3: Tạo mới project: Tạo mới một project Cordova bằng tool line, điều hướng tới folfer mà bạn muốn lưu trữ project và tạo đường dẫn:

command-cordova create <name-app>

Bước 4: Thêm platform Sau khi khởi tạo project Cordova, điều hướng tới folder chứa project, từ folder này, bạn có thể add thêm bất kỳ platform nào bạn muốn để build app Để add platform, type:

cordova platform add <platform name>

cordova build

2.2 Capacitor

2.2.1 Capacitor là gì?

Capacitor là một dự án mã nguồn mở chạy các Ứng dụng Web hiện đại trên iOS, Android, Electron và Web (sử dụng công nghệ Progressive Web App) cung cấp giao diện mạnh mẽ và dễ sử dụng để truy cập Native SDKs và Native APIs trên mỗinền tảng

2.2.2 Ưu điểm

nhưng với cách tiếp cận hiện đại hơn để phát triển ứng dụng, tận dụng các API web mới nhất

và khả năng native platform

mục tiêu một tập hợp API bất kể ứng dụng đang chạy trên nền tảng nào, trái ngược với việc quản lý nhiều API cho mỗi nền tảng mục tiêu

tính để bàn và web dưới dạng Progressive Web App

2.2.3 Hạn chế

API cũng chưa được hỗ trợ để giao tiếp với thiết bị

2.2.4 Cách cài đặt và thêm vào ứng dụng

npm install @capacitor/core@next @capacitor/cli@next

npx cap init

2.3 Mô hình phát triển ứng dụng MV Pattern

Angular JS được sử dụng trong Ionic là một MVC framework, nhưng theo thời gianthì nó trở nên thân thuộc hơn với khái niệm MVVM trong đó đối tượng $scope hoạtđộng như một ViewModel, sử dụng và thao tác trong các Controller

Các developer có thể linh hoạt sử dụng MVC hoặc là MVVM theo ý thích của họ,miễn là đạt được mục tiêu: Việc tách phần trình bày giao diện khỏi tầng nghiệp vụlogic thúc đẩy hiệu suất phát triển sản phẩm và bảo trì.

Thao tác với DOM

Về khả năng tương tác với các thành phần DOM của webView Angular nhúng jqLite,

là một phần nhỏ gọn của thư viện jQuery cho phép thao tác DOM trong các trình duyệt theo cách tương thích, và không phụ thuộc vào trình duyệt

2.4 Giao diện người dùng UI

Ionic thể hiện sự đơn giản Giống như phong cách của Google, nó dựa trên sự tồn tại của HTML5 và CSS3 để cung cấp những trải nghiệm nhanh chóng Chính xác là tốc độ

có trong sự đơn giản của nó – không có bóng đổ hay góc tròn, chỉ đơn giản là phẳng – Như vậy, Ionic không hứa hẹn có được giao diện người dùng bóng bẩy, nhưng nó cung cấp giao diện một cách nhanh chóng và nhất quán, thậm chí là chúng ta sử dụng trên các thiết bị với khả năng thông dịch HTML5 chậm trong các ứng dụng Ionic

Sass là một ngôn ngữ mở rộng của CSS – Cascading Style Sheets – cho phép Ionic thêm các biến số và khả năng lồng cú pháp để mở rộng sự xuất hiện của giao diện ứng dụng Ngoài ra, Ionic còn được đóng gói thêm các thư viện icon nguồn mở, khoảng 440 icons

2.5 Giao diện dựng sẵn Widgets

Các thành phần của Ionic cực kỳ đơn giản và mạnh mẽ Chúng là các phần tử HTML phức hợp, được gọi là các directives, Ionic cũng cung cấp các Controller để bổ sung cho cấu hình và tương tác Ionic cung cấp các khối xây dựng có phần đơn giản mà có thể được kết hợp để cung cấp giao diện người dùng phong phú.

Bao gồm: form elements, header and footer bars, buttons, simple list, grid elements

và các thành phần phổ biến khác nữa

2.6 Performance obsessed

Ionic rất chú trọng đến hiệu suất, mặc dù nó ra đời chưa lâu Ionic có một giao diện ổn định và tốc độ tốt, với các hiệu ứng chuyển động được áp dụng kỹ thuật tăng tốc phần cứng (hardware accelerating) và tối giản các thao tác với DOM Ionic cũng không cần

sử dụng đến jQuery, mặc dù người sử dụng có thể thêm vào nếu muốn Ionic có thể tạo

ra các ứng dụng phức tạp chạy trên cả iOS và Android

Một điểm thú vị của Ionic đồng thời giúp tăng hiệu suất hoạt động của nó, đó là

Ionic không cố gắng tự mình thực hiện tất cả các công việc

Để đóng gói ứng dụng, Ionic sử dụng Cordova và tận dụng cấu trúc thư mục mặc định của nó

2.7 Application scripting

Ionic không những mang đến cho chúng ta CSS và markup tùy biến cao mà còn

những mẫu thiết kế (design pattern) Javascript để giúp chúng ta xây dựng những ứng dụng giống nhất với những ứng dụng native trên Android và iOS Ionic muốn giải phóng những ứng dụng web ra khỏi thanh địa chỉ và hướng đến những tương tác giaodiện mạnh mẽ như mà side menu hay view controllers

2.8 Open-source

Mục đích của Ionic framework không chỉ là xây dựng một bộ khung phát triển ứng dụng di động đa nền tảng mà còn muốn xây dựng một nền tảng để chia sẻ các kiến thứccho các nhà phát triển, tạo ra một cách để đưa ra những design pattern tốt nhất để xây dựng các ứng dụng di động Vì vậy, Ionic là một framework mở hoàn toàn cho phép tất

cả mọi người có thể chia sẻ những kiến thức, kinh nghiệm để xây dựng những ứng dụng di động tuyệt vời trên nền tảng HTML5

Ionic sẽ đặt nền tảng cho ứng dụng của bạn dựa trên HTML5, CSS và Javascript Thay

vì mỗi lập trình viên phải tự tìm tòi những khuyết điểm của việc phát triển ứng dụng di động trên HTML5 thì Ionic sẽ cho bạn CSS cơ bản và tạo cho bạn 1 kiến trúc tốt để phát triển phía trên nó

CHƯƠNG 2: TỔNG QUAN ANGULAR

Angular là một javascript framework do google phát triển để xây dựng các Single Page Application (SPA) bằng JavaScript , HTML và TypeScript Angular cung cấp các tính năng tích hợp cho animation , http service và có các tính năng như auto-

complete , navigation , toolbar , menus ,… Code được viết bằng TypeScript , biên dịch thành JavaScript và hiển thị tương tự trong trình duyệt.

Để tiếp cận được Angular chúng ta cần

Đây là tính năng được developer đánh giá là ấn tượng nhất của Angular Databinding tự động, tức thời Bất cứ thay đổi nào trên view, dù là nhỏ nhất, cũng đềuđược tự động cập nhật thuộc tính “model” vào component class và ngược lại

Thêm vào đó, Angular cũng hỗ trợ property binding Developer có thể ràng buộcthuộc tính HTML với thuộc tính của component class, data sẽ tự động xuất hiện bêntrong view thông qua việc điều khiển DOM

cho phép chúng ta tạo SPA

cung cấp nhiều view khác nhau tương ứng với với các chức năng chính Ví dụ: các trang liên

hệ, giới thiệu chung, nội dung, báo giá, … trong một website Hiển thị đúng view vào đúng thời điểm là mục đích của điều hướng (routing)

- Angular giúp định nghĩa các đường dẫn (route) cho mỗi page view của ứng dụng Developer sẽ kích hoạt route dựa trên tương tác của người dùng (user).

Nhờ Angular, developer có thể sử dụng cấu trúc lập trình giống như điều kiện

IF, vòng lặp FOR, những biến điạ phưong “local variables”, …để render các

̛’

control

Angular tiếp cận theo hướng thiết kế module hoá Người dùng phải tạo cácAngular Module để tổ chức tốt hơn và quản lý source code

cũng như có hẳn một Tutorial Basic được xây dựng nên bởi Angular team

- HTML linh hoaṭhon.

̛’

CHƯƠNG 3: HƯỚNG DẪN CÀI ĐẶT VÀ CHẠY ỨNG DỤNG IONIC

1 Cài đặt môi trường Yêu cầu

- Tools: Visual Studio Code

Terminal

biết là làm việc với Ionic, nhưng có thể không được hỗ trợ

Git Bash (git-scm.com) không hỗ trợ tương tác TTY và không được Ionic hỗ trợ Node & npm

chúng ta chạy command-line:

node –versionnpm version

npm EACCES để giải quyết lỗi

2 Cài đặt CLI

Các ứng dụng Ionic được tạo ra và phát triển chủ yếu thông qua Ionic command-line

Install the Ionic CLI

- Cài đặt ionic cli với npm

npm install -g @ionic/cli

npm uninstall -g ionic

Start an App

- Tạo ứng dụng Ionic bằng cách sử dụng một trong các mẫu ứng dụng được tạo sẵnhoặc mẫu trống để bắt đầu làm mới.

Run the App

cd myAppionic serve

lệnh

ionic serve -l

3 Triển khai trên Android

Để chạy và gỡ lỗi ứng dụng Ionic trên trình giả lập Android và thiết bị sử dụng Capacitor hoặc Cordova Ứng dụng Android có thể được phát triển trên Windows, macOS và Linux

3.1 Yêu cầu

3.2 Hướng dẫn thiết lập Android Studio

Cài đặt Android SDK

SDK platform và hoàn thành cài đặt

Manager

Cài đặt thiết bị Android ảo

Tools » AVD Manager

3.3 Thiết lập dự án

Trước khi ứng dụng có thể được triển khai cho thiết bị và trình mô phỏng Android, dự ánnative phải được định cấu hình

ionic capacitor add android

orionic cordova prepare android

b. Set the Package ID.

Đối với Capacitor, hãy mở tệp và sửa đổi thuộc tính appId trong capacitor.config.json

Đối với Cordova, hãy mở tệp và sửa đổi thuộc tính id <widget> trong config Xml

Đối với Capacitor, hãy chạy như sau để mở ứng dụng trong Xcode:

ionic capacitor open android

Đối với Cordova, hãy mở Android Studio Sử dụng File » Open và định vị ứng dụng.

Mở thư mục platform / android của ứng dụng

3.4 Chạy ứng dụng với Capacitor hoặc Cordova

ionic capacitor run android

orionic cordova run android

Để chạy được bản cập nhật mới nhất của dự án chúng ta cần build và sync trước khi

chạy lên máy ảo hoặc thiết bị với 2 dòng lệnh sau

ionic build

ion ionic cap sync

or ionic cordova compile android

4 Triển khai trên iOS

Để chạy và gỡ lỗi ứng dụng Ionic trên trình giả lập Android và thiết bị sử dụng Capacitor hoặc Cordova Ứng dụng Android có thể được phát triển trên Windows, macOS và Linux

4.1 Yêu cầu

4.2 Thiết lập dự án

Trước khi ứng dụng có thể được triển khai cho thiết bị và trình mô phỏng Android, dự ánnative phải được định cấu hình

ionic capacitor add ios

orionic cordova prepare ios

Đối với Capacitor, hãy mở tệp và sửa đổi thuộc tính appId trong capacitor.config.json Đối với Cordova, hãy mở tệp và sửa đổi thuộc tính id <widget> trong config Xml

Đối với Capacitor, hãy chạy như sau để mở ứng dụng trong Xcode:

ionic capacitor open ios

Đối với Cordova, hãy mở Xcode Sử dụng File » Open và định vị ứng dụng Mở thư mục

platform / ios của ứng dụng

4.3 Chạy ứng dụng với Xcode

ionic capacitor run ios

orionic cordova run iosTrong Xcode, chọn một trình mô phỏng hoặc thiết bị mục tiêu và nhấp vào nút play

Để chạy được bản cập nhật mới nhất của dự án chúng ta cần build và sync trước khi

chạy lên máy ảo hoặc thiết bị với 2 dòng lệnh sau

ionic build

ionic cordova compile ios

CHƯƠNG 4: LAYOUT

Ionic Framework cung cấp một số bố cục khác nhau có thể được sử dụng để cấu trúcmột ứng dụng Từ bố trí trang đơn, đến chia tách dạng xem ngăn và phương thức

1.1 Header and Footer Layout

Cấu trúc đơn giản có 3 phần: Header, Content và Footer

<ion-app>

<ion-header>

<ion-toolbar color="warning">

<ion-title>Headertitle> </ion-toolbar>

<ion-toolbar color="warning">

<ion-title>Footer</ion-title>

</ion-toolbar>

</ion-footer>

</ion-app>

1.2 Tabs Layout

Bố trí ngang, Tab cho phép người dùng nhanh chóng thay đổi giữa các chế độ xem nội

dung Mỗi tab có thể chứa nội dung tĩnh hoặc ngăn xếp bằng cách dùng

ion-router-outlet hoặc ion-nav.

<ion-tabs>

<ion-tab-bar slot="bottom">

<ion-tab-button tab="home">

<ion-icon name="home"></ion-icon>

<ion-label>Home</ion-label>

</ion-tab-button>

<ion-tab-button tab="schedule">

<ion-icon name="calendar"></ion-icon>

<ion-label>Schedule</ion-label>

<ion-menu content-id=

<ion-icon slot="start"

name='home'></ion-icon>

<ion-button>Default</ion-button> <ion-buttoncolor="primary">Primary</ion-button> <ion-buttoncolor="secondary">Secondary</ion-button>

<ion-button color="tertiary">Tertiary</ion-button>

<ion-button color="success">Success</ion-button>

<ion-button color="warning">Warning</ion-button>

<ion-button color="danger">Danger</ion-button>

<ion-button color="light">Light</ion-button> button color="medium">Medium</ion-button> <ion-button color="dark">Dark</ion-button>

<ion-3.2 Text Modification

3.2.1 Text Alignment

Class

line box

the line box

direction is right-to-left.text-lefttext-right

direction is right-to-left.text-righttext-left

spaced to line up its left and right edges to the leftand right edges of the line box, except for the lastSequences of whitespace are collapsed Newline

whitespace Breaks lines as necessary to fill line

3.2.2 Text Transformation

Class Style Rule Description

.ion-text- text-transform: Forces all characters to be converted

.ion-text- text-transform: Forces all characters to be converted

.ion-text- text-transform: Forces the first letter of each word tocapitalize capitalize be converted to uppercase

3.2.3 Responsive Text Classes

{modifier} left right start end center justify wrap nowrap uppercase lowercase capitalize

.ion-float-left float: left The element will float on the left side of its

containing block

.ion-float-float: right The element will float on the right side of its

float:

The same as if direction is left-to-right and if.ion-float-start left / float:

direction is right-to-left.float-leftfloat-rightright

float:

The same as if direction is left-to-right and if.ion-float-end left / float:

direction is right-to-left.float-rightfloat-leftright

3.3.2 Responsive Float Classes

{modifier} left right start end

.ion-hide display: none The element will be hidden

3.5 Content Space

3.5.1 Element Padding

- Là khoảng cách giữa nội dung của phần tử và đường viền của nó

Class Style Rule Description

.ion-padding padding: 16px Applies padding to all sides

.ion-padding-top padding-top: 16px Applies padding to the top

.ion-padding-start padding-start: 16px Applies padding to the start

.ion-padding-end padding-end: 16px Applies padding to the end

.ion-padding-bottom padding-bottom: Applies padding to the bottom

16px.ion-padding-vertical padding: 16px 0 Applies padding to the top and bottom

.ion-margin margin: 16px Applies margin to all sides

.ion-margin-top margin-top: 16px Applies margin to the top

Class Style Rule Description

.ion-margin-start margin-start: 16px Applies margin to the left

.ion-margin-end margin-end: 16px Applies margin to the right

.ion-margin-bottom margin-bottom: Applies margin to the bottom

16px.ion-margin-vertical margin: 16px 0 Applies margin to the top and bottom