Xcode: increment build number per configuration

In your current Xcode project, you might have different configurations and certain configurations might have different product bundle identifier, say you have a product id for staging, another for production, and another for development.

When you push your build for TestFlight for instance you have to update the build number or the version, if you have another app for staging say com.myapp.com.staging and you use agvtool or fastlane action increment_build_number which uses agvtool , the new number will be set for the whole configurations and you will find that your staging or production builds in TestFlight have no clear convention.

we can use this script as a fastlane lane .

desc("increase the current_project_version config based on configuration")
    lane :increase_build do |option|
        
        fastlane_require 'Xcodeproj'
        
        project = "../#{urProjectName.xcodeproj}"
        target = <#targetName#>
        buildConfiguration = <#release_configuration_name#> 
        CUSTOM_BUILD_NUMBER = ''
        
        project = Xcodeproj::Project.open(project)
        project.targets.each do |mtarget|
            if mtarget.name == target
                mtarget.build_configurations.each do |mbuild|
                    if mbuild.name == buildConfiguration
                        CUSTOM_BUILD_NUMBER = mbuild.build_settings['CURRENT_PROJECT_VERSION']
                        mbuild.build_settings['CURRENT_PROJECT_VERSION'] = CUSTOM_BUILD_NUMBER.to_i + 1
                    end
                end
            end
        end
        project.save()
    end

to get the build number for configuration you may use almost the same script like this

lane :get_build_number_for_configuraiton do |option|
        fastlane_require 'Xcodeproj'
        
        project = "../#{urProjectName.xcodeproj}"
        target = <#targetName#>
        buildConfiguration = <#release_configuration_name#> 
        CUSTOM_BUILD_NUMBER = ''

        project = Xcodeproj::Project.open(project)
        project.targets.each do |mtarget|
            if mtarget.name == target
                mtarget.build_configurations.each do |mbuild|
                    if mbuild.name == buildConfiguration
                        CUSTOM_BUILD_NUMBER = mbuild.build_settings['CURRENT_PROJECT_VERSION']
                    end
                end
            end
        end
        CUSTOM_BUILD_NUMBER
    end

In the info.plist file you need to set the value $(CURRENT_PROJECT_VERSION) for the key Bundle version

Versioning system in build settings should be set to Apple generic.

And make sure in the General tap the build number has a value so Xcode does not complain.

it can use some refactoring , but that should do it.

Enjoy.

Xcode configuration Part 1

In a non-trivial application, you probably have more than just a single environment for your project and you would find it difficult to manage the many environments and configurations manually in the code.
In this post we will tackle this issue using Xcode configuration files, and we will see how we can switch between configurations without manually modifying our codebase.

Use Case

You have an app that has different environments namely local, staging, and production. Each environment requires different configuration; the endpoints are different, the product app is different, as you want to have different app for each environment where each app has different app icon and name for example. Another ability you want, is that on staging / local builds you want to be able to use some debugging tools like Inspector or capturing network calls but not on App Store version for instance.

Setting up

  1. Go to your beloved IDE Xcode :). Create a new project or open an existent project. Since in the end we won’t to test our release App(s) you should have a valid App id (creating app ids and profiles is handled automatically by Xcode these days), so you should have access to an apple account with sufficient permissions to create certificates…
  2. Create a folder called Configurations to make it easier to spot your configuration files, in the configurations folder lets create configuration files by clicking right click and selecting new file which will open a window to select the type of the file, in the search box type config and you will see a file with Configuration Settings File, select it and click next , now name it something like Staging-Debug, keep doing this and create Staging-Release, Production-Debug, and Production-Release. “You can have as many configurations as you wish , we will stick with 4 , for this tutorial”.
  3. We will be having 2 products with different App Ids , you can name them the way you wish based on your app. for me they will be com.whitetorch.Configuragtions (Appstore/production version) and com.whitetorch.Configuragtions.staging for staging environment.
  4. To achieve that without create a target for each one, we will have to play around the product bundle identifier. In the configuration files create a new setting with name PRODUCT_BUNDLE_ID = <#the App id for configuration#> , e.g. for Staging configuration files it will be PRODUCT_BUNDLE_ID=com.whitetorch.Configuragtions.staging and for production configuration files something like PRODUCT_BUNDLE_ID=com.whitetorch.Configuragtions.
  5. Now head to Targets -> choose app target -> build settings and find Product bundle identifier setting in the Packaging section , you will find the bundle id specified explicitly but since we want it be configurable , change it to $(PRODUCT_BUNDLE_ID).
  6. Go to the Project (the blue icon with the project name) -> Info -> Configurations section, duplicate Debug and name it Staging-Debug, also duplicate Release and name it Staging-Release, and leave the original for production configurations but you can also rename them.
  7. Select each configuration and select the matching configuration file name from the drop down list a long the project name.

if you go back to the target->build settings -> product bundle identifier , you will see the correct bundle id is listed for each configuration. Also if you go to Signing and Capabilities tab , you will see that Xcode spectated both bundle identifier meaning you can actually use different teams 😀 which can be useful say you building a product for a client , you can only have the production id on the client apple account, and other stuff on your development account.

Cool!! Lengthy steps!!! !^_^.

Let’s actually use that!

Configure the schemes:

Select the only Scheme we have setup by Xcode and click on edit scheme , that will be our production scheme so we will leave the configurations as is , but make sure that “Run” has Debug build configuration, and archive has Release build configuration.

Click on Manage Schemes and rename the selected scheme to be Production App , to make it easier to distinguish.

go back to edit Scheme window and click on “Duplicate Scheme” this time change the build configuration for Run to be “Staging-Debug” and for Archive to be “Staging-Release”. In Manage Schemes window make sure the Shared checkbox is selected for both Schemes.

Test it on simulator

Finally some demoing, select the “Production App” scheme and run it on your simulator or on a device.
Select the “Staging App” Scheme and run again on same place , you should be seeing two app icons with same name which means We are on the right track :).


Now we have a proof of concept for our strategy that we can build on it, so let’s do some more.

change the app name

in each configuration file create a setting and call APP_NAME. and set it , e.g. APP_NAME = Staging app.

go to info.plist and add a new key , just select any row and press Enter, and type Bundle display name, and in the value field type $(APP_NAME), this means set the displayed name on springboard/search/settings app to the APP_NAME setting we provided earlier.

Use that in code to change View Color/Theme

As you saw before to use the settings in the Xcode level we can wrap it with $(setting_name), but we can’t do that alas in our code. and to achieve that we need another way.

  • Let’s create a new property list file and name it configuration.plist, inside it we create two new keys with Dictionary type. namely Staging and Production , under each key create a new key with String type and name it colorName. Now we have Staging and Production dictionaries where each has one key named colorName, which will be used to determine the view color of your choice.
  • Head to info.plist and create a new Key and name it ‘Environment’ of type String and in the value field type $(Environment) , now head to the configurations files xcconfig files and add new setting, name it ‘Environment’ and set a value for it matching the name we used in the configuration.plist file, so for Stage-Debug and Staging-Release.xcconfig we add Environment=Staging and so on.
  • Let’s create a utility file to be able to parse the configurations from configurations.plist to avoid redundancy.
  • Now head to the view you want to change its color and type
let colorName: String = AppConfigurations().get(key: AppConfigurationsKey.colorName)         
let color = UIColor.init(named: colorName) self.view.backgroundColor = color

AppConfigurations is a utility file , you can find it in the repo here.

make sure you add the color name in Assets.xcassets file.

This is meant just as an example , you can have whatever you want , you can add and endpoint url for instance , or maybe Some SDK key, etc…


Cool!!! Now we have a tool that can let us achieve many things.

I will stop right here , it’s too long post already. maybe it will be followed with another post soon, as am planning.

You can find the project with the custom configurations here
https://github.com/MoathOthman/ConfigurationsExample


Useful links and references

build settings reference: https://help.apple.com/xcode/mac/10.2/#/itcaec37c2a6

Configuration Settings https://help.apple.com/xcode/mac/10.2/#/dev745c5c974

https://pewpewthespells.com/blog/xcconfig_guide.html

https://nshipster.com/xcconfig/

Run your iOS App in the Playground


You may have wondered if you can run the whole app inside the playground!, say you want to experiment a little faster.
Here we will go through the steps needed to achieve that.

Add the playground

Click file ->new->Playground and create a single view playground , give it a name e.g. playground and save it somewhere, then go to the directory where you saved it and copy it to your project.

Create a Cocoa Touch Framework

We need to create a framework that can be exposed to the playground later on.
To do that select the project file and under the targets section and click on the + button then choose Cocoa touch framework and name it something like playground.

Update the target membership of the source files

For the playground framework to be useful we need to add files to it, and since we are trying to run the whole project we need to add all the project files to it , and you can do that by going to the files and bundles and from the file inspector -> target membership check the playground box.

Import the project in the playground

This is where we get to see some results finally ,

@testable import playground

@testable is needed here so that the internal methods would be accessible from the playground, otherwise you need to go to each class and mark any function, property or type as public.

Cocoa pods

If you are using cocoa pods you need to add these lines to the podfile , which will add the frameworks to the playground framework target, and remove the need to code sign it. add these lines to your pod file.

given your target name is myapp

target 'myapp' do
    use_frameworks!
    target 'playground' do
        inherit! :search_paths
    end
end 

and after that add these

post_install do |installer|
installer.pods_project.build_configurations.each do |config|
    config.build_settings.delete('CODE_SIGNING_ALLOWED')
    config.build_settings.delete('CODE_SIGNING_REQUIRED')
end

installer.pods_project.targets.each do |target|
    target.build_configurations.each do |config|
        config.build_settings['CONFIGURATION_BUILD_DIR'] = '$PODS_CONFIGURATION_BUILD_DIR'
    end
end
end


Same goes for any other framework, where you need to update the target membership of it and include the playground framework target.

Separate the playground framework from production

Since you don’t want the playground framework you just created to be shipped with the app, which will add extra space to the app binaries, you can create a development target instead and un-link the playground framework from the production target.

Notes

  • Whenever you change something in your project, you need to build it first to be able to see it on the playground.
  • Playground is not that smooth most of the time, so I won’t rely on this technique for heavy testing , but it can be nice to try out part of your project logic directly.

DEMO

That should be it , you can find a working example in the demo repo, feel free to download it and try it yourself.

Xcode interface builder Tips and tricks

Xcode 8.2, Interface builder, Storyboard, Swift

Hey, I wanted to share view tips and tricks you may use if you like laying your design in interface builder.

Media Library

In the Utilities section (the one on the right), there is libraries section where there is the Object Library we use all the time, on the right of it you can see the Media library where you can find images way faster and drag-drop them into your views. Your images are not supposed to be in an Assets Catalog, but I noted 1x images are not recognized.

Localization Lock

Allows you to look some or all of a view properties. Comes in handy to avoid accidental modification e.g. on layout or strings. You can lock the whole storyboard from Edit menu -> Localization Lock or specific views from Identity Inspector under Document.

Embed In /Unembed And Arrange

You may have a couple of views you want to bundle together under a UIView/ScrollView/stackView, Instead of dragging new view and then drag them into it , you can select them and from edit->Embed in you may select one of the options UIView/ScrollView/stackView, and you can embed your scene into a UINavigationController/UITabbarController unless its a Tab Bar Controller, in case it’s a navigation controller it can be embedded into a Tab Bar Controller only . The other way you can select the containing View and choose Unembed from editor. Note that Autolayout constraints will be cleared.

Arrange (send to front,back,backward, and forward): select a view and from edit->arrange you may change its order among its siblings view (same level).

Refactor to storyboard

You may select a scene or more than one and the edit->refactor to storyboard then you will be asked to name the storyboard and you will have a new storyboard file with the selected scene(s).

First Responder

It’s a set of functions that can be applied to the first respondere.g. TextField. There are some of functions already defined such as undo,selectAll,copy,… . plus you can create your own functions. all you need is to connect UIControls actions in the storyboard as usual but now with the First Responder.

Color Palette

This is very useful feature , since you will use certain set of colors redundantly in the project, it’d be helpful to create a color palette for ease of access. You may check how from here.

Designables And Inspectable

Marking a UIView subclass as @IBDesignable will tell the interface builder to refresh the view whenever a change occurs to its attributes. Although in more complex scenes and bigger storyboards this feature could be a pain to the compiler and you may ending up turning it off 😀 .

Marking a property as Inspectable will make it shows in the Attributes Inspector and allows you to edit your custom properties from the interface builder.
Using Both features Can be great for prototyping. To avoid slowness you need to turn off “Automatically refresh views” form edit menu. plus make your storyboards smaller.

That’s it for now, will keep adding whenever I find more interesting IB stuff. Hopefully they come in handy.

Xcode : Create color Palette in Interface builder

Every project has its own set of colors, and if you use Interface builder like me, then you probably would like to create a color set for each project so you don’t get mad when you want to set a color for some text and not finding it in the “Recently used Colors” Section !.

You can simply create your own color palette in IB by clicking on the color picker -> Color palettes -> Click on the settings icon and click on new. 🙂

After that you can click on the settings icon again and rename the palette. And then you can add the colors related to the project you want.

And here you can see how it’s done in pictures . Have fun.

 

screen-shot-2016-12-15-at-10-31-49-am screen-shot-2016-12-15-at-10-32-08-am screen-shot-2016-12-15-at-10-32-15-am screen-shot-2016-12-15-at-10-32-31-am screen-shot-2016-12-15-at-10-32-42-am screen-shot-2016-12-15-at-10-33-34-am