평생 공부만 해야할듯

ReactNative의 장점은 CodePush 로 앱을 심사없이 없데이트 할 수 있다는 것 인데요.

지금부터 CodePush 설정을 진행해보려고 합니다.

1. AppCenter 계정만들기

AppCenter 회원가입을 진행합니다.

GitHub계정이나 , Google, Facebook 계정으로도 등록이 가능합니다.

https://appcenter.ms/

2. 설치

CodePush 명령을 사용하려면 appcenter-cli를 설치해야 합니다.

아래의 명령어를 통해 설치를 진행합니다.

npm install -g appcenter-cli

CodePush라는 샘플 프로젝트를 만들어보겠습니다.

npx react-native init CodePush

생성된 프로젝트로 진입합니다.

cd CodePush/

CodePush 프로젝트에서 아래의 명령어를 통해 depenency를 추가 합니다.

npm install --save react-native-code-push

3. AppCenter 로그인

appcenter-cli를 사용하여 AppCenter와 연동을 합니다.

appcenter login

아래처럼 별도의 브라우저가 띄워지면서 인증토큰을 보여줍니다.

아래의 'Enter your token from the browser:' 란에 token을 붙여넣습니다.

유효한 token을 입력하였다면 아래와같이성공 메시지가 출력됩니다.

Logged in as bonjin

4. AppCenter App등록

AppCenter에 App을 등록하겠습니다.

android, ios 를 구분하여 등록을 하면 되고 예시는 아래와 같습니다.

appcenter apps create -d <appDisplayName> -o <operatingSystem>  -p <platform>

각 앱 이름 뒤에 ios, android 를 붙여주어 구분하는게 좋기 때문에 CodePush-iOS라는 이름으로 생성해보겠습니다.

appcenter apps create -d CodePush-Android -o Android -p React-Native
appcenter apps create -d CodePush-iOS -o iOS -p React-Native

정상적으로 App등록이 되었다면 아래처럼 등록정보를 출력해줍니다.

여기서 Owner ID, Name 항목을 활용하여 배포키를 만들어줍니다.

기존 CodePush 앱은 자동으로 Staging, Production 키를 만들어 주었지만 AppCenter에서는 직접 생성을 해줘야 합니다.

appcenter codepush deployment add -a <ownerName>/<appName> Staging
appcenter codepush deployment add -a <ownerName>/<appName> Production

아래 명령어를 통해 키를 발급받습니다.

appcenter codepush deployment add -a bonjin/CodePush-iOS Staging
appcenter codepush deployment add -a bonjin/CodePush-iOS Production

등록된 키는 code-push-cli를 통해 확인이 가능합니다.

# appcenter 명령어로 확인하는 방법은 찾고 업데이트 하겠습니다 #

code-push deployment ls CodePush-iOS -k

AppCenter에 등록된 앱을 확인합니다.

appcenter apps list

node.js 배포를 위해 Heroku 클라우드를 활용하려고 합니다.

우선 Heroku사이트로 이동해 회원가입을 진행해야 합니다.

https://www.heroku.com/home

SIGN UP FOR FREE 버튼을 클릭합니다.

항목을 채워줍니다.

입력한 email로 확인 메일이 전송되었습니다.

이메일에 로그인하여 들어가보면 아래처럼 Heroku에서 인증링크를 보내주었는데요.

링크를 클릭하여 인증을 진행하겠습니다.

새로운 사이트가 열리면서 비밀번호를 입력하는 화면이 보여집니다.

비밀번호를 입력해줍니다.

회원가입이 완료되었다는 화면이 보여지게됩니다.

CLICK HERE TO PROCEED 버튼을 클릭합니다.

로그인을 했을때 아래처럼 약관이 보여지게 되고 Accept 버튼을 클릭합니다.

Dashboard화면이 보인다면 준비가 완료된겁니다.

이제 새로운 app을 만들 준비가 되었습니다.

다음 글에서는 새로운 app을 만들어보겠습니다.

GitHub에 private 프로젝트를 만들었습니다.

열심히 커밋을 하면서 '1일 1commit 해야지!'라고 마음을 잡아가면서 프로젝트 정리를 하고 있었는데요.

매일 깔리는 잔디를 보면서 지내고 있었지만 동료들과 서로의 GitHub를 돌아다니면서 저의 잔디의 빈곳이 보였습니다.

분명 제가 볼때는 채워져 있는곳이 동료들이 보는 화면에서는 비어보이는겁니다.

여러가지 확인한 결과 private repository가 보이지 않고 있다는 부분을 확인할 수 있었습니다.

로그인을 했을때에는 아래처럼 640개의 contributions가 존재하고 있습니다.

하지만 로그인을 하지 않을때에는 570개의 contributions가 존재하고 있는데요.

private repository의 contributions도 보이도록 수정할 수 있다는것을 알게 되었습니다.

contributions를 visibility 설정하는 방법을 알아보겠습니다.

1. GitHub에 로그인 합니다.

2. 오른쪽 상단에서 프로필 사진을 클릭한 다음 Your profile 메뉴를 클릭합니다.

3. Contribution settins 드롭다운 메뉴를 클릭합니다.

Private contributions 항목을 선택합니다.

설명은 아래와 같습니다.

Private contributions

비공개 제공을 켜면 프로필에 익명의 비공개 활동이 표시됩니다.

Activity overview

활동 개요를 켜면 조직 및 저장소 전반에 걸친 활동의 개요가 표시됩니다.

정상적으로 처리가 되었다면 'Visitors will now see your public and anonymized private contributions.' 라는 알림이 보여지게 됩니다.

이제 로그인을 하지 않는 상태에서 GitHub에 접속을 해보겠습니다.

기존 570개의 contributions에서 640개의 contributions로 변경되어 보여지는걸 확인할 수 있습니다.

이제 비공개 프로젝트도 자유롭게 진행하면서 멋진 잔디를 깔아 보세요!

이전 글에서 Apple Push Services 인증서 발급을 진행했습니다.

이번 글에서는  APNs 키 발급을 진행하보겠습니다.

기본적으로 Apple 개발자 프로그램이 가입된 기준으로 작성됩니다.

APNs 키 발급.

키를 발급하기 위해 Keys 메뉴에서 + 버튼이나 'Create a Key' 버튼을 클릭합니다.

Key의 이름은 push notifications service key 로 작성했지만 편한 이름으로 작성하시면 됩니다.

Apple Push Notifications service (APNs) 항목을 선택하고 'Continus' 버튼을 클릭합니다.

선택된 항목을 확인후 'Register' 버튼을 클릭합니다.

정상적으로 등록이 되어지면 아래처럼 보여지게 됩니다.

다운로드를 하면 Apple 에서는 더이상 다운로드를 지원하지 않기 때문에 안전한 곳에 저장을 해두어야 합니다.

이전 글에서 App ID의 Push Notification 활성화를 했습니다.

이번 글에서는  Apple Push Services 인증서 발급을 진행하보겠습니다.

https://gigas-blog.tistory.com/248

Apple Push Services 인증서 발급.

Apple Push Services 인증서를 발급하기 위해 Certificates 메뉴에서 + 버튼을 클릭합니다.

Apple Push Notification service SSL 항목을 선택합니다.

등록된 App ID중 인증서를 적용할 App ID를 선택합니다.

인증서를 생성하려면 Mac에서 생성한 CSR 파일이 필요하다고 나옵니다.

기존에 있다면 업로드 하면 되고 없다면 새로 생성해야합니다.

아래 글을 통해 키체인 인증서를 생성 후 진행해주세요.

gigas-blog.tistory.com/247

키체인 인증서를 업로드 하고 'Continue' 버튼을 클릭합니다.

키체인 인증서의 문제가 없다면 아래와같이 Apple Push Services 인증서가 생성됩니다.

'Download' 버튼을 클릭하여 파일을 저장합니다.

다운받아진 aps.cer 인증서 파일을 클릭하여 Mac OS X 의 키체인 목록에 추가합니다.

정상적으로 되었는지 확인하려면 Apple Developer의 Certificates 목록에 TYPE이 Apple Push Services으로 되었는지 확인하면 됩니다.

iOS 기기에서 푸시알림 기능을 추가 하려면 APNs 설정을 해야 합니다.

APNs(Apple Push Notification Service)는 애플 개발자 화면에서 인증서와 키를 생성해야 사용할 수 있습니다.

이번 글에서는 사용할 App ID의 Push Notification 기능을 활성화 해보겠습니다.

기본적으로 Apple 개발자 프로그램이 가입된 기준으로 작성됩니다.

App ID의 Push Notification 체크.

Apple Developer 로그인을 합니다.

developer.apple.com/account

Certificates, Identifiers & Profiles 로 진입합니다.

Identifiers 메뉴에서 푸쉬를 사용하려는 항목을 선택합니다.

등록되어있는 identifier가 없다면 새로 등록을 진행합니다.

상황에 맞는 IDs를 선택하면 되며, 일반적으로 진행한다면 App IDs를 그대로 두고 Continue 버튼을 클릭합니다.

이번 화면에서도 기본 App 인 상태로 Continue 버튼을 클릭합니다.

항목을 선택할때와 새로운 앱을 등록할 때 동일한 화면이 보여지고, 하단으로 내려가면 Push Notifications 체크 항목이 보여집니다.

해당 항목을 체크하고 'Save' or 'Continue' 버튼을 클릭하여 저장하면 Push Notifications 가 활성화 됩니다.

광고 식별자 IDFA - ID for Advertisers는 Apple에서 사용자의 기기에 할당한 임의 기기 식별자 입니다.

Google은 광고 식별자 ADID - Advertising ID 를 사용하고 있지요.

각 광고 식별자를 통해 기기에 할당한 임의의 식별자로 사용자를 식별하고 맞춤형 광고를 제공할 수 있습니다.

iOS 14 이전 버전에서는 별다른 권한없이 IDFA 값을 가질 수 있었습니다.

하지만 iOS 14 버전 이상에서는 사용자를 추적할 권한을 요청하도록 처리 해야 합니다.

광고 식별자추적 권한을 요청하는 방법을 알아보겠습니다.

https://support.apple.com/ko-kr/HT212025

1. Framework 추가.

Xcode 프로젝트를 만든 뒤 Target -> General -> Frameworks, Libraries, and Embedded Content 로 진입합니다.

+ 를 클릭하여 AppTrackingTransparency.framework 를 추가합니다.

AppTrackingTransparency.framework 는 iOS 14 이상부터 사용이 가능합니다.

2. Privacy 항목 추가.

info.plist의 key 항목에 Privacy - Tracking Usage Description을 추가 합니다.

애플 공홈에 나와있는 내용 Your data will be used to measure advertising efficiency.를 Value 항목에 넣겠습니다.

3. 권한 요청.

이제 ViewController.swift 로 돌아와 권한 요청을 위한 코드를 작성하겠습니다.

requestTrackingAuthorization 함수를 추가 하였고 iOS 14 버전 이상일 때만 권한 요청을 하도록 추가 했습니다.

요청 후 아래처럼 AuthorizationStatus 를 전달하고 있습니다.

authorized: 승인 

denied: 거부

notDetermined: 결정되지 않음

restricted: 제한

각 상태에 맞게 처리를 하면 됩니다.

import UIKit
import AppTrackingTransparency

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        requestTrackingAuthorization()
    }
    
    func requestTrackingAuthorization() {
        if #available(iOS 14, *) {
            ATTrackingManager.requestTrackingAuthorization { (status) in
                switch status {
                case .authorized:
                    print("authorized")
                case .denied:
                    print("denied")
                case .notDetermined:
                    print("notDetermined")
                case .restricted:
                    print("restricted")
                }
            }
        }
    }
}

위처럼 작성하고 정상적으로 Build가 되었다면 아래처럼 보여지게 됩니다.

설정에서 설치된 앱을 선택하여 '추적 허용'을 취소 하거나 다시 허용을 할 수 있습니다.

이전 글을 통해 PDFKit을 사용하여 단일, 다중 PDF 파일을 표시 하였습니다.

https://gigas-blog.tistory.com/262

그런데 몇번 페이지를 보고 있는지. 전체 페이지가 몇개가 있는지 보여지는게 없네요.

이번 글에서는 전체페이지와 현재 페이지를 아래처럼 표시해보도록 하겠습니다.

아래와 같이 3개의 변수를 선언해주었습니다.

pageInfoContainer 는 페이지번호를 감싸주는 Container입니다.

currentPageLabel 은 페이지번호를 표시해주는 Label입니다.

timer는 일정시간 페이지번호를 표시해준뒤 PDF를 가리지 않기 위해 pageInfoContainer를 가려주는 용도로 사용합니다.

var pageInfoContainer: UIView = {
    let view = UIView()
    view.translatesAutoresizingMaskIntoConstraints = false
    view.layer.cornerRadius = 6
    view.backgroundColor = UIColor.gray
    return view
}()

var currentPageLabel: UILabel = {
    let label = UILabel()
    label.translatesAutoresizingMaskIntoConstraints = false
    label.font = UIFont.systemFont(ofSize: 12, weight: .medium)
    label.textColor = UIColor.white
    return label
}()

private var timer: Timer?

페이지 UI의 제약을 주기 위해 아래처럼 작성을 해주었습니다.

UI구성을 마쳤으니 실제 페이지번호를 보여주도록 처리해보겠습니다.

func setUpUI() {
    view.addSubview(pageInfoContainer)
    
    pageInfoContainer.addSubview(currentPageLabel)
    
    NSLayoutConstraint.activate([
        pageInfoContainer.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 20),
        pageInfoContainer.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 20),
        
        currentPageLabel.topAnchor.constraint(equalTo: pageInfoContainer.topAnchor, constant: 5),
        currentPageLabel.leadingAnchor.constraint(equalTo: pageInfoContainer.leadingAnchor, constant: 10),
        currentPageLabel.trailingAnchor.constraint(equalTo: pageInfoContainer.trailingAnchor, constant: -10),
        currentPageLabel.bottomAnchor.constraint(equalTo: pageInfoContainer.bottomAnchor, constant: -5),
    ])
}

PDFKit에서 지원을 하고 있으며 다양한 Notification을 지원하고 있습니다.

그중 PDFViewPageChanged 를 통해 페이지 상태가 변하면 handlePageChange함수로 알림을 받도록 등록합니다.

NotificationCenter.default.addObserver(self, selector: #selector(handlePageChange), name: .PDFViewPageChanged, object: nil)

PDFViewPageChanged 으로 등록한 Notification이 handlePageChange함수를 호출해주는데요.

pageIndex를 가져온 뒤 pageInfoContainer를 표시해주고 startTimer를 호출합니다.

startTimer에서는 타이머를 invalidate 하고 새로운 Timer를 생성해줍니다.

그리고 2초 뒤에 pageInfoContainer를 사라지게 해주는 whenTimerEnds함수를 호출해 줍니다.

// MARK: - PDFView PDFViewPageChanged
extension ViewController {
    @objc
    func handlePageChange() {
        view.bringSubviewToFront(currentPageLabel)
        if let currentPage: PDFPage = pdfView.currentPage,
           let pageIndex: Int = pdfView.document?.index(for: currentPage) {
            UIView.animate(withDuration: 0.5, animations: {
                self.pageInfoContainer.alpha = 1
            }) { (finished) in
                if finished {
                    self.startTimer()
                }
            }
            currentPageLabel.text = "\(pageIndex + 1) of \(pdfView.document?.pageCount ?? .zero)"
        }
    }
    
    private func startTimer() {
        timer?.invalidate()
        timer = Timer.scheduledTimer(timeInterval: 2.0, target: self, selector: #selector(whenTimerEnds), userInfo: nil, repeats: false)
    }

    @objc
    func whenTimerEnds() {
        UIView.animate(withDuration: 1) {
            self.pageInfoContainer.alpha = 0
        }
    }
}

타이머를 사용했다면 deinit 될때 꼭 invalidate 처리를 해주어야겠죠.

deinit {
    timer?.invalidate()
}

이렇게 작성된 코드를 Build하면 아래처럼 페이지 이동시 현재페이지와 전체페이지를 보여주는 View를 보실 수 있습니다.

이로써 기본 기능에 충실한 PDFViewer를 만들어 보았습니다.

다양한 용도로 Custom 을 하여 더 멋진 PDFViewer를 만들어보세요.

지금까지 작성한 코드는 GitHub 를 통해 확인하실 수 있습니다.

https://github.com/bonjin-app/iOS/blob/main/PDFKitExample/PDFKitExample/ViewController.swift

이전글에서 PDFKit을 사용하여 간단하게 단일 PDF를 표시하는 앱을 만들어 봤습니다.

이번글에서는 여러 PDF를 하나로 병합하여 표시하는 앱을 만들어 보겠습니다.

https://gigas-blog.tistory.com/261

이전처럼 함수로 미리 작성해 주겠습니다.

PDFDocument를 배열로 받아서 document에 insert함수를 이용하여 추가하는 방식입니다.

PDFDocument를 PDFPage로 변환하여 보여질 document에 insert만 하면 된다는게 정말 쉽군요.

func loadMultiplePdfView(inputDocuments: [PDFDocument]) {
    let document: PDFDocument = PDFDocument()
    for input in inputDocuments {
        for i in .zero...input.pageCount {
            if let page: PDFPage = input.page(at: i) {
                document.insert(page, at: document.pageCount)
            }
        }
    }
    
    pdfView.autoScales = true
    pdfView.displayMode = .singlePageContinuous
    pdfView.displayDirection = .vertical
    pdfView.document = document
}

아래 코드를 ViewDidLoad함수에 넣어서 실행해보겠습니다.

let urlStrings = ["http://www.africau.edu/images/default/sample.pdf",
                 "http://www.africau.edu/images/default/sample.pdf",
                 "http://www.africau.edu/images/default/sample.pdf"]
        
let documents = urlStrings.compactMap { (urlString) -> PDFDocument? in
    if let url = URL(string: urlString),
       let document = PDFDocument(url: url) {
        return document
    }
    return nil
}
loadMultiplePdfView(inputDocuments: documents)

하나의 pdf가 2개 page 를 갖고 있기 때문에 3개를 호출하여 6개의 page를 만들어서 표시 했습니다.

정말 간단하지요? PDFKit의 장점은 Custom이 가능하다는 것입니다.

TableView를 추가하여 좌측에 전체 페이지를 보여주는것도 가능하고, PDFView의 go 라는 함수로 특정 페이지로 스크롤을 이동시키는것도 가능합니다.

WebKit으로 PDF를 병합하려고 찾지 마시고 PDFKit을 통해서 해결해보시는게 어떨까요?

다양하게 본인만의 PDFViewer를 만들어보세요.

PDFKit은 공식 문서를 보면 PDF데이터를 보여주거나 작성 및 검색을 할 수 있다고 나와있습니다.

iOS 11 이상부터 사용이가능하기에 이전 버전을 지원하는 앱에서는 사용이 불가능합니다.

https://developer.apple.com/documentation/pdfkit/pdfdocument

기존 프로젝트에 약관을 확인하려는 용도로 WebKit을 사용하여 html파일을 로드하는 방식으로 사용을 하고 있었습니다.

Server 에서 pdf로 보내도 WebKit에서 변환하여 잘 보여주고 있는데요.

PDFKit을 사용하여 다양한 방식으로 표시를 해보겠습니다.

새로운 xcode 프로젝트를 PDFKitExample이라는 이름으로 만들어줍니다.

그리고 Main.storyboard의 ViewController에 UIView를 만들어주는데 class를 'PDFView'로 연결해줍니다.

PDFView는 PDFKit에서 지원하는 UIView를 상속하여 만들어진 View이고 PDF파일을 보여주는 역할을 합니다.

ViewController로 돌아와 PDFKit을 import하고 조금전에 만든 PDFView 를 pdfView 와 연결합니다.

import UIKit
import PDFKit

class ViewController: UIViewController {

    @IBOutlet weak var pdfView: PDFView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }
}

이제 pdfView에 pdf파일을 연결하는 함수를 작성해 줍니다.

PDFDocument라는 Parameter를 받아서 pdfView와 연결해줍니다.

autoScales 는 뷰의 크기가 조정되거나 회전 될 때 배율이 자동으로 변경되는 모드입니다.

true, false 로 구성되어있습니다.

displayMode는 문서 표시 모드 이며 기본값은 singlePageContinuous로 단일 페이지 방식입니다.

singlePage, singlePageContinuous, twoUp, twoUpContinuous 모드가 있습니다.

displayDirection은 vertical과 horizontal로 구성되어있고 기본값은 vertical 모드 입니다.

마지막으로 document라는 속성에 PDFDocument를 연결하면 됩니다.

func loadPdfView(document: PDFDocument) {
        pdfView.autoScales = true
        pdfView.displayMode = .singlePageContinuous
        pdfView.displayDirection = .vertical
        pdfView.document = document
    }

url을 받아서 PDFDocument로 변환하여 loadPdfView함수를 호출하도록 처리 했습니다.

local방식과 web방식을 선택하여 사용하면 되고, 아래 코드를 ViewDidLoad 함수에 넣어서 실행해보겠습니다.

// local Sample Pdf
// let url = Bundle.main.url(forResource: "sample", withExtension: "pdf")

// web Sample Pdf
let url = "http://www.africau.edu/images/default/sample.pdf"

if let url = URL(string: urlString),
	let document = PDFDocument(url: url) {
	loadPdfView(document: document)
}

WebView처럼 pdf파일을 잘 불러온것을 확인할 수 있습니다.

위처럼 간단하게 하나의 pdf파일을 로드해서 표시를 해봤습니다.

다음글에서는 pdf파일이 여러개 있을때 하나로 표시하는 방법을 알아보도록 하겠습니다.