Facebook integration in PhoneGap Android App

There are lots of plugin available for integrating Facebook in PhoneGap, however it is not a simple process, a successful integration needs many configurations to be done in the app as a first step.

This article will help in implementing the configurations needed to integrate Facebook in PhoneGap Android App.

If you have already created the PhoneGap app then skip Step1.

  1. Create a PhoneGap Android App.
  2. Create an App in Facebook.
  3. Generate a key hash for Facebook integration with android.
  4. Add generated key hash to Facebook App.
  5. Download a zip file of PhoneGap Facebook Connect plugin and extract.
  6. Browse to the project folder in command prompt and run
    cordova -d plugin add <path to the extracted PhoneGap Facebook Connect folder> –variable APP_ID=”<Facebook App ID >” –variable APP_NAME=”<Facebook App Name>”
  7. Now we can use available API commands in our code like FB Login, FB Logout, FB Get Status, FB Show Dialog, FB Graph API etc
Video tutorial coming soon, subscribe us on YOUTUBE

Generate a key hash for Facebook integration with android using openssl

Facebook uses the key hash to authenticate interactions between your app and the Facebook app. If you run apps that use Facebook Login, you need to add your Android development key hash to your Facebook developer profile.

This article share the process of generating a key hash for Facebook integration with android using openssl

  1. Download openssl from Google code (If you have a 64 bit machine you must download openssl-0.9.8e X64 not the latest version)
  2. Extract it. create a folder- OpenSSL in C:/ and copy the extracted code here.
  3. Detect debug.keystore file path. If u didn’t find, then do a search in C:/ and use the Path in the command in next step.
  4. Find the keytool path which is in Jre directory. (C:Program FilesJavajre7bin)
  5. Detect your keytool.exe path and go to that dir/ in command prompt and run this command in 1 line

    keytool -exportcert -alias androiddebugkey -keystore “C:Documents and SettingsAdministrator.androiddebug.keystore” – “C:OpenSSLbinopenssl” sha1 -binary |”C:OpenSSLbinopenssl” base64

* it will ask for password, put android
* that’s all. u will get a key-hash
Video tutorial coming soon, subscribe us on YOUTUBE

Capturing network traffic between the Internet and mobile devices

Some times we need to inspect HTTP calls between the internet and the mobile devices for testing a website or app, this article will explain how to capture network traffic between the Internet and mobile devices.

– Connect the Desktop and mobile device to the same network.

– Follow below configurations for Desktop and mobile device.


On Desktop :

  1. Download : http://www.telerik.com/download/fiddler  [The free web debugging proxy for any browser, system or platform]
  2. Navigate to Tools in menu & select Fiddler Options
  3. Check the option “Allow remote computers to connect” in Connections tab
  4. Check Capture and Decrypt for HTTPS calls in HTTPS tab
  5. Open command prompt and run command “ipconfig”, note down the IP address of the machine.
On Mobile : 
  1. Goto Settings
  2. Select Wi-Fi
  3. Edit the connected network
  4. Change Proxy option to manual
  5. On Hostname field write the IP address of the Desktop Machine
  6. On Port write 8888
  7. Save the connected Network by pressing OK button
  8. Open browser and visit “http://ipv4.fiddler:8888/
  9. Download Fiddler Root Certificate
  10. Install the certificate
Now all network traffic taking place between device and internet will be shown in the Fiddler tool and you can inspect the calls easily.
Video tutorial coming soon, subscribe us on YOUTUBE

Creating your first Android App using PhoneGap Command Line Interface.

So now you have installed PhoneGap/Cordova and Android development tools in your windows machine as explained here , now you can proceed with Android App development by reading this article :

All the steps below will use CLI commands available with PhoneGap/cordova, you can read about using CLI commands here.

  1. Create a PhoneGap Project
    Command : phonegap create project_folder app_id app_name
    eg : phonegap create my_first_app My first App
  2. Add Android Platform
    Command : phonegap platform add platform_name
    eg. : phonegap platform add android
  3. Build the Android App with default files
    Command : phonegap build platform_name
    eg. : phonegap build android
  4. Emulate the Android App
    Command : phonegap emulate platform_name
    eg. : phonegap emulate android
While following this process if you get stuck due to some errors, check this article

Most common PhoneGap/Cordova errors (With solutions)


Are you trying to setup or run PhoneGap/Cordova and errors are making you crazy?
Here is the list of most common errors faced while working with PhoneGap/Cordova with possible working solutions.



1- Cordova Install Error- Please Install Android Target 19
Command : $ cordova platform add android
Error: Please install Android target 19 (the Android newest SDK). Make sure you have the latest Android tools installed as well. Run “android” from your command-line to install/update any missing SDKs or tools.
Solution : run the command android
Select Android 4.4.2 (API19) and install.

2- Error: ENOENT, stat ‘C:Users{App Name}AppDataRoamingnpm
Command : npm install – cordova
Solution : Try to RUN the command after opening CDM with administrator rights, if still error comes then
Browse to the Roaming folder and create a “npm” folder.

3- Error : No emulator images (avds) found
Command : cordova emulate android
Solution : android create avd -n <name> -t <targetID>
where
<name> :  You can use any name you want for the AVD, but since you are likely to be creating multiple AVDs, you should choose a name that lets you recognize the general characteristics offered by the AVD.
<targetID> :  An integer assigned by the android tool. Use android list targets command to list the target ID of each system image.

4- Error: This platform has more than one ABI. Please specify one using –abi.
Command : android create avd -n <name> -t <targetID>
Solution : android create avd -n <name> -t <targetID> -b<abi>
where
<name> :  You can use any name you want for the AVD, but since you are likely to be creating multiple AVDs, you should choose a name that lets you recognize the general characteristics offered by the AVD.
<targetID> :  An integer assigned by the android tool. Use android list targets command to list the target ID of each system image.
<abi> : It is application binary interface and we can get it using android list targets command inside every target as Tag/ABIs

id: 3 or “android-21”
     Name: Android 5.0
     Type: Platform
     API level: 21
     Revision: 1
     Skins: HVGA, QVGA, WQVGA400, WQVGA432, WSVGA, WVGA800 (default), WVGA854, WXGA720, WXGA800, WXGA800-7in
     Tag/ABIs : android-tv/armeabi-v7a, android-tv/x86, default/armeabi-v7a, default/x86, default/x86_64

Note : Use default/armeabi-v7a for android mobile emulator

5- Error: ‘npm’ is not recognized as internal or external command, operable program or batch file
Solution : Find path to the nodejs folder in the C drive usually it is “C:Program Filesnodejs” and add it to system variable “PATH”. Now restart the command prompt.
OR you can also use node node.js command prompt which can be found under the node.js folder in start menu.

6- ‘phonegap’/’cordova’ is not recognized as an internal or external command
Solution : Install phonegap or cordova using command line interface or folloe this article to install phonegap or cordova.

Keep visiting for more…
Last Updated on : 12/06/2015

Using PhoneGap CLI commands

PhoneGap V3.0 and later includes a CLI (Command Line Interface) that provides a suite of commands a developer can use to manage the complete lifecycle of an application.
This article explains the CLI commands and their usage.


To use CLI commands, you need to install PhoneGap first and then SDKs for each platform you wish to target.
To install PhoneGap visit : https://markupjavascript.com/?p=23
To know about Tools required to develop PhoneGap/Cordova App visit : https://markupjavascript.com/?p=30
For platform guides visit : http://docs.phonegap.com/en/3.5.0/guide_platforms_index.md.html#Platform%20Guides

On windows, CLI can be accessed from command prompt and in Mac, from terminal.

CLI Commands and their usage :

Creating a PhoneGap Project
– Open Command Prompt with Admin rights
– Go to the directory where you want to create the project and run command :
phonegap create project_folder app_id app_name

for eg : phonegap create hello com.example.hello HelloWorld
“hello” specifies a directory to be generated for your project.
“com.example.hello” (optional and can be changed later in config.xml) provides your project with a reverse domain-style identifier.
“HelloWorld” (optional and can be changed later in config.xml) provides the application’s display title


Platform Management

Adding Platforms
– Go to the project’s directory and run command :
phonegap platform add platform_name

for eg. to add android platform : phonegap platform add android
This command will download the folder structure and required files to your project directory for the added platform.
You can now open the files in any IDE for editing.

Removing Platforms
cordova platform remove platform_name
This command will download the folder structure and required files to your project directory

Note : If you get an error : “error ‘platform add android’ is not a phonegap.js command “ then directly try build command given below for that specific platform ie. phonegap build platform_name

Plugin Management

Search Plugin
cordova plugin search <search term>

Add Plugin
cordova plugin add <plugin>

List all Plugins installed
cordova plugin ls
cordova plugin list

Remove Plugin
cordova plugin rm <plugin>
cordova plugin remove <plugin> 

Build Management

Build
– Go to the project’s directory and run command :
phonegap build
This will build the project for all the added platforms.

To build a specific platform use
phonegap build platform_name
for eg. to build android platform : phonegap build android
The phonegap build command is a shorthand for the prepare and compile commands

Prepare
The CLI prepare command copies a PhoneGap project’s web application content from the www and merges folders into the appropriate platforms folders for the project.

Compile
The compile command initiates a compilation process by calling the build script for one or more mobile platforms.

Running Applications
The CLI has built-in integration with mobile device platform simulators, so you can launch PhoneGap applications directly onto simulators or physical devices.

Emulate
– Go to the project’s directory and run command :
phonegap emulate platform_name

for eg. to emulate android platform : phonegap emulate android
The CLI emulate command automates the process of building an application and deploying it onto a mobile device simulator. The command first prepares the application, executes the build process, then deploys the resulting native application package to the simulator.

Run
– Plug the handset into your computer
– Go to the project’s directory and run command :
phonegap emulate platform_name

The CLI run command automates the process of building an application and deploying it onto a physical device. The command first prepares the application, executes the build process, then deploys the resulting native application package to a connected device.

To know more about Cordova/PhoneGap CLI (Command Line Interface) after V3.0 visit : https://markupjavascript.com/?p=25
To know more differences about Cordova/PhoneGap before and after v3.0 visit : https://markupjavascript.com/?p=26

It is recommended that you review the Platform Guides for the mobile platforms that you will be developing for.

Installing PhoneGap in Windows

Installing PhoneGap in Windows

Do you want to migrate from PhoneGap V2.9 or below to V3.0 or above? or Do you want to try the latest PhoneGap 3.5 Command Line tools or Do you just want to start learning PhoneGap?. This article will help you to do it by completing the first step towards PhoneGap V3.X, which is installing PhoneGap on Windows Machine as the process includes installation of many required libraries which are not mentioned in the PhoneGap Website.

Follow these steps to Install PhoneGap in Windows
  1. Install Node
  2. Install JDK (JDK V7 for Win7, and JDK V8 for Win8)
  3. Install Git 
  4. Install Ant 
  5. Setup Environment Variables :
    New system variable “JAVA_HOME” to <path to Java sdk folder>
    New system variable “ANT_HOME” to <path to ant folder>
    Add to existing system variable “path” : %JAVA_HOME%bin;%ANT_HOME%bin
  6. Install PhoneGap from Command prompt:
    npm install -g phonegap
    If you get any error starting with “npm ERR! Error: ENOENT“, open cmd prompt with administrator rights.

For Android Development:

  1. Install Eclipse ADT  (Note : for win8 32bit/64bit install 32bit ADT)
  2. Setup Environment Variables :
    Add to existing system variable “path” : <path to adt-bundlesdktools>;<path to adt-bundlesdkplatform-tools>

For Windows 8 Development:

  1. Windows OS 8 Machine is required
  2. Install Windows Phone SDK 8.0 

For Windows 8.1 Development :

  1. Windows OS 8.1 Machine is required
  2. Install Microsoft Visual Studio Express 2013 with Update 2 for Windows 

PhoneGap V3.0 and later includes a CLI (Command Line Interface) that provides a suite of commands a developer can use to manage the complete lifecycle of an application.
know more about the CLI commands and their usage.

Cordova/PhoneGap app not working on iOS 8.0 Beta (resolved)

Cordova/PhoneGap app and iOS 8.0 Beta

While testing the Cordova/PhoneGap App in iOS8.0 simulator on XCode 6 beta, I found that there is a known issue in the software due to which Cordova/Phonegap Apps are broken.


Issue is mentioned here at the bottom of the page under “WebKit Known Issues” : https://developer.apple.com/library/prerelease/ios/releasenotes/General/RN-iOSSDK-8.0/index.html

This issue is also reported on Apache Cordova site at :
https://issues.apache.org/jira/browse/CB-6863

Some alternative solutions to the issue are listed here :
http://stackoverflow.com/questions/24008307/phonegap-cordova-not-working-in-ios8

So Cordova/PhoneGap App cannot be tested on the iOS8.0 beta before a stable release of the software.

18/06/2014 Update : Xcode beta2 released and it also have the same issue.

08/07/2014 Update : Xcode beta3 released and issue is resolved now.

Cordova CLI (Command Line Interface) after v3.0

Cordova CLI (Command Line Interface) after v3.0

A command-line interface (CLI) is a means of interacting with a computer program where the user (or client) issues commands to the program in the form of successive lines of text (command lines).

Lets check the PhoneGap/Cordova CLI after v3.0 :-


With earlier versions of Cordova, developers had to create multiple projects, Process included – building the app with one of the supported platforms, write the appropriate web content, then package and test the application using the selected platform’s SDK And once worked correctly, next step was to copy the web content over to a new project for one of the supported platforms and repeat the process.

Cordova v3.0 is the major update as it is very different from the previous versions. Know the difference between Cordova before and after V3.0

Cordova 3.0 includes a CLI (Command Line Interface) that provides a suite of commands a developer can use to :

– Create cross-platform Cordova application projects
– Add support for each of the Cordova supported mobile device platform
– List supported mobile device platforms
– Remove support for a mobile device platform
– Add a plugin to a project; this can be a core Cordova plugin, a third-party plugin, or a plugin you’ve created yourself
– List plugins installed in a project
– Remove a plugin from a project
– Prepare, compile, and build projects
– Serve an application project’s web content via a web server
– Launch an application in the appropriate mobile device simulator

Developer can manage the complete life-cycle of a Cordova application by using these commands.

PhoneGap/Cordova V3.0 and later includes a CLI (Command Line Interface) that provides a suite of commands a developer can use to manage the complete lifecycle of an application.
Know more about the CLI commands and their usage.

Apache Cordova before and after v3.0

Apache Cordova before and after v3.0

Apache Cordova (http://cordova.apache.org) is a free, open source framework for building cross-platform native applications using HTML5.
Recently developers of Cordova released v3.0 which is the major update as it is very different from the previous versions. Here are some of the major differences I came to know :


Before 3.0

  • Cordova application included JavaScript and native code for every Cordova API
  • If your application didn’t use all of the available APIs, you still had the code in your application for the APIs you weren’t using.
  • Can seperate unused APIs from the JavaScript library and the native container, but that is not easy.
  • Use of IDE plugins (on Android, iOS, and Windows Phone) and command-line tools (on Android and BlackBerry).
  • Start building the app with one of the supported platforms, write the appropriate web content, then package and test the application using the selected platform’s SDK. 
  • Once you had it all working correctly, you would copy the web content over to a new project for one of the supported platforms and repeat the process. 
  • Little consistency in project folder structure – framework JavaScript files names are different across mobile device platforms.
  • Build process is different across mobile device platforms.


After 3.0

  • Cordova APIs has been broken out into separate plugins.
  • Cordova plugin manager (plugman) to add and remove plugins from your Cordova project.
  • Cordova development team scrapped the IDE plugins and implemented a Node JS based command-line interface for projects across a wider range of supported mobile device platforms.
  • Command-line tools to create new projects, manage (add, remove, list, update) plugins, and build then test applications using the device emulators and simulators.
Apache Cordova before and after v3.0

Tools required to develop PhoneGap / Cordova App

This article shares the system requirements and list of tools required to develop a Hybrid Mobile App using Cordova/PhoneGap.


PhoneGap framework : http://phonegap.com/
Or Cordova framework : http://cordova.apache.org/

Get details about Installing PhoneGap on Windows Machine here, as the process includes installation of many required libraries which are not mentioned in the PhoneGap Website.

System and tools required for Android build :

System :             – Windows XP (32-bit), Vista (32- or 64-bit), or Windows 7 (32- or 64-bit)
                          – Mac OS X 10.5.8 or later (x86 only)
                          – Linux (tested on Ubuntu Linux, Lucid Lynx)
                                GNU C Library (glibc) 2.7 or later is required.
                                On Ubuntu Linux, version 8.04 or later is required.
                                64-bit distributions must be capable of running 32-bit applications.
SDK :                 Android SDK
IDE :                  Eclipse
Device :             Android Mobile, Tablet

System and tools required for Windows build : 

System :            Windows 8 64-bit (x64), Mac
IDE :                  Visual Studio Express 2012 for Windows Phone [Included in SDK]
SDK :                 Windows Phone SDK
Device :             Window 8 Mobile, Tablet

System and tools required for iOS build : 

System :            Mac OS X 10.7 (Lion) or later
IDE :                  Xcode
SDK :                 iOS SDK [included with IDE]
Device :             iOS Mobile, Tablet

PhoneGap V3.0 and later includes a CLI (Command Line Interface) that provides a suite of commands a developer can use to manage the complete lifecycle of an application.
Get details of using PhoneGap/Cordova CLI here.

What is Cordova and its relation to PhoneGap?

Apache Cordova and Adobe PhoneGap is a platform for building hybrid mobile applications using HTML, CSS and JavaScript. Here’s a tiny bit of explanation.


What is Apache Cordova :  
Apache Cordova is a set of device APIs that allow a mobile app developer to access native device function such as the camera or accelerometer from JavaScript. Combined with a UI framework such as jQuery Mobile or Dojo Mobile or Sencha Touch, this allows a smartphone app to be developed with just HTML, CSS, and JavaScript.

Difference with Adobe PhoneGap : 
PhoneGap is a distribution of Apache Cordova.You can think of Apache Cordova as the engine that powers PhoneGap, similar to how WebKit is the engine that powers Chrome or Safari.

History of these technologies : 
PhoneGap was an open source project started by a company called Nitobi. As part of Nitobi’s purchase by Adobe, because the PhoneGap project had many contributors from large companies like IBM etc, the project was contributed to the Apache Software Foundation.

At first the name was changed to “Callback”, but then was renamed to “Cordova” (after the street the Nitobi offices were on at some point). This is because unlike the project itself, the name PhoneGap is part of Adobe’s purchase of Nitobi.

Conclusion :
You can think of Apache Cordova as the engine that powers PhoneGap. Over time, the PhoneGap distribution may contain additional tools and thats why they differ in command But they do same thing.
Apache Cordova is the destination for those interested in contributing to the open source project powering PhoneGap.

PhoneGap App Dev Framework = Apache Cordova App Dev Framework