sketchioapp.

com
Building a drawing mobile app using parse Sketchio is a fun and easy way to quickly make drawings and share them with friends on Facebook, Twitter, Instagram or via email.

About me
John Tubert @jtubert Group Senior Technical Director, R/GA

Agenda
The app Demo Gallery Design Sketchio 2.0 Libraries Code Backend Challenges Website for app Responsive Code Testing

http://www.youtube.com/watch?v=Y7pO9K_7NI8

Gallery

Gallery

The app: Design

I am not a designer, so why try to be one?

Design by the talented Amin Torres

Sketchio 2.0

The app: libraries

Testflight sdk Flurry sdk Parse sdk Color selector

The app: backend

I used parse for the backend, so no databases were created or servers were setup.

The code

Parse: Facebook login

https://gist.github.com/jtubert/6731509 - (IBAction)loginButtonTouchHandler:(id)sender{ NSArray *permissionsArray = @[@"user_about_me"];

Parse: Facebook login

https://gist.github.com/jtubert/6731509 - (IBAction)loginButtonTouchHandler:(id)sender{ NSArray *permissionsArray = @[@"user_about_me"]; [PFFacebookUtils logInWithPermissions:permissionsArray block:^(PFUser *user, NSError *error) { if (!user) { if (!error) { NSLog(@"Uh oh. The user cancelled the Facebook login."); } else { NSLog(@"Uh oh. An error occurred: %@", error); } } else if (user.isNew) { [self start]; } else { [self start]; } }]; }

Parse: Save sketch

https://gist.github.com/jtubert/6731589 - (void)saveSketch:(UIImage *)aSketch { NSData *imageData = UIImageJPEGRepresentation(aSketch, 0.8f); PFFile* photoFile = [PFFile fileWithData:imageData]; [photoFile saveInBackgroundWithBlock:^(BOOL succeeded, NSError *error) { if (succeeded) { //NSLog(@"Sketch uploaded successfully"); } }];

Parse: Save sketch (continue)

// create a photo object PFObject *photo = [PFObject objectWithClassName:@Photo]; [photo setObject:[PFUser currentUser] forKey:@user]; [photo setObject:photoFile forKey:@image]; // photos are public, but may only be modified by the user who uploaded them PFACL *photoACL = [PFACL ACLWithUser:[PFUser currentUser]]; [photoACL setPublicReadAccess:YES]; photo.ACL = photoACL; [photo saveInBackground]; }

Parse: Get sketches

https://gist.github.com/jtubert/6743534 PFQuery *queryPhoto = [PFQuery queryWithClassName:@"Photo"]; [queryPhoto whereKey:@user equalTo:[PFUser currentUser]]; [queryPhoto orderByDescending:@"createdAt"]; [queryPhoto findObjectsInBackgroundWithBlock:^(NSArray *objects, NSError *error) { //handle sketches }

Mirror lines
https://gist.github.com/jtubert/6745160 -(void) mirroringX1:(float)x1 y1:(float)y1 x2:(float)x2 y2:(float)y2{ float deltaAngle = 360 / totalLines; float deltaAngleRadian = [self degreesToRadian:deltaAngle]; float centerX = self.frame.size.width / 2; float centerY = self.frame.size.height / 2; float distance1 = [self distX1:x1 y1:y1 x2:centerX y2:centerY]; float distance2 = [self distX1:x2 y1:y2 x2:centerX y2:centerY]; float deltaY1 = y1-centerY; float deltaX1 = x1-centerX; float deltaY2 = y2-centerY; float deltaX2 = x2-centerX;

Mirror lines (continue)

float angle1 = atan2(deltaY1, deltaX1); float angle2 = atan2(deltaY2, deltaX2); for(int i = 0; i < totalLines;i++){ float newX1 = centerX + distance1 * sin(angle1 + (i * deltaAngleRadian)); float newY1 = centerY - distance1 * cos(angle1 + (i * deltaAngleRadian)); float newX2 = centerX + distance2 * sin(angle2 + (i * deltaAngleRadian)); float newY2 = centerY - distance2 * cos(angle2 + (i * deltaAngleRadian)); [self lineX1:newX1 y1:newY1 x2:newX2 y2:newY2]; } }

The app: challenges

Undo/redo, Erase and background color Multiline App store down!

The website for the app

Website: Responsive
Using webflow.com to easily create a responsive site...

Website - login
https://gist.github.com/jtubert/6759029

Parse.initialize(KEY, SECRET); window.fbAsyncInit = function() { // init the FB JS SDK Parse.FacebookUtils.init({ appId status cookie xfbml }); }; . : '1386686244890246', : false, // check login status : true, // enable cookies to allow Parse to access the session : true // parse XFBML // App ID from the app dashboard channelUrl : 'channel.html', // Channel file for x-domain comms

Website - login (continue)

$('#signin').click(function (e) { Parse.FacebookUtils.logIn(null, { success: function (user) { console.log("login successful); }, error: function (user, error) { console.log("Oops, something went wrong."); } });

Website - get sketches

https://gist.github.com/jtubert/6747749 Parse.initialize(KEY, SECRET); var Photo = Parse.Object.extend("Photo"); var query = new Parse.Query(Photo); query.equalTo("user", Parse.User.current()); query.descending("createdAt"); query.find({ success: function(photosArr) { //show images }, error: function(object, error) { //console.log(error); } });

Website: Testing
This is a personal projects, and I dont have many different devices/computers/systems. Hello Browserstack!

http://www.browserstack.com/screenshots/471a15bfb6a36a4581d812e2c157fbad0d1c8c38

Questions
Email: feedback@sketchioapp.com url: http://www.sketchioapp.com Facebook: https://www.facebook.com/sketchioapp