티스토리 뷰

반응형

Live SDK를 이용해서 SkyDrive를 사용하는 예제를 만들어 보자. 이번 회에서는 Application을 등록하는 부분과, Live SDK를 이용해서 컨넥션을 만드는 부분까지 설명하도록 하겠다. 우선 아래 셈플 프로젝트를 다운로드 받고, 페이지에 있는 링크를 통해서 Live SDK를 다운로드를 받아서 설치한다.

Windows 8 Consumer Preview 버전에서 개발된 소스입니다.

참고 셈플 프로젝트
PhotoSky - SkyDrive Sample
http://code.msdn.microsoft.com/windowsapps/Live-SDK-Windows-Developer-8ad35141

Live SDK 지원 내용(Live Connect Downloads)
http://msdn.microsoft.com/en-us/live/ff621310 

Live SDK v5.2 preview 다운로드 사용

1) Live ID : Live ID를 이용한 자원에 접근 가능
2) SkyDrive : 사진이나 문서를 업로드/다운로드 할 수 있다
3) Hotmail : 연락처를 생성/업로드, 캘린더에 일정을 추가할 수 있다.
4) Messenger : IM Messager에 접근 할 수 있다.

인터랙티브 SDK - api를 직접 실행해서 결과를 확인할 수 있음
http://isdk.dev.live.com/

준비가 완료 되었으면 새로운 프로젝트를 만들고, 시작해 보자.

 

1. 신규 프로젝트 생성

File -> New -> Project -> Visual C# -> Windows Metro style -> Blank Application ->
Name : SkyDriveSample -> OK

2. References 추가

Solution Explorer -> SkyDriveSample 프로젝트 선택 -> 마우스 오른쪽 클릭 -> Add Reference -> Windows -> Extensions -> Live SDK 선택 -> OK

3. 프로젝트에 SkyDriveDataSource.cs를 추가한다. (셈플 프로젝트에 있는 것을 사용)

파일 내용 중 중요한 부분

/// <summary>
/// Creates a collection of groups and items with hard-coded content.
/// 데이터 소스
/// </summary>
public sealed class SkyDriveDataSource
{
    private ObservableCollection<SkyDriveAlbum> _itemGroups = new ObservableCollection<SkyDriveAlbum>();
    /// <summary>
    /// 스카이드라이브 앨범 그룹 컬렉션
    /// </summary>
    public ObservableCollection<SkyDriveAlbum> ItemGroups
    {
        get { return this._itemGroups; }
    }

    /// <summary>
    /// 생성자
    /// </summary>
    public SkyDriveDataSource()
    {
    }

    /// <summary>
    /// 데이터 로드
    /// </summary>
    internal async void LoadData()
    {
        //세션을 새로 만들고
        LiveConnectClient client = new LiveConnectClient(App.Session);
        //앨범을 가지고 오고
        LiveOperationResult albumOperationResult = await client.Get("me/albums");
        //앨범 목록
        dynamic albumResult = albumOperationResult.Result;
        //앨범결과의 데이터에서
        foreach (dynamic album in albumResult.data)
        {
            //스카이드라이브 앨범생성
            var group = new SkyDriveAlbum(album.id, album.name, album.name, @"ms-appx:///Assets/LightGray.png", album.description);
            //앨범아이디에 해당하는 파일들을 다시 조회
            LiveOperationResult pictureOperationResult = await client.Get(album.id + "/files");
            //사진결과
            dynamic pictureResult = pictureOperationResult.Result;
            //사진결과 데이터에서..
            foreach (dynamic picture in pictureResult.data)
            {
                //스카이드라이브 파일생성
                var pictureItem = new SkyDriveFileItem(picture.id, picture.name, picture.name, picture.source, picture.description, picture.description, group);
                //앨범에 파일 추가
                group.Items.Add(pictureItem);
            }
            //앨범을 앨범그룹에 추가
            this.ItemGroups.Add(group);
        }

    }
}

4. App.xaml.cs

private static LiveConnectSession _session;
/// <summary>
/// 라이브 컨넥션 세션
/// </summary>
public static LiveConnectSession Session
{
    get
    {
        return _session;
    }
    set
    {
        _session = value;
        LoadData();
    }
}

static SkyDriveDataSource skyDriveDataSource;
/// <summary>
/// 스카이드라이브 데이터 소스
/// </summary>
private static void LoadData()
{
    skyDriveDataSource.LoadData();
}

5. BlankPage.xaml

<Page
    x:Class="SkyDriveSample.BlankPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:SkyDriveSample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Controls="using:Microsoft.Live.Controls"
    mc:Ignorable="d">

    <Grid Background="{StaticResource ApplicationPageBackgroundBrush}">
        <StackPanel>
            <StackPanel Orientation="Horizontal" d:LayoutOverrides="Width">
                <Grid HorizontalAlignment="Left" Height="123" VerticalAlignment="Top" Width="345">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="217*"/>
                        <ColumnDefinition Width="128*"/>
                    </Grid.ColumnDefinitions>
                    <Image x:Name="imgProfile" Grid.Column="1" HorizontalAlignment="Left" Height="103" Margin="10,10,0,0" VerticalAlignment="Top" Width="103"/>
                    <TextBlock x:Name="txtUserName" Height="103" Margin="10,10,10,0" TextWrapping="Wrap" VerticalAlignment="Top" FontSize="20"/>
                </Grid>
                <Controls:SignInButton x:Name="btnSignIn" Content="SignInButton" VerticalAlignment="Top"
           Height="46" Width="157"
           Scopes="wl.signin wl.skydrive" Branding="Skydrive"/
>
            </StackPanel>
        </StackPanel>
    </Grid>
</Page>

Scopes : 중요한 프로퍼티로 허용 범위를 지정한다.
Scopes and permissions
http://msdn.microsoft.com/en-us/library/hh243646.aspx

Obtaining user consent
http://msdn.microsoft.com/en-us/windowslive/hh278359

Branding : 아이콘 모양 지정

6. BlankPage.xaml.cs

public sealed partial class BlankPage : Page
{
    public BlankPage()
    {
        this.InitializeComponent();

        btnSignIn.SessionChanged += btnSignIn_SessionChanged;
    }

    /// <summary>
    /// 세션이 변경되면..
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    void btnSignIn_SessionChanged(object sender, Microsoft.Live.Controls.LiveConnectSessionChangedEventArgs e)
    {
        if (e.Status == LiveConnectSessionStatus.Connected)
        {
            App.Session = e.Session;
            LoadProfile();
        }
    }

    private async void LoadProfile()
    {
        //컨넥션 만들고
        LiveConnectClient client = new LiveConnectClient(App.Session);
        //내정보 가지고 오고
        LiveOperationResult liveOpResult = await client.Get("me");
        //결과를 런타임에서 만들고
        dynamic dynResult = liveOpResult.Result;
        this.txtUserName.Text = dynResult.name;
        //내 사진을 가지고 오고
        liveOpResult = await client.Get("me/picture");
        //사진 경로 찾아서
        dynResult = liveOpResult.Result;
        //로케이션 정보를 가지고 이미지 만들어서 사진
        this.imgProfile.Source = new BitmapImage(new Uri(dynResult.location));
    }

    /// <summary>
    /// Invoked when this page is about to be displayed in a Frame.
    /// </summary>
    /// <param name="e">Event data that describes how this page was reached.  The Parameter
    /// property is typically used to configure the page.</param>
    protected override void OnNavigatedTo(NavigationEventArgs e)
    {
    }
}

* 참고자료 추가
REST API
http://msdn.microsoft.com/en-us/library/hh243648.aspx

WL.api function
http://msdn.microsoft.com/en-us/library/hh550838.aspx

여기가지 작성하고 실행을 해본다.

처음 실행이 되었을 때 Sign In 버튼이 비활성화가 되어 있다가, 활성화가 되면서 로그인이 가능한 상태가 되는데, 그 때 버튼을 누르면 Live SDK를 이용한 프로그램으로 등록을 하라는 메시지가 출력된다.

7. Live SDK에 App 등록하기

Live SDK를 이용하려면, 앱을 미리 등록해 하는데 Metro style app은 아래 주소에서 등록을 하면 된다.

Windows Push Notifications & Live Connect
https://manage.dev.live.com/build

 Step 1
Package.appxmanifest를 열어서 Packaging 탭을 선택하면 아래와 같은 정보가 보이는데.. 그 중 Package Display Name과 Publisher 이름을 복사해서 Step 2에 붙여넣는다.

 Step 2
위에서 2가지 정보를 복사해서 붙여 넣은 후 I accept 버튼을 클릭한다.

Step 3
최종 단계로 Package name이란 BUILD.958e... 부분을 복사해서 Package.appxmanifest 화면에 붙여 넣으면 된다.

위에까지 작업 한 후 실행을 하면 아래와 같은 화면이 나오는 것을 볼 수 있다.

Yes를 클릭하면 앞으로는 자동으로 로그인이 된다.

 방금 등록된 app은 Windows Live My Apps 페이지에서 확인 할 수 있다.

https://manage.dev.live.com/Applications/Index

8. 소스파일

 SkyDriveSample.zip

반응형
댓글