PhoneGap

Last week, I had the chance to attend to a mobile app workshop put on by Apigee. It was a really useful workshop, intended for web developers who want to make mobile apps but don’t necessarily want to use a native language like Objective-C or Java. Although I’d love to learn another language, for right now, it’s better I learn one really well, than be a dabbler in many.

This is the basic setup for creating a mobile app using PhoneGap. You should have Node.js, PhoneGap and XCode installed.

  1. Create your project as you would normally do  (HTML, CSS, Javascript). But, use some of the new features in HTML5, alongside jQuery mobile to make your mobile app pages (Note: You don’t need to make separate HTML files for each page of your app; instead, use the new data-attribute (data-role=”page”)). For more info, check this out: Anatomy of a Page
  2. Use the Emulation feature in Chrome Developer tools! This was my favorite part. I use the developer tools everyday and had no idea this existed. Open up your developer tools (I usually just right click a page and press ‘inspect element’). Then, press Esc. You should have a small window underneath pop up. Press Emulation. Find your device and press emulate. And.. wallah! There you go: that’s how your app would look on a mobile device, Kindle, etc.
  3. After you’ve created your project using HTML5, CSS, Javascript, jQuery Mobile, you can start using PhoneGap. In terminal:
    phonegap create /pathtoyourproject. You should get a response saying [phonegap] created project at /pathtoyourproject 
  4. You should now have a new folder of your phonegap project with a few files inside: merges, platforms, plugins, www. Inside, the www file (in the root, not in platforms/ios/www). Inside the (root!) www folder, delete the files (js/img/css, etc.). Leave the config.xml file though. Place your own project files inside (your own js/img/css etc).
  5. Next, open up XCode. In XCode, open up your .xcodeproj file. To do this, go to your phonegap project folder. Go to platforms/ios and find your .xcodepro jfile. For example, HelloWorld.xcodepoj.
  6. You can now press Run at the top and do a simulation of your app.

And there ya go ladies and gents!

Here’s a picture of the app we worked on — a simple bucketlist app that lets you keep track of all the things you ever wanted  to do.

apigee  apigeeworkshop 

Removing Duplicate Objects in an Array

I’ve been focusing on my mapping project for the past two weeks, which I started during my coding bootcamp (for more info, check out: Coding Dojo in Mountain View). I’m dealing with a lot of data from different APIs, and now my app has become incredibly slow (though at least functional, phew!).

One of the issues I’ve come across is removing duplicate objects in an array. These objects I receive from my Google Maps API every time a user enters in an address for directions. In short, I need to get at least one longitude and latitude coordinate for every street block from the user’s start address to the end address. However, I’m getting tons of coordinates (a coordinate for every step a user has to make). Some coordinates are repetitive. My first thought was to delete the duplicate coordinates and see the effects.

After much, much searching online (okay, mainly just Stack Overflow), I’ve found two ways to remove duplicate objects in an array. Since I need to use the keys of my objects as parameters later, I really needed to keep my structure as objects within an array and not just an array.

(1.) The first method is to loop through your array and use the values of one of your keys as a key in a new object. Clever, but super confusing (see the code I adapted).  Again, you make every value for one of the keys in your array (here, latitude) to be the key of a new object. Since you can’t have the same key within one object twice, you’ll get rid of the duplicates. That is, referenceObject will not have any duplicates. You then loop through your new object (here, referenceObject) and push the items within this object to a new array.

var latlngArray = [
 {latitude: 37.797650000000004, longitude: -122.41204},
 {latitude: 37.797650000000004, longitude: -122.41204},
 {latitude: 37.89805, longitude: -122.581000000001},
];

var newlatlngArray = [];
var referenceObject = {};

function removeDups(arr, prop){
 for(var i=0; i<arr.length; i++){
 referenceObject[arr[i][prop]] = arr[i];
 }

//the VALUE of latitude in latlngArray will become the KEY in referenceObject

for(item in referenceObject){
 newlatlngArray.push(referenceObject[item]);
 }

//push your objects within referenceObjects to a new array

 return newlatlngArray;
}

removeDups(latlngArray, 'latitude');

(2.) Alternatively, you can use the Lo-Dash library. I played around with Underscorejs as well, but it was a bit too complicated and I couldn’t keep the same structure that I wanted — objects within an array. Here you can use _.uniq for iteration, and use your values of latitude for comparison (through a callback). Here’s my source (it’s kinda beautiful!).


var latlngArray = [
 {latitude: 37.797650000000004, longitude: -122.41204},
 {latitude: 37.797650000000004, longitude: -122.41204},
 {latitude: 37.89805, longitude: -122.581000000001},
];

 _.uniq(latlngArray, function(item, key, latitude){
 return item.latitude;
 })

So, one step forward! Woo!

Starting 365 Days of JS

Happy belated New Year!

I recently decided to change career paths from becoming a researcher to a software engineer. Having just finished a coding bootcamp in Silicon Valley in December, where I was programming each and every day, I was a bit worried that my momentum would suddenly drop. Luckily, it hasn’t 🙂

To lay off the dark path of utter programming laziness, I made a New Year’s Resolution that this year would be the year of mastering Javascript — yes, I would become a master by December 2014! And I would keep track of my trials and tribulations in mastering this art.

This blog is to have a space where I can look into certain topics (namely, points of confusion) in depth and in detail. I will learn JS everyday (yes everyday! even if it ranges from 8 hours a day to 15 minutes) and blog about particular topics that may be confusing for newbies like myself.

I’m using a combination of course material from my bootcamp, Code School, Treehouse, Lynda and online searches of specific topics (which usually lead me to Stack Overflow). I’m also, more importantly, working on a few projects, where I implement the topics I learn from these online materials. Projects are usually the source of all my questions. I’ve found — again and again — that understanding topics in Javascript is easy, implementing them is not. Many times, a concept makes complete sense until you begin to code and several other concepts come into place, making your original concept a big pile of confusion.

So cheers and here’s to a year to mastering JS!