My Kingdom for an iPad Local Data Store

Almost a year ago I purchased the 9.7" iPad Pro, because I wanted to start using an iPad for more than just consuming social media and videos. In that time I have used the iPad on a daily basis at work mostly as a notebook by using GoodNotes, OneDrive and the Apple Pencil. Personally I have started blogging more using the ByWord and an old Apple Magic Keyboard. I also pushed the bounds of the device by recording, editing and posting my podcast, Kilobyte, exclusively from my iPad. The latter involved the Apple USB adapter, Ferrite (for recording and editing), DropBox for hosting, Coda for updating the RSS feed and Workflow to join it all together. It has been amazing how much I can accomplish now that I have a basic understanding of importing, exporting and saving using iOS extensions.

One thing noticeably absent from that list is making and editing videos, which seems odd given how easy and natural it is to use the iMovie app for simple videos. It isn’t excluded because I haven’t been making videos, because since August I have posted a bunch of drone videos on my YouTube channel, but they were all made using a Mac. I have avoided using the iMovie for iPad for one reason, video file management difficulties.

My drone footage always ends up on a Micro SD card either from my GoPro camera or the DVR inside my FatShark googles. At this point I can chain together a few dongles (MicroSD adapter to SD Card Reader to Apple’s USB adapter) and get them into the Photos app on my iPad, which will automatically upload them to my iCloud Photo Library. The problem is I don’t want these raw video files in my iCloud Photo Library and more importantly I don’t want my iPad to spend battery or bandwidth uploading over 1GB of data to the internet. Yes internet connections are everywhere, but they aren’t all created equally and sometimes it isn’t polite to just destroy a coffee shop’s internet bandwidth.

All I want is a folder inside an app where I can copy files from the USB drive without having to go through my iCloud Photo Library. I am not asking for an OS level filesystem, just something in an app that won’t get synced to the cloud. My ideal iMovie workflow would let me create a new project, plugin a USB card, select the video files to import (regardless of folder structure) and pull those videos into the app so they are stored locally just like the projects are stored today. After editing the movie and uploading it to YouTube, I could then choose to delete the project file including the imported videos.

If there is ever hope of getting audio and video professionals to switch to the iPad for work it is requires support for enormous file sizes and external disks. The cloud based data providers like iCloud, DropBox and Google Drive just fall down when working on enormous media files. I really enjoying editing podcasts using the Apple Pencil and think it would be just as much fun to edit video, but right now it just doesn’t work for me.

Angular Proof of Concept (Part One)

I recently went through the process of building a simple application using the Angular framework and wanted to document some of my experience to possibly help others considering the framework. My day job for the last ten years has mostly involved building Flash applications using the Apache Flex framework and as a result my experience with HTML, JavaScript and CSS has been limited. In September 2016, I attended the Angular Summit Boston 2016 and learned a lot about the framework and how I might use it. A few months later I finally found some time to give it a shot.

To TypeScript or Not To TypeScript

At the Angular Summit there were two almost equally divided camps when it came to language choice. The JavaScript people seemed skeptical of TypeScript and were very comfortable with JavaScript. The TypeScript people on the other hand preferred the simpler syntax and more strongly typed nature of TypeScript. I decided to start with JavaScript Since I had some knowledge of it and also like that the browser would be working with the actual files I created rather than some on the fly transpiled files.

Once the language decision was behind me I walked through the Angular JavaScript Quick Start and quickly had a sample application running on my local machine. I used the Microsoft Visual Studio Code application because it was free and easy to use. Once I had the sample application up and running I started to make changes based on my needs. It was pretty easy to figure out the patterns and I was able to create my own components pretty easily. I did have some trouble getting the syntax of the JavaScript correct because of the hoops you need to jump through in order to support the complex class structures required by Angular. Here is an example of a simple module class and all its curly brace and bracket fun.

(function(app) {
  app.AppModule =
    ng.core.NgModule({
      imports: [ ng.platformBrowser.BrowserModule ],
      declarations: [ app.AppComponent ],
      bootstrap: [ app.AppComponent ]
    })
    .Class({
      constructor: function() {}
    });
})(window.app || (window.app = {})); 

Struggles with Server Calls

After completing the screens I moved on to trying to set up some services that would make calls to a simple REST API set up on my server. I went searching for examples on the Angular site, but like most of the other portions of the tutorial there isn’t a JavaScript example yet only TypeScript. I looked around the web a little bit and scraped together some information, but in the end I was forced to look at the TypeScript examples and then in my head transpile them to JavaScript. After lots of trial and error I learned how to use Promises with JavaScript and made the http get call to one of my REST endpoints. The browser sent the request to the server, but the server wasn’t having any of that nonsense.

My lack of experience with standard web technologies now started to catch up with me at this point as I fumbled through the process of updating my Apache Tomcat server to accept cross domain requests from my Angular application on a different port. A few hours of tweaking CORS filters in my web.xml file and a couple tweaks to my http get call resulted in a successful retrieval of text from the server. The next endpoint was authenticated so I once again consulted the TypeScript tutorial and figured out how to pass the Authentication data in the http get call. The TypeScript example looked so much more straightforward because it used import statements to bring in special classes for the Header, while the JavaScript I built used plain old objects.

All Downhill

Once I made it over this last hurdle I was able to finish the proof of concept with relative ease. I found debugging using Google Chrome’s built in developer tools was straightforward and helped me around some simple issues. The error messages provided by Angular were much better than I remember from what were reported back in the fall, which helped me fix some random issues I would face when adding new components. Compared to compiling Apache Flex in Flash Builder the whole experience of quickly updating a file and being able to test the change within a few seconds was a breath of fresh air. I found the process of adding new components was pretty fast and the segregation of the templates (view) from the components (model) was great. Overall using Angular has been a great experience and meshes well with my Apache Flex experience.

Of course this isn’t the end of the story, because I had a few more things I wanted to learn about Angular. In the weeks that followed I worked on switching from JavaScript to TypeScript, integrated some third party JavaScript widgets and also switched to using the fantastic Angular CLI. I am happy to say things only got better!