Friday, June 5, 2015

Installing PHONEGAP for Windows

My system is running on Window 8.1 64bit OS.

Prior to installing PHONEGAP, install the below softwares:

  1. JDK
    • download and install OS compatible JDK.
  2. Node js 64bit
  3. Apache Ant
  4. Android SDK (or) Android Studio compatible for your OS(64 bit) 

 Once done with all the installations, Configure all the executable directories in "system environment variable" and add the below variables to the system variables as below:

JAVA_HOME: C:\Program Files\Java\jdk1.7.0_79;
ANT_HOME: D:\softwareDownloads\apache-ant-1.9.5-bin\apache-ant-1.9.5;
ANDROID_HOME: D:\adt-bundle-windows-x86_64-20140702\adt-bundle-windows-x86_64-20140702\sdk

and include the below variables for PATH under "system variables"
PATH:
C:\Program Files\nodejs\;
D:\softwareDownloads\apache-ant-1.9.5-bin\apache-ant-1.9.5\bin;
D:\adt-bundle-windows-x86_64-20140702\adt-bundle-windows-x86_64-20140702\sdk\tools;
D:\adt-bundle-windows-x86_64-20140702\adt-bundle-windows-x86_64-20140702\sdk\platform-tools;C:\Program Files\Java\jdk1.7.0_79\bin;


Next step: Install Cordova from command prompt with the below command
npm install -g cordova

and see it installed as in the screenshot below:

Alternatively, we can also use th command, npm install -g phonegap instead which does the same thing. However, Cordova can be treated as the apache engine which powers phonegap. It is recommended to use 'phonegap' command over 'cordova' as there may be additional tools added to phonegap in later stages. Here's an article that talks about this difference between cordova and phonegap ( http://stackoverflow.com/questions/18174511/is-there-a-difference-between-phonegap-and-cordova-commands )


Once Phonegap installed, Create your first PHONEGAP app:)


  • Run the below command on your command prompt from the location where you want your first phonegap app to be created: phonegap create MyFirstApp . 
  • This will create a directory named MyFirstApp on the location. 
  • Open the directory to find some sub-directories such as www, etc along with a config.xml file.
  • The base html(index.html) will be inside the www folder.
  • Copy and paste the config.xml into the www folder.
  • Now open and modify the index.html file as per your design. I have modified to the below code:
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <meta name="format-detection" content="telephone=no" />
            <meta name="msapplication-tap-highlight" content="no" /
            <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
            <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
            <link rel="stylesheet" type="text/css" href="css/index.css" />
            <title>Hello World</title>
            <style>
                #clickme{
                    background: #333;
                    font-size:1.2em;
                    font-weight:bold;
                    padding:10px 30px;
                    margin:10px;
                    color: #fff;
                }
                #status{
                    font-size:2.0em;
                    font-weight: bold;
                    margin: 10px;
                }
            </style>
        </head>
        <body>
            <div class="container">
                <button id="clickme" onClick="writeStatus()"> Check this out >> 
                </button>
                <div id="status"></div>
            </div>
            <script type="text/javascript" src="cordova.js"></script>
            <script type="text/javascript" src="js/index.js"></script>
            <script>
                function writeStatus(){
                    var status = document.getElementById("status");
                    status.innerHTML = "Welcome Bossy!"
                }        
            </script>
        </body>
    </html>

    • Open this index.html file in a browser to see if it works :). If everything's fine and working, then move on to the next step.
    • Now, create a zip file of all the contents withing the www folder.

    Once App is ready, Build your PHONEGAP app:)


    • go to build.phonegap.com.
    • Sign Up and create your adobe ID if you on't have one, else use your existing ID. 
    • Once signed in, upload the zip files of your PHONEGAP app in here. 
    • Click on ReadyToBuild option. This will build your app into iphone, windows or android compatible app. Download and enjoy ;)
    Posted by at

    1 comment:

    1. iSolution India (Intusoft Solution Private Limited)February 7, 2022 at 1:44 AM

      This is an informative post review. I appreciate your efforts and all the best. I am so pleased to get this post article and nice information. I was looking forward to getting such a post which is very helpful to us. Best Steam Presses A big thank for posting this article on this website.

      Web-development company bhubaneswar

      ReplyDelete

    Subscribe to: Post Comments (Atom)