Reverse Engineering UI For Fun And Profit (CocoaConf DC, April 2015)

Slide 1

Slide 1 text

REVERSE ENGINEERING USER INTERFACE FOR FUN AND PROFIT BY ELLEN SHAPIRO COCOACONF D.C. APRIL 2015 @DESIGNATEDNERD | DESIGNATEDNERD.COM | VOKAL.IO | JUSTHUM.COM

Slide 2

Slide 2 text

PREFACE: WHO AM I?

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

WHAT DO I MEAN BY "REVERSE ENGINEER"?

Slide 7

Slide 7 text

WHAT DON'T I MEAN BY "REVERSE ENGINEER"?

Slide 8

Slide 8 text

WHAT DO I MEAN BY "REVERSE ENGINEER"?

Slide 9

Slide 9 text

WHY REVERSE ENGINEER?

Slide 10

Slide 10 text

YOU WANT TO USE IT YOURSELF

Slide 11

Slide 11 text

YOU WANT A BETTER UNDERSTANDING OF HOW A GIVEN CONTROL WORKS

Slide 12

Slide 12 text

YOU WANT A BETTER UNDERSTANDING OF HOW IOS UI WORKS IN GENERAL.

Slide 13

Slide 13 text

WHEN YOU SEE SOMETHING AWESOME IN AN APP

Slide 14

Slide 14 text

YOU SAY: "HEY, THAT LOOKS COOL!"

Slide 15

Slide 15 text

YOU MEAN: "I'M TOTALLY STEALING THAT."

Slide 16

Slide 16 text

THIS TALK IS YOUR GUIDE TO MORE EFFICIENT AND ACCURATE THIEVERY.

Slide 17

Slide 17 text

TWO SITUATIONS I'LL BE COVERING:

Slide 18

Slide 18 text

APPLE MAKES SOMETHING THAT LOOKS COOL BUT DOESN'T GIVE YOU THE TOOLS TO USE IT YOURSELF.

Slide 19

Slide 19 text

ANOTHER DEV MAKES SOMETHING COOL BUT DOESN'T OPEN-SOURCE IT.

Slide 20

Slide 20 text

TOOLS I WILL BE USING ▸ Things that are built into OS X Yosemite ▸ Free Text Editors ▸ My Eyeballs ▸ Built-in LLDB and Xcode debugging techniques. ▸ Facebook Chisel

Slide 21

Slide 21 text

TOOLS I WILL NOT BE USING ▸ Jailbreaking ▸ Reveal ▸ Anything else that costs you money.

Slide 22

Slide 22 text

CASE STUDY #1: DNSSWIPEABLETABLECELL

Slide 23

Slide 23 text

APPLE MADE SOMETHING AWESOME, AND I WANT TO USE IT.

Slide 24

Slide 24 text

BUT APPLE'S SDK SAID TOO BAD SO SAD

Slide 25

Slide 25 text

APPLE INTRODUCED SWIPE-UNDER ACTIONS IN IOS 7.

Slide 26

Slide 26 text

AS A THIRD PARTY DEVELOPER, YOU COULD EASILY USE SWIPE TO DELETE .

Slide 27

Slide 27 text

iOS 7... !

Slide 28

Slide 28 text

iOS 8... !

Slide 29

Slide 29 text

STEP 1: STARE AT YOUR PHONE

Slide 30

Slide 30 text

WHAT LOOKS LIKE THE VIEW HIERARCHY?

Slide 31

Slide 31 text

IS THIS GESTURE A SWIPE OR A PAN?

Slide 32

Slide 32 text

WHAT HAPPENS WHEN YOU CHANGE THE SPEED OF YOUR GESTURE?

Slide 33

Slide 33 text

STEP 2: POKE AT THE VIEW HIERARCHY FROM INSIDE AN APP

Slide 34

Slide 34 text

CREATE A SAMPLE PROJECT USING THE APPLE CONTROL YOU WANT TO USE.

Slide 35

Slide 35 text

USE LOGGING AND TOOLS TO INSPECT THE VIEW HIERARCHY.

Slide 36

Slide 36 text

2A: BUILT-IN TOOLS po [view recursiveDescription] Xcode's View Hierarchy debugger

Slide 37

Slide 37 text

[DEMO: XCODE FUNTIMES]

Slide 38

Slide 38 text

2B: FACEBOOK CHISEL Make things happen when you're paused at a breakpoint without rerunning

Slide 39

Slide 39 text

[DEMO: CHISEL IN ACTION]

Slide 40

Slide 40 text

!: CHISEL IS FINICKY IN SWIFT

Slide 41

Slide 41 text

STEP 3: START BUILDING

Slide 42

Slide 42 text

[DEMO: DNS SWIPEABLE TABLE CELL]

Slide 43

Slide 43 text

SOMEONE ELSE MADE AN AWESOME THING AND I WANT TO USE IT.

Slide 44

Slide 44 text

DID THEY OPEN SOURCE IT? NOPE.

Slide 45

Slide 45 text

CASE STUDY #2: DNSCASTROSEGMENTEDCONTROL

Slide 46

Slide 46 text

WHAT AM I STEALING REVERSE ENGINEERING?

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

ONE MINOR PROBLEM: NON-STOCK CONTROLS CAN'T BE EXAMINED INTERNALLY WITHOUT JAILBREAKING.

Slide 50

Slide 50 text

ONE MINOR PROBLEM: NON-STOCK CONTROLS CAN'T BE EXAMINED INTERNALLY WITHOUT JAILBREAKING.

Slide 51

Slide 51 text

YOU HAVE TO GET A BIT MORE CREATIVE TO FIGURE OUT HOW THINGS WORK.

Slide 52

Slide 52 text

BLAME CREDIT THIS GUY

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

STEP 1: RECORD SOME VIDEO FROM YOUR DEVICE

Slide 55

Slide 55 text

MAVERICKS AND BELOW: IT'LL COST YA Use Reflector ($12.99) or AirServer (14.99) to AirPlay to your Mac

Slide 56

Slide 56 text

YOSEMITE: FREE Record directly from your device with QuickTime

Slide 57

Slide 57 text

[DEMO: RECORDING VIDEO WITH QUICKTIME]

Slide 58

Slide 58 text

STEP 2: OPEN THAT VIDEO WITH QUICKTIME When you hit the info button, you'll get some useful...information!

Slide 59

Slide 59 text

[DEMO: QUICKTIME SCRUBBING]

Slide 60

Slide 60 text

SIDEBAR: EASING

Slide 61

Slide 61 text

UNDERSTANDING EASING MAKES GETTING THE DETAILS OF A CONTROL RIGHT A LOT SIMPLER.

Slide 62

Slide 62 text

EASING IS ABOUT THE CURVE OF THE ANIMATION

Slide 63

Slide 63 text

[DEMO: EASE IN, EASE OUT]

Slide 64

Slide 64 text

STEP 3: OPEN INDIVIDUAL FRAMES IN PREVIEW

Slide 65

Slide 65 text

MEASURE IMAGES PIXEL BY PIXEL

Slide 66

Slide 66 text

ZOOM WAAAAAAAY IN ON YOUR IMAGES

Slide 67

Slide 67 text

[DEMO: PREVIEW MEASURING]

Slide 68

Slide 68 text

STEP 4: START BUILDING AGAIN!

Slide 69

Slide 69 text

[DEMO: DNS CASTRO SEGMENTED CONTROL]

Slide 70

Slide 70 text

PUTTING IT TOGETHER: TIPS FOR BUILDING

Slide 71

Slide 71 text

BUILD YOUR SAMPLE PROJECT IN ISOLATION.

Slide 72

Slide 72 text

KEEP THE FILES FOR THE CONTROL ITSELF IN A SINGLE FOLDER.

Slide 73

Slide 73 text

KEEP DISPLAY LOGIC INDEPENDENT

Slide 74

Slide 74 text

TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST (DID I MENTION TEST?)

Slide 75

Slide 75 text

COMPARE THE FEEL OF YOUR SAMPLE APP TO THE ORIGINAL APP

Slide 76

Slide 76 text

NEXT STEPS: MAKE IT SHAREABLE

Slide 77

Slide 77 text

Create a repo for your sample code.

Slide 78

Slide 78 text

Make a CocoaPod!

Slide 79

Slide 79 text

Submit it to CocoaControls

Slide 80

Slide 80 text

OFFICIAL SUMMARY SLIDE™ ▸ Start your view hierarchy debugging with built-in tools ▸ Use Facebook Chisel to make that even faster ▸ Use video and images to examine 3rd party controls ▸ Rebuild the control in isolation

Slide 81

Slide 81 text

QUESTIONS?

Slide 82

Slide 82 text

STUFF I MENTIONED! ▸ https://github.com/facebook/chisel ▸ http://www.barebones.com/products/textwrangler ▸ http://guides.cocoapods.org/making/making-a-cocoapod.html ▸ http://castro.fm/ ▸ http://petersteinberger.com/blog/2013/how-to-inspect-the-view- hierarchy-of-3rd-party-apps/

Slide 83

Slide 83 text

TEH CODEZ! ▸ https://github.com/designatednerd/DNSSwipeableTableCell ▸ https://github.com/designatednerd/DNSCastroSegmentedControl (both of the above also available via CocoaPods) ▸ https://github.com/designatednerd/EasingExample

Slide 84

Slide 84 text

PLUGS! ▸ http://justhum.com ▸ http://www.mobilemakers.co/ ▸ http://vokalinteractive.com/