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.

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. About me
John Tubert @jtubert
Group Senior Technical Director, R/GA

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

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

5. Gallery

6. Gallery

7. The app: Design
I am not a designer, so why try to be one?
Design by the talented Amin Torres

8. Sketchio 2.0

9. The app: libraries
● Testflight sdk
● Flurry sdk
● Parse sdk
● Color selector

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

11. The code

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

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. 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. 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. 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. 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. 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. The app: challenges
● Undo/redo, Erase and background color
● Multiline
● App store down!

20. The website for the app

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

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. 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. 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. 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. Email: feedback@sketchioapp.com
url: http://www.sketchioapp.com
Facebook: https://www.facebook.com/sketchioapp
Questions