Letting your designer tweak your iOS app

Post on 13-Jan-2017

314 views 0 download

Transcript of 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

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

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

THE BEST APPS ARE CREATED BY EXPERIMENTATION AND CONSTANT TWEAKING

MEET MIO, MY DESIGNER

I LOVE DESIGN(ERS)

CAN YOU ADJUST THE COLOR A BIT?

MIO

STEP INTO MY OFFICE #1

SURE!

ROBERT

CAN YOU CHANGE THE CORNER-RADIUS TO 8?

STEP INTO MY OFFICE #2

MIOSURE!!

ROBERT

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

STEP INTO MY OFFICE #3

MIOSURE!!!!!

ROBERT

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

STEP INTO MY OFFICE #4

MIOARGH!

ROBERT

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

Robert

SO WHAT IF…

DEAR VICTIM, WILL YOU BE PART OF MY EXPERIMENT?

EVIL-GENIUS TIME

XCODE

STUFF ON THE DESIGN

MACHINE

STUFF NOT ON THE DESIGN

MACHINE

THE WORKFLOW

XCODEWHAT TO TWEAK AND CHANGE

IMAGES.XCASSETS

no-brainer

INTERFACE BUILDER

@IBDESIGNABLE

INTERFACE BUILDER AND @IBDESIGNABLE

INTERFACE BUILDER AND @IBDESIGNABLE AND @IBINSPECTABLE

INTERFACE BUILDER AND @IBDESIGNABLE AND @IBINSPECTABLE

PAINT CODE

VECTOR LIKE AWESOMENESS AND STYLES!

WHATS THIS RECRUITMENTSTYLEKIT???

WHATS THIS RECRUITMENTSTYLEKIT???

NOT ONLY COLORS

NOT ONLY COLORS

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

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

NOTED…

ROBERT

STUFF ON THE DESIGN MACHINE

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

MAKING THE DESIGN MACHINE A DEV MACHINE

GET THE SOFTWARE PT 1, XCODE AND A GIT CLIENT

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

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

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

MIO

THE WORKFLOW

I’LL HELP.

ROBERT

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!!!

SO I SHOULD JUST HIT THE SYNC BUTTON IN GIT?

MIO

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

YUP!

ROBERT

KEEPING UP TO DATE OTHERWISE…

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

ARGH!

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

STUFF NOT ON THE DESIGN MACHINE

LET’S TRY AND MOVE THE BUILD AND RELEASE ELSEWHERE

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

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

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

$ FASTLANE BUILDDEBUG

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

$ FASTLANE BUILDBETA

FASTLANE HAS A TON OF TOOLS IT CAN INTEGRATE WITH

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

CONTINUOUS INTEGRATION

BUILD TOOL

BITRISE.IO

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…

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

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

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

ADD DEPLOY KEY, CREATED BY CI

SERVER, ALLOWS ACCESS

GIT

CONTINUOUS INTEGRATION

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

PUTTING IT ALL TOGETHER

GIT

CONTINUOUS INTEGRATION

BUILD TOOL

DELIVERY PLATFORM

DESIGN

DESIGN

STUFF ON THE DESIGN

MACHINE

STUFF NOT ON THE DESIGN

MACHINE

XCODE

GIT

CONTINUOUS INTEGRATION

BUILD TOOL

DELIVERY PLATFORM

DESIGN MACHINE

IOS DEVICE(S)

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

ROBERT VAN LOGHEM - @SOUNDBITES