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.
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
The panel on the left hand side is the main menu for the app.
Click on the + icon and you should see
Click on Create new PhoneGap Project and you should see
Local 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.
And when you go back to the Phonegap Desktop app, you should see
As 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
Once the app is loaded, you can enter the IP address & port from the desktop app
and hit connect. At this time, the mobile app will fetch the assets needed to run our Hello World app.
Finally the app launches
and the app works!
Simple and easy right!
Now if you go back to the Phonegap Desktop app and click on the console icon, you can see the logs
Step 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.
Couple of days ago Saurav Panda requested a tutorial on building a video chat application using Node-webkit and WebRTC. So, here it goes.
Smooth and easy right!
As mentioned in the video, this client is built using Node-webkit, WebRTC and Peerjs. We will leverage the power of Peer.js & WebRTC to enable the connection between 2 node webkit clients. We will host our own peer-server on Heroku (with one click deploy) and use this server for creating the initial connection.
We will be using Angularjs via Lumx (an Angularjs Material Design implementation) as our client side framework.
First we will understand how the application is designed and then we will build the node-webkit client from scratch.
The application we are building leverages Peerjs to implement WebRTC.
As you can see from the above diagram, the client 1 & client 2 are our node-webkit clients. When the client is launched for the first time, it would establish a connection with the peer server. Then the peer server would provide a random ID or a unique ID for that client. And when the second client is launched, it acquires its own unique ID.
Now, when the two clients want to talk to each other, we will use the Peer API to establish the initial connection between the two clients and then using WebRTC, they continue talking to each other without the server.
Since we are using Angular.js, we will be building our own custom directive for managing the client and interacting with the Peer API. We would create a new tag called
nwk-video-chat and this tag will take care managing the chat UI for us.
Now that we have an understanding of the application design, we will get started with the development.
Create a new folder named nwk-videochat. Open a new terminal/prompt here. We will be using a slush generator, named slush-wean to quickly scaffold a node-Webkit, Express, Angular and Node application. The scaffolded project has everything you need to develop a node webkit app as well as distribute it.
First let us install bower, gulp, slush and slush-wean globally.
npm install-gbower gulp slush slush-wean
This will take a couple of minutes. Once that is done, we will scaffold a new WEAN app. Run
It would prompt you for a project name. You can call it anything or use nwk-videochat. Then it would take a couple of minutes to scaffold the project and setup dependencies.
The project structure would look like
The app folder consists of the HTML, CSS and JS to develop the app. And the assets outside are used for project management.
Now, let us launch the app and test it out. You can do it in 2 ways
I would recommend the second approach for saving some time, but either of them would do.
Once you launch the application, you should see a sample splash screen and then see this
For development purposes, we will enable the toolbar, so you can debug using the developer tools. For that, open package.json and set toolbar property value to true. Then launch the app again and you should see a URL bar and a settings icon next to it.
When you click on the settings icon, you should see
You can use this to debug your applications as you would do with any browser based app. The updated package.json would be
We will modify the splash screen first. Open app/index.html and updated it as
<span class="toolbar__label fs-title">NWK Video Chat</span>
I would highly recommend going through all the Lumx components and then building your app. The above head.html consists of a stripped down version of the toolbar component.
Finally we will be focusing on the
nwk-video-chat directive. We will create a template for this directive to work with the UI. For that, create a new file named nwk-videochat.directive.html inside the app/public/partials folder. Open this file in your favorite editor and update it as
Line 6 : We point the template URL to the template we have created in the partials folder
Line 8-12 : We set the initial state of the application
Line 14 : We show a modal to the user while the client is connecting to the server
Line 20 : We get the webkitGetUserMedia and assign it to getUserMedia
Line 23 : We create a new instance of peerjs by passing in our custom server details. When we setup our own peer server on Heroku, you can update the same here.
Line 30 : The peer is connected to the client, we show a couple of status messages and update close the modal we open on app load
Line 43 : The event
call would be fired when a peer initiates a call to this client. As you can see from the comments, I wanted to show a answer or reject call modal and then if the user answers it, we show the video else we reject it. But this approach, for some reason, is not displaying the video for the call initiator. Not sure why!
Line 85 : Before we connects the two clients, we need to get the video of the current client. Here, we request the stream. And once that is done, we will invoke the callback on line 92.
Line 53 : Once we get the current user’s video stream, we will answer the call and invoke a
Line 98 : We cancel out all in progress calls. And then we stream the video from the peer to the current client.
Line 71 : If the current client wants to connect to another client, we invoke the
peer.call() and pass the call object to the
handleCall() on line 75.
Line 80 : End the active call
That is it! With this we complete our app.
We are going to setup our own peer server on Heroku with their one click deploy. All you need to do is naviagate to the below URL in your browser