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

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