PhoneGap requires you have the following software installed:
1. Eclipse Integrated Design Environment (IDE), a program to write code and manage software development
2. Java Development Kit (JDK), the Java compiler and support tools
3. The Android Software Development Kit (SDK), base code and emulators for developing Android apps
4. Android Development Toolkit (ADT), a plug-in for Eclipse that makes Android development seamless
5. Apache Ant, a program that automates software build processes (similar to 'make')
6. Ruby, a programming language
7. Git Bash, an alternative command program for Windows environments (Windows only)
If you've previously done any development in the Android environment,
you probably have 1-4 already installed. If you have not, it is
strongly recommended you visit http://developer.android.com/index.html to
better understand Android development and create your own, "Hello,
World" example prior to jumping into PhoneGap. A great resource exists
at: http://developer.android.com/sdk/installing.html for new developers.
Step 1: Installing the Prerequisite Software
1A. Eclipse
Install the Eclipse IDE for Java Developers from http://www.eclipse.org/downloads/. This a ZIP archive file, extract the folder “eclipse”. Most other flavors of Eclipse (like Aptana or platform specific builds) will also work, provided that you install all the necessary Eclipse plug-ins.
Extract the downloaded archive and place it somewhere you'll remember
and add the tools sub directory your PATH. Additional information and
instructions for adding the Android SDK to your PATH can be found at: http://developer.android.com/sdk/installing.html
Be sure to do the following (Windows):
If you install into a folder containing a space (c:\Program Files),
you must refer to it by its truncated name in the command program. In
this case "c:\progra~1". The truncated name will be the first six
characters + ~ + a sequential number starting with 1 for each instance
of the same six characters.
Add android SDK to your Path
Add android sdk tools (\android-sdk-windows\tools) to your path.
This is necessary for ruby to find the command "android create project"
later on.
1D. ADT Plug-in for Eclipse
Install the ADT Plug-in for Eclipse as described here:
To verify your installation of Eclipse, Android SDK, ADT, and Java,
you can build a sample “Hello World” application using the instructions
located here:
If
you install into a folder containing a space (c:\Program Files), you
must refer to it by its truncated name in the command program. In this
case "c:\progra~1". The truncated name will be the first six characters
+ ~ + a sequential number starting with 1 for each instance of the same
six characters.
Download and unzip binaries
add the unzipped folder path to your PATH
OS X - it comes with XCode otherwise "sudo port install apache-ant".
Note: During installation, you may select the "Use Git Bash only" option
Step 2: Confirm Environment Variables
Environment variables are data stored by your system; in this case we
are interested in the file locations of the various developer tools.
You should have these environment variables:
ANDROID_HOME, location of the Android SDK (for example: D:/android-sdk-windows)
ANT_HOME, location of Android Ant (for example: D:\apache-ant-1.8.1)
JAVA_HOME, location of the JDK (for example: C:\Program Files\Java\jdk1.6.0_20)
Path, folders where the operating system always looks when given a command (includes these, for example: C:\Ruby191\bin; D:\apache-ant-1.8.1\bin; C:\Program Files\Java\jdk1.6.0_20\bin; D:\android-sdk-windows\tools)
You can confirm the environment variables the following way:
2C. "Edit..." the Path to include the needed folders. Use a semicolon (;) to separate folders.
Hint: You can copy the path from the address bar in Windows Explorer.
If everything looks good in the environment variables, try opening a
command prompt (Start > Run > cmd) and typing in "ant", "ruby",
"java", or "android". If you get the error message "x was not
recognized as an internal or external command" you need to check your
PATH value. If the program continues to execute you can use ctrl-c to
terminate it.
Step 3. Download the PhoneGap Source Code
First you will need to download the latest PhoneGap code. It is
hosted on github.com. The easier way to get the code is to download it
directly from the github website.
Alternatively, you may use a dedicated 'git' client to download the
code or you may use Eclipse. This guide will not cover either of those
methods.
3B. Unzip the files into a folder.
Step 4. Build the Example PhoneGap App
Now we will use Ruby and a script called 'droidgap' that is provided
with PhoneGap to package up our example app. This will create two
outputs; a file called 'PhoneGap.jar' and an Android Eclipse project,
which we will then import into Eclipse.
4A. Open a command window and change directory ('cd') to the
'phonegap-android' folder. In Windows, use git bash as the command
window. In Mac OS, use Terminal.
4B. Run the following command. This will create a PhoneGap.jar file
and create a basic Android Eclipse project in the output path that can
then be opened in Eclipse.
NOTE: The droidgap script has been updated and now there are two
methods to create the necessary files. The new script is significantly
simpler to use than the old method. For those who prefer the old method,
it is still available.
NEW METHOD:
4C. From the 'phonegap-android' folder, run 'ruby bin/droidgap create
[path_of_application]'. For the example app, the command would be 'ruby
bin/droidgap create example'. If the example folder does not exist
inside 'phonegap-android', run 'ruby bin/droidgap gen' first.
The new create command in the droidgap script will generate the
Eclipse project, ready to be imported. The results of the script can be
found at '[path_of_application]_android'. Example:
If [path_of_application] = '~/my_app', then droidgap create will place
results at '~/my_app_android'. The for the example app, the results will
be placed at '../phonegap-android/example_android'
Skip ahead to Step 5 for Eclipse import instructions.
Run 'droidgap help' to see other new commands including run, log, test and ship.
OLD METHOD:
Previous users of the droidgap script please note that droidgap must
now be invoked with the 'classic' command to use this method.
android_sdk_path ... The path to your Android SDK install. (Must use forward slashes (/) in path)
name ...................... The name of your application.
package_name ....... The name of your package (For example:
com.nitobi.demo). Can not be just the app name, must contain at least
one "." (i.e. "com.example").
www ...................... The path to your www folder. (Where your HTML, CSS and JavaScript code is located)
path ...................... The path to generate the application. (CANNOT be inside ANY Eclipse workspace) (Must use forward slashes (/) in path)
You should get a message in your terminal saying completed!
Then run `ruby ./droidgap classic
/Users/danmayer/projects/android/android-sdk-mac_86 test_app
com.mayerdan.testapp example/ ~/projects/test_droid_phonegap` again.
Some notes:
Your output path should not be inside your Eclipse workspace. *See note in Step 5
Make sure the path you set to generate the application doesn't exist
For the www folder, phonegap-android comes with a folder called example that includes some sample html, css and js.
I found I was getting errors for not having set android or ant in my path. Make sure you followed the earlier steps.
When pointing to a directory, you need to have quotes around the path "C:/mobile/......"
While in the command prompt, you should manually change all the
backslashes ( \ ) to forward slashes ( / ). This helps the droidgap
script with its syntax. E.g. The android_sdk_path argument must use forward slashes (/).
If you install into a folder containing a space (c:\Program Files),
you must refer to it by its truncated name in the command program. In
this case "c:\progra~1". Otherwise, the script will look for
"c:\Program" and fail.
Note: The truncated name will be the first six characters + '~' + a
sequential number starting with 1 for each instance of the same six
characters. For instance if you have two folders c:\PhoneGapA and
c:\PhoneGapB, the former's truncated name will become, "c:\phoneg~1" and
the latter's will become, "c:\phoneg~2".
For Windows users: The droidgap script is written to expect
UNIX-style syntax, which is why you need to use 'git bash' to execute
these commands. 'Bash' is a shell language and the 'git bash'
application can handle the expected syntax. Alternatively you may use
another bash-style command application, such as 'cygwin', but if you
know what that is, you know how to install and use it.
Do not have "tools" as a folder in your path to the android sdk folder; C:\Users\Daniel\Dev\tools\android-sdk won't work.
If at any point you need to check your PATH variables in git bash you can use the command "echo $PATH"
Step 5. Importing Your Example App into Eclipse
Now time to create your project. In Eclipse, go to File > New project > Android > Android Project
Now select create project from existing source and navigate to the
new folder that was generated in the last step. Select a build target
and press finish.
*NOTE: The folder you specified in the
Ruby script will actually be the folder that your Eclipse will save to,
and compile from and NOT your current Eclipse Workspace. Saving your
folder to a location inside of a Workspace will not allow you to create
the project because the .metadata folder. If you have pointed your
folder to one of your Eclipse Workspaces, simply cut and paste the
folder to a location that is outside of any Workspace.
Now, in Eclipse you should see your project
Rightclick phonegap.jar under the libs folder and go to Buildpath -> Add to build path.
Note: Now the folder structure should look like the one shown below.
Click on the project folder again and then the Run button in Eclipse,
it is the button that looks like "Play". When you run this project, you
should the dialog box to Run As.., choose Android Application. You
may get the unable to launch dialog, this can happen if you have the
Android 1.5 or some other file highlighted when you try to run the
project. Just select the project folder and click run.
If you have done everything correctly, there should be an Application
that loads. It should be noted that testing with an actual device is
preferable to the Emulator for many reasons, namely the fact that it's
easier to test the Accelerometer, Geolocation, Beep and Vibrate
Functionality. However, for testing on the actual browser browser
events, and various issues with Webkit on Android the Emulator does just
as well.
Notes
Perhaps JAVA_HOME does not point to the JDK. Or maybe JAVA_HOME
doesn't exist. To fix this you must right click on my computer, go to
advanced system settings, click the advanced tab, press the environment
variables button, Under system variables click new and add JAVA_HOME if
it doesn't exist and make the path to the JDK that was installed
earlier.
ERROR:
droidgap:48:in ``': No such file or directory
android create project -t 7 -k be.progone.test -a PG1 -n PG1 -p
E:/baud/work/Mobile/Pr_Eclipse/PG1/build (Errno::ENOENT) from droidgap:48:in `create_android'
SOLUTION:
Add the Android SDK tools path to the system. Follow steps above to get to system environment variables.
Eg: C:\Program Files\Android SDK\tools
ERROR: "BUILD FAILED C:\phonegap-android\framework\build.xml:49: taskdef class com.android.ant.SetupTask cannot be found"
SOLUTION: Try
going to the "framework" folder and check the path in
the local.properties file. See if its correct and pointing to your
android sdk directory.
You MUST use a forward slash in the directory (Windows users) otherwise the paths will not match up.
Eg: C:/Program Files (x86)/Android SDK
ERROR:
"Click
on various buttons on the example app, doesn't do anything" or some
things are working but I can't tell what is going on, or I want more
information how do I view the Android logs?
SOLUTION: To get
more information about what is going one while phonegap is running, run
the Android log viewer. `adb logcat` if adb isn't found you just need to
do the full path to it something like
`~/projects/andriod/android-sdk-mac_86/tools/adb logcat`. If you have
both a device and a Android emulator running use -d and -e like so `adb
-e logcat`. This should give you more info about what is going on. Here
is a small example clipping form the android logs.
D/PhoneGapLog( 291): file:///android_asset/www/phonegap.js: Line 216
: TypeError: Result of expression 'accel' [undefined] is not an object.
E/Web Console( 291): TypeError: Result of expression 'accel'
[undefined] is not an object. at
file:///android_asset/www/phonegap.js:216
D/PhoneGap( 291): The provider network is disabled
D/SntpClient( 61): request time failed: java.net.SocketException: Address family not supported by protocol
From this we can see that the accel is not working. And some
information about the location of the Error. This helps debug problems
and also helps you to give more information when asking the PhoneGap
community for help.
PhoneGapLib is a static library that enables users to include
PhoneGap in their iPhone application projects easily, and also create
new PhoneGap based iPhone application projects through a Xcode project
template.
Uninstalling PhoneGapLib, PhoneGap.framework and the Xcode Templates
Launch "Terminal.app"
Navigate to the folder where Makefile is (this folder)
Type in "make uninstall" then press Enter
NOTE: It will ask you to confirm whether you want to delete the
installed PhoneGapLib directory (just in case you made changes there) as
well as the PhoneGap framework. It will not ask for confirmation in
deleting the installed Xcode templates.
Installer Notes
This installer will only install items under your home folder (signified by ~)
Items that will be installed:
Xcode global var in ~/Library/Preferences/com.apple.Xcode.plist
(which will be listed under Xcode Preferences -> Source Trees)
PhoneGapLib Xcode static library project under ~/Documents/PhoneGapLib
Xcode project template in ~/Library/Application Support/Developer/Shared/Xcode/Project Templates/PhoneGap
Xcode 4 project template in ~/Library/Application Support/Developer/Shared/Xcode/Templates/Project Templates/Application
PhoneGap Xcode static framework under /Users/Shared/PhoneGap/Frameworks/PhoneGap.framework (may change in future updates)
Symlink to the framework in (5) under ~/Library/Frameworks
To uninstall:
Remove the PHONEGAPLIB value in Xcode Preferences -> Source Trees
Delete the ~/Documents/PhoneGapLib folder
Delete the ~/Library/Application Support/Developer/Shared/Xcode/Project Templates/PhoneGap folder
Delete the "~/Library/Application
Support/Developer/Shared/Xcode/Templates/Project
Templates/Application/PhoneGap-based Application.xctemplate" folder
Delete the /Users/Shared/PhoneGap/Frameworks/PhoneGap.framework folder
Delete the ~/Library/Frameworks/PhoneGap.framework symlink
PhoneGapLib Tests
There is a Xcode project that will test PhoneGapLib according to the
mobile spec. There is some setup needed before the project can be run.
You will also need git installed and in your path.
Set up the test project:
Launch "Terminal.app"
Type in "chmod 755 update_test.sh"
Type in "./update_test.sh"
This will get the mobile-spec submodule and install it under the
PhoneGapLibTests folder. You can then build and run the PhoneGapLibTest
project to see the results.
You should run step (3) again before running any tests, to get the updated mobile-spec.
JoJavaScript Framework for HTML5 http://joapp.com/ Document : http://joapp.com/docs/index.html Download : https://github.com/davebalmer/jo/downloads Jo is a JavaScript framework for HTML5 capable browsers and devices. It was
originally designed to work on mobile platforms as a GUI and light data layer
on top of PhoneGap. Since its creation, Jo has also been tested successfully
as a lightweight framework for mobile browsers, newer desktop browsers, and
even Dashboard widgets.
Jo는 HTML5를 지원하는 브라우저와 장치를 위한 자바 스크립트 프레임 워크입니다. 그것은 원래의 GUI와 PhoneGap 위에 가벼운 데이터 레이어로 모바일 플랫폼에서 작동하도록 설계되었습니다. 그것의 창조부터 조는 또한 모바일 브라우저를위한 경량 프레임 워크, 새로운 데스크톱 브라우저, 그리고 심지어는 대시보드 위젯으로 성공적으로 테스트되었습니다.
Modern Javascript : web2.0과 함께 자바스크립트 개발에 초점이 맞춰졌다. 다양한 OpenAPI 개발환경이 구축되고, 다양한 모바일 디바이스에서 HTML5로 Application을 개발할 수 있기 때문에 브라우저들은 HTML5기술을 수용하기 위해 경쟁 중이며, 다양한 자바스크립트 라이브러리들이 나오고 개발되어지고 있다. HTML5는 기존의 문서기반 정보를 탐색하기위한 방식에 불과했다면, HTML웹환경에서 Application platform을 그대로 가지게 된 것이고 API를 가지고 HTML5기능을 접목시키면 기존에 데스크탑에 있었던 application을 Web에서 그대로 구현 가능해진 것이다.
JavaScript + Html5 + Ideas, Libraries, Tool, API = Marketplace
2. Javascript ▷ zepto.js 는 모바일을 위한 자바스크립트 라이브러리. jQuery 와 호환되는 문법을 사용하지만 jQuery보다 가벼운 용량이어서 용량에 대한 부담을 줄여준다. ▷ 서버사이드 자바스크립트 node.js는 구굴크롬의 V8엔진을 사용하며, 대용량 서버에 적용할수록 기존 서버에 비해 좋은 효율을 보여준다. 자바스크립트로 서버의 모든 기능들을 활용할 수 있도록 계속 개발되어지고 있다. ▷ 브라우저가 아닌 서버/데스크탑 어플을 자바스크립트로 작성하기 위한 Common.js 란 스펙이 있는데, 이는 node.js를 따르고 있고 그 외에도 CommonJS를 통한 많은 시도들이 되어지고 있다. ▷ CoffeeScript 자바스크립트로 컴파일되는 간단한 언어 .: 나 { 가 없는 영어와 같은 간단한 문법을 사용하는데, 문법이 간결해지고 더 빠르게 실행될 수 있도록 컴파일 해주기 때문에 익숙해지면 굉장히 유용하다.
3. Responsive Web Design ▷ 다양한 사이즈의 해상도에 자동으로 대응하기 위한 웹페이지 제작 방법 - Screen Size, Platform, Orientation에 반응
4. Web App Stores ▷ Crome Webstore https://chrome.google.com/webstore : 구글에서 payment 부분을 개발해놓았기 때문에 웹앱 개발자들이 자신이 만든 앱을 쉽게 팔아 수직을 얻을 수 있는 환경이 생겼다는 점에서 큰 의미 ▷ GetJar http://www.getjar.com/ : 멀티플랫폼 앱스토어, 모든 플랫폼의 앱을 동시에 취급,판매한다. Getjar 는 사용자의 단말정보를 저장하여 사용자에게 필요한 앱만을 리스트에 보여주어 사용자가 신경쓰지 않고 편하게 사용 할 수 있다.
5. Hybrid App ▷ Native App 과 WebApp의 기술을 합친 형태. ▷ 외형은 네이티브, 내용은 웹앱으로 만든것을 말한다. ▷ 멀티플렛폼이 가능한 장점이 있으나, 네이티브 대비 웹부분의 속도가 문제가 되기도 한다. ▷ Hybrid App의 범위 : 서버에 접속해서 웹앱을 실행하는 방식부터 NativeApp내에서 약간의 WebView를 사용하는 방식까지 해당되는 범위가 넓고, 업데이트가 잦은 부분은 웹으로 구현하면 관리에 용이하다. ▷ Hybrid App 개발방법. : 작업은 웹앱으로 모두 마친 뒤에 Appspresso,PhoneGap, Titanium같은 프레임웍으로 감싸준다. 프레임웍에서 Device 기능을 컨트롤 할 수 있는 기능을 제공하여 이용할 수 있다.
(0) 
(0)
