01 4 / 2014

Using SDWebImage with Images on Amazon S3: A Brief Tutorial from MAZ

For those who don’t know how to read and write code, the “backend” of an app often goes unnoticed when using your phone or computer. But everything that you, as an end user, consider to work well comes from what you don’t see: the code.

For those who do know about code, the below script will make a lot of sense! Let’s begin with two terms I’d like to discuss, relating to how an iPhone app user views images that are sourced from the web.

SDWebImage: A handy iOS library, which scours the internet to download, cache and display web-sourced images.

Amazon S3 ServerAn encrypted cloud storage service provided by Amazon for storing images.

You may use or have heard about MAZ’s new mobile browser Stream Web (available free for iOS here), for which I am a developer. The whole concept behind Stream Web requires images to be stored and recalled instantaneously. I was introduced to SDWebImage when we began work on Stream, the flagship feature behind Stream Web and our app publishing platform.

I noticed that using S3 with SDWebImage could be pretty powerful for developers, but also realized that some developers might not be able to figure out how to use them together since SDWebImage does not support S3 validation (at least not yet!). Delving into the SDWebImage source to code around this issue would not be too helpful, because if a new version of SDWebImage were to be released, the developer would have to redo everything. Instead, a better approach (provided here) would be to keep SDWebImage untouched, and to intercept all its download requests and handle the S3 server downloads via the Amazon S3 SDK.

If you’d like to see what I mean, try the following:

1) Set up SDWebImage and Amazon's S3 SDKs (with credentials)

// File: AmazonClientManager.m

+ (void)validateCredentials

{

    // …

    s3 = [[AmazonS3Client alloc] initWithAccessKey:<YOUR ACCESS KEY> withSecretKey:<YOUR SECRET KEY>];

    // …

}

2) Subclass NSURL Protocol

// File: S3URLProtocol.h

@interface S3URLProtocol : NSURLProtocol

@end

// File: S3URLProtocol.m

#import "S3URLProtocol.h"

#import "AmazonClientManager.h"

#define kS3BucketName <YOUR BUCKET NAME>

@interface S3URLProtocol() <AmazonServiceRequestDelegate>

@property (strong, nonatomic) S3GetObjectRequest *getRequest;

@end

@implementation S3URLProtocol

// All registered protocols are asked if they can handle the request

+ (BOOL)canInitWithRequest:(NSURLRequest *)request

{

    // If the host is not Amazon S3 Server return ‘NO’ to indicate default handling

    if(![request.URL.host isEqualToString:[kS3BucketName stringByAppendingString:@".s3.amazonaws.com"]])

        return NO;

    

    // Yes we can handle it! Go ‘startLoading’!

    return YES;

}

// Required method

+ (NSURLRequest *)canonicalRequestForRequest:(NSURLRequest *)request

{

    return request;

}

- (void)startLoading

{

    // Extract the key from the request

    NSString *key = self.request.URL.path;

    key = [key substringFromIndex:1];

    

    // Create a ‘S3GetObjectRequest’ with your bucket and the extracted key

    self.getRequest = [[S3GetObjectRequest alloc] initWithKey:key withBucket:kS3BucketName];

    

    // Set delegate to ourselves to handle various callbacks.

    self.getRequest.delegate = self;

    

    // And fire the download. The ‘AmazonClientManager’ will handle the ‘Authentication’ for us.

    [[AmazonClientManager s3] getObject:self.getRequest];

}

- (void)stopLoading

{

    // If someone cancels this, cancel the ‘S3GetObjectRequest’ in turn.

    [self.getRequest cancel];

    self.getRequest = nil;

}

// The ‘AmazonServiceRequestDelegate’ callbacks

- (void)request:(AmazonServiceRequest *)request didReceiveResponse:(NSURLResponse *)response

{

    // We received a response, pass it on to the client (SDWebImage).

    [self.client URLProtocol:self didReceiveResponse:response cacheStoragePolicy:NSURLCacheStorageAllowed];

}

- (void)request:(AmazonServiceRequest*)request didReceiveData:(NSData*)data

{

    // We received some data, pass it on to the client (SDWebImage).

    [self.client URLProtocol:self didLoadData:data];

}

- (void)request:(AmazonServiceRequest *)request didCompleteWithResponse:(AmazonServiceResponse *)response

{

    // Download complete! Notify client (SDWebImage) and cleanup.

    [self.client URLProtocolDidFinishLoading:self];

    self.getRequest = nil;

}

- (void)request:(AmazonServiceRequest *)request didFailWithError:(NSError *)error

{

    // Some error encountered! Notify client (SDWebImage) and cleanup.

    [self.client URLProtocol:self didFailWithError:error];

    self.getRequest = nil;

}

@end

3) Finally, hook up our shiny new "S3URLProtocol" by adding (just once!) this line to your initialization code:

[NSURLProtocol registerClass:[S3URLProtocol class]];

Now simply use the SDWebImage’s categories e.g. [imageView setImageWithURL:

<IMAGE FILE URL> …]; the host of <IMAGE FILE URL> should be equal to "<YOUR BUCKET NAME>.s3.amazonaws.com ".

Now you can use the power of the Amazon S3 cloud servers with SDWebImage in your own apps! How neat is that?

Hemant Dabral is an iOS and Android Developer in MAZ's Noida, India office. Check him out on Twitter!

27 3 / 2014

Click the image above to read the story of how Paul Canetti, CEO and Founder of MAZ, spent the past five years of his life and what led him to create a mobile browser, Stream Web. 

Click the image above to read the story of how Paul Canetti, CEO and Founder of MAZ, spent the past five years of his life and what led him to create a mobile browser, Stream Web

19 3 / 2014

Stream Web: A Mobile Browser for a Mobile World

Here at MAZ, we have helped some amazing media brands across the globe to launch hundreds of apps using our publishing platform. And today, for the very first time, we are putting ourselves in their shoes — by launching an app of our own.

We are proud to announce the release of Stream Web, a social, gesture-based web browser for iOS.

How is it that a publishing platform company came to make a web browser? Well, for starters, we see ourselves as much more than a publishing platform. MAZ’s mission has always been to connect people with content. What we learned pretty fast is that on digital devices, people don’t only want to receive content; they also want to participate in it.

That’s why we created Stream, a social layer that lives on top of every MAZ-powered app, allowing the user to “cut out” anything they see on their screen and share or save it instantly. Stream also provides a running visual archive of everything they’ve ever shared or saved.

It works like this:

image

Compare that to how we traditionally share on the web: boring text URLs, copied and pasted. In fact, that’s the same way we’ve been sharing content for the entire 25-year history of the web. Copy and paste into an email, copy and paste onto Twitter, and so on.

With Stream Web, we are bringing the power and beauty of Stream to — you guessed it — the entire web. Instead of sharing URLs, you can now share clips of actual content. And each clip, whether it be an image, text, or both, serves as a link back to the original source. So you are still sharing a link, but it’s a visual one instead of the same old ugly text. Then you can visit your Stream at any time to see a real-time feed of everything you’ve ever shared or saved.

Switching your web browser to Stream Web on your iPhone and iPad will make you feel like you are using the real mobile web for the first time, not just a scaled down version of a desktop browser.

Check out some of the neat features we’ve cooked up below, and of course, go download Stream Web for free right now to see it for yourself!

image

image

image

image

image

image

12 3 / 2014

Run, Bison, run! 5 ways Spotlight Media publishes and promotes ‘Bison Illustrated,’ a killer digital magazine

Spotlight Media publishes Bison Illustrated, the official magazine for the Bison Athletics teams at North Dakota State University.  They’ve taken a valuable lesson from the varsity football team, who recently won their third straight FCS title in January: don’t walk when you can run! As Mike Dragosavich, Founder of Spotlight Media Publishing puts it, “We produced a full functioning app on the app stores within no time. It’s an efficient process, period.”

Incorporating the MAZ publishing platform into their media strategy, Bison Illustrated has entered the app market with an engaging and truly cross-platform product line. And they’ve done it all without adding any additional staff or resources. 

Take a page from their playbook, and learn how to make your app just as competitive as theirs:

1.  In-App Navigation and Custom Help Pages

Spotlight Media craftily included custom help pages into their issues. They quickly familiarize the reader with the navigation and media icons they should look out for, the designated areas to visit, and a “visual” table of contents leading to coach and athlete interviews, team schedules, and game summaries.

image

2.  Featured Video Content

Based on an engagement study that MAZ conducted recently, pages that have a video button are four times more likely to be tapped. Bison Illustrated has video all over it.  And once tapped, the metric for time spent in-page sky rockets.  

image

3.  Custom Landing Page for Promotion

In addition to promoting the Bison Illustrated app through their own properties (website, print, and social), they actually made an exclusive landing page just for the app. And it’s awesome.

image

4.  Advertising: Interactive and Social Ads

Spotlight extends the digital canvas to their advertisers as well.  Check out this in-app advertisement for Pratek Philippe watches, which includes a play button for a video ad, a web button to take the reader to Pratek’s online destination (without ever leaving the app), and MAZ’s patent-pending Stream technology, which allows the user to “cut out” and share anything they see to their favorite social media site, their friend’s inbox, or even via a text message.

image

5.  E-Commerce

On a tablet or smartphone, anything can be made purchasable. For example, Spotlight has integrated One Herd, their clothing line for Bison sports fans.  Users can browse the inventory, tap to learn more, share, and purchase — all in the app!

image

Don’t just take my word for it, though — download the free Bison Illustrated app on iTunes or Google Play, and see for yourself. And check out MAZ Publishing if you’re curious how we can help you create and optimize your app, too!

Mike Ram is a Business Development Manager in New York. Find him on LinkedIn.

04 3 / 2014

New York’s tech & startup culture has officially arrived! We’re just getting started. 

13 2 / 2014

Sneak Peek: Stream Web

MAZ has spent the last three years helping other companies create apps.

For the first time, we have created an app to call our very own– a mobile web browser called Stream Web.

image

Within the hundreds of apps created with MAZ, we saw that many people use Stream to share and save content from the web. Which got us thinking… what if you could use Stream to share and save from any website?

To get a sneak peek at Stream Web visit streamapp.co and sign up to be one of the first to get it when it becomes available (for free!) this spring.

10 1 / 2014

MAZ partner FOUR hailed UK’s Best Food Magazine

Congratulations are in order: MAZ partner FOUR just won Gourmand World Cookbooks Awards’ Best UK Food Magazine for 2013! We are proud to power the app for such a superlative publication and team. Read FOUR’s news post here, and check out their app here. Treat yourself!

image

03 1 / 2014

Infographic: Entertainment Content = More Engagement

Happy New Year!

To start the year off right, we cooked up an infographic with some recent findings based on over a million user sessions across various MAZ apps.

Turns out that entertainment content is leading the pack when it comes to engagement with the average reader spending 38 minutes in each issue!

Check out the full press release for more useful stats.

image

More exciting announcements coming soon!

-The MAZ Team

17 12 / 2013

Being A Web Engineer at MAZ India

I’ve been working at MAZ’s Noida, India office for almost a year. I’m a web engineer, focused on Ruby on Rails, and I’d like to share what it is like to work at MAZ. Prior to joining the office, I had worked at a much bigger company, and switching to MAZ was important to me; while the startup culture demands a lot of effort, it comes with many rewards.

image

From the first impression, I was excited to join the company. Unlike at big companies, I was immediately able to interact with the founders, be involved with plans for the future, and work together with everyone in the office towards shared goals. The MAZ culture is very straightforward, and there are no bad surprises amongst the team.

I felt welcome from the very first day. We have lunch together, we share jokes, and discuss not only work but also politics, sports and family. What some people don’t know about product development is how crucial every detail is. The type of team I work with needs to have trust in order to get the job done, and I am lucky to work with a team full of ex-Apple, ex-Adobe, and self-starters. We all learn from each other.

The way India works is that we can come and go from the office at any time, as long as we have our responsibilities in order. We have meetings every other day, and every two weeks with the New York office. Though it can be hard with the 10.5 hour time difference, we are constantly communicating and sharing feedback with the entire team.

To me, it is unique that our offices are full of people who are so passionate, not only about our line of work, but with many things — we have a singer, a spear fisherman, a motorcyclist, and more.  We are able to spend time together outside of the office, celebrate our achievements, play games, eat potluck meals, and always work hard.

MAZ is a place of constant change, and I am excited and happy to be a part of it.

Abhas Goyal is a Senior Product Developer for Ruby on Rails in Noida, India.

12 12 / 2013

Looking Back, Looking Forward: Apple’s Knowledge Navigator

Before there was Siri, before the iPad, before FaceTime, even before WiFi — there was Knowledge Navigator.

 

26 years ago, John Sculley - then CEO of Apple - thus envisioned the future of computer design and user interface. I don’t recall seeing this in 1987, but I’m sure I would have thought it was science fiction, just like Star Wars or E.T. Today, that very fiction is the norm. The advent of smart mobile devices have brought us exactly what was prophesied by Knowledge Navigator. Like the professor in the video above,I use a virtual butler, Siri, to get weather updates.  I use FaceTime to have a visual conference with friends. To get digital content and news, I turn to my iPad. And like the professor, as it happens, Apple is the brand with which I interface.

However far-fetched it seemed at the time, Knowledge Navigator helped its audience to reimagine what technology could be. I’m without doubt that tech will evolve at an even more incredible pace in the next quarter century. How it will impact the way we communicate with each other, and how we consume content, remains open to debate.

Kamahnie Buckle manages business development at MAZ. You can find him tweeting @KamahnieB.