Full Stack Angular, React, Spring Boot Ganpathi: PhoneGap3.3 Setup and project creation

Phonegap3.3 project creation = Setup config

Before start creation, check out PATH varible VALUE = > java_home,ant_home,DIR:\android|sdk\tools,DIR:\android|sdk\platform-tools\ in your windos system variable.

For JAVA_HOME - > Install jdk or copy installed jadk in 64 Bit Program files.

-> Environment Variable - > System Variable - >
JAVA_HOME == C:\Program Files (x86)\Java\jdk1.6.0_45

Add Path - > ;%JAVA_HOME%\bin;

Not in the User Variable.

Same thing for ANT_ HOME
ANT_HOME = C:\ant
Add path == ;%ANT_HOME%\bin;
1. Download and Install node.js
GOTO node.js Official Site and click windows installer exe file.

CHECK OUT npm >

Error stat : ENOET occurs

Download and install. Some time ENOET error is occur when 32 bit node js in 64 bit machine. So, Add manuallly to appdata/roaming\ to mkdir npm in cmd promt
2.CMD:> node --version or CMD:>nodejs --version

AND CMD:>npm <check out> 3.Install cordova 3.3(latest phonegap) CMD:>npm install -g cordova 4.Cordova is install by default folder location is C:\user\<name>\AppData\roaming\npm\

<checkout>
cmd:> c:\user\new\ dir <enter> cd AppData \cd Roaming\ cd npm
5.CMD:>cordova<Check outodrova installed> 6.Create project(genereic-all platform) customized location CMD:>cordova create <FolderName> <PackageName> <ProjectName> 7.CMD:>cd <projectfolderName> 8. Add platforms suport to work(Necessary) CMD:\ProjetFOLDER\>cordova platform add android In the project\platforms\android\android full poject created. It can be imported to eclipse. 9.Automatically note.js file installed location is stored in System Variable value[PATH].

10. Run any of these from a Mac:

    $ cordova platform add ios
    $ cordova platform add amazon-fireos
    $ cordova platform add android
    $ cordova platform add blackberry10
    $ cordova platform add firefoxos

Run any of these from a Windows machine, where wp refers to different versions of the Windows Phone operating system:

    $ cordova platform add wp7
    $ cordova platform add wp8
    $ cordova platform add windows8
    $ cordova platform add amazon-fireos
    $ cordova platform add android
    $ cordova platform add blackberry10
    $ cordova platform add firefoxos

Run this to check your current set of platforms:

    $ cordova platforms ls

(Note the platform and platforms commands are synonymous.)

Run either of the following synonymous commands to remove a platform:

    $ cordova platform remove blackberry10
    $ cordova platform rm amazon-fireos
    $ cordova platform rm android

Run the following command to iteratively build the project:

    $ cordova build

This generates platform-specific code within the project's platforms subdirectory. You can optionally limit the scope of each build to specific platforms:

    $ cordova build ios

The cordova build command is a shorthand for the following, which in this example is also targeted to a single platform:

    $ cordova prepare ios
    $ cordova compile ios

In this case, once you run prepare, you can use Apple's Xcode SDK as an alternative to modify and compile the platform-specific code that Cordova generates within platforms/ios. You can use the same approach with other platforms' SDKs.

Test the App on an Emulator or Device

SDKs for mobile platforms often come bundled with emulators that execute a device image, so that you can launch the app from the home screen and see how it interacts with many platform features. Run a command such as the following to rebuild the app and view it within a specific platform's emulator:

$ cordova emulate android

To run this command successfully Android emulator could be run from Eclipse or (external Level)

Here are examples of how you might use the CLI to add features to the app:

Basic device information (Device API):

$ cordova plugin add org.apache.cordova.device

Network Connection and Battery Events:

$ cordova plugin add org.apache.cordova.network-information
$ cordova plugin add org.apache.cordova.battery-status

```
UPDATE post below
```

To <check out> APIs installed in this project
GOTO project fiolder->platforms -> android-> assets -> www -> plugins -> Here list folder avail those installed in APIs for this project.
Here are examples of how you might use the CLI to add features to the app:
- Basic device information (Device API):
```
$ cordova plugin add org.apache.cordova.device
```
- Network Connection and Battery Events:
```
$ cordova plugin add org.apache.cordova.network-information
$ cordova plugin add org.apache.cordova.battery-status
```
- Accelerometer, Compass, and Geolocation:
```
$ cordova plugin add org.apache.cordova.device-motion
$ cordova plugin add org.apache.cordova.device-orientation
$ cordova plugin add org.apache.cordova.geolocation
```
- Camera, Media playback and Capture:
```
$ cordova plugin add org.apache.cordova.camera
$ cordova plugin add org.apache.cordova.media-capture
$ cordova plugin add org.apache.cordova.media
```
- Access files on device or network (File API):
```
$ cordova plugin add org.apache.cordova.file
$ cordova plugin add org.apache.cordova.file-transfer
```
- Notification via dialog box or vibration:
```
$ cordova plugin add org.apache.cordova.dialogs
$ cordova plugin add org.apache.cordova.vibration
```
- Contacts:
```
$ cordova plugin add org.apache.cordova.contacts
```
- Globalization:
```
$ cordova plugin add org.apache.cordova.globalization
```
- Splashscreen:
```
$ cordova plugin add org.apache.cordova.splashscreen
```
- Open new browser windows (InAppBrowser):
```
$ cordova plugin add org.apache.cordova.inappbrowser
```
- Debug console:
```
$ cordova plugin add org.apache.cordova.console
```
Use plugin ls (or plugin list, or plugin by itself) to view currently installed plugins. Each displays by its identifier:
```
    $ cordova plugin ls    # or 'plugin list'
    [ 'org.apache.cordova.console' ]
```
To remove a plugin, refer to it by the same identifier that appears in the listing. For example, here is how you would remove support for a debug console from a release version:
```
    $ cordova plugin rm org.apache.cordova.console
    $ cordova plugin remove org.apache.cordova.console    # same
```
You can batch-remove or add plugins by specifying more than one argument for each command:
```
    $ cordova plugin add org.apache.cordova.console org.apache.cordova.device
```
Advanced Plugin Options

When adding a plugin, several options allow you to specify from where to fetch the plugin. The examples above use a well-known registry.phonegap.com registry, and the plugin is specified by the id:
```
    $ cordova plugin add org.apache.cordova.console
```
The id may also include the plugin's version number, appended after an @ character. The latest version is an alias for the most recent version. For example:
```
    $ cordova plugin add org.apache.cordova.console@latest
    $ cordova plugin add org.apache.cordova.console@0.2.1
```
If the plugin is not registered at registry.phonegap.com but is located in another git repository, you can specify an alternate URL:
```
    $ cordova plugin add https://github.com/apache/cordova-plugin-console.git
```
The git example above fetches the plugin from the end of the master branch, but an alternate git-ref such as a tag or branch can be appended after a # character:
```
    $ cordova plugin add https://github.com/apache/cordova-plugin-console.git#r0.2.0
```
If the plugin (and its plugin.xml file) is in a subdirectory within the git repo, you can specify it with a : character. Note that the# character is still needed:
```
    $ cordova plugin add https://github.com/someone/aplugin.git#:/my/sub/dir
```
You can also combine both the git-ref and the subdirectory:
```
    $ cordova plugin add https://github.com/someone/aplugin.git#r0.0.1:/my/sub/dir
```
Alternately, specify a local path to the plugin directory that contains the plugin.xml file:
```
    $ cordova plugin add ../my_plugin_dir
```
Using merges to Customize Each Platform

While Cordova allows you to easily deploy an app for many different platforms, sometimes you need to add customizations. In that case, you don't want to modify the source files in various www directories within the top-level platforms directory, because they're regularly replaced with the top-level www directory's cross-platform source.

Instead, the top-level merges directory offers a place to specify assets to deploy on specific platforms. Each platform-specific subdirectory within merges mirrors the directory structure of the www source tree, allowing you to override or add files as needed. For example, here is how you might uses merges to boost the default font size for Android and Amazon Fire OS devices:
- Edit the www/index.html file, adding a link to an additional CSS file, overrides.css in this case:
```
<link rel="stylesheet" type="text/css" href="css/overrides.css" />
```
- Optionally create an empty www/css/overrides.css file, which would apply for all non-Android builds, preventing a missing-file error.
- Create a css subdirectory within merges/android, then add a corresponding overrides.css file. Specify CSS that overrides the 12-point default font size specified within www/css/index.css, for example:
```
body { font-size:14px; }
```
When you rebuild the project, the Android version features the custom font size, while others remain unchanged.

You can also use merges to add files not present in the original www directory. For example, an app can incorporate a back button graphic into the iOS interface, stored in merges/ios/img/back_button.png, while the Android version can instead capture backbutton events from the corresponding hardware button.

Help Commands

Cordova features a couple of global commands, which may help you if you get stuck or experience a problem. The helpcommand displays all available Cordova commands and their syntax:
```
$ cordova help
$ cordova        # same
```
The info command produces a listing of potentially useful details, such as currently installed platforms and plugins, SDK versions for each platform, and versions of the CLI and node.js:
```
$ cordova info
```
It both presents the information to screen and captures the output in a local info.txt file.

NOTE: Currently, only details on iOS and Android platforms are available.

Updating Cordova and Your Project

After installing the cordova utility, you can always update it to the latest version by running the following command:
```
    $ sudo npm update -g cordova
```
Use this syntax to install a specific version:
```
    $ sudo npm install -g cordova@3.1.0
```
Run cordova -v to see which version is currently running. Run the npm info command for a longer listing that includes the current version along with other available version numbers:
```
    $ npm info cordova
```
Cordova 3.0 is the first version to support the command-line interface described in this section. If you are updating from a version prior to 3.0, you need to create a new project as described above, then copy the older application's assets into the top-level wwwdirectory. Where applicable, further details about upgrading to 3.0 are available in the Platform Guides. Once you upgrade to the cordova command-line interface and use npm update to stay current, the more time-consuming procedures described there are no longer relevant.

Cordova 3.0+ may still require various changes to project-level directory structures and other dependencies. After you run the npm command above to update Cordova itself, you may need to ensure your project's resources conform to the latest version's requirements. Run a command such as the following for each platform you're building:
```
    $ cordova platform update android
    $ cordova platform update ios
    ...etc.
```

Full Stack Angular, React, Spring Boot Ganpathi

Wednesday 8 January 2014

PhoneGap3.3 Setup and project creation

Test the App on an Emulator or Device

Advanced Plugin Options

Using merges to Customize Each Platform

Help Commands

Updating Cordova and Your Project

No comments:

Post a Comment

AWS - Solution Architect - SAA-C03 Certification Course & AWS Services