Pardon the Pinterest-like layout, but I just couldn’t resist. Anyway, I’m giving you a sneak preview of what the portfolio page would look like at SideProjectors.com. There would definitely be a number of template options, but the general objective is to provide a simple, good looking portfolio page to those who want to keep track of their side projects and also to discover what others are up to.
Just pushing out the early draft of my latest side project, which is, interestingly enough, called “SideProjectors”.
I guess there are a plenty of people who have various hobbies and interests and I wanted to create a place where we could discover these interesting side projects that people are building.
That’s what this is all about. Initially, I built it because I wanted a simple portfolio page for all my projects. Then well, it just evolved from there. Can’t wait!
Are you loading some data on your iOS app? Perhaps a JSON source from an API or a set of images from URLs? Well, you’ll probably want to display a some sort of “feedback” via UI. The standard way is to show a “loading animated image”.
The following code can be dropped-in in the part of your code where you are loading the data. The code below users “UIAlertView” to display the animated loading image.
UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"Fetching APIs"
message:nil
delegate:self
cancelButtonTitle:nil
otherButtonTitles:nil];
[alert show];
if(alert != nil) {
UIActivityIndicatorView *indicator = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhiteLarge];
indicator.center = CGPointMake(alert.bounds.size.width/2, alert.bounds.size.height-45);
[indicator startAnimating];
[alert addSubview:indicator];
}
Now that’s all well and good, but I also found another, and perhaps a better & easier solution, which is to use a plugin called MBProgressHUD. It’s similar to above, but doesn’t use the UIAlertView, and personally, I think it looks nicer that way. It’s flexible in a way that you can control its position etc. This is also a drop-in solution. The instructions are on its GitHub page.
Oh a side note, I’m finding it amazing how quickly you can develop an app, by researching for a specific problem, finding a solution or a plug-in that solves your problem, dropping into your project and voila~ you are good to go.
I’d have to imagine it would not be the best way to learn and improve your techniques, since you wouldn’t need to go through all the troubles of solving the problem, but if you are just trying to get your app out there quickly, well, it’s a good time to do so. I’m thinking this is a separate topic of discussion altogether.
I love building things on the Web and the mobile, but most of my side projects are scattered across different places. I want it in a single place – nice and simple.
But I’m also thinking a lot of other people have side projects of their own. And I’d love to find out about them – if they want to share.
So I’m launching “sideprojectors.com” – a site where you get to showcase your side projects and find out what others are building.
 |
 |
Authenticating users on your website via their Twitter and Facebook accounts is a well-known feature. It “skips” the usual registration process, which many users tend to find annoying.
Another authentication service, that is being widely used is via the popular GitHub account, and today, let’s use CodeIgniter to authenticate users via their GitHub account. It’s pretty simple process, so follow along!
This step is simple enough, so I won’t go into the detail here. I’m assuming that you have used CodeIgniter before. If you haven’t, well, check it out here. The website has a fairly comprehensive guide on how to install it. I’m using the latest copy 2.1.3 here.
Login to GitHub and register your application. You will be asked for “name”, “url” and “callback url”. For local development, I set url and callback url as “localhost/myapp”. It worked fine for me.
I’ve just pushed the sample application on GitHub. This example will show you the bare minimum necessary to get going. You must first set the GitHub client key and GitHub client secret key in “config.php” (you should put it in a separate config file, btw). Once you’ve done that, direct yourself to the app and you will be given a link to login via GitHub. All the necessary code is in the “welcome” controller, and once a successful authentication happens, you will see the user’s profile information printed out.
Hope that helps!
TL;DR – Though a little tedious, it’s possible. You can export your Highchart graph to a PNG file and then you can embed it in a PDF file for an export – this is without using the built in Highchart export mechanism – which I found a little bit too heavy to configure. If you are interested, read on.
Export the Highchart graph as a separate PNG file and then embed that into a PDF file via the server.
Read through its documentation. I found its setup rather too involved. I need to use another backend setup using their JAR-based export module. It was too much. I wanted a flexible and simpler way to creating an image of my Highchart.
The highchart graph is drawn as a SVG element. In order to ultimately convert this to a PNG format, we first need to “move” this SVG element into HTML5 Canvas element. The easiest way to do this is by using Canvg plugin. Download the plugin and install it as instructed on the plugin website.
Once that’s done, we can do this conversion process from SVG to Canvas via following:
canvg(document.getElementById('canvas'), $(".highcharts-container").html() )
canvas = document.getElementById("canvas")
img = canvas.toDataURL("image/png")
Here, we are moving the SVG DOM element of the highchart graph into a canvas DIV element in our view. So I am assuming the following HTML elements exist on your page.
<div id="canvas"></div> <div class=".highchart-container">.... highchart graph svg element would be here</div>
The Highchart graph is by default wrapped in the “.highchart-container” class.
The PNG file would now be in “img” variable. You can test it by
$("body").append("<img src=" + img + "/>")
If you print it out, you would also realise that the img is a very long string, rather than an actual file name. This is the “representation” of the SVG graph image, which we just converted by using Canvg. (Spec is here)
You can now pass that “img” to the server – but make sure you use “POST” since the length of img can be quite lengthy (depends on the complexity of your graph).
On the server-side (in my case, PHP, CodeIgniter), we can now save this PNG as a file. You can do this by the following:
$encodeData = str_replace('[removed]', 'data:image/png;base64, ', $this->input->post('img'));
$encodeData = substr($encodeData, strpos($encodeData, ',') + 1);
$decodeData = base64_decode($encodeData);
$handle = fopen('chart.png', 'w');
fwrite($handle, $decodeData);
fclose($handle);
Above basically processes the image representation into a file with the correct “decoding/encoding”. The first line may not be necessary in your case, but in my project the data format information was removed (possibly because of CI security feature?), so I just replace it back. Make sure you have an empty “chart.png” file available with the right permission. Or you can create a new file by “fopen(‘chart.png’, ‘x+’)” with the correct permission. Once above steps run successfully then voila, you will have your PNG file.
In my case, I used DOM_PDF library. The CodeIgniter-version is also available here. It’s a pretty simple process and since you already have the image file, it’s just a matter of embedding the image into your final HTML via “<img src=’image.png’ />”.
Of course, there are other ways to tackle this issue, but from all the options, for me this seemed to work the best. I needed a simple(r) yet flexible way to generate a PNG and embed in PDF, without using the Highchart’s export module. Love to hear your opinions and let me know if you found any mistakes in the above steps!
It’s quite common to see an iOS app with a table view for presenting content – think of news readers, content aggregators. They are probably the simplest, yet the best way to format text & image based contents.
But as simple as they may sound, as soon as you are trying to load images for each UITableViewCell component, it becomes tricky to load the images, since by default, they “block” the app until all the images are loaded.
The ideal approach is to adopt an asynchronous way of loading the images, independent of the rest of the content and a quick google search will give you a number of options.
After trying several of them – I have to admit, some seemed to be way too much of an over-engineering – I have found a simple “plug-in” method, that just works. The library is called “SDWebImage” and after going through the instructions on installing, things just worked – seriously.
As a beginner iOS developer, it might not be such a good idea to use this type of “black-box” solution. But in terms of getting things to work, well, this was perfect. Have you used it? What did you think? Is there a better approach to this? Let me know, I’d love to hear them.
UPDATE : Need to resize the image when using this library? This page shows you a simple way to do this by creating a subclass of UITableCellView. It works very well.
TL;DR – After getting through a few hiccups, I found the MoSync a great free alternative to other frameworks such as PhoneGap, Appcelerator, Trigger.io etc (many of them are also free, of course). My app is available on Google Play. You can download it here. App Store version is, hopefully, coming soon!
My objective was simple. Being quite comfortable with HTML5 and JS, I wanted to create a simple mobile app, using these technologies.
There are myriad of arguments, both for and against this approach and I have been following the debate quite religiously. I am biased, of course, having worked with HTML and JS for quite some time I tend to favour the HTML side of the argument.
Plus, I just couldn’t avoid the advantage of being able to use the same codebase and deploy to major platforms (App store, Google Play).
So my specific targets were
Overall, using MoSync was quite straight forward. After reading through jQuery mobile and understanding how things work, I quickly created the HTML5 app that works on the browser. The app is simple. It has 2 screens. A homepage, which lists the APIs and a “API detail” page, which displays the detailed information of the API, which you clicked on the homepage.
The Homepage also has two options – “Search” and “Refresh”. The “search” button will prompt the user with a dialog, with which the user can specify the API category and the sorting order.
The API detail page shows the full information of the API you selected on the homepage. It also has a button that takes you to the API homepage.
So it’s quite simple. The above app can be built directly on MoSync. If you are building from MoSync template project, then it adds a JS file called “wormhole.js”, which accesses the phone’s underlying native features via C++ API. You can remove this if you want, or leave it. It’s up to you. At first, I removed it, but in the end I needed it to solve one of the problems I had (explained below).
There were two issues I had when using MoSync. Other issues I had was probably more with jQuery mobile and myself, not being so familiar with it. So those issues are natural with any learning curve.
In the “API Detail page”, if you click on “Visit API Home”, then my expectation was that the app will open a new window in the phone’s default browser and go to the API homepage URL. Certainly, that’s how it worked when I accessed the app via browser on my laptop. But when I deployed the app on Android Emulator or my Android phone, it actually opened the URL within the WebView it is contained it! Now that was annoying.
The solution to this is to actually access MoSync’s C++ API via the wormhole.js to make sure the link is opened via another program (in this case, the browser) and fortunately, someone already posted the solution on MoSync’s forum (find it here).
It seemed like a strange way to solve, but it worked well. I remember creating an app using Trigger.io, and this was not an issue. Hopefully, MoSync will provide a more intuitive way of getting this sorted (e.g. detecting rel=”external” in jQuery mobile syntax – is that asking too much?)
This was the last thing I thought I’ll have a problem with. But MoSync actually asks “.svg” file for your app icon, which gets resized and saved as “.png” file.
I use Fireworks for any image-editing tasks and Fireworks didn’t have any option for saving as “.svg”. I downloaded a Fireworks extension to do that, but it saved the “.svg” file by linking different images together, which MoSync didn’t like and gave an error.
So when I specified “.png” files, it complained about “ImageMagick” not being installed. After looking up, it turns out that on Mac, I need to install ImageMagick via MacPorts.
I already had “Homebrew” installed, so I got rebellious and installed ImageMagick via Homebrew and alas, that didn’t work. So I obeyed and installed Macports and then installed ImageMagick (which consequently downloaded a lot of other dependencies) and after that all things were good!
TIP : I created a large icon of my app and used Makeappicon website, to generate different icon sizes, required by iPhone and Android. It was superb!
When using MoSync and viewing your app on Android emulator, MoSync actually creates “.APK” file on your project folder. This, believe it or not, is all you need to deploy to the Google Play. So once I was happy with my app, I tried deploying it straight away.
Of course, I hit a small hurdle, which is that I needed to “zip-align” my APK file. The process is quite simple and the instruction is here.
Once that’s done, then I was good to go.
Just as it did for the Android version, MoSync creates a file, specifically for App Store. In this case, it creates an XCode project file. You will need to now open the project file in XCode and go through the App Store Submission process. I followed this guide.
When building the App in XCode, the only issue I had was an error about “linker command failed”. A quick search on MoSync forum quickly gave a solution to this problem.
After that, I went through all the necessary steps to submit an app to the App Store and everything went well. So now, all I can do is wait for the approval process.
If you are familiar with HTML5 and JS and have a rather simple app in mind and want to really take an advantage of deploying to multiple platforms quickly, then I found MoSync to be a great platform to do this.
The issues I have faced, although frustrating, were already resolved by others, so it was just a matter of me searching for them. Apart from that, I had no problem and I was able to achieve everything above in a very short amount of time.
Personally, I am not sure how MoSync compares to PhoneGap or Appcelerator, though I feel that they would be quite similar. Compared to Trigger.io, which I’ve tried before, MoSync’s advantage is that it’s free and open source. Trigger.io might have saved me a little bit more time, but I think that difference can be considered as negligible.
Got an app idea? Try MoSync. I’m sure you’ll enjoy the experience. Got any other thoughts or opinions? Love to hear them!
Just deployed a new mobile app I have been working on to Google Play store. The app is called “Hapi” and it’s an app to discover interesting APIs, available on the Web. It is probably targeted towards developers who work with APIs a lot and interested in finding out what’s available out there.
The app was also an exercise for me to test, experiment and develop using some of the existing frameworks. I will be writing up on this quite soon in detail.
Currently, I’m trying to push this to Apple App Store as well. Let’s hope that its strict guidelines will get this app through!
You can download the Android app here
Today, I unleash my latest project out to the world. APIYo (http://www.apiyo.com) is a tool for API developers, and those who work with APIs a lot (like me!).
I realised that each time I make an API call, I have to deal with very very ugly JSON output. Sure, there are JSON parsers, JSON prettifiers out there, but I wanted something more.
Firstly, I wanted to actually format the JSON output in a way that is far more friendly than the JSON file format itself. APIYo, given JSON output, will select the content and format it for you, so you never have to parse the actual output again.
I also wanted to save the APIs that I have accessed, so I can take a look at them later.
So without further a do, here’s APIYo.