Photostream App – Part 3

In the final part, we will create a simple hybrid mobile application that will snap a photo and upload it to the file upload service.

I’m using the following framework and tools

1. Ionic – this is the responsive web/mobile framework based on AngularJS
2. Cordova camera plugin – https://github.com/apache/cordova-plugin-camera
3. Cordova file transfer plugin – https://github.com/apache/cordova-plugin-file-transfer

 

The Ionic source is available here.

Till next time.

Photostream App – Part 2

In the the second part of the “Photostream” trilogy, we will look at how the server notifies all the clients who are observing its stream. There are 2 ways we can do this; either by using server sent events or with websocket.

Since JavaEE 7 supports websocket I’ll be using websocket. Websocket is a 2 way communication channel. In photostream app, the notification/data only flows on way viz. from the server to the client (those observing our photostream) so server sent event (SSE) is actually more appropriate. But to use SSE in JavaEE (in Glassfish/Payara in particular), you have to use add additional libraries.

In you’re using Glassfish/Payara and you would like to try SSE, see this document.

The source code for part 2 is available here.

Till next time.

Photostream App Trilogy

I’ve started a new screencast. In the screencast, I’ll show you how to develop a photostream application. The photostream application has 2 parts

1. Allow users to upload images

2. Push the newly uploaded images (a photostream) to connected clients.

The following is a list of open source projects and technologies that I’m using to write this application

• Servlet – file upload service
• Angular (and other modules) – front end client
• WebSocket – “realtime” notification
• Cordova – hybrid mobile application
• Ionic – an Angular framework

Rather than creating one long screencast, I’ve split it into 3 parts.

The first part – upload service and and Angular client.

The second part – server notification using websocket

The third part – hybrid mobile app to take pictures and uploading them.

Here is the first part

 

Some points to note about

• I’m using asynchronous Servlet to handle the file upload. This is to improve performance and to better utilize server resources by releasing the request thread when the image file is being persisted. We can resume the request once the file have been saved
• Since this is a simple application, I’ve saved the images directly in the document root. You should use a CMS or something like a GridFS to save your images

The source code for the first part is available here. Its a NetBeans project and it deploys to Glassfish/Payara.

Till next time.

Screencast: Creating a Hybrid Mobile Application with Ionic and Cordova

p { font-size: 1.3em; }

I’ve just published a new screencast on how to create hybrid mobile application using the Ionic framework. This screencast is a remake of an older version.

This remakes includes infinite scrolling, integration with 2 Cordova plugins as well as customizing the generated Android ‘shell’.

The source code and the APK is available here.

Till next time.

Screencast: Creating a Hybrid Mobile Application

Instead of writing a blog for this month, I’ve done a short (30 mins) screencast on how to use Ionic, Angular and Cordova to create a hybrid mobile app.

 

The source (just the www directory and the APK) can be found here.

The app is incomplete; one of the things that you’ll notice is that that when you try to follow a link, the app will open that in a browser. But when you click on the back button, it does not go back to the app. You need to handle the link and display that in the inappbrowser plugin. I’ll leave that as an exercise for the reader.

I initially wanted to display the blogs using drawer navigation; this would make the video longer that I intended. So if your’re curious have a look at Ionic’s side menus.

Till next time.