Getting Started with Phonegap Desktop App (v0.1.1 Beta)

Tweet about this on TwitterShare on LinkedIn0Share on Google+0Share on Reddit0Buffer this pageFlattr the authorEmail this to someonePrint this page

In this post, we will take a look at building Mobile Hybrid application using the new Phonegaps’s Desktop App. We will download the installer, setup a hello world project and deploy it to our mobile and test it.

A quick sneak peek on how the Phonegap Desktop App works

So, let us get started.

Why Phonegap Desktop App?

Because it is easy to use.

The PhoneGap Desktop App is the easiest way to get started with PhoneGap. It’s an alternative to the PhoneGap CLI, yet it uses the same libraries under-the-hood.

There’s no complicated installation. You don’t need git, npm, or even node.js. We include all of the important parts for you, so that you can focus on creating your next app!

With this, you can focus on the actual app development and not worry about the environment.

We will look at a 5 step process on how to start working with Phonegap Desktop app.

Step 1 : Download App

The app can be downloaded from the Phonegap Desktop app Github repo. As of today version v0.1.1 beta is the stable release and v0.1.2 beta is the pre-release. You can download the zip file for your OS (Windows/Mac) from here.

Unzip the OS specific zip file and you will find the .app file incase of Mac and .exe incase of Windows. Launch the app by double clicking on the executable.

Step 2 : Creating a new Phonegap Project

Once you launch the Phonegap desktop app, the interface would look like

Screen Shot 2015-02-25 at 19.49.45The panel on the left hand side is the main menu for the app.

Click on the + icon and you should see

Screen Shot 2015-02-25 at 19.51.50

Click on Create new PhoneGap Project and you should see

Screen Shot 2015-02-25 at 19.53.58Local path is the location on your disk where the project should get created. Name would be the name of the app. ID is the unique reverse domain name, that acts as an  identifier for your app across app stores.

Once you fill it, you can click on Create Project. And now, when you head back to the location you have created the project, you can see the project created.

If you are familiar with Cordova or Phonegap development, you will recognize the folder structure.

Screen Shot 2015-02-25 at 19.57.28And when you go back to the Phonegap Desktop app, you should see

Screen Shot 2015-02-25 at 19.59.40As you can see, the server has started at the given IP address (at the bottom of the screen).

Step 3 : Install the Phonegap Developer App

Navigate to the Download section of app.phonegap.com and install the app on your device.

Step 4 : Connect Desktop App with Mobile App

Once the mobile app is installed, open the same and you should see

Screenshot_2015-02-26-13-20-07Once the app is loaded, you can enter the IP address & port from the desktop app

Screenshot_2015-02-26-13-20-35and hit connect. At this time, the mobile app will fetch the assets needed to run our Hello World app.

Screenshot_2015-02-26-13-22-19Finally the app launches

Screenshot_2015-02-26-13-22-39and the app works!

Screenshot_2015-02-26-13-25-14Simple and easy right!

Now if you go back to the Phonegap Desktop app and click on the console icon, you can see the logs

Screen Shot 2015-02-26 at 13.35.28Step 5: Develop the application

Now, the awesome part, you can make changes to the code on your desktop and the changed would reflect on the device.

Hope this post gave you an idea on how to develop Hybrid apps with Phonegap Desktop app.


Thanks for reading! Do comment.
@arvindr21

Tweet about this on TwitterShare on LinkedIn0Share on Google+0Share on Reddit0Buffer this pageFlattr the authorEmail this to someonePrint this page
  • tyler mackenzie

    Hello, thanks for the great little tutorial. I just have a question about the folder structure that PhoneGap creates. I noticed that it creates html,js,css,etc files in the /www folder, and in /platforms/browser and in /platforms/browser/www. why are the same set of files there 3 times? and if I want to practice making a basic app by editing this default, which files do i need to edit? and which files do i need to upload to PhoneGap Build? thanks!

  • https://codeman.com.ng Ibrahim

    How do i generate the apk file?

  • deltadan79

    Quick question. After building the app using the desktop version, testing, and it works. Is there a way to package the app for distribution other than the buld.phonegap.com site? I have an app that plays audio from files that are stored within the app itself (rather large) and the build service from phonegap using zips limits the file size of uploaded archives.

  • Ranjith V

    Hi , Can i Know how to make Chat App In PhoneGap,Socket ?

  • 2-3-34

    my PhoneGap developers app won’t connect with my PhoneGap desktop app. Do you know how it could possibly connect? thank you any help is appreciated.

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      Is your mobile and your desktop connected to the same wifi network?

  • Sadman Samee Tonmoy

    now how to build for release I mean how to port apk for android or installer for windows phone?

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      The last I checked this was not added as part of the Phonegap desktop app. You may need to either use Phonegap build or you can use Cordova API to generate the installer.

  • YdnasErriep

    nice !! it’s just a wrapper for nodeWebkit(nw.js)??

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      Nope, this is for building mobile hybrid apps using Phonegap API, without the hassle of installing and setting up Phonegap CLI on your machine (PhoneGap 3 CLI Setup on Mac & Windows)

      • YdnasErriep

        I saw on phonegap website some pics of bug showing some nodewebkit error messageBut it’s a great new anyway !!
        but nothing for linux..lol i have to wait to try it!!

        • http://thejackalofjavascript.com/ Arvind Ravulavaru

          Not sure if the Desktop app is build using nwk. If it is so, it would be really cool to see how it performs in realtime! Yeah Linux people have to wait.