Create MVVM GithubRepos Project iOS Application — Part I (Managing Folder Structures + Pod)

Michael Abadi S.
4 min readNov 12, 2017

--

Have you ever confuse what kind of projects could we make to start learn MVVM design pattern in iOS ? Here i will try to explain basic understanding of MVVM with sample projects that i create by myself using Github API’s. Not only using old way MVVM but i will also give some basic explanation of RxSwift. First of all to make it more easier to understand, i will divide this tutorial into separate modules and update my stories one or twice a week. 👌

Like a beginner when they are starting create new project, what is the thing that come up in the first place in their mind ? Structures !. Yeah, it is kinda tricky one but this one is very important to manage folder structures from beginning of the development, especially when we are working in a team and want make our app scalable and easy to maintain in future. How about CocoaPod ? What is Cocoapod ? Cocoapod is one of dependencies manager for iOS. You can use as many libraries as you can just by using CocoaPods as your manager. You dont need to do the hard way such as copy the file manually into your project nor write it manually from their original repo. Okay then, lets start do it together 😜. I assume that you already have pod command in your terminal, if not, then follow this step in here

  • Step 1: Create Xcode Project and give it a name as GithubRepos
  • Step 2: Close your Xcode, go to terminal and navigate to your project directory using cd ProjectPathDir/ then in there init your pod by using this command pod init , after that start edit your Pod base on what pod that you want by using nano Podfile and start put necessary Pod inside the Podfile, ex: pod 'Alamofire' after that save the file and type pod install to install the libraries. Here is my pod. Well this one not mandatory, i will also explain about NSURLSession for networking, so don’t worry.
# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'

target 'GithubRepos' do
# Comment the next line if you're not using Swift and don't want to use dynamic frameworks
use_frameworks!

# Pods for GithubRepos
pod 'Alamofire'
pod 'SwiftMessages'
pod 'AlamofireImage', '~> 3.3'
pod 'RxSwift', '~> 4.0'
pod 'RxCocoa', '~> 4.0'

target 'GithubReposTests' do
inherit! :search_paths
# Pods for testing
end

target 'GithubReposUITests' do
inherit! :search_paths
# Pods for testing
end

end
  • Step 3: Open the xcworkspace in the path (Yes xcworkspace the white one , dont open the blue one)
  • Step 4: Okay, now you got your default project structures, you can see Info.plist, AppDelegate.swift and ViewController.swift in same (You can separate this one into Plist Folder, Delegate Folder and remove the original ViewController.swift)
  • Step 5: Now Create your project structures whatever you want as long you can divide it focuses on what do they need to do for each folder. See my example below, i separate folder base on what do they need to do. It has View for any of View Class, Config for the configuration class, ViewModel for the ViewModel class, Model for the model class, Interfaces for the Storyboard or Xib, Helper for Extension or other helper class and Component as the custom component class. Okay you can follow what i did or create your own structures ! Remember make it easy to read, understand and make it neat.

Okay that is my first step for the beginning of tutorial to make MVVM App projects. Follow me and wait for the next story / chapter that i will make within one week. You can give any responses here and any suggestion for next step what should i add for the tutorial. I am thinking of explaining Big Picture of Application Project layer in next tutorial including some basic concept of Class and Struct in order create Config part (Part 2). So wait for it, and i will share full code of the project in the last session of the stories. Any advice, critics are welcome ! 🤗 ( I am thinking making youtube tutorial as well if it is good idea )

--

--

Michael Abadi S.
Michael Abadi S.

Responses (2)