External Javascript Resources in Ionic Applications

Fun Fact: If you're using an externally referenced Javascript file in your Ionic browser, it will 404 out due to the default content policy on Android phones. This happened to me recently while I was working on an app that uses the Google Maps API to geocode locations.

Running the app in your browser via `ionic serve` does not reflect the issue - it appears only on actual devices. When I built the app and installed it on my phone, it showed me a very helpful blank screen.

I connected the Chrome debugger to the Ionic webview on my phone, and pretty soon tracked the problem down to the Google Maps API js file erroring out. A quick Google search revealed that the best way to get around this issue is to run `cordova plugin add cordova-plugin-whitelist`. The Whitelist plugin allows you to load third party Javascript files as part of your Ionic app. I'm surprised this isn't officially documented anywhere in the Ionic documentation - it seems like a pretty crucial issue to me!


Read More

Learning Angular | Using a factory to make an API call

I was recently building an Angular app in which I had a search page and a search results page. Obviously, the API call would be made after a user hit the search button on the search page, but the question was whether I should make the call from the search page or the search results page.

Search page on the left, search results on the right

My initial solution was extremely complex - I tried recording the selected parameters, and then I created a super-complicated route that allowed me to pass them into the the search results page. However, that was way too complicated, and I quickly realized that there had to be a better way.

After asking around a bit on some Angular help channels, I figured out that Angular services and factories are singletons! This means that I can make the call in the search controller, store the results in my API factory, and then bootstrap my search results controller user the cached results. This ended up being a much faster, simpler, neater implementation!

Here's how my final implementation worked:

Search function - searchController.js

$scope.search = function() {

        var searchParameters = {

            // create search object

        }

        

        API.search(searchParameters).success(function (data, status, headers, config) {

            $location.url('/results');

        });

    };


Controller - searchResultsController.js

// gets the cached results from the API
var data = API.getSearchResults();

    

API factory - API.js

angular.module("donorsApp").factory("API", ["$http", function ($http) {
    
    var constructSearchUrl = function (searchParameters) {
        //returns URL;
    }
    
    // cached results
    var results = null;
    
    return {

        // gets called from the searchController             
        search : function (searchParameters) {
            var request = $http.jsonp(constructSearchUrl(searchParameters));
            
            request.success(function (data, status, headers, config) {
                // caches the returned results
                results = data;
            });
            
            return request;
        },
        
        // gets called from the searchResultsController
        getSearchResults: function() {
            return results;
        }
        
    }
    

}]);

Lesson learned: don't make API calls from the controller, make them from a factory or a service, and then cache the results as needed. 

Read More

Creating simple logging "apps" with Google Forms

If you want to improve something, you've got to measure it first. Putting numbers on things helps us tame the wild waters of instinct and gut feeling. It helps us break things down and make them easy to understand. Numbers help us improve.

I've often felt the urge to create a means of recording something or the other in my life, and when I've had this urge, I've often fantasized about whipping out my Eclipse instance and putting together wonderful Android app that lets me record that thing and has a few dozen bells and whistles to boot. Of course, this never gets done, since I've never needed to record anything badly enough to create a dedicated app for it.

Recently though, I discovered a lovely shortcut to doing this, using Google Forms. I'm going to describe how to do that in this blog post. I mentioned in another article several ideas to help productivity. One of these was a recording what you eat and correlating productivity with it, so I chose that as my initial logging "app"/webpage.

Here's what the final result looks like:

This allows me to enter what I ate for dinner, breakfast, and lunch, and then in a 1-5 scale, rate how productive I felt at work and at home. The real trick was to keep the form simple. Once I conceived the idea of making this form, I wanted to add all sorts of bells and whistles - for example, if I wanted to track productivity, shouldn't I look at other major indicators? Maybe I should have a field for sleep, and another for any snacks that I ate. What if there were extenuating circumstances, like a friend visiting from out of state?

In the end I decided to include a catch-all "notes" field at the end of the form (not shown in the screenshot). I knew that if I made it too complicated, it would just be an excuse for me to procrastinate from filling it out at the end of the day when I'm tired anyway.

How to create the form

Step 1: Go to Google Forms and create a forms with the fields you want. In my example, I used type "text" for the breakfast/lunch/dinner fields, type "scale" for the rating fields, and type "paragraph text" for the notes field. This is what my "dinner" field looks like: 

Step 2: Make sure multiple responses per person are allowed in the form settings on the top of the page. 

Step 3: Go to File > Send Form. This will allow you to get the link to the form.

 

How to add the form to your phone

Step 4:  Copy the link and send it to your phone. You could just email it to yourself if you don't have a better way of doing it. 

Step 5: Open the link on your phone. On my Android phone, Chrome has the option to "Add to Homescreen":

If you tap that option, the OS will add an icon representing this form to your home screen. You can tap the icon, and it will open up your browser of choice with the form loaded! 

So there you have it - using this technique, you can make what is essentially a quick "App" to record any data you might want to on a daily or weekly basis in a convenient way using Google Forms. Whenever you want to check out your responses, and data logged so far, just log into your Google Drive, open up the form, and hit the View Responses button:

 

It might not be as neatly executed as a real app, but it will get the job done, and you can do it in five minutes, instead of spending hours coding an app!

Drop me a comment, letting me know what you use this technique for. :)

Read More