페이스북 아이폰 앱 개발

✔️ Xcode 4.3.1에서 테스트하였습니다.

아이폰 페이스북 앱 개발
아이폰 앱 개발+페이스북 API

1 사전 작업[ | ]

다음 작업들을 순서대로 진행한다.

페이스북 앱 등록

페이스북 앱 등록 문서를 참고하십시오.

맥 준비

맥 없이는 아이폰 앱 개발이 어렵다. 해킨토시로도 가능하다는 얘기도 있었는데, 쉽지 않아 보인다.

Xcode 설치

앱스토어에서 Xcode로 검색하여 설치하면 된다.

Git 설치

맥 Git 설치 문서를 참고하십시오.

iOS SDK 설치

Git으로 페이스북 iOS SDK 설치 문서를 참고하십시오.

2 Hello 프로젝트[ | ]

Xcode 실행
[Create a new Xcode project]
iOS --- Application --- Single View Application --- [Next]
Product Name: Hello --- [ ] Use Storyboards --- [Next]
데스크탑 선택^[1] --- [Create]
⌘+R을 눌러 실행(Run)^[2]
Enable 'Developer Mode' on this Mac? --- [Enable]^[3]
DevToolsSecurity를 변경해야 합니다. --- 이름/암호 입력 --- [승인]

iPad 시뮬레이터에 하얀 화면이 뜬다.

⌘+Q를 눌러 시뮬레이터 종료(Quit)
아래와 같이 버튼을 눌러 시뮬레이터를 iPhone으로 변경

⌘+R을 눌러 실행^[4]

그러면 iPhone 시뮬레이터에 역시 하얀 화면이 뜬다.

⌘+Q를 눌러 시뮬레이터 종료

3 페북 SDK 라이브러리를 프로젝트에 추가[ | ]

아직까지 Xcode와 페북SDK 사이의 연결고리가 없다. 페북 SDK 라이브러리를 프로젝트에 포함시켜 보자.

Git으로 페북 iOS SDK 설치하기 문서를 그대로 따라했다면, 페북 SDK는 ~/facebook-ios-sdk/lib/facebook-ios-sdk 에 있다.

Finder --- 응용프로그램 --- 유티리티 --- 터미널

open ~/facebook-ios-sdk/lib/

Finder가 열린다.

Finder에 있는 facebook-ios-sdk 폴더를 Xcode의 Hello 프로젝트로 드래그

"Choose options for adding these files:" --- [V] Copy items into destination group's folder --- [Finish]
Finder, 터미널 닫기

4 AppDelegate.h 수정[ | ]

Xcode에서 AppDelegate.h 파일을 열어보면 다음과 같을 것이다.

기존

#import <UIKit/UIKit.h>
@class ViewController;
@interface AppDelegate : UIResponder <UIApplicationDelegate>
@property (strong, nonatomic) UIWindow *window;
@property (strong, nonatomic) ViewController *viewController;
@end

해당 파일의 내용을 다음과 같이 교체한다.

변경

#import <UIKit/UIKit.h>
#import "FBConnect.h"
@class ViewController;
//@interface AppDelegate : UIResponder <UIApplicationDelegate>
@interface AppDelegate : NSObject <UIApplicationDelegate, FBSessionDelegate> {
    Facebook *facebook;
}
@property (strong, nonatomic) UIWindow *window;
@property (strong, nonatomic) ViewController *viewController;
@property (nonatomic, retain) Facebook *facebook;
@end

5 AppDelegate.m 수정[ | ]

파일 내용은 다음과 같을 것이다.

기존

#import "AppDelegate.h"
#import "ViewController.h"
@implementation AppDelegate
@synthesize window = _window;
@synthesize viewController = _viewController;
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    if ([[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdiomPhone) {
        self.viewController = [[ViewController alloc] initWithNibName:@"ViewController_iPhone" bundle:nil];
    } else {
        self.viewController = [[ViewController alloc] initWithNibName:@"ViewController_iPad" bundle:nil];
    }
    self.window.rootViewController = self.viewController;
    [self.window makeKeyAndVisible];
    return YES;
}
- (void)applicationWillResignActive:(UIApplication *)application {}
- (void)applicationDidEnterBackground:(UIApplication *)application {}
- (void)applicationWillEnterForeground:(UIApplication *)application {}
- (void)applicationDidBecomeActive:(UIApplication *)application {}
- (void)applicationWillTerminate:(UIApplication *)application {}
@end

다음 내용으로 교체한다.

변경

#import "AppDelegate.h"
#import "ViewController.h"
@implementation AppDelegate
@synthesize window = _window;
@synthesize viewController = _viewController;
@synthesize facebook;
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    if ([[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdiomPhone) {
        self.viewController = [[ViewController alloc] initWithNibName:@"ViewController_iPhone" bundle:nil];
    } else {
        self.viewController = [[ViewController alloc] initWithNibName:@"ViewController_iPad" bundle:nil];
    }
    self.window.rootViewController = self.viewController;
    [self.window makeKeyAndVisible];
    
    facebook = [[Facebook alloc] initWithAppId:@"436613896362231" andDelegate:self];
    NSUserDefaults *defaults = [NSUserDefaults standardUserDefaults];
    if ([defaults objectForKey:@"FBAccessTokenKey"] && [defaults objectForKey:@"FBExpirationDateKey"]) {
        facebook.accessToken = [defaults objectForKey:@"FBAccessTokenKey"];
        facebook.expirationDate = [defaults objectForKey:@"FBExpirationDateKey"];
    }
    if (![facebook isSessionValid]) { [facebook authorize:nil]; }
    
    return YES;
}
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
  syntaxhighlightApplication:(NSString *)syntaxhighlightApplication annotation:(id)annotation {
    return [facebook handleOpenURL:url]; 
}
- (void)fbDidLogin {
    NSUserDefaults *defaults = [NSUserDefaults standardUserDefaults];
    [defaults setObject:[facebook accessToken] forKey:@"FBAccessTokenKey"];
    [defaults setObject:[facebook expirationDate] forKey:@"FBExpirationDateKey"];
    [defaults synchronize];
}
- (void)fbDidNotLogin:(BOOL)cancelled{};
- (void)fbDidExtendToken:(NSString*)accessToken expiresAt:(NSDate*)expiresAt {};
- (void)fbDidLogout {};
- (void)fbSessionInvalidated {};

- (void)applicationWillResignActive:(UIApplication *)application {}
- (void)applicationDidEnterBackground:(UIApplication *)application {}
- (void)applicationWillEnterForeground:(UIApplication *)application {}
- (void)applicationDidBecomeActive:(UIApplication *)application {}
- (void)applicationWillTerminate:(UIApplication *)application {}
@end

소스 중 "페북앱아이디"라고 된 부분에는 자신의 앱아이디를 넣어준다. (페이스북 앱 등록 당시에 받은 것)
⌘+R을 눌러 실행

실행시 오류 또는 경고가 1개도 없어야 한다. 그렇지 않으면 뭔가 잘못된 것.

그러면 앱이 실행되자마자 사파리로 전환되고 페이스북 로그인 화면이 나온다.

⌘+Q를 눌러 시뮬레이터 종료

6 Hello-Info.plist 수정[ | ]

Project Navigator에서

Hello --- Hello --- Supporting Files --- Hello-Info.plist 클릭

그러면 Key, Type, Value 목록이 나온다.

빈 공간에서 우클릭 --- Add Row
Key값을 URL types으로 입력하고 ↵ Enter (그러면 왼쪽에 삼각형이 생김)^[5]
URL types 왼쪽 삼각형 클릭 (Item 0이 보이게 됨)
Item 0 왼쪽 삼각형 클릭 (URL identifier가 보이게 됨)
URL identifier를 더블클릭하여 URL Schemes로 수정 (왼쪽에 삼각형 생김)
URL Schemes 왼쪽 삼각형 클릭 (Item 0이 보이게 됨)
Item 0 오른쪽의 Value란에 "fb앱아이디"를 입력. ^[6]

7 실행[ | ]

⌘+R 눌러 실행

앱이 실행되자마자 바로 사파리 페이스북 화면으로 전환된다.

(사파리) 페이스북 로그인

자신의 페이스북 계정으로 로그인한다.

(사파리) 앱 허용 --- [Okay]

페이스북 앱 등록을 한 바로 그 개발자 계정이라면 이미 허용되어 있을 것이다.

그렇지 않다면 허용하기를 해주면 된다.

Okay를 누르면 사파리에서 다시 앱화면으로 전환된다. 여기까지 나오면 페북로그인 연동 성공.^[7]

8 기타[ | ]

기능 구현

로그인, 로그아웃, 추가권한 요청, 그래프 API 사용, 소셜 채널 통합

기타

여러 앱간 앱ID 공유하기

페이스북 아이본 앱 배포와 딥링크 설정

9 같이 보기[ | ]

10 주석[ | ]

↑ 프로젝트 폴더를 생성할 위치를 선택한다. 데스크탑 폴더는 필자가 선호하는 위치.
↑ 일단 실행하고 보는거다...
↑ 사실 개발자 모드를 활성화하지 않아도 실행은 된다. 하지만 디버깅하려면 해야겠지.
↑ 일단 실행하고 보는거다...2
↑ 새로 생기는 행의 Key 기본값은 Application Category로 되어 있다.
↑ 예를 들어 페북 앱아이디가 1234라면 fb1234를 입력하면 된다.
↑ 만약 Okay 버튼이 나오지 않는다면 AppDelegate.m와 Hello-Info.plist에 기입한 앱ID가 제대로되어 있는지 점검해보라.

11 참고[ | ]

https://developers.facebook.com/docs/mobile/ios/build/

[1] 프로젝트 폴더를 생성할 위치를 선택한다. 데스크탑 폴더는 필자가 선호하는 위치.

[2] 일단 실행하고 보는거다...

[3] 사실 개발자 모드를 활성화하지 않아도 실행은 된다. 하지만 디버깅하려면 해야겠지.

[4] 일단 실행하고 보는거다...2

[5] 새로 생기는 행의 Key 기본값은 Application Category로 되어 있다.

[6] 예를 들어 페북 앱아이디가 1234라면 fb1234를 입력하면 된다.

[7] 만약 Okay 버튼이 나오지 않는다면 AppDelegate.m와 Hello-Info.plist에 기입한 앱ID가 제대로되어 있는지 점검해보라.

[1]

[2]

[3]

[4]

[5]

[6]

[7]