At the end of last week a really interesting new PhoneGap tool was launched - the PhoneGap Developer App. The PG Developer App is a "shell" application that you can install on a real device (both Android and iOS with Windows Phone coming soon) and test with a local copy of your code. You can skip the SDK. You can test iOS on Windows. All you need is the core PhoneGap CLI and you are good to go. Let's take a quick look.
First - ensure you have installed the phonegap CLI via npm. Ensure you have the latest version (see my guide if you are new to npm) and then create a new project.
At this point you do not have to add a platform. Next - fire up the server:
Make note of the IP address. It should be obvious, but this tool requires that your mobile device be able to "see" your development machine. If you aren't on the same network (or on one of those cluttered free WiFi networks) you may have an issue. Ok, now, run the PhoneGap you downloaded to your device. Here's mine running on my iPhone.
Simply enter your IP address and hit connect. What you're seeing now in the app is the code from your project. If you switch back to your command prompt, you can see a butt load of messages - essentially an access log of requests. Fire up your favorite editor, make a change, and just click save.
It should update automatically, but if it doesn't, try a four finger tap. But to be clear, you do not have to go to the command line and run anything. It just - plain - happens.
Another interesting feature of the Dev App is that will automatically load all the core plugins. So if you want to test the Camera API, you just do it. No need to install the plugin manually. This is cool... but I kinda worry it may trip people up when they stop using the Dev App. I tend to be a worry wart though.
Another issue is that you cannot use remote debugging with it. By that I mean Safari Remote Debugging or Chrome Remote Debugging. Weinre works fine with it though.
So - thoughts? I've said before that I tend to focus on the Cordova CLI, especially when I teach, but I definitely see me demonstrating this next time I present on PhoneGap/Cordova.
Archived Comments
Thanks for explaining how the plugins work with it. I was wondering about that. Unfortunately, since I used a lot of third party plugins, I won't be able to use this...
Adam - not to worry, we'll open source the app soon enough (later today?), so the live reload functionality could be integrated into your own app...
Hi, thanks for the blog post! You guys can also use the GapReload plugin I wrote if you enjoy a Live Reload kind of workflow. There also is a Grunt task for it.
https://github.com/fingerpr...
https://github.com/fingerpr...
That's great news, Shazron! And Sebastien, your plugin looks really awesome!
What happens on reload? Does the entire app get refreshed and then you start over in the deviceready event from the first page?
Yes, so if you were doing something like Angular and were deep in a view, then it is going to reset. But - there is a flag to disable autoreload if you want.
@Tom: Not using GapReload, you stay right where you were :)
Oh? It will reload assets but keep you at the current URL?
Yes it will as it actually is based on Live Reload (http://livereload.com/). I did not test it with `$ phonegap serve` yet as the command is pretty new and I originally designed the plugin to work with `$ cordova serve` (but my guess is it should work the same, maybe even out of the box if I'm lucky).
So wait - I can be in some particular view in Angular, edit the HTML of that partial, and your app reloads it in such a way that Angular isn't doing a complete reload, just changing the HTML?
Live Reload won't just reload the HTML template, it will do a full page refresh, but as long as you use {insert your favorite JS MVC framework name here} routing features you will be able to stay where you were (kind of).
That said, Live Reload won't do a full page refresh if you modify a CSS file, it will inject the new rules on the fly and this is really handy.
... oh... so it *is* just reloading? So I should point out - I didn't test the PG thing with a URL fragment being used so it may actually work the same then. I should whip up a quick jQM app to see.
Hi, how's going if plugins get updated then or I want to test some specific version for a plugin?
Then you probably want to do it the "hard" way - which honestly isn't that hard either.
My opinion - and this may change(!) - is that this is a *kick ass* way to quickly test things out, become introduced to the platform in general - but that you probably want to start building things locally later on. Know what I mean?
I'm using the Camera API and a standard `cordova run android` works with the Camera API, but the Developer App doesn't seem to be able to launch the Camera chrome.
I tried looking at `adb logcat`, but I'm at a loss at how to debug this.
I just did a test and it worked ok for me. I added a button to the home page and then a click handler. See this Gist:
https://gist.github.com/cfj...
Tested with iOS though, not Android.
Adam - check out the PhoneGap Developer App post by Michael Brooks. He points to the links for the open source repos for the app itself:
http://phonegap.com/blog/20...
Very nice, Raymond. As a PG Build user, I'm equally excited about this. If you are a Build-only user, please check out my post on what that means for you! http://netkow.com/post/8417...
The core-plugins loading is cool.........
Is it just my environment or does the file-transfer plugin not load?
Best I can recommend is filing a bug report on it. You can file reports here: https://github.com/phonegap...
This is very nice. I am using this, it makes development so fast and easy.
Well but for third party plugins like social sharing or status bar it is not working. Am I doing it wrong way or is it's limitation that it only works with core plugin.
I am able to use these third party plugins when I run app using Xcode or build app on build.phonegap.
You can't use it with custom plugins. Not as far as I know. You would only be able to use it with the core plugins.
So I can see a future where baking a build of this new app is rolled into Cordova/PG CLI so it pickups up all your 3rd party/custom plugins and you then only rarely need to perform prepare or compiles. You could even be serving multiple devices so a JS/HTML/CSS code change can immediately be previewed on different OS's with no recompile.
Just to clarify a bit ... I think you can avoid the recompiled by performing a 'debug' build that does not compress CCS or JS files. Symlinking some folders might also avoid file copying.
Posted this issue:
https://github.com/phonegap...
How did you manage Weinre to work?
I set up Weinre with:
weinre --boundHost 192.168.100.113 -httpPort 3000
In my app's index.html:
<script src="http://192.168.100.113:3000/target/target-script-min.js#anonymous"></script>
But I can't see the device listed on Targets:
https://www.dropbox.com/s/l...
I (kind of) managed to debug with https://trigger.io/catalyst
It is very slow, and the console shows nothing, can only debug html and css so far.
HI, nice tool, but there is a problem with filetransfert.
If you make :
alert("1");
var ft = new FileTransfer(); alert("2");
And test it it the tool, "2" is never show.
But if you use build.phonegap all are ok.
Alexendre, you should file a bug report: https://github.com/phonegap...
@Isaac: Not sure what to say. I tested, and it just plain worked. I just confirmed w/ latest PG.
I have hosted WCF service on amazon ec2 windows iis7 server. Everthing works well if i open my app using chrome directly on my laptop, but if i use phonegap developer app to run my app on ipad then no http POST request work
On console of phonegap serve i sometime get error
ECONNRESET. I have no idea what is the problem.
Though it works well with phonegap developer app as well if i host WCF service locally using visual studio publish instead pf hosting it on amazon AWS
Maybe something needs to be done AWS side...
Hmm. Afaik, the PG Dev App uses a wildcard for the access config so everything should be available. Best I can suggest is filing a bug report.
I use 'phonegap serve', get error
connect ETIMEDOUT
listening on unkown:3000
I am developing an app on Android (Phonegap) in order to capture pictures from a video.
My code below is working with a web browser on my laptop but not with Phonegap on my smartphone. I just see a black rectangle on my app, not the picture.
According to you, is it possible to take a snapshot of a video with Phonegap?
var video = document.getElementById('video');
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
function snap() {
context.fillRect(0,0,150,100);
context.drawImage(video,0,0);
}
@sunny: You may have something else listening on that port.
@Math: "According to you, is it possible to take a snapshot of a video with Phonegap?"
It depends. You can record video and this will be saved to the file system. But I do not think what you are doing will work properly.
Thanks Raymond for your quick answer.
According to you, it's not possible to "cut" this video in order to get all the frames off the video element, show each of them on a canvas?
The issue is working with the binary data. That's pretty hefty lifting for JS. It is possible, but I don't believe it would perform well at all.
There are services that let you send them video files and they do all kinds of stuff - thumbnail extraction, resize, etc. I'd use one of those. (ZenCoder I believe.)
If you're developing Sencha Touch apps with PhoneGap then you might be interested in this new open source app that builds on the work of the PhoneGap team. It employs the the same client and server components but is no longer restricted to a fixed set of plugins and ensures that both client and server plugin versions match:
https://github.com/tohagan/...
Install Guide ..
https://github.com/tohagan/...
I am developing an app using phonegap. I have installed phone by running the command
npm install -g phonegap@3.4 as npm install -g phonegap was showing some error.
Now when i try to connect using developer at to my listening address 127.0.0.1:3000, it does not connect and shows "connection timeout".
Please can anyone tell me what is wrong?
127.0.0.1 points to your phone, not your machine. You need your real IP address.
Thankyou Sir for replying to my question so fast !!!
I solved the problem by reinstalling the phonegap through $ npm install -g phonegap and now my developer app is connecting and i can see the project on my phone which is working perfectly. But, when i deploy the app to a device, its page scrolling sucks and the sliding menu also freezes sometimess.
Any solutions?
That would depend on what your doing. I don't know what CSS, JS, etc framework you have in place. For that, I'd recommend you post a detailed question to StackOverflow.
Weinre doesn't work for me either. I can successfully load the target script in chrome, so my phone is finding my computer, but the Developer App simply isn't coming up as a target. Can you share more info about your Weinre setup? Thanks!
Not sure what to suggest then. Maybe file a bug report with the PhoneGap team on it? Sorry to punt you off but I don't work on that tool itself. :)
Hello peepz, this is awesome and thanks for sharing the nicest idea behind deployment of phonegap app, but i have a problem, I have problem in capturing image using my phone camera, but work perfectly okay without using phonegap developer, any help please?
Hi, I'm trying to run a basic project on an android device, but it is stock at "connecting to device"
When I lunch "phonegap serve", I have a message "deviceready has not fired after 5 seconds" ??
But if I install the application with the .apk on my android device, it's working...
Any ideas ?
I'm using phonegap 3.6.3-0.22.4
Thanks
Charles
Are both devices on the same network? Run a web server on your machine - and make note of your IP address (not 127.0.0.1). Then on your Android device, open Chrome and try to hit that IP. If you can't, it means your device and desktop can't see each other.
They see each other, that's not the problem.
The problem is when I run my hello-world application on the android device by the PG-developer app, there's a problem and device ready is not fired.
The message "connecting to device" is in the app on the android device. Have a look at the attached pic.
The message "deviceready has not fired after 5 seconds" is on desktop.
If I install the app with the apk on the device, I have the message "device ready".
Thanks
Charles
I searched for this at the GitHub repo issue tracker (https://github.com/phonegap... but didn't see it. I'd suggest filing a bug report.
I think I have to upgrade my PG CLI
https://github.com/phonegap...
Have you tried this app with MobileFirst environment? can i use this with Mobilefirst and AngularJS environment.
Not yet. To the second question, AngularJS wouldn't be an issue for sure. To your MF specific issue, I *think* it would work ok - but again - I haven't tested it yet.
Great it was, i am also Phonegap Developer and i need a project so i can you have any project then send me details of project and contact details :- radhikaverma1225@gmail.com