Thursday Nov 28, 2013

From AngularJS Seed to Cordova Android Camera!

One of my recent holy grails has been to figure out how to get from an AngularJS Seed template to a functioning Cordova app that makes use of the camera on the Android device. And I figured it out, though it took me a day to do so. Not only is this useful for getting the camera to work. The principles you learn along the way should give you the basics for getting you access to all the Android device tools made available via the other Cordova plugins, e.g., "Acceleromatter", "Contacts", and "Geolocation". 

There are many resources to help you get to the end point, though all of them are incomplete in one way or another and get you part of the way on your journey. My aim is to get you all the way to the end, from the very beginning, in this blog entry.

But first, let's look at all the stepping stones I used and give credit where credit is due. Setting up USB debugging for your Android device is important if you, like me, don't want to use Android emulators anymore, since working directly with the Android device is more real and also faster, and you're on Windows. So you need to install the USB driver, assuming you've plugged your Android device into your laptop via a USB cable. Once you're set up and ready to do some coding, the most useful document, providing all the code you actually need is the 1st answer, by asgoth, in How to integrate Phonegap Camera with AngularJS. The solution is based on creating an AngularJS Directive, which is well explained in Build custom directives with AngularJS. You'll come across problems in the early hours of figuring things out and you're going to be happy to have a simple working example, which is what https://github.com/paulorbpacheco/CameraTest-Cordova.git is. Doesn't get you the AngularJS piece of the puzzle, but gets you a working camera on Android via Cordova. And when you're troubleshooting, this and this stackoverflow item could be helpful. 

Now let's actually get started and go from the very beginning to the very end.

  1. In NetBeans IDE, go to File | New Project and then choose HTML5 | HTML5 Application. Click Next. Give the application a name, such as 'AwesomeCamera':

    Click Next.

  2. Choose the AngularJS Seed template:

    Click Finish. After a few moments, during which the template is downloaded from its Git repo and unzipped, you should see this in the Projects window, i.e., the logical view of your AngularJS Seed template:

    In the Files window, you see the complete view, i.e., everything on disk that constitutes your AngularJS Seed template:

  3. Now, assuming that you have already set up Cordova (which I describe how to do in this YouTube movie), you can proceed to let NetBeans IDE add Cordova content to the AngularJS Seed application. Go to the Project Properties dialog of the AwesomeCamera application (right-click it and choose Properties) and then the Cordova tab should show the following:

    (If you don't see the above, you have a fun journey ahead of you in setting up Cordova.) Once you see the above, click the button and wait for the call to the Cordova executable to complete, at which point you will have a Cordova application. What that means you'll see in a few steps below. Now don't forget to switch to the Plugins tab, choose "Camera", and click it to the right of the pane:

    Notice that if you haven't set up the Android SDK yet, the "Mobile Platform Setup" button above gives you an opportunity to do so. Now click OK everywhere to exit the Project Properties dialog. 

  4. In the NetBeans IDE toolbar, use the drop-down to specify you'd like to deploy via Cordova to the Android device that is attached to your laptop via a USB cable:

    Alternatively, you can set the above per-project, in the Run tab of the Project Properties dialog for the AwesomeCamera application.

  5. Now right-click the AwesomeCamera application and choose Build. Since you've set "Cordova (Android Device)" in the previous step, Cordova will build an Android APK package for you. While the build takes place, open the Output window (Ctrl-4) to see the long list of Cordova outputs in the IDE.

    At the end of the process, you'll see no difference in the Projects window, i.e., in the logical view. Switch to the Files window and you'll see that your application has been transformed into a Cordova application. In particular, notice these folders:

    Notice there's a "plugins" folder, containing the downloaded Camera plugin, i.e., during the build process the Git repo was found where the Camera plugin is stored. From there, the Camera plugin was put into the folder you see above. Also notice there's a "platforms" folder which, since we're creating an application for Android, only has content for Android. In particular, notice the "bin" folder and the "gen" folder, which are created whenever you build the project. The Android APK file is created in the "bin" folder. When you invoke the clean command on the project (i.e., right-click the project and choose Clean), the "bin" and "gen" folder will be removed. In other words, these two folders are created from all the other artifacts in the "platforms" and "plugins" folders, which in turn have been defined via the files and settings you define in your AwesomeCamera project.

  6. An interesting thing to note in the above screenshot is that in the "platform/android/assets/www" folder is a file named "cordova.js". That file, very important, provides the entry point to all the Cordova features, including the camera on the Android device. Hence, we need to make sure that we reference that file in our index.html file. Therefore, switch back to the Projects window. (Remember to do all your work in the Projects window because anything in the Files window could/will be overwritten by build commands via Cordova.) Right at the end, before the closing body tag, add this:
    <script src="cordova.js"></script>

    Build the project again and now notice that the index.html file in the "platform/android/assets/www" folder correctly references the cordova.js file. Note there's no need to reference the "cordova_plugins.js" file in your index.html, because that file is referenced in the "cordova.js" file.

    I believe that NetBeans IDE should take this step for you: https://netbeans.org/bugzilla/show_bug.cgi?id=238923

  7. Now we'll use all the code referenced above, i.e., in How to integrate Phonegap Camera with AngularJS, plus a tiny little bit of my own. Switch to the Projects window and then we'll create a directive, a controller, and some HTML:

    In "js/directives.js", remove everything and replace it with this:

    'use strict';
    var app = angular.module('myApp.directives', []);
    app.directive('camera', function() {
        return {
            restrict: 'A',
            require: 'ngModel',
            link: function(scope, elm, attrs, ctrl) {
                elm.on('click', function() {
                    navigator.camera.getPicture(
                        function(imageURI) {
                            scope.$apply(function() {
                                ctrl.$setViewValue(imageURI);
                            });
                        },
                        function(err) {
                            ctrl.$setValidity('error', false);
                        }, {quality: 50, 
                            destinationType: Camera.DestinationType.FILE_URI});
                });
            }
        };
    });

    In "js/contollers.js", remove everything and replace it with this:

    'use strict';
    angular.module('myApp.controllers', []).
            controller('MyCtrl1', function($scope) {
                $scope.myPictures = [];
                $scope.$watch('myPicture', function(value) {
                    if (value) {
                        $scope.myPictures.push(value);
                    }
                }, true);
            });

    In "partials/partial1.html", remove everything and replace it with this:

    <button camera ng-model='myPicture'>Take Picture</button>
    
    <ul ng-repeat="onepic in myPictures">
        <li style="list-style: none">
            <input type="image" 
                      src="{{onepic}}" 
                      width="250" 
                      height="390" 
                      alt="error"/>
        </li>
    </ul>

    Note that the "'use strict';" statements were already in the AngularJS Seed files above, so I've just kept them there.

  8. Run the application. Sure, you can deploy the application to the Android device directly from NetBeans IDE. Since you set "(Cordova) Android Device" above, whenever you right-click the project and choose Run, the IDE will deploy the application to the Android device. Once it is deployed to the Android device, you'll simply see a button with the text "Take Picture". Click it. The camera starts up. Take a picture. Save the picture. The picture will then be added as a new image in a list in the view defined via the HTML shown above.

Hurray you have an application created in HTML and JavaScript that accesses a camera on Android. That's pretty cool, no native code needed to be provided at all, only HTML and JavaScript, which Cordova converted to native code for you.

About

Geertjan Wielenga (@geertjanw) is a Principal Product Manager in the Oracle Developer Tools group living & working in Amsterdam. He is a Java technology enthusiast, evangelist, trainer, speaker, and writer. He blogs here daily.

The focus of this blog is mostly on NetBeans (a development tool primarily for Java programmers), with an occasional reference to NetBeans, and sometimes diverging to topics relating to NetBeans. And then there are days when NetBeans is mentioned, just for a change.

Search

Archives
« November 2013 »
SunMonTueWedThuFriSat
     
       
Today