Advertisement
  1. Code
  2. Ionic 2

Viết Ứng dụng Ionic 2 Đầu tiên Của bạn: Thiết lập

by
Read Time:7 minsLanguages:

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Với bản phát hành Ionic 2 gần đây, bạn có thể là một trong những nhà phát triển ứng dụng lai những người muốn thử nó. Nhưng có thể bạn đang bị choáng ngợp bởi số lượng kiến thức cần phải học để bắt đầu.

Đó là lý do tại sao tôi muốn cung cấp cho bạn một sự khởi đầu tốt bằng cách hướng dẫn bạn từng bước đi qua việc tạo ra ứng dụng Ionic 2 đầu tiên của bạn. Nếu bạn đã nắm rõ về Ionic thì các khái niệm có thể dễ dàng với bạn. Nhưng nếu bạn là một người hoàn toàn mới bắt đầu, thì cũng đừng lo lắng—tôi sẽ không giả định bất kỳ kiến ​​thức cần có nào về framework này cả.

Tổng quan về Ứng dụng

Trong hướng dẫn này và hướng dẫn tiếp theo, bạn sẽ tạo ra một ứng dụng chia sẻ ảnh cho phép người dùng chọn hình ảnh từ thiết bị của họ và chia sẻ chúng trên Instagram. Ứng dụng sẽ như sau:

Completed photo sharer appCompleted photo sharer appCompleted photo sharer app

Thiết lập Môi trường Phát triển

Trước khi bạn có thể bắt đầu phát triển ứng dụng với Ionic 2, trước tiên bạn phải thiết lập môi trường phát triển của bạn. Quá trình này bao gồm các phần mềm sau đây:

  • Android SDK: các ứng dụng được xây dựng với Cordova và Ionic dựa trên các công cụ tương tự được các nhà phát triển ứng dụng gốc sử dụng.
  • Node.js: điều này chủ yếu được sử dụng bởi Ionic để thực hiện các công việc như biên dịch code và kiểm tra lỗi.
  • Một thiết bị Android hoặc emulator để thử nghiệm. Bạn có thể cài đặt emulator mặc định của Android bằng bộ cài đặt Android SDK.

Tôi sẽ không hướng dẫn cho bạn cách thiết lập môi trường phát triển. Các hướng dẫn cho nền tảng Cordova đã làm rất tốt việc đó:

Hai trang này sẽ hướng dẫn cho bạn tất cả mọi thứ bạn cần biết về các thiết lập Cordova cho iOS hoặc Android. Khi môi trường phát triển của bạn đã được thiết lập xong, chúng ta có thể chuyển sang bước tiếp theo.

Cài đặt Cordova và Ionic

Phù! Bây giờ bạn có thể thật sự cài đặt Cordova và Ionic. Bằng lệnh sau đây:

Khi đã đặt cài xong, giả sử bạn không bị bất kỳ lỗi nào, bạn có thể kiểm tra xem liệu chúng đã thật sự được cài đặt hay chưa với các lệnh sau: cordova --versionionic --version. Các lệnh đó sẽ hiển thị cho bạn các phiên bản của framework Cordova và Ionic được cài đặt trên hệ thống của bạn. Đối với tôi, chúng trả về 6.4.02.2.1.

Nếu bạn muốn thấy thông tin chi tiết về phiên bản chẳng hạn như phiên bản Ionic Framework và phiên bản Ionic CLI, hãy sử dụng lệnh sau đây:

Dưới đây là một kết quả mẫu:

Tạo một Dự án Ionic Mới

Ionic CLI cung cấp lệnh ionic start để dễ dàng tạo ra một dự án mới:

Dưới đây là một template để giúp bạn hiểu rõ từng tùy chọn riêng lẻ:

Template khởi đầu được sử dụng ở đây là blank. Template này chỉ chứa các thành phần tối thiểu để làm cho một số thứ hiển thị trên màn hình. Có những template khác, nhưng chúng có thể hơi choáng ngợp một chút.

Nên nhớ rằng, Ionic CLI phục vụ cho cả hai dự án Ionic 1 và Ionic 2, vì vậy bạn vẫn phải thêm --v2 để khởi động một dự án Ionic 2 vì Ionic 1 vẫn là mặc định. Nhưng một khi bạn đã ở trong một dự án Ionic 2, Ionic CLI đủ thông minh để biết phiên bản nào để sử dụng.

Thêm Nền tảng

Mặc định, Ionic không đi kèm với bất kỳ nền tảng nào mà bạn có thể triển khai cả. Bạn có thể thêm một nền tảng bằng cách sử dụng lệnh ionic platform add theo sau bởi nền tảng mà bạn muốn triển khai đến:

Nếu bạn muốn triển khai đến một nền tảng khác, chỉ cần thay thế android bằng bất kỳ nền tảng nào mà bạn muốn.

Cài đặt Plugin

Đối với ứng dụng này, bạn sẽ cần hai plugin: một cho việc lựa chọn hình ảnh từ thư viện của người dùng và một để chia sẻ hình ảnh lên ứng dụng Instagram.

Đầu tiên là plugin Image Picker. Plugin này cho phép ứng dụng có thể chọn hình ảnh từ thư viện ảnh của người dùng.

Tiếp theo là plugin Instagram. Plugin này cho phép bạn chuyển tiếp hình ảnh đến ứng dụng Instagram để đăng lên.

Hai plugin mà bạn vừa cài đặt là một phần trong bộ các wrapper ES6 và TypeScript cho các plugin Cordova được gọi là Ionic Native. Nhiệm vụ chính của chúng là giúp dễ dàng tương tác với các plugin Cordova bằng cách gói các callback trong Promises or Observables.

Quy trình Phát triển

Bây giờ bạn đã sẵn sàng để bắt đầu viết code cho ứng dụng. Nhưng trước khi chúng ta làm điều đó, trước tiên hãy xem xét quy trình phát triển và cấu trúc thư mục của Ionic 2.

Trong Ionic 2, hầu hết các công việc phát triển được thực hiện bên trong thư mục src. Các tập tin này được biên dịch lại mỗi khi bạn thay đổi các tập tin trong thư mục này. Không giống như trong Ionic 1, biên dịch là điều cần thiết bởi vì các tập tin nguồn được viết bằng TypeScript (biên dịch thành code ES5) và Sass (được biên dịch thành CSS). Mỗi khi bạn thực hiện một sự thay đổi, thì code cũng được kiểm tra lỗi, báo cáo lại cho nhà phát triển thông qua console hoặc xem trước ứng dụng. Sau khi quá trình biên dịch được hoàn tất, các tập tin kết quả được sao chép vào thư mục www, và những thay đổi được phản ánh trong bản xem trước ứng dụng.

Cấu trúc Thư mục

Để trở nên thoải mái khi làm việc với một dự án Ionic 2, bạn cần phải tự mình làm quen với cấu trúc thư mục. Đối với những người mới bắt đầu, bạn cần biết mỗi thư mục được sử dụng cho mục đích gì để từ đó bạn biết nơi đặt các tập tin nguồn và nơi để tìm các tập tin cần thiết.

  • node_modules: đây là nơi các phụ thuộc của Ionic 2 được lưu trữ. Phần lớn, bạn không cần phải chạm vào thư mục này trừ khi có vấn đề với một trong các phụ thuộc và bạn phải cài đặt lại nó.
  • platforms: đây là nơi đặt code cho nền tảng cụ thể và nơi trình cài đặt ứng dụng được đặt khi bạn build ứng dụng để chạy trên thiết bị hoặc trên emulator. Điều đó có nghĩa là tất cả các tập tin trong thư mục wwwplugins của bạn sẽ được sao chép vào đây mỗi khi bạn build ứng dụng của mình.
  • plugins: đây là nơi mà các plugin được lưu trữ, tất nhiên rồi—bao gồm cả các plugin Ionic mặc định và nhiều plugin khác mà bạn cài đặt.
  • resources: đây là nơi bạn sẽ đặt các tài nguyên của ứng dụng chẳng hạn như biểu tượng và màn hình khởi động (hay còn gọi splash screen).
  • src: đây là nơi bạn sẽ viết phần lớn code. Tất cả các tập tin template, stylesheet và TypeScript tạo nên ứng dụng của bạn được lưu trữ ở đây.
  • www: đây là nơi các tập tin đã được biên dịch của bạn được lưu. Các tập tin ở đây phục vụ cho bản xem trước ứng dụng.
  • hooks: đây là nơi mà các script hook của Cordova được lưu trữ. Chúng được sử dụng nếu bạn có các script tuỳ biến mà bạn muốn thực thi tại một thời điểm trong vòng đời phát triển (ví dụ, khi một nền tảng hoặc plugin được thêm vào).

Chạy Máy chủ Phát triển

Khi phát triển một ứng dụng, nhìn thấy một bản bản xem trước trực tiếp của ứng dụng được cập nhật khi bạn thực hiện các thay đổi trong code là một điều hết sức hữu ích. Để khởi động máy chủ phát triển, hãy sử dụng lệnh sau đây:

Lệnh đó sẽ bắt đầu tiến trình giám sát các thay đổi trong các tập tin nguồn và sẽ bắt đầu biên dịch chúng theo thời gian thực. Mặc định, Ionic sẽ phục vụ bản xem trước tại http://localhost:8100/. Bạn sẽ thấy một vài thứ như sau và sau đó bạn có thể tiếp tục và xem trước ứng dụng của mình trong trình duyệt tại URL như trên.

ionic serve outputionic serve outputionic serve output

Tiếp theo

Bây giờ môi trường phát triển của chúng ta đã được thiết lập xong, chúng ta đã sẵn sàng để nhảy ngay vào viết code cho ứng dụng! Ngày mai nhớ theo dõi bài viết tiếp theo nhé, nơi tôi sẽ hướng dẫn cho bạn cách viết code thật sự cho ứng dụng, xây dựng giao diện người dùng và tất cả các chức năng chia sẻ hình ảnh. Sẽ rất vui đấy!

Trong lúc chờ đợi, hãy xem qua một số hướng dẫn khác của chúng tôi về Ionic 2!

Nếu bạn muốn có một hướng dẫn chuyên sâu và thực tế về framework Ionic 2, hãy thử khóa học của chúng tôi Làm quen với Ionic 2.

Trong khóa học này, Reggie Dawson sẽ giảng dạy cho bạn mọi thứ về framework Ionic và hướng dẫn cho bạn cách xây dựng một ứng dụng di động từ đầu đến cuối. Song song đó, bạn sẽ tìm hiểu về thư viện thành phần Ionic, về cách lập trình JavaScript kiểu tĩnh bằng TypeScript và về việc tích hợp một ứng dụng Ionic 2 với một API đa phương tiện.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.