Tag: JSON

Categories
Development website

Sea Isle City Website and Mobile Apps

Sea Isle CityJust wrapping up some work for Sea Isle City on a new website and some mobile apps as well. The website is www.visitsicnj.com and the mobile apps are available for iOS and Android.

This was a rather large project, and working with the folks at 7 Mile Times was a pleasure yet again. They are extremely organized and great to work worth.

Kim provided an excellent design to build upon and Patty was fantastic is organizing content and keeping things rolling along. It was pretty great.

We built the site on a very stable CMS that made it very easy for the admins to manage the site. Training them literally took minutes if that, given the simplicity of the CMS.

The calendar presented some interesting issues. They wanted the events grouped into months, and working with dates/events can always be a challenge. After much trial an error a solution was found, and it didn’t require much overhead at all to execute.

This is not the first website I have worked on with these folks, so we’ve got a bit of a formula down and it really showed.

A mobile app for both the iOS and Android platforms was to be developed as well. Given the nature of the apps, we decided to build on the PhoneGap/Cordova platform and them create builds for each respective platform from that.

Mobile development is still a bit of an adventure for me, but this one did go a lot smoother than my last. Just having more hours under my mobile app development belt as well as improved libraries/info on hand really helped out.

We are pulling info from the website view web services we created, and the mobile app is consuming those JSON feeds to populate the app. It really is pretty amazing  one everything is setup and producing and consuming the web services. Pretty amazing, slick, and efficient.

While we of course hit some bumps and hurdles along the way, I’m glad to say we did meet our deadline and on budget! Not bad for such a large and complex project!

Still have some minor loose ends to wrap up, but all in all this was a very exciting and rewarding project to work on! I’ve learned much and we’ve put out a very solid product(s). The clients are extremely happy and have been the utmost pleasure to work with.

Categories
Development

Using YUI Get Utility to consume Flickr API

I wanted to pull photos from a Flickr account onto a site. The Flickr API is awesome and there’s a ton of libraries out there for using it. Unfortunately, cURL isn’t currently installed on the server, so the PHP libraries won’t work for this case.

So I figured I’d give the YUI Get Utility a try. The Get Utility provides a mechanism for attaching script and css resources – including cross-domain resources – to the DOM after the page has loaded. And this has worked really well.

Here’s what I did:

  1. Included the following YUI scripts: 
    <script src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js" type="text/javascript"><!--mce:0--></script>
<script src="http://yui.yahooapis.com/2.6.0/build/get/get-min.js" type="text/javascript"><!--mce:1--></script>
  2. Then fetch the Flickr feed in JSON format using the Get Utility.var 
    objTransaction = YAHOO.util.Get.script(<url goes here>);

    Be sure that the Flickr REST call is set to output to JSON so that the Get Utility can consume it properly.  Append &format=json

  3. Then write a function to act on the JSON response from Flickr.  Here’s an example of taking the JSON response and outputting thumbnails of photos with links to the larger view: 
    function jsonFlickrApi(rsp){ 
 
    if (rsp.stat != "ok"){
 
     alert('no data returned');
 
     return;
 
    }
 
    for (var i=0; i<rsp.photoset.photo.length; i++){
 
		var photo = rsp.photoset.photo[i];
 
		var container = document.getElementById('container');
		var photosList = container.getElementsByTagName('ul');
 
		// create elements
		var photoItem = document.createElement('li');
 
		var photoAnchor = document.createElement('a');
		var photoImg = document.createElement('img');
 
		// set attributes
		photoAnchor.setAttribute('href', 'http://farm'+photo.farm+'.static.flickr.com/'+photo.server+'/'+photo.id+'_'+photo.secret+'_b.jpg');
		photoImg.setAttribute('src', 'http://farm'+photo.farm+'.static.flickr.com/'+photo.server+'/'+photo.id+'_'+photo.secret+'_s.jpg');
		photoImg.setAttribute('width', '75');
		photoImg.setAttribute('height', '75');
		photoImg.setAttribute('alt', photo.title);
 
		// append to DOM
		photoAnchor.appendChild(photoImg);
		photoItem.appendChild(photoAnchor);
 
		photosList[0].appendChild(photoItem); 
 
		}
 
    }
 
    var objTransaction = YAHOO.util.Get.script("http://api.flickr.com/services/rest/?method=flickr.photosets.getPhotos&api_key=<insert_your_api_key>&photoset_id=72157594235977414+&format=json&per_page=60");

View an example