Letting your designer tweak your iOS app

55
LET YOUR DESIGNER TWEAK AND DEPLOY YOUR IOS APP TO HIS/HERS HEART CONTENT! ROBERT VAN LOGHEM - @SOUNDBITES

Transcript of Letting your designer tweak your iOS app

Page 1: Letting your designer tweak your iOS app

LET YOUR DESIGNER TWEAK AND DEPLOY YOUR IOS APP TO HIS/HERS HEART CONTENT!

ROBERT VAN LOGHEM - @SOUNDBITES

Page 2: Letting your designer tweak your iOS app

JUST A DEV, DOING IOS SINCE 2010, 26 YEARS OF EXPERIENCE

GOING TO TALK ABOUT

▸ Xcode, Interface Builder, @IBDesignable, @IBInspectable

▸ Paint Code

▸ Git

▸ Fastlane

▸ Continuous Integration, bitrise.io, Travis CI or any CI you like

▸ Crashlytics, iTunesConnect-Testflight, appetize.io

▸ and working with creative people

Page 3: Letting your designer tweak your iOS app

40 MINUTES, FOR 14 THINGS, THIS IS GOING TO BE ONE AMAZING TALK… OR IT’S GONNA SUCK

Page 4: Letting your designer tweak your iOS app

THE BEST APPS ARE CREATED BY EXPERIMENTATION AND CONSTANT TWEAKING

Page 5: Letting your designer tweak your iOS app

MEET MIO, MY DESIGNER

I LOVE DESIGN(ERS)

Page 6: Letting your designer tweak your iOS app

CAN YOU ADJUST THE COLOR A BIT?

MIO

STEP INTO MY OFFICE #1

SURE!

ROBERT

Page 7: Letting your designer tweak your iOS app

CAN YOU CHANGE THE CORNER-RADIUS TO 8?

STEP INTO MY OFFICE #2

MIOSURE!!

ROBERT

Page 8: Letting your designer tweak your iOS app

I’VE GOT SOME NEW ICONS! CAN WE ADD THOSE NOW?

STEP INTO MY OFFICE #3

MIOSURE!!!!!

ROBERT

Page 9: Letting your designer tweak your iOS app

SORRY TO DISTURB YOU…BUT THE ANIMATION COULD BE A LITTLE BIT FASTER

STEP INTO MY OFFICE #4

MIOARGH!

ROBERT

Page 10: Letting your designer tweak your iOS app

I WISH MIO COULD DO IT ALL BY HERSELF AND DIDN’T HAVE TO BOTHER ME…

Robert

Page 11: Letting your designer tweak your iOS app

SO WHAT IF…

Page 12: Letting your designer tweak your iOS app
Page 13: Letting your designer tweak your iOS app
Page 14: Letting your designer tweak your iOS app
Page 15: Letting your designer tweak your iOS app

DEAR VICTIM, WILL YOU BE PART OF MY EXPERIMENT?

EVIL-GENIUS TIME

Page 16: Letting your designer tweak your iOS app

XCODE

STUFF ON THE DESIGN

MACHINE

STUFF NOT ON THE DESIGN

MACHINE

THE WORKFLOW

Page 17: Letting your designer tweak your iOS app

XCODEWHAT TO TWEAK AND CHANGE

Page 18: Letting your designer tweak your iOS app

IMAGES.XCASSETS

no-brainer

Page 19: Letting your designer tweak your iOS app

INTERFACE BUILDER

@IBDESIGNABLE

Page 20: Letting your designer tweak your iOS app

INTERFACE BUILDER AND @IBDESIGNABLE

Page 21: Letting your designer tweak your iOS app

INTERFACE BUILDER AND @IBDESIGNABLE AND @IBINSPECTABLE

Page 22: Letting your designer tweak your iOS app

INTERFACE BUILDER AND @IBDESIGNABLE AND @IBINSPECTABLE

Page 23: Letting your designer tweak your iOS app

PAINT CODE

VECTOR LIKE AWESOMENESS AND STYLES!

Page 24: Letting your designer tweak your iOS app

WHATS THIS RECRUITMENTSTYLEKIT???

Page 25: Letting your designer tweak your iOS app

WHATS THIS RECRUITMENTSTYLEKIT???

Page 26: Letting your designer tweak your iOS app

NOT ONLY COLORS

Page 27: Letting your designer tweak your iOS app

NOT ONLY COLORS

Page 28: Letting your designer tweak your iOS app

RECAP…. DEFAULT VALUES, INSPECTABLE PROPERTIES, VECTOR CORE GRAPHICS

Page 29: Letting your designer tweak your iOS app

SWIFT TYPE SAFETY AND I.B. DON’T ADD UP IMHO…. SO BE PREPARED TO REFACTOR, MOVE, ETC…

NOTED…

ROBERT

Page 30: Letting your designer tweak your iOS app

STUFF ON THE DESIGN MACHINE

OH WE’VE GOT TO MAKE IT A DEV MACHINE….

Page 31: Letting your designer tweak your iOS app

MAKING THE DESIGN MACHINE A DEV MACHINE

GET THE SOFTWARE PT 1, XCODE AND A GIT CLIENT

Page 32: Letting your designer tweak your iOS app

MAKING THE DESIGN MACHINE A DEV MACHINE

ALLOW ACCESS TO GIT/SCM (GITHUB, BITBUCKET, YOUR OWN) AND LET THEM READ AND UNDERSTAND THE README.MD

Page 33: Letting your designer tweak your iOS app

MAKING THE DESIGN MACHINE A DEV MACHINE

PLEASE NOTE THE MORE 3RD PARTY TOOLS YOU ADD THE COMPLEXER THE SETUP… DOWN THE RABBIT HOLE

XCODE

GIT CARTHAGE

COCOA PODS

HOME-BREW FASTLANE

FABRIC.IO

PAINT CODE

becomes more hassledo-able

Page 34: Letting your designer tweak your iOS app

HOW SHOULD I WORK WITH THE CODE AND UPDATES AND CHANGES AND….?

MIO

THE WORKFLOW

I’LL HELP.

ROBERT

Page 35: Letting your designer tweak your iOS app

DEPENDING ON THEIR PROFICIENCY IN GIT/XCODE….

TO START OFF, CREATE A DESIGN BRANCH, AND YOU KEEP THAT IN SYNC WITH DEVELOP (IF YOU’RE DOING GIT FLOW FOR EXAMPLE, OTHERWISE MASTER)

AS EXPERIENCE GROWS, LET THEM CREATE THEIR OWN BRANCHES AND EVEN PULL REQUESTS, BUT DON’T DO THAT FROM THE START!!!

Page 36: Letting your designer tweak your iOS app

SO I SHOULD JUST HIT THE SYNC BUTTON IN GIT?

MIO

THE WORKFLOW, K.I.S.S. !!!

YUP!

ROBERT

Page 37: Letting your designer tweak your iOS app

KEEPING UP TO DATE OTHERWISE…

DESCRIBE IN THE README.MD WHAT TO DO WHEN STUFF BREAKS DOWN…MERGE…OUT-OF-DATE DEPENDENCIES, ETC…

ARGH!

Page 38: Letting your designer tweak your iOS app

A DESIGNER CAN NOW RUN SOMETHING IN THE SIMULATORbut how to get it on multiple devices without the provisioning, upload to xyz hell…

Page 39: Letting your designer tweak your iOS app

STUFF NOT ON THE DESIGN MACHINE

LET’S TRY AND MOVE THE BUILD AND RELEASE ELSEWHERE

Page 40: Letting your designer tweak your iOS app

THE FLOW

GIT

CONTINUOUS INTEGRATION

BUILD TOOL

DELIVERY PLATFORM

DESIGN MACHINE

git push to design

call CI through webhook

runs build tools to build all and deliver it

uploads built .ipa

IOS DEVICEdownloads

newest version

Page 41: Letting your designer tweak your iOS app

THE FLOW

GIT

CONTINUOUS INTEGRATION

BUILD TOOL

DELIVERY PLATFORM

bitbucket, github

bitrise.io, Travis CI,

your Mac mini under the desk

fastlane, or built-in

iTunes Connect,

Crashlytics,

appetize.io

Page 42: Letting your designer tweak your iOS app

TO START OFF….GETTING THIS TO RUN ON YOUR OWN LOCAL DEV MACHINE

BUILD TOOL

DELIVERY PLATFORM

* Fas

tfile

-par

t writ

ten

by J

avi L

orba

da, @

javi

_lor

bada

Page 43: Letting your designer tweak your iOS app

$ FASTLANE BUILDDEBUG

Page 44: Letting your designer tweak your iOS app

TO START OFF….GETTING THIS TO RUN ON YOUR LOCAL DEV MACHINE

BUILD TOOL

DELIVERY PLATFORM

* Fas

tfile

-par

t writ

ten

by J

avi L

orba

da, @

javi

_lor

bada

Page 45: Letting your designer tweak your iOS app

$ FASTLANE BUILDBETA

Page 46: Letting your designer tweak your iOS app

FASTLANE HAS A TON OF TOOLS IT CAN INTEGRATE WITH

Page 47: Letting your designer tweak your iOS app

NEXT UP HOOKING UP FASTLANE TO YOUR CI, REMEMBER WE WANT TO CALL $ FASTLANE BUILDDEBUG

CONTINUOUS INTEGRATION

BUILD TOOL

BITRISE.IO

Page 48: Letting your designer tweak your iOS app

NEXT UP HOOKING UP FASTLANE TO YOUR CI, REMEMBER WE WANT TO CALL $ FASTLANE BUILDDEBUG

CONTINUOUS INTEGRATION

BUILD TOOL

BETA IOS VERSION OR PRODUCTION IOS?

YOU GET A VIRTUAL MACHINE RUNNING

OS X

I ALSO NEED CARTHAGE INSTEAD OF COCOAPODS…

Page 49: Letting your designer tweak your iOS app

NEXT UP HOOKING UP FASTLANE TO YOUR CI, REMEMBER WE WANT TO CALL $ FASTLANE BUILDDEBUG

CONTINUOUS INTEGRATION

BUILD TOOL

CLONE THE REPO

INSTALLS SSH KEYS TO ACCESS GIT REPO

Page 50: Letting your designer tweak your iOS app

NEXT UP HOOKING UP FASTLANE TO YOUR CI, REMEMBER WE WANT TO CALL $ FASTLANE BUILDDEBUG

CONTINUOUS INTEGRATION

BUILD TOOLBUILD IT! AND

DISTRIBUTE IT, USING $ FASTLANE BUILDDEBUG

INSTALLS YOUR APPS CERTIFICATES AND

PROFILES, NEEDED TO SIGN .IPA

Page 51: Letting your designer tweak your iOS app

HOW DO WE GET NOTIFIED THAT A GIT PUSH WAS DONE?

ADD DEPLOY KEY, CREATED BY CI

SERVER, ALLOWS ACCESS

GIT

CONTINUOUS INTEGRATION

Page 52: Letting your designer tweak your iOS app

HOW DO WE GET NOTIFIED THAT A GIT PUSH WAS DONE?

CREATE WEB HOOK THAT TRIGGERS URL

ON C.I. SERVER WHEN SOMETHING CHANGES

GIT

CONTINUOUS INTEGRATION

Page 53: Letting your designer tweak your iOS app

PUTTING IT ALL TOGETHER

GIT

CONTINUOUS INTEGRATION

BUILD TOOL

DELIVERY PLATFORM

DESIGN

DESIGN

Page 54: Letting your designer tweak your iOS app

STUFF ON THE DESIGN

MACHINE

STUFF NOT ON THE DESIGN

MACHINE

XCODE

GIT

CONTINUOUS INTEGRATION

BUILD TOOL

DELIVERY PLATFORM

DESIGN MACHINE

IOS DEVICE(S)

Page 55: Letting your designer tweak your iOS app

LET YOUR DESIGNER TWEAK AND DEPLOY YOUR IOS APP TO HIS/HERS HEART CONTENT!

ROBERT VAN LOGHEM - @SOUNDBITES