sketchioapp.comBuilding a drawing mobile app using parseSketchio 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 @jtubertGroup 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: backendI used parse for the backend, so no databases were created or servers were setup.

The code

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

Parse: Facebook loginhttps://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 sketchhttps://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 lineshttps://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 - loginhttps://gist.github.com/jtubert/6759029

Parse.initialize(KEY, SECRET); window.fbAsyncInit = function() { // init the FB JS SDK

Parse.FacebookUtils.init({ appId : '1386686244890246', // App ID from the app dashboard

channelUrl : 'channel.html', // Channel file for x-domain comms status : false, // check login status cookie : true, // enable cookies to allow Parse to access the session xfbml : true // parse XFBML }); }; ….

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 sketcheshttps://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 don’t have many different devices/computers/systems.

Hello Browserstack!

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

Email: feedback@sketchioapp.comurl: http://www.sketchioapp.comFacebook: https://www.facebook.com/sketchioapp

Questions