챌린지반 과제 (1)

과제소개

본인의 깃허브 프로필 페이지를 만들어주세요.

화면 상단에는 프로필 상세 정보가 출력되고 아래는 Repository 목록이 출력되는 앱을 만들어주세요.

Repository 목록은 페이징처리를 위하여 본인 Repository를 가져온 후 apple 의 Repository를 붙여주세요.

https://docs.github.com/en/rest/users?apiVersion=2022-11-28 API를 참고하세요.

요구사항

• iOS 15이상
• Swift 5이상
• README를 작성해주세요.
• git을 사용해주세요.
• 가능하다면 MVC 아키텍처를 사용해주세요.
  • 기본 iOS에서 제공하는 ViewController를 사용하면 됩니다.
• 오픈소스 라이브러리는 아래의 룰을 따라주세요.
  • 필수 사용
    • Alamofire
    • KingFisher or SDWebImage
  • ❌ 아래의 라이브러리는 사용하지 마세요
    • RxSwift ,RxCocoa, Rx…
    • Moya
    • SnapKit
  • 그 외의 라이브러리는 사용하셔도 됩니다. 단 사용하시면 나중에 이유를 설명할 수 있어야 합니다.
• Pull To Refresh 기능 구현해주세요.
• 다음 페이지 스크롤링 가능하게 해주세요.(페이징처리)
• 상단의 User profile의 디자인은 Code로 작성해주세요.
• 하단의 Repository 디자인은 Interface Builder(Storyboard or Xib) 로 작성해주세요.
• TableView나 CollectionView를 사용해주세요.
  • Delegate, DataSource를 사용해주세요.
• 디자인은 과제채점에 영향을 주지 않습니다.

샘플 이미지 와 레퍼런스

• 샘플 이미지

• 레퍼런스 : Github iOS 앱의 Profile 탭

AutoLayout Design

위의 예시와 같이 디자인을 하기 위해 기존에는 StoryBoard를 사용하여 디자인을 했지만 과감히 버리고 코드로 디자인을 해보려고 한다.

실행화면은 다음과 같다.

확실히 저번 과제때 해봐서그런가, 익숙했다.

Git API 테스트

Git API 가 어떻게 값을 가져오는지 확인을 해보려고 한다.

인터넷으로 어떻게 값을 가져와야할지 찾아보다가 해당사이트를 통해서 어떻게 값을 가져와야할지 알게 되었다.

하지만 위의 사진으로는 repository까지는 나오지 않는다.

뒤에 repos를 붙이니 원하는 정보가 다 나오는것같다. 즉 fetchRequest가 두개가 필요해 보인다.

이렇게 api 테스트가 끝이 났다.

Alamofire 사용해보기

Alamofire사이트를 들어가보니 SwiftPackage도 가능하고 Pod도 가능한데 저번 과제때는 SwiftPackage를 썼으니 이번엔 CocoaPods을 사용해보려 한다.

생성과정은 생략.

1. Model 생성

api test를 바탕으로 어떻게 parameters들이 나오는지 확인을 했으니 그에 맞게 변수를 만들어 주었다.

import Foundation

struct GitModel {
    
    var login : String // id
    var avatar_url : String // profile image url
    var location : String // 지역
    var followers : Int // 팔로워 수
    var following : Int // 팔로잉 수
    
}

2. fetchRequest 함수 만들기

함수를 다음과 같이 Docs를 보고 만들었다.

    func fetchRequest () {
        
        AF.request(url).response { response in
           
            debugPrint(response)

        }
        
    }

그리고 viewcontroller에 테스트용으로 gitManager.fetchRequest()를 사용하여 출력이 되는지, 즉 통신이 제대로 이루어 지는지 테스트를 해보았다.

더 있지만 일부만 캡쳐한다. 우선 출력이 되는걸로 보아 잘 나오는 듯하다.

responseJSON이 곧 사라질 기능이라 참고 사이트를 통해 responseDecodable을 사용했다.

let parameter = [GitModel]()
    
    func fetchRequest () {
        
        AF.request(url, method: .get, parameters: parameter).responseDecodable(of: GitModel.self
        ) { response in
            print(response)
        }
    }

print를 해보면

이렇게 전달이 잘 되는걸 알 수 있다.

import Foundation
import Alamofire

protocol SendProfile {
    func sendData (data: [GitModel])
}

class GitManager {
    
    var delegate : SendProfile?
    
    let url = "https://api.github.com/users/haroldfromk"
    
    let parameter = [GitModel]()
    
    func fetchRequest () {
        
        AF.request(url, method: .get, parameters: parameter).responseDecodable(of: GitModel.self
        ) { response in
           
            switch response.result {
            case .success(let data) :
                do {
                    self.delegate?.sendData(data: [data])
                } catch {
                    print(error.localizedDescription)
                }
            case .failure(let error) :
                print(error.localizedDescription)
            }
        }
    }
    
}

extension ViewController: SendProfile {
    func sendData(data: [GitModel]) {
        gitList = data
        DispatchQueue.main.async {
            //profileImageView.image = gitList[0].avatar_url
            self.idLabel.text = self.gitList[0].login
            self.regionLabel.text = self.gitList[0].location
            self.followerLabel.text = String(self.gitList[0].followers)
            self.followingLabel.text = String(self.gitList[0].following)
        }
    }
}

이렇게 delegate를 통해 전달하게 했다.

잘 나온다.

이제 이미지를 사용해야하는데 url주소이기에 다른 방법을 사용해야한다.

KingFisher 사용

이제 다른 조건인 KingFisher라이브러리 사용을 해보자.

사이트를 참고하여 설치를 해보자.

설치후 사용법은 간단하다.

위의 주석을 달았던 부분을 아래와 같이 작성한다. self.profileImageView.kf.setImage(with: URL(string: self.gitList[0].avatar_url))

작동 확인 완료.