Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Let your designer tweak and deploy your app to his/hers heart content!

Let your designer tweak and deploy your app to his/hers heart content!

Building apps is fun, but tweaking the UI can be cumbersome. Designers love to tweak but wouldn't it be nice if they could make changes to the UI and distribute a version of the app for testing? With hosted SCM, build and distribution tools like Github, Carthage/Cocoapods, Fastlane, Crashlytics and hosted Continuous integration server Bitrise it is now possible to let them design and tweak to their hearts content. In this talk I'll explain how to setup fully automated continuous delivery for your app and how not-so-technical people can make changes and deliver the app to Crashlytics, Appetize.io, Testflight and even the Appstore.

By Robert van Loghem Original slides: http://www.slideshare.net/RobertVanLoghem/letting-your-designer-tweak-your-ios-app

Powered by http://xebia.com

do{iOS} conference

November 09, 2015
Tweet

More Decks by do{iOS} conference

Other Decks in Programming

Transcript

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

    View full-size slide

  2. 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

    View full-size slide

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

    View full-size slide

  4. THE BEST APPS
    ARE CREATED BY
    EXPERIMENTATION
    AND CONSTANT
    TWEAKING

    View full-size slide

  5. MEET MIO, MY DESIGNER
    I LOVE DESIGN(ERS)

    View full-size slide

  6. CAN YOU ADJUST THE COLOR
    A BIT?
    MIO
    STEP INTO MY OFFICE #1
    SURE!
    ROBERT

    View full-size slide

  7. CAN YOU CHANGE THE
    CORNER-RADIUS TO 8?
    STEP INTO MY OFFICE #2
    MIO
    SURE!!
    ROBERT

    View full-size slide

  8. I’VE GOT SOME NEW ICONS!
    CAN WE ADD THOSE NOW?
    STEP INTO MY OFFICE #3
    MIO
    SURE!!!!!
    ROBERT

    View full-size slide

  9. SORRY TO DISTURB YOU…
    BUT THE ANIMATION COULD BE
    A LITTLE BIT FASTER
    STEP INTO MY OFFICE #4
    MIO
    ARGH!
    ROBERT

    View full-size slide

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

    View full-size slide

  11. SO WHAT IF…

    View full-size slide

  12. DEAR VICTIM, WILL YOU BE
    PART OF MY EXPERIMENT?
    EVIL-GENIUS TIME

    View full-size slide

  13. XCODE
    STUFF ON THE
    DESIGN
    MACHINE
    STUFF NOT ON
    THE DESIGN
    MACHINE
    THE
    WORKFLOW

    View full-size slide

  14. XCODE
    WHAT TO TWEAK AND CHANGE

    View full-size slide

  15. IMAGES.XCASSETS
    no-brainer

    View full-size slide

  16. INTERFACE
    BUILDER
    @IBDESIGNABLE

    View full-size slide

  17. INTERFACE BUILDER AND @IBDESIGNABLE

    View full-size slide

  18. INTERFACE BUILDER AND @IBDESIGNABLE AND @IBINSPECTABLE

    View full-size slide

  19. INTERFACE BUILDER AND @IBDESIGNABLE AND @IBINSPECTABLE

    View full-size slide

  20. PAINT CODE
    VECTOR LIKE
    AWESOMENESS AND
    STYLES!

    View full-size slide

  21. WHATS THIS RECRUITMENTSTYLEKIT???

    View full-size slide

  22. WHATS THIS RECRUITMENTSTYLEKIT???

    View full-size slide

  23. NOT ONLY COLORS

    View full-size slide

  24. NOT ONLY COLORS

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  27. STUFF ON THE DESIGN
    MACHINE
    OH WE’VE GOT TO MAKE IT A DEV
    MACHINE….

    View full-size slide

  28. MAKING THE DESIGN MACHINE A DEV MACHINE
    GET THE SOFTWARE PT 1, XCODE AND A GIT CLIENT

    View full-size slide

  29. 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

    View full-size slide

  30. 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 hassle
    do-able

    View full-size slide

  31. HOW SHOULD I WORK WITH
    THE CODE AND UPDATES AND
    CHANGES AND….?
    MIO
    THE WORKFLOW
    I’LL HELP.
    ROBERT

    View full-size slide

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

    View full-size slide

  33. SO I SHOULD JUST HIT THE
    SYNC BUTTON IN GIT?
    MIO
    THE WORKFLOW, K.I.S.S. !!!
    YUP!
    ROBERT

    View full-size slide

  34. KEEPING UP TO DATE OTHERWISE…
    DESCRIBE IN THE README.MD WHAT TO DO WHEN
    STUFF BREAKS DOWN…MERGE…OUT-OF-DATE
    DEPENDENCIES, ETC…
    ARGH!

    View full-size slide

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

    View full-size slide

  36. STUFF NOT ON THE DESIGN
    MACHINE
    LET’S TRY AND MOVE THE BUILD AND
    RELEASE ELSEWHERE

    View full-size slide

  37. 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 DEVICE
    downloads
    newest version

    View full-size slide

  38. 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

    View full-size slide

  39. TO START OFF….GETTING THIS TO RUN ON YOUR OWN LOCAL DEV MACHINE
    BUILD TOOL
    DELIVERY
    PLATFORM
    * Fastfile-part written by Javi Lorbada, @javi_lorbada

    View full-size slide

  40. $ FASTLANE
    BUILDDEBUG

    View full-size slide

  41. TO START OFF….GETTING THIS TO RUN ON YOUR LOCAL DEV MACHINE
    BUILD TOOL
    DELIVERY
    PLATFORM
    * Fastfile-part written by Javi Lorbada, @javi_lorbada

    View full-size slide

  42. $ FASTLANE
    BUILDBETA

    View full-size slide

  43. FASTLANE HAS A
    TON OF TOOLS IT
    CAN INTEGRATE
    WITH

    View full-size slide

  44. NEXT UP HOOKING UP FASTLANE TO YOUR CI, REMEMBER WE WANT TO CALL
    $ FASTLANE BUILDDEBUG
    CONTINUOUS
    INTEGRATION
    BUILD TOOL
    BITRISE.IO

    View full-size slide

  45. 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…

    View full-size slide

  46. 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

    View full-size slide

  47. NEXT UP HOOKING UP FASTLANE TO YOUR CI, REMEMBER WE WANT TO CALL
    $ FASTLANE BUILDDEBUG
    CONTINUOUS
    INTEGRATION
    BUILD TOOL
    BUILD IT! AND
    DISTRIBUTE IT, USING
    $ FASTLANE
    BUILDDEBUG
    INSTALLS YOUR APPS
    CERTIFICATES AND
    PROFILES, NEEDED TO
    SIGN .IPA

    View full-size slide

  48. HOW DO WE GET NOTIFIED THAT A GIT PUSH WAS DONE?
    ADD DEPLOY KEY,
    CREATED BY CI
    SERVER, ALLOWS
    ACCESS
    GIT
    CONTINUOUS
    INTEGRATION

    View full-size slide

  49. 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

    View full-size slide

  50. PUTTING IT ALL TOGETHER
    GIT
    CONTINUOUS
    INTEGRATION
    BUILD TOOL
    DELIVERY
    PLATFORM
    DESIGN
    DESIGN

    View full-size slide

  51. STUFF ON THE
    DESIGN
    MACHINE
    STUFF NOT ON
    THE DESIGN
    MACHINE
    XCODE
    GIT
    CONTINUOUS
    INTEGRATION
    BUILD TOOL
    DELIVERY
    PLATFORM
    DESIGN
    MACHINE
    IOS DEVICE(S)

    View full-size slide

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

    View full-size slide