Hướng dẫn cài đặt và chạy PhoneGap trên Ubuntu

Việc phát triển các ứng dụng di động "Hybrid" (Hybrid mobile application) đang là một trong những topic nóng tại thời điểm hiện tại. PhoneGap là một trong những Framework có thể được sử dụng để phát triển các ứng dụng di động "Hybrid". Bài viết này mình sẽ hướng dẫn các bạn cách cài đặt và chạy PhoneGap trên Ubuntu với một Android Emulator. Nhưng trước hết,

PhoneGap là gì ?

PhoneGap là một framework open source miễn phí được áp dụng rộng rãi để phát triển ứng dụng di động đa nền tảng, giúp chúng ta build được các app di động sử dụng nhưng Web API cơ bản để chạy trên các nền tảng khác nhau. Framework open source này đã được Nitobi Software (nay là Adobe) phát triển. Nó cho phép các nhà phát triển build các ứng dụng bằng HTML, JavaScript và CSS.

PhoneGap lần đầu tiên được đặt tên là Apache Cordova, được giới thiệu bởi Nitobi. Adobe đã mua Nitobi và đổi cái tên Apache Cordova thành PhoneGap.

Cài đặt PhoneGap

Bắt đầu thôi!

1. Cài đặt NodeJs

sudo apt-get update
sudo apt-get install nodejs

Tiếp theo là cài đặt trình quản lý Package của Node.js: npm

sudo apt-get install npm

Lúc này Node.jsnpm đã được cài đặt. Khi ubuntu cài đặt package, nó tự động đặt tên thực thi cho Node.jsnodejs. Tuy nhiên đối với một vài ứng dụng, bao gồm cả PhoneGap, đều mặc định coi tên thực thi của Node.jsnode. Để sửa lại việc không đồng bộ này, chúng ta chỉ việc tạo một symlink tên là node rồi trỏ nó đến nodejs như sau:

sudo ln -s /usr/bin/nodejs /usr/bin/node 

2. Cài đặt Git

sudo apt-get install git

3. Cài đặt Ant

sudo apt-get install ant

4. Cài đặt PhoneGap

sudo npm install -g phonegap
sudo npm install -g cordova

Việc cài Cordova không thật sự quan trọng nhưng sẽ cần thiết nếu sau này bạn sử dụng các plugins của Cordova

Cài các thư viện C/C++ mà PhoneGap sử dụng:

sudo apt-get install lib32z1 lib32ncurses5 lib32bz2-1.0 lib32stdc++6

phonegap để kiểm tra xem PhoneGap đã được cài đặt hay chưa:

5. Cài đặt Android SDK

Bạn có thể tải bộ SDK tại đây. Giải nén vào thư mục /usr/local/android-sdk bằng câu lệnh sau

sudo tar -zxvf ~/Downloads/android-sdk_r24.0.2-linux.tgz -C /usr/local/

Tiếp theo chúng ta sẽ thiết lập các biến môi trường cho file config bash, để PhoneGap có thể gọi tới máy ảo giả lập Android bằng cách sửa file .bashrc:

vim ~/.bashrc

Thêm các dòng sau

export PATH=$PATH:/usr/local/android-sdk-linux/
export PATH=$PATH:/usr/local/android-sdk-linux/tools
export PATH=$PATH:/usr/local/android-sdk-linux/platform-tools
export PATH=$PATH:/usr/local/android-sdk-linux/build-tools

Sau đó lưu lại những thay đổi

source ~/.bashrc

android để bật Android SDK Manager

6. Cài đặt Java (JDK & JRE)

sudo apt-get install openjdk-7-jre
sudo apt-get install openjdk-7-jdk

7. Cài đặt trình giả lập Android

Trong bài này mình sẽ hướng dẫn các bạn cài đặt Genymotion.

  1. Trước tiên để cài được Genymotion cần cài VirtualBox. Bạn nào đã cài VirtualBox trên Ubuntu rồi thì bỏ qua bước này.
sudo apt-get install virtualbox
  1. Truy cập trang tải Genymotion => Sign in => Tải phiên bản Genymotion phù hợp với bản Ubuntu của bạn.

  2. Truy cập thư mục chứa file vừa tải về mà mở Terminal gõ các lệnh sau:

chmod +x genymotion-2.7.1-linux_x64.bin
./genymotion-2.7.1-linux_x64.bin
  1. Truy cập vào thư mục cài đặt Genymotion. Mặc định là: ‘/home/[username]/genymotion/’
cd /home/[username]/genymotion/
./genymotion

Nhấn Yes để bắt đầu thêm Virtual Device đầu tiên

Nhấn Connect => Login => Install một Device

Chọn Device và nhấn Next

Nhập tên Device và nhấn Next

Đợi một chút trong khi Device được tải và cài đặt

Nhấn Finish

Nhấn Play để chạy Device

Khởi tạo và chạy một sample project

Chúc mừng bạn đã đến tới bước này ! Bây giờ bạn đã có mọi thứ để giả lập và chạy một ứng dụng bằng Cordova/PhoneGap. Để chạy một ứng dụng sample, chúng ta làm các bước sau:

1. Khởi tạo project

Vào thư mục mà bạn muốn khởi tạo project và chạy lệnh sau:

cordova create TestApp

Lệnh này sẽ tạo ra một project "TestApp" trong thư mục bạn đã chọn

2. Tạo thiết bị giả lập

cd TestApp
cordova platform add android

Câu lệnh trên dùng để thêm platform (ở đây là Android) cho ứng dụng của bạn

Bạn sẽ nhìn thấy kết quả như sau:

Using cordova-fetch for [email protected]~7.0.0
Adding android project...
Creating Cordova project for the Android platform:
	Path: platforms/android
	Package: io.cordova.hellocordova
	Name: HelloCordova
	Activity: MainActivity
	Android target: android-26
Subproject Path: CordovaLib
Subproject Path: app
Android project created with [email protected]
Android Studio project detected
Android Studio project detected
Discovered plugin "cordova-plugin-whitelist" in config.xml. Adding it to the project
Installing "cordova-plugin-whitelist" for android

               This plugin is only applicable for versions of cordova-android greater than 4.0. If you have a previous platform version, you do *not* need this plugin since the whitelist will be built in.
          
Adding cordova-plugin-whitelist to package.json
Saved plugin info for "cordova-plugin-whitelist" to config.xml
--save flag or autosave detected
Saving [email protected]~7.0.0 into config.xml file ...

Để kiểm tra các platform đã được thêm vào ứng dụng:

cordova platform -ls

Kết quả:

Installed platforms:
  android 7.0.0
Available platforms: 
  browser ~5.0.1
  ios ~4.5.4
  osx ~4.0.1
  windows ~5.0.0
  www ^3.12.0

Để remove platform:

cordova platform remove android

3. Chạy ứng dụng

Để chạy ứng dụng, hãy nhớ bật sẵn giả lập để ứng dụng của chúng ta có thể chạy trên đó.

cordova run android

Tổng kết

Cảm ơn các bạn đã theo dõi bài viết. Ở bài viết sau chúng ta sẽ xây dựng ứng dụng PhoneGap đầu tiên. Xin cảm ơn

Nguồn

The complete guide to running PhoneGap on Ubuntu

HOW TO INSTALL/RUN PHONEGAP ON UBUNTU