Sketchio presentation at Parse Developer meetup

591 views

Published on

This is what I presented on the first Parse Developer meetup in NYC on October 2nd, 2013.

Sketchio is a fun, free and easy way to quickly make drawings and share with your friends on Facebook, Twitter, Instagram and via email.

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
591
On SlideShare
0
From Embeds
0
Number of Embeds
31
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Sketchio presentation at Parse Developer meetup

  1. 1. 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.
  2. 2. About me John Tubert @jtubert Group Senior Technical Director, R/GA
  3. 3. Agenda ● The app ○ Demo ○ Gallery ○ Design ○ Sketchio 2.0 ○ Libraries ○ Code ○ Backend ○ Challenges ● Website for app ○ Responsive ○ Code ○ Testing
  4. 4. http://www.youtube.com/watch?v=Y7pO9K_7NI8
  5. 5. Gallery
  6. 6. Gallery
  7. 7. The app: Design I am not a designer, so why try to be one? Design by the talented Amin Torres
  8. 8. Sketchio 2.0
  9. 9. The app: libraries ● Testflight sdk ● Flurry sdk ● Parse sdk ● Color selector
  10. 10. The app: backend I used parse for the backend, so no databases were created or servers were setup.
  11. 11. The code
  12. 12. Parse: Facebook login https://gist.github.com/jtubert/6731509 - (IBAction)loginButtonTouchHandler:(id)sender{ NSArray *permissionsArray = @[@"user_about_me"];
  13. 13. 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]; } }]; }
  14. 14. 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"); } }];
  15. 15. 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]; }
  16. 16. 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 }
  17. 17. 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;
  18. 18. 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]; } }
  19. 19. The app: challenges ● Undo/redo, Erase and background color ● Multiline ● App store down!
  20. 20. The website for the app
  21. 21. Website: Responsive Using webflow.com to easily create a responsive site...
  22. 22. Website - login https://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 }); }; ….
  23. 23. 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."); } });
  24. 24. 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); } });
  25. 25. 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
  26. 26. Email: feedback@sketchioapp.com url: http://www.sketchioapp.com Facebook: https://www.facebook.com/sketchioapp Questions

×