Cấu trúc IONIC Project

intro.md

Cấu trúc IONIC Project

Tạo project Ionic

• Lệnh tạo project:

  • Chúng ta sẽ tạo một ứng dụng đơn giản với template "blank":

    bash

    ionic start myFirstApp blank --type=angular

  • Giải thích:

    • myFirstApp: Tên dự án (bạn có thể đổi thành tên khác).

    • blank: Template cơ bản, không có sẵn nhiều nội dung.

    • --type=angular: Sử dụng framework Angular (bạn cũng có thể chọn react hoặc vue).

• Di chuyển vào thư mục project:

  bash

  cd myFirstApp

• Kết quả:

  • Bạn sẽ có một thư mục myFirstApp chứa toàn bộ mã nguồn của dự án Ionic, sẵn sàng để phát triển.

---

Chạy ứng dụng trên trình duyệt

• Lệnh chạy:

  bash

  ionic serve

• Giải thích:

  • Lệnh này khởi động một máy chủ web cục bộ (localhost).

  • Trình duyệt mặc định sẽ tự động mở (thường là http://localhost:8100) và hiển thị ứng dụng.

  • Mỗi khi bạn thay đổi mã nguồn, trang web sẽ tự động reload.

Debug ứng dụng

• Sử dụng DevTools trên trình duyệt:

  1. Mở DevTools:

     • Nhấn F12 hoặc Ctrl+Shift+I (Windows/Linux) / Cmd+Option+I (Mac).

  2. Các tab hữu ích:

     • Console: Xem thông báo lỗi hoặc log (ví dụ: console.log).

     • Elements: Kiểm tra cấu trúc HTML và CSS.

     • Network: Theo dõi các yêu cầu API (nếu có).

• Ví dụ debug:

  1. Mở file src/app/home/home.page.ts.

  2. Thêm dòng sau vào hàm constructor():

     typescript

     console.log("Hello from Ionic");
     

  3. Chạy ionic serve và mở DevTools để xem thông báo "Hello from Ionic" trong tab Console.

---

Giới thiệu các thành phần trong thư mục project Ionic (45 phút)

Cấu trúc thư mục project

Khi bạn tạo một project Ionic, bạn sẽ thấy các thư mục và file sau:

• src/: Chứa toàn bộ mã nguồn ứng dụng.

  • app/: Chứa các modules, pages, components.

  • assets/: Lưu trữ hình ảnh, icon.

  • theme/: Chứa file CSS tùy chỉnh (như variables.scss).

  • index.html: File HTML chính của ứng dụng.

  • main.ts: Điểm bắt đầu của ứng dụng.

• node_modules/: Chứa các thư viện dependencies.

• package.json: Quản lý dependencies và scripts.

• ionic.config.json: Cấu hình Ionic (tên project, tích hợp Capacitor).

• Chi tiết thư mục src/app/ (với template blank):

  • app.component.ts: Component chính (thường chứa menu hoặc toolbar).

  • app.module.ts: Module chính, khai báo các thành phần và dịch vụ.

  • app-routing.module.ts: Quản lý điều hướng giữa các trang.

• Thư mục pages (ví dụ: src/app/home/):

  • Mỗi page gồm 3 file:

    • .page.ts: Logic của trang.

    • .page.html: Giao diện HTML.

    • .page.scss: CSS tùy chỉnh.

Giải thích chi tiết các file quan trọng

• src/index.html:

  • File HTML gốc, nơi các script và style được nhúng.

  • Chứa thẻ là điểm bắt đầu của ứng dụng Ionic.

• src/app/app.component.ts:

  • Định nghĩa component chính:

    typescript

    import { Component } from '@angular/core';
    @Component({
      selector: 'app-root',
      templateUrl: 'app.component.html'
    })
    export class AppComponent {}

• src/app/app.module.ts:

  • Khai báo các modules, components, services:

    typescript

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { IonicModule } from '@ionic/angular';
    import { AppComponent } from './app.component';
    import { AppRoutingModule } from './app-routing.module';
    
    @NgModule({
      declarations: [AppComponent],
      imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
      bootstrap: [AppComponent]
    })
    export class AppModule {}

• src/app/home/home.page.ts:

  • Logic của trang Home:

    typescript

    import { Component } from '@angular/core';
    @Component({
      selector: 'app-home',
      templateUrl: 'home.page.html',
      styleUrls: ['home.page.scss']
    })
    export class HomePage {
      constructor() {
        console.log("Home page loaded");
      }
    }

• src/app/home/home.page.html:

  • Template giao diện:

    html

    <ion-header>
      <ion-toolbar>
        <ion-title>Home</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <h1>Welcome to Ionic!</h1>
    </ion-content>

Thêm một page mới

• Tạo page mới:

  bash

  ionic generate page about

  • Lệnh này tạo thư mục about/ với các file .ts, .html, .scss, và cập nhật routing.

• Chỉnh sửa page:

  • Mở src/app/about/about.page.html và thêm:

    html

    <ion-content>
      <h2>About Us</h2>
      <p>This is the about page.</p>
    </ion-content>

• Điều hướng đến page:

  • Mở src/app/home/home.page.html, thêm nút:

    <ion-button routerLink="/about">Go to About</ion-button>

• Kiểm tra:

  • Chạy ionic serve, nhấp nút "Go to About" và xem trang mới.