Bài 05: Build you First App

  

Install Ionic Tooling

Chạy lệnh sau trong dòng lệnh để cài đặt Ionic CLI ( ionic), native-runđược sử dụng để chạy các tệp nhị phân gốc trên thiết bị và trình mô phỏng / trình giả lập, và cordova-resđược sử dụng để tạo biểu tượng ứng dụng gốc và màn hình giật gân:

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

Tạo ứng dụng

Tiếp theo, tạo ứng dụng Ionic React sử dụng mẫu khởi động “Tab” và thêm Tụ điện cho chức năng gốc:

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

Dự án khởi động này hoàn chỉnh với ba trang được tạo sẵn và các phương pháp hay nhất để phát triển Ionic. Với các khối xây dựng chung đã có sẵn, chúng tôi có thể thêm nhiều tính năng hơn một cách dễ dàng!

Tiếp theo, thay đổi vào thư mục ứng dụng:

  $ cd photo-gallery

Các phần tử React hooks và PWA

Tiếp theo, chúng tôi sẽ cài đặt một vài thư viện trợ giúp để làm việc với Tụ điện.

Thư viện React Hooks làm cho việc làm việc với Capacitor trong React trở nên dễ dàng bằng cách cung cấp một số hook tùy chỉnh cho từng plugin cụ thể.

Một số plugin Tụ điện, bao gồm API Camera, cung cấp giao diện người dùng và chức năng dựa trên web thông qua Thư viện Ionic PWA Elements .

Cả hai gói đều là các gói phụ thuộc riêng biệt, vì vậy hãy cài đặt chúng tiếp theo:

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

Sau khi cài đặt, hãy mở dự án trong trình soạn thảo mã mà bạn chọn.

Tiếp theo, nhập @ionic/pwa-elementsbằng cách chỉnh sửa src/index.tsx.

  import { defineCustomElements } from '@ionic/pwa-elements/loader';

 

  // Call the element loader after the platform has been bootstrapped

  

  defineCustomElements(window);

Đó là nó! Bây giờ đến phần thú vị - chúng ta hãy xem ứng dụng hoạt động.

Chạy ứng dụng

Chạy lệnh này trong trình bao của bạn:

  $ ionic serve

Và Voila! Ứng dụng Ionic của bạn hiện đang chạy trong trình duyệt web. Hầu hết ứng dụng của bạn có thể được xây dựng và thử nghiệm ngay trong trình duyệt, giúp tăng tốc độ phát triển và thử nghiệm lên đáng kể.

 Photo Gallery

Có ba tab. Nhấp vào tab Tab2. Đó là một canvas trống, hay còn gọi là vị trí hoàn hảo để biến thành Thư viện ảnh. Ionic CLI có tính năng Tải lại trực tiếp, vì vậy khi bạn thực hiện các thay đổi và lưu chúng, ứng dụng được cập nhật ngay lập tức!

Mở ra /src/pages/Tab2.tsx. Chúng tôi thấy:

  <IonPage>

  <IonHeader>

    <IonToolbar>

      <IonTitle>Tab 2</IonTitle>

    </IonToolbar>

  </IonHeader>

  <IonContent>

    <!-- some filler -->

  </IonContent>

</IonPage>

IonHeader đại diện cho điều hướng và thanh công cụ trên cùng, với tiêu đề là "Tab 2". Hãy đổi tên nó:

  <IonTitle>Photo Gallery</IonTitle>

Chúng tôi đưa các khía cạnh trực quan của ứng dụng vào <IonContent>. Trong trường hợp này, đó là nơi chúng tôi sẽ thêm một nút để mở máy ảnh của thiết bị cũng như hiển thị hình ảnh do máy ảnh chụp. Bắt đầu bằng cách thêm một (FAB). Trước tiên, hãy cập nhật các mục nhập ở đầu trang để bao gồm biểu tượng Máy ảnh cũng như một số thành phần Ionic mà chúng tôi sẽ sử dụng ngay sau đây:

  import { camera, trash, close } from 'ionicons/icons';

  import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar,

           IonFab, IonFabButton, IonIcon, IonGrid, IonRow,

           IonCol, IonImg, IonActionSheet } from '@ionic/react';

Sau đó, thêm FAB vào cuối trang. Sử dụng hình ảnh máy ảnh làm biểu tượng và gọi takePhoto()hàm khi nhấp vào nút này (sẽ sớm được triển khai):

 

  <IonContent>

  <IonFab vertical="bottom" horizontal="center" slot="fixed">

    <IonFabButton onClick={() => takePhoto()}>

      <IonIcon icon={camera}></IonIcon>

    </IonFabButton>

  </IonFab>

</IonContent>

Chúng tôi sẽ tạo ra takePhotophương pháp và logic để sử dụng Máy ảnh và các tính năng gốc khác trong giây lát.

Tiếp theo, mở src/App.tsxrồi nhập imagesbiểu tượng:

  import { images, square, triangle } from 'ionicons/icons';

Trong thanh tab ( <IonTabBar>), thay đổi nhãn thành “Ảnh” và biểu tượng imagescho nút tab ở giữa:

 <IonTabButton tab="tab2" href="/tab2">

  <IonIcon icon={images} />

  <IonLabel>Photos</IonLabel>

</IonTabButton>

Đó chỉ là sự khởi đầu của tất cả những điều thú vị mà chúng ta có thể làm với Ionic. Tiếp theo, triển khai chức năng chụp ảnh bằng máy ảnh trên web, sau đó xây dựng nó cho iOS và Android.