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

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  11. SO WHAT IF…

    View Slide

  12. View Slide

  13. View Slide

  14. View Slide

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

    View Slide

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

    View Slide

  17. XCODE
    WHAT TO TWEAK AND CHANGE

    View Slide

  18. IMAGES.XCASSETS
    no-brainer

    View Slide

  19. INTERFACE
    BUILDER
    @IBDESIGNABLE

    View Slide

  20. INTERFACE BUILDER AND @IBDESIGNABLE

    View Slide

  21. INTERFACE BUILDER AND @IBDESIGNABLE AND @IBINSPECTABLE

    View Slide

  22. INTERFACE BUILDER AND @IBDESIGNABLE AND @IBINSPECTABLE

    View Slide

  23. PAINT CODE
    VECTOR LIKE
    AWESOMENESS AND
    STYLES!

    View Slide

  24. WHATS THIS RECRUITMENTSTYLEKIT???

    View Slide

  25. WHATS THIS RECRUITMENTSTYLEKIT???

    View Slide

  26. NOT ONLY COLORS

    View Slide

  27. NOT ONLY COLORS

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

  33. 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 Slide

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

    View Slide

  35. 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 Slide

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

    View Slide

  37. 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 Slide

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

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

    View Slide

  40. 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 Slide

  41. 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 Slide

  42. 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 Slide

  43. $ FASTLANE
    BUILDDEBUG

    View Slide

  44. 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 Slide

  45. $ FASTLANE
    BUILDBETA

    View Slide

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

    View Slide

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

    View Slide

  48. 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 Slide

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

  50. 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 Slide

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

    View Slide

  52. 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 Slide

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

    View Slide

  54. 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 Slide

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

    View Slide