Code Together: Let's make iPhone app in an hour

Thank you for visiting our account. We are going to make a simple video player app in an hour. If would you like to study yourself before hands-on, or review what you have learned in the session, please use the following material.

Meetup

We are providing free hands-on on a monthly basis

https://www.meetup.com/iOS-Development-Meetup-for-Beginner/

Development Environment

Xcode 9 / Swift 4

・What is Xcode?

Full procedure

0, Create your project

Open Xcode
Select "Create a new Xcode project"
Select "Single View Application" and then tap "Next"
Fill "Product name" and then tap "Next"
Select the place for saving your project and then tap "Create"

1, Collect Resources

1-1. Drop your icons into your "Assets.xcassets"

Get icons from here or you can get your favoirte icons from here

How to add icons to the Assets folder

2, Design your app

🗂 Main.storyboard

2-1. Add video player based view to the storyboad

How to add UIView to the storyboard

2-2. Add play, stop and retry button, content mode and Autosizing

How to add button to the storyboad

How to set image to the button

Your storyboard may looks like this

3, Connect to the ViewController

🗂 Main.storyboard -> ViewController.swift

3-1. Connect outlets

★ control + drag in storyboard to create a control segue

How to connect outlet

3-2. Connect Actions

How to connect actions

4, Add code blocks in ViewController.swift

★ It's preferable to write following code yourself. It will help you to understand code more.

import UIKit
import AVKit
import AVFoundation

class ViewController: UIViewController {
  
  @IBOutlet var playerView: UIView!
  var player: AVPlayer!
  var playerLayer: AVPlayerLayer!
  
  override func viewDidLoad() {
    super.viewDidLoad()
    initPlayer()
  }
  
  func initPlayer() {
    let videoUrl = URL(string: "https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4")
    player = AVPlayer(url: videoUrl!)
    playerLayer = AVPlayerLayer(player: player)
    playerView.layer.addSublayer(playerLayer)
  }
  
  override func viewDidLayoutSubviews() {
    playerLayer.frame = playerView.bounds
  }
  
  @IBAction func play(_ sender: Any) {
    player.play()
  }
  
  @IBAction func stop(_ sender: Any) {
    player.pause()
  }
  
  @IBAction func retry(_ sender: Any) {
    player.seek(to: kCMTimeZero)
  }
}