Walkthrough iOS development for coder (Swift) – Updating

This isn't tutorial, just be the collection of tutorials. If you wanna have  a walkthrough of iOS development, follow these steps. Please do not forget to complete attached assignments.

Step 1: Understand swift syntax

• Use playground to try. https://www.raywenderlich.com/143771/swift-tutorial-part-1-expressions-variables-constants
• Distinguish between Optional and non-optional variable (? and ! variable)
• Distinguish between “let” and “var”
• Understand “guard”, “if let”, “defer”
• Struct, enum, class

Tip: Just need to answer my above questions.

For more detail: https://itunes.apple.com/us/book/the-swift-programming-language-swift-3-1-edition/id1002622538?mt=11

Step 2: Get started with UI

• Pre: Try to create XCode project (Single view application)

• 2.1 Simple elements:

  • I generally classify simple UI elements into 3 groups:
    • Not interact with user: UILabel, UIImageView
    • Simple UIControl handled by IBAction: UIButton, Switch, Stepper, Slider, Segment…
    • Simple UIControl handled by delegate (and IBAction): UITextField, TextView, UIWebview v.v…
  • To getting started with these elements, you have to know:
    • How to create IBOutlet, what is IBOutlet?
    • How to create IBAction, what is IBAction, how to know if a control has IBAction or not?
    • How to implement delegate, and what for?

TIP: Just need to answer my above questions.

•  IBOutlet + IBAction: http://www.codingexplorer.com/hello-world-first-ios-app-swift/
• Delegate sample: http://sourcefreeze.com/uitextfield-and-uitextfield-delegate-in-swift/

• 2.2 Autolayout:

  • Autolayout: flexible layout UI element  with all of device sizes (have to practice autolayout for all of your assignment or demo, because it’s not difficult to use, but maybe make beginner confused.)
  • “Size-Classes”: Different layouts for different sizes of device.

TIP:

This is too hard for imaging so you’d better watch video instead of reading tutorial

Video: https://www.youtube.com/watch?v=7iT9fueKCJM

Document tutorial: https://www.appcoda.com/auto-layout-guide/

• 2.3 Understand data type:

  • Single element: Int, Double, Float, String, Date, Bool, Data
  • Set of elements: Array, Dictionary

• 2.4 ImageAsset

  • Understand difference between point and pixel in iOS
  • What are abc.png, abc@2x.png, abc@3x.png?

Assignment 01: Create an calculator like this:

Step 3: Advance of UI element:

• 3.1 Complex UI element:

  • UITableView (Have to know, this is very common): http://www.codingexplorer.com/getting-started-uitableview-swift/
  • UICollectionView (Have to know, very common): http://rshankar.com/uicollectionview-demo-in-swift/
  •  UIScrollView (not usually but recommended, because UITableView and UICollection is inherited from UIScrollview): https://www.raywenderlich.com/122139/uiscrollview-tutorial
  •  UIPickerView (Nice to have or you can familiar it later): http://sourcefreeze.com/ios-uipickerview-example-using-swift/
    

    TIP: Have to understand clearly delegate.
    Ref: https://useyourloaf.com/blog/quick-guide-to-swift-delegates/

• 3.2 UIViewController, or container:

  • NavigationController (Have to know) https://swiftludus.org/how-to-navigate-between-view-controllers-in-ios/
  • TabbarController (Have to know) https://makeapppie.com/2016/07/06/tab-bar-controllers-in-xcode-8-storyboards/
  • UISearchController (Recommended) https://www.raywenderlich.com/113772/uisearchcontroller-tutorial
  • SplitViewController, Popover (Rarely, nice to have, skippable) 

Assignment 02: Create karaoke application. Download the requirement and resources from here.

Step 4: Connect to server and local database

• 4.1 Connect to database using CoreData

  • Fetch, insert, delete, select, update
  • Tutorial: https://www.raywenderlich.com/145809/getting-started-core-data-tutorial

Assignment 03: Apply core data to karaoke application. Download the requirement and resources from here.

• Pre: research sync and async

  • What difference?
  • Dispatch to switch queue (from current to main queue, from main queue to others)
  • Have to make sure the UI Code is in Main Queue.
  • Tutorial: https://www.raywenderlich.com/148513/grand-central-dispatch-tutorial-swift-3-part-1

• 4.2 Connect to server using API:

  • Call API to get data (URLRequest, UISession) http://mrgott.com/swift-programing/30-work-with-rest-api-in-swift-3-and-xcode-8-using-urlsession-and-jsonserialization
  • Parse json data:
    • Apple framework: http://stackoverflow.com/questions/39423367/correctly-parsing-json-in-swift-3
    • SwiftyJSON (cocoapods): https://github.com/SwiftyJSON/SwiftyJSON

Assignment 04: Create food recipes using API. Download the requirement and resources from here.

Step 5: Advance

• Extension (~ Category of ObjC): Add function to existed class (HAVE TO KNOW)
• Read and write a file:
  • What is application sandbox
  • Which folders are writable?
  • NSFileManager
  • Ref: http://www.theappguruz.com/blog/working-ios-file-management-using-swift
• Cocoapods (Simple way to integrate 3rd party framework into application) (RECOMMENDED) https://www.raywenderlich.com/97014/use-cocoapods-with-swift
• Visit Cocoacontrols for more new useful frameworks)
• iOS application life cycle (SHOULD HAVE) https://developer.apple.com/library/content/documentation/iPhone/Conceptual/iPhoneOSProgrammingGuide/TheAppLifeCycle/TheAppLifeCycle.html
• CoreAnimation (NICE TO HAVE) https://makeapppie.com/2016/06/28/how-to-use-uiimagepickercontroller-for-a-camera-and-photo-library-in-swift-3-0/
• Create custom UI element (NICE TO HAVE)
• UIImagePickerController (Take photo + browse photo from camera roll)
• With dictionary & array: Flat, flatmap, filter (NICE TO HAVE)

Localized an existed application (Part 1)

It’s used for simple applications that don’t have storyboard.

Step 1: Right click your project, then click “New File…”

Choose “Strings File”, the file created MUST be named “Localizable.strings“

Step 2:

Turn on localized mode of this project: Select project, then click (+) at “Localizations” like this photo.

and add any language that your application wanna support.

Then every StringFile will include language sub-files:

You have to define key-value pair each file.

For example:

Localizable.strings (Vietnamese)

“login_screen_welcome” = “Xin chào, vui lòng đăng nhập “.

“login_screen_cancel” = “Hủy”.

Localizable.strings (Base – mean default)

“login_screen_welcome” = “Hi, please login to continue”.

“login_screen_cancel” = “Cancel”.

Step 3: 

Find all assigning string value in source code, then replace

[doneBtn setTitle:@”Cancel” forState:UIControlStateNormal];

=======>>>>>

[doneBtn setTitle:NSLocalizedString(@”login_screen_cancel“, @””) forState:UIControlStateNormal];

Step 4: Change language of your device and review it.

 

UITableView Tutorial (custom cell)

Step 1: Create Single View Application project.

Step 2: Drag UITableView into view controller in Storyboard:

Step 3: Create prototype cell.

A tableview can contain one or more prototype cells, it depends on how many kinds of cells in your tableview. In this example, there’s only one prototype cell.

a/ To create prototype cell, increase number of prototype cells in Attribute Inspector bar:

b/ Drag subviews to prototype cell like this:

c/ Set reuse identifier for cell:

Click to focus the cell (1) then set identifier for cell (2). Cell identifier is used to identify prototype cells in tableview. (note that cell’s style is Custom).

Tableview will create a new cell for each identifier that you have registered, they are stored in tableview’s “FREE BIN”.

When you call method below, tableview gives you an available cell,  you can fill data to this cell if needed. In case there’s no available cell in “FREE BIN”, it will be created automatically. When user scrolls up or down the tableview, the invisible cell will be moved to “free bin”. So at moment, the number of UITableViewCell’s instance is limited, good for application memory.

- (UITableViewCell *)dequeueReusableCellWithIdentifier:(NSString *)identifier;

After completed 3 above steps, press command + R to run:

Step 4: Create custom class of UITableViewCell

Because the food prototype cell is a custom cell, you need to create a new class inherited from UITableViewCell. This custom class is used to create outlets for views dragged at step 3b.

To create custom cell of UITableViewCell: File -> Add -> New File -> Cocoa Touch Class:

(1) : Name of custom class.

(2): Super class of your custom class, must be UITableViewCell in this case.

Then, you need to register custom class for prototype cell in storyboard:

c/ Create outlet for FoodTableViewCell:

 

Step 5: After creating tableview and prototype cell, next step is filling data into this tableview.

To fill data to tableview, you should implement UITableViewDelegate and UITableViewDatasource, answering 3 important questions (equivalent to 3 important methods in datasource).

• How many sections are there in this table view? (Optional, default is 1 section)
• How many rows are there in each section?
• With an IndexPath, which cell(s) do you wanna show? (IndexPath has section and row properties).

For example, the data you need to fill to tableview are 2 arrays: one of foods’ name and one of thumbnails:

self.foodNames = @[@"Seafood pizza", @"Egg Hamburger", @"Salad", @"Hot green tea", @"Coke", @"Chicken combo", @"Family combo", @"Friends Set", @"Couple set", @"Ice cream"]; 

self.foodThumbnailNames = @[@"img_pizza.jpg", @"img_ham_egg.jpg", @"img_salad.jpg", @"img_tea.jpg", @"img_coke.jpg", @"img_combo1.jpeg", @"img_family_set.jpg", @"img_friend_set.jpg", @"img_couple_set.jpg", @"img_ice_cream.jpg"];

Note: foodNames and foodThumbnailNames are properties (@property) of ViewController class.

a/ Set delegate, datasource of tableview:

Right click tableview then drag datasource and delegate outlets to ViewController like this:

b/ Add UITableViewDelegate and UITableViewDatasource to @interface of class:

c/ Implement 3 important methods:

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
     return 1;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
      return self.foodNames.count;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
      FoodTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"FoodCell"];
      NSString *foodName = self.foodNames[indexPath.row];
      NSString *foodThumbnail = self.foodThumbnailNames[indexPath.row];
 
      cell.nameLabel.text = foodName;
      cell.thumbnailImageView.image = [UIImage imageNamed:foodThumbnail];
      cell.priceLabel.text = [NSString stringWithFormat:@"$%zd", arc4random() % 10 + 5]; //price from: $5 -> $15 (random)
      cell.noteLabel.text = [NSString stringWithFormat:@"Please wait: %zd mins", arc4random() % 59 + 1]; //waiting from 1 -> 59s.(random)
      return cell;
}

Press Command + R to run:

 

 

Summary:

• The most important step to implement is Step 5. You should learn by heart 3 important methods of UITableViewDatasource.
• The reuse system of UITableView is very good for iOS application, make implementation easier for dev.
• You need to understand clearly purposes of every step.