Post on 10-May-2015
description
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