Ứng dụng Android đầu tiên với Cordova

0
729

Bài viết hướng dẫn chi tiết cách để tạo ra một App Android đầu tay bằng Cordova cũng như quá trình thiết lập Project.

DANH SÁCH BÀI VIẾT:

Phần 1: Web Developer đi làm Mobile App, dễ hay khó?

Phần 2: Ứng dụng Android đầu tiên với Cordova

Wait, hãy chắc chắn rằng bạn đã thực hiện hết các bước trong phần 1. Nếu chưa, vui lòng làm theo hướng dẫn dưới đây:

Hướng dẫn cách cài đặt:

Trước tiên, hãy cài NodeJs + NPM. Link cài ở bên dưới:

Windows: Download for x86 | Download for x64 MacOS: Download for Mac

Other: Download

Mình sẽ không nói về việc cài đặt NodeJs vì nó dễ quá :v

Khi đã hoàn tất quá trình cài đặt, vào Start -> gõ cmd -> Chuột phải -> Run as Admin.

Ở cửa sổ cmd vừa mở ra, gõ: npm i cordova@8.1.2 -g

Tại sao lại phiên bản 8.1.2? Ở phiên bản 9.0.0, có một lỗi xảy ra với module loader của cordova. Cụ thể, cordova đã thay đổi phương thức load module ở phiên bản mới. Chính vì vậy, các plugin của phiên bản cũ sẽ không thể sử dụng được.

Chờ cái command hoàn tất, vậy là bạn đã cài xong Cordova.

Quay lại Command Prompt, , tiếp tục gõ: cordova create helloWorld com.studio.helloworld

Cú pháp: cordova create <App Name> <Package ID>

Hãy khoan quan tâm tới Package ID mà tập trung vào App Name. App Name chính là tên hiển thị của App bạn trên các platforms. Ở ví dụ này mình sẽ lấy tên là helloWorld.

OK, giờ thì nhấn Enter rồi gõ tiếp lệnh các lệnh sau:

cordova platform add browser
cordova run browser –port=8080

Trình duyệt sẽ tự mở ra hoặc bạn có thể truy cập vào link: https://localhost:8080 trong trình duyệt bất kỳ.

Done, chúng ta đã hoàn tất bước đầu tiên.

CHÚNG TA VỪA LÀM GÌ VẬY?

Để giải thích những bước trên, hãy đến với 1 khái niệm xưa cũ từ thời khai thiên lập địa của các Hệ điều hành, đó là Command Line (Dòng lệnh). Khái niệm dòng lệnh có thể hiểu như sau:

“Các dòng lệnh là các lệnh của người dùng được nhập và gửi tới các thành phần có chức năng xử lí thông qua một giao diện dòng lệnh (Command Line Interface).”

Các giao diện này được thiết kế sơ sài (mà thậm chí có khi còn chả mất công mà thiết kế ý), nhanh, nhẹ và đặc biệt thích hợp với người ngoài hành tinh!!! (Anh em trong ngành chắc cũng thấy mình khác bọt sương sương với thiên hạ rồi).

Vậy, tại sao người ta lại phải dùng một thứ mặt hàng “cổ lổ sĩ” này trong cái thời đại mà 4.0 lên ngôi? Xin thưa, đâu đó trong những cái thiết bị chứa SSD 512 GB, 16GB RAM và vô số các thành phần phần cứng khủng bố khác, chúng ta vẫn phải tiết kiệm từng byte một. Điều này lại dẫn tới 1 câu chuyện khác, tại sao lại phải tỏ ra là người keo kiệt khi lượng tài nguyên dư giả? Thực ra bạn không hề dư giả! Well, lại tiếp 1 màn phân tích lan man…

“Người kiếm được 3 triệu đồng mỗi tháng sẽ tiêu cách của người có 3 triệu trong túi. Còn với người có 30 triệu đồng mỗi ngày, họ cũng sẽ có cách tiêu tiền riêng của mình!”

Vậy nên, với 1 chiếc máy tính có chiếc RAM bé bỏng tầm 1GB, đừng hỏi tại sao Chrome “chỉ dùng” có 800MB mà ở những con máy mạnh thì nó ăn “nhẹ nhàng” có 3 – 4 GB.

Quay lại vấn đề, trong ngành lập trình các Developers thường không ưa sự phức tạp. Tiết kiệm tài nguyên đã đành (thường các command line tools rất nhẹ, cài lên máy chủ cũng đỡ bớt Storage), nó còn khiến anh em cool ngầu hơn (mà thực ra dị hợm hơn), đặc biệt là nhanh hơn nữa.

Xét về thao tác, cử chỉ (actions, gestures), dùng bàn phím sẽ nhanh và tiện hơn so với dùng chuột và nhè thẳng cái nút mà bấm. Không chừng lắm anh em mắt cận, mắt lác hay mắt so le lại bấm nhầm thì hỏng… Thế nên, command line là một lựa chọn hợp lí!

Tóm lại những lợi ích của Command Line:

  • Tiết kiệm tài nguyên.
  • Tăng tốc độ phát triển.
  • Tương thích tốt với hệ gen khác người của anh em trong ngành.
  • Được hách cơ và các em nhi đồng tin dùng.

BIẾN MÔI TRƯỜNG, TẠI SAO?

Tiếp đến là một câu chuyện cũng gay go và gian nan không kém, đó chính là biến môi trường (Environment Variables). OK, giờ ta sẽ lấy một ví dụ…

Bạn có biết trên thế giới có bao nhiêu người nổi tiếng và tại sao ở Việt Nam người ta biết đến Sơn Tùng nhưng bên Nhật Bổn có người lại không biết? Đó chính là khả năng phân phối của chủ thể, cụ thể ở đây là tiếng tăm của Sơn Tùng chỉ được phổ biến ở Việt Nam.

Cũng như vậy, với các Hệ thống, các Environment Variables cũng cung cấp danh sách tên các chương trình mà có thể thực thi từ bất kỳ đâu, miễn là gọi đúng tên (Nghe cứ có mùi ma thuật, hehe :v). Để giải thích rõ hơn nữa, hãy vào Start -> Run -> calc -> Nhấn Enter xem có phải cái máy tính nó nhấn ra không?

Thực ra thao tác này có các bước sau đây mà Windows thực hiện:

B1: Quét trong thư mục System32 của hệ thống xem có tệp nào/chương trình nào trùng cái tên “calc” đó không?

B2: Quét trong các Path (nằm trong Environment Variables) xem có cái nào trùng không?

B3: Quét trong thư mục hiện tại đang truy xuất (Ở đây là System32 luôn) một lần nữa.

Cái này sẽ hơi khó hiểu cho các bạn, vậy nên hãy lấy ví dụ là hai “câu thần chú”. Câu thần chú thứ nhất chỉ gọi được trong rừng. Vậy thì bạn muốn gọi nó phải vào rừng mà gọi.

Câu thần chú thứ hai thì ngồi đâu cũng gọi được, nên cứ đứng ở dưới nước hay trên cạn, bay trên trời hay chui dưới đất đều gọi ok. Đấy là sự khác biệt…

Thực ra Command Line nó chỉ thực thi chương trình, cái cordova được gắn vào biến môi trường nên bạn gọi đâu cũng được. Sau này, sẽ có rất nhiều cách để bạn tạo ra những câu lệnh cho riêng mình bằng Environment Variables.

Lợi ích của Environment Variables:

  • Đỡ phải Change Directory (cd) mất thời gian.
  • Đỡ phải gõ cái Path mất thời gian. Ví dụ thay vì bạn phải nhập C:\Windows\System32\calc.exe Để mở cái calc thì bạn chỉ cần nhập calc là nó nhảy đến đấy luôn cho khoẻ.
  • Define các biến tự do như JAVA_HOME, ANDROID_HOME, … (Tí nữa sẽ hiểu thêm)

Bạn có thể tham khảo thêm một số bài viết liên quan về Environment Variables ở đây:

CẤU TRÚC MỘT CORDOVA PROJECT

Nhắc lại một chút: Chúng ta đang code Cross-platform App. Chính vì đặc thù của công việc này và gia tăng khả năng phát triển, Apache nói chung và Author của Cordova đã làm rất tốt việc phân vùng các thành tố của Project.

Một Project cơ bản (chưa qua bất kỳ modifications nào) sẽ bao gồm các thành phần sau:

| PROJECT_BASE |
+-+– platforms/
  |
  +– plugins/
  |
  +– res/
  |
  +– www/
  |
  +– config.xml
  |
  +– package.json
  |
  +– …

Có thể sẽ có thêm nhiều Files khác, nhưng đừng quan tâm, chúng ta hãy tập trung tới các thành phần bên trên:

  • Platforms (Thư mục): Chứa các Project sau khi được Biên dịch từ Cordova và xuất ra thành Native Project cho các nền tảng. Ví dụ khi build cho android, cordova sẽ xuất Android Project vào thư mục platforms/android/
  • Plugins (Thư mục): Chứa sources của các Plugins mà Project sử dụng. Hãy tạm thời bỏ qua cái này vì còn lâu mới sờ tới.
  • Res (Thư mục): Chứa các thành tố Đồ hoạ (App Icon, Splash Screen, …).
  • www (Thư mục): Tối quan trọng, đây chính là thư mục chứa giao diện App.
  • Config.xml (tệp): Chứa config của App (Rất quan trọng).
  • Package.xml: Chứa list các packages, version control, … (Hãy vọc nếu biết Git và NPM là gì).

SETUP MÔI TRƯỜNG CHO ANDROID

Các thành phần cần thiết:

Android Studio: Download | Hướng dẫn cài

Java Development Kit (JDK): Download| Hướng dẫn cài

Sau khi thiết lập xong những phần này, hãy tiếp tục nhảy tới giai đoạn tiếp theo: Thiết lập biến môi trường (Định nghĩa và ví dụ thì kéo lên trên nhá!).

THIẾT LẬP BIẾN MÔI TRƯỜNG

Trước tiên là thiết lập biến JAVA_HOME, hãy thực hiện theo các bước trong hướng dẫn này:

Sau đó, tiếp tục thiết lập ANDROID_HOME, thực hiện theo hướng dẫn này:

CHỐT HẠ

Sau khi hoàn tất các bước phía trên xong, quay lại Command Prompt ban đầu, gõ: cordova build android

Nếu đã làm đúng tất cả các bước thì Hooray! Bạn đã hoàn thành bước đầu để trở thành dân chơi với Cordova. Một file APK sẽ được export ra (chú ý trong bảng Command Line).

Còn nếu không, cũng đừng buồn! Hôm nay mình buồn ngủ quá nên viết vội phần này :v Hôm sau mình sẽ viết lại đoạn này chi tiết hơn một chút, giải thích từng bước luôn cho nó dễ hiểu :3

Anyway, chúng ta là dân lập trình, phải biết search Google mới làm được việc :v Thế nên, mình nghĩ việc dẫn link cho lẹ cũng một phần nào đấy có ích 😉

Thân ái, hẹn gặp trong bài viết sau :V

Link post: https://www.facebook.com/groups/j2team.community/permalink/1181080098890775/

LEAVE A REPLY

Please enter your comment!
Please enter your name here