TheAwesomeApp: Develop multi module iOS app with ease
Managing large apps in large team is difficult. Compile time, merge conflicts, merge time, and many more things can be time consuming and difficult. This is how we made it easy.
Advantages of given approach
- Using following approach you will be able to manage multi-module apps with ease
- This approach will reduce compile time, merge conflicts, merge time of your large scale apps
Prerequisite
Xcode 10.1+, Carthage 0.32.0+, Basic knowledge of iOS
Project Requirements
Recently we have worked on one of the most challenging app which was having multiple modules. Hence managing that app was crucial.
There are 4 the major modules in the app:
- Chat — Whatsapp like realtime chat feature
- Play — Spotify like music feature
- Pay — PayTM like payment feature
- Shop — Flipkart like shopping feature
All in single app 📱.
This is how we implemented this large scale app with utmost ease.
Step: 1 — Projects creation
Our approach will be creating 5 separate projects on GitHub and on Xcode both. 1 would be main project called TheAwesomeApp in which we will merge all other 4 module’s projects.
- TheAwesomeApp 📱— Name of the main project that will be main centralised app in which we will merge other 4 modules.
- Chat 💬 — Name of chat module project
- Play ▶️— Name of play module project
- Pay 💰— Name of pay module project
- Shop 🛒 — Name of shop module project
Once all 5 projects are created on GitHub as well as using Xcode, we are ready to start some basic apps setup for demonstration.
Step: 2— TheAwesomeApp setup
In TheAwesomeApp, We will add one UITabBarController, and we will fetch view controllers for each tabs from other 4 modules.
Open Main.storyboard, Delete everything inside it and add one UITabBarController object to it.
Then delete all other view controllers attached with it. Also mark it as Initial View Controller. The end result should look like as below.
Now if you will run the app, nothing will be shown except a black view with blank tabbar like this:
Now we will add view controllers to this tabbar, not from same project but from other 4 modules.
Step 3: — Chat module setup
Important: We will use an amazing feature of Carthage here.
Carthage let us create a shared framework in our reusable modules(Ex: Chat module) and then integrate those modules into our main app, TheAwesomeApp.
Open Chat module’s project and add new target to it.
File > New > Target > Cocoa Touch Framework
To make this framework shared, make sure the schemes are clicked as shared as follows. (Unselect then reselect — Sometimes we get Xcode bug.)
Add storyboard and ChatViewController to ChatModule. This ChatViewController will be used in TheAwesomeApp.
Now we will design ChatViewController in ChatModule.storyboard and give class name and identifier to it as well.
Open ChatModule.storyboard and add a ViewController to it.
Don’t forget to give it Class as well as Identifier names.
Important: Push the Chat project to the GitHub
Now, we are ready to use this ChatViewController into TheAwesomeApp.
First we will add ChatModule to TheAwesomeApp. Once it will work as expected, we will follow the same process for other 3 modules.
Step: 4 — Adding Chat module to TheAwesomeApp
Open TheAwesomeApp project in terminal and fire following command:
This Cartfile is responsible for fetching ChatModule to TheAwesomeApp.
In this Cartfile you have to write path of your Chat project’s GitHub repository as follows:
Note: Please make sure you replace your user name with mine. ZaidPathan is my user name on GitHub.
Run following command in terminal to fetch ChatModule to TheAwesomeApp.
The above command will fetch whatever shared framework is defined in list of repositories in Cartfile, in our case it’s ChatModule from ZaidPathan/Chat repository.
If everything is setup properly, you will see ChatModule will be fetched.
You have now ChatModule is ready to plug-&-play, let’s use that into TheAwesomeApp.
Step 5: — Using ChatModule into TheAwesomeApp
Open TheAwesomeApp folder and go to Carthage>Build>iOS folder. There you will see ChatModule.framework, drag-&-drop that into your TheAwesomeApp project. Make sure Add to targets is ticked.
Add ChatModule to Embedded Binaries of TheAwesomeApp.
Now open Main.storyboard in TheAwesomeApp and add Storyboard Reference to it.
Click on Storyboard Reference and set following details to it:
Storyboard: ChatModule
Reference ID: ChatViewController
Bundle: com.ZaidPathan.ChatModule (Bundle Identifier of ChatModule framework, this will be different for you)
Ctrl+Drag from UITabBarController to Reference Storyboard and set it as view controllers.
Press ⌘+R, If everything is implemented properly you will see ChatModule’s ChatViewController as first view controller of UITabBarController.
😍 Happy happy 😍
We have successfully added ChatModule to TheAwesomeApp.
Step: 6 — Use all other 3 modules into TheAwesomeApp
In order to do this, Follow Step-3 to Step-5 for all 3 other modules as well, and final Cartfile will look like this.
Run following command again to fetch all 4 modules to TheAwesomeApp.
And the final result should look like this:
Press ⌘+R, If everything is implemented properly you will see UITabBarController with all 4 modules added into it. You won’t be able to see different tabs as because we haven’t named them, but still you will be able click on each of them.
To add title to each tabs, add UITabBarItem to each ViewControllers in their own storyboards and add relevant titles to them.
Press ⌘+R, and see the final result:
💪 We did it.
Conclusion
We are now able to add all 4 modules into TheAwesomeApp.
All developers of 4 modules now can work independently without code conflict, long build times etc.
Fork full source code here: TheAwesomeApp, Pay, Play, Chat, Shop.
