블로그 이미지
정홍주
Azure에 대한 내용뿐만 아니라 새로운 트렌드로 빅데이터, BI, SharePoint, 앱 등의 내용을 다룹니다.

calendar

          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31            

Notice

2013.02.14 03:15 SharePoint/SharePoint 2013

 

SharePoint 2013 App – 공급자 (Provider-hosted App) (3)

 

공급자 앱으로 Windows Azure 사이트에 SharePointChrome CSOM을 적용해보겠습니다 

먼저 Chrome 을 적용해 보면 앞에서 살펴본 자동 호스트 앱에서의 script, div 에 대한 내용은 동일합니다. IE의 호환성 보기에 따라 화면이 달라지니 화면이 깨진다면 호환성 보기를 확인하면 됩니다.

http://redju.tistory.com/254 

위 주소에 적용한 head 태그의 script 태그는 동일합니다. Body 태그에서는 aspx 이므로 CSOM 결과를 나타낼 컨트롤을 추가했습니다.

<body style="display: none">

       

    <!-- Chrome control  -->

    <div id="chrome_placeholder"></div>

    <div>

    <asp:literal ID="lists" runat="server"></asp:literal>

    </div>

</body>

 

Visual Studio 2012 SharePoint 응용 프로그램에서 자동으로 생성해준 CSOM 코드를 이용해서 리스트의 제목을 화면에 출력할 수 있습니다.

간략히 아래와 같이 코드를 작성했습니다.

using (var clientContext = TokenHelper.GetClientContextWithContextToken(hostWeb, contextToken, Request.Url.Authority))

            {

                Web web = clientContext.Web;

                clientContext.Load(web, w => w.Lists.Include(l => l.Title)
.Where(l => !l.Hidden));

                clientContext.ExecuteQuery();

               

 

                string str = "<ul>";

                foreach (var item in web.Lists)

                {

                    str += "<li>" + item.Title + "</li>";

                }

                str += "</ul>";

                lists.Text = str;

 

                clientContext.Dispose();

            }

 

최종적으로 결과를 확인합니다. 공급자 앱에서도 Token 을 얻어오면 CSOM 으로 SharePoint 개체에 접근할 수 있다는 것을 확인할 수 있습니다.

신고
posted by 정홍주
2013.02.11 16:26 SharePoint/SharePoint 2013

 

SharePoint 2013 App – 공급자 (Provider-hosted App) (2)

 

앞에서 SharePoint 2013의 공급자(Provider-hosted) 앱을 알아보았는데 localhost가 아닌 실제 사이트로 구성해보도록 하겠습니다. Localhost로 하면 간단히 테스트가 가능하지만 실제 사이트로 테스트를 해보고 실제 앱으로 게시하게 될 것이며 여기서 Windows Azure에 사이트를 하나 만들어서 공급자 앱으로 구성해봅니다. 미리 Windows Azure에 웹 사이트를 생성해둡니다.

Visual Studio 2012를 통해 앱의 형식을 공급자 호스트로 선택하고 기본 값을 선택합니다
 

SharePoint 사이트로 가서 아래 주소를 입력해봅니다.

사이트모음 주소/_layouts/15/appregnew.aspx
 

ID와 암호의 경우 생성 버튼을 클릭합니다.

제목과 공급자 도메인과 리다이렉션 URI(https://공급자 도메인/Pages/Default.aspx) 을 입력합니다. https로 입력해야 합니다. Windows Azure의 웹 사이트 주소가 됩니다.

 

위 정보를 메모장이나 그림판에 저장하던지 아니면 만들기를 누르지 말고 VS 2012에서 구성 후 만들기를 클릭하도록 하겠습니다.

SharePoint 프로젝트의 AppManifest.xml 를 오른쪽 클릭하고 코드 보기를 하고 아래처럼 앱 등록에서의 정보를 이용해서 수정합니다.

<Properties>

    <Title>SharePointProviderAppDemo</Title>

    <StartPage>https://Azure웹사이트주소/Pages/Default.aspx?{StandardTokens}</StartPage>

  </Properties>

 

  <AppPrincipal>

    <RemoteWebApplication ClientId="ID" />

  </AppPrincipal>

</App>

 

웹 프로젝트의 web.config 로 이동합니다. apSettings 태그로 이동하여 앱 등록에서의 정보를 이용해서 수정합니다.

<appSettings>

    <add key="ClientId" value="ID" />

    <add key="ClientSecret" value="앱 암호" />

  </appSettings>

 

앱 등록만들기를 클릭하지 않았으면 만들기를 클릭합니다.

AppManifest.xml 의 디자인 보기로 이동하여 권한 에서 웹에 읽기 권한을 지정합니다.

 

또한 Windows Azure의 웹 사이트를 클릭하여 Configure 메뉴에서 ClientID 와 ClientSecret 에 대한 구성값을 지정합니다. Web.Config 에 구성한 내용과 동일합니다.

웹 프로젝트를 오른쪽 클릭하여 [게시] 메뉴를 클릭하여 Windows Azure 로 게시합니다. Publishing Profile을 통해 게시하는 방법은 아래 링크를 참고하십시오.

http://redju.tistory.com/185 

 

솔루션 폴더를 오른쪽 클릭하여 솔루션 배포를 클릭합니다.프로젝트가 다 배포되었다면 SharePoint 에서 배포한 앱을 클릭합니다. 그러면 공급자 앱으로 다른 사이트로 이동되는 것을 볼 수 있으며 CSOM으로 Web의 Title을 출력하는 것을 확인할 수 있습니다.
 

 

다음에서 Chrome 과 CSOM 을 위 사이트에 적용해보겠습니다.

신고
posted by 정홍주
2012.12.04 11:00 SharePoint/SharePoint 2013

 

SharePoint 2013 App – 자동 호스트 (Autohosted App) (2)

 

이번 글에서는 이전에서 작업한 SharePoint 2013 에 대한 앱을 ASP.NET MVC 4를 통해 SQL Azure 에 데이터를 구성해서 처리해보도록 하겠습니다.

 

새로 SharePoint 2013 응용 프로그램 프로젝트를 시작해도 되고 바로 이전에 생성해두었던 프로젝트에 MVC 4 프로젝트를 추가해도 됩니다.

저는 기존 프로젝트의 솔루션 탐색기에서 MVC 4 프로젝트를 추가 해서 작업하도록 하겠습니다. 새로 프로젝트를 생성해도 어차피 MVC 4 프로젝트를 추가해야 하기 때문에 동일한 작업에 해당됩니다.

 

MVC 4 웹 프로젝트의 이름은 AutohostMVC4Web 으로 지정하고 기존 솔루션에 추가합니다. 프로젝트 템플릿은 기본(레이아웃이 없는)으로 지정합니다.

 

솔루션에 추가된 모습은 아래와 같습니다. SharePoint 2013 응용 프로그램과 다른 2 개의 웹 프로젝트입니다. AutohostMVC4Web 프로젝트의 .NET Framework4.5라면 4로 변경합니다. 아니면 아래에서 변경하라는 메시지를 보게 됩니다.

 

나중에 CSOM 코드를 작성하기 위해 기존 웹 프로젝트에 있는 TokenHelper.cs 파일을 새로 추가한 MVC 4 프로젝트로 복사합니다. 네임스페이스를 프로젝트에 맞게 변경해줍니다.

namespace AutohostMVC4Web

{

 

    public class TokenHelper

    {

 

두 개의 웹 프로젝트 중에서 SharePoint 2013 응용 프로그램 프로젝트의 메니페스트에 연결된 웹 프로젝트를 지정해야 합니다. 솔루션 탐색기에서 SharePoint 2013 응용 프로그램 프로젝트를 클릭하고 속성에서 웹 프로젝트를 AutohostMVC4Web 으로 지정합니다. SharePoint 2013 어셈블리 등이 포함된다고 하고 프로젝트를 빌드하면 오류 없이 빌드됩니다.

 

이제 MVC 4 Model, Controller, View 작업을 진행해보도록 하겠습니다. SharePoint 2013 앱에 손쉽게 외부 데이터를 붙이는 내용을 알아보도록 하겠습니다. Windows Azure SQL Database 에 미리 테이블과 데이터를 생성해두었습니다.

 

ADO.NET 엔티티 모델을 추가하고 테이블은 Department 로 지정합니다.

 

프로젝트를 빌드하고 나서 Dept 컨트롤러를 추가하면서 모델과 데이터 컨텍스트를 지정합니다.

 

SharePoint 2013 응용 프로그램 프로젝트의 AppManifest 파일을 더블 클릭하고 시작 페이지를 Dept로 변경해줍니다.

 

자 그럼 프로젝트를 빌드하고 문제가 없으면 프로젝트를 배포하고 테스트 합니다.

 

아래처럼 기존 데이터를 표시해주고 추가, 수정, 삭제 작업을 하는 MVC 4 웹을 SharePoint 2013 App 으로 구성되었습니다.

 

모양이 너무 간단하기도 하고 그렇습니다. 바로 다음 글에서 MVC 4 프로젝트에서 SharePoint 2013 의 사이트의 개체를 액세스하는 것과 전체적인 모양을 지정하는 것을 바로 알아보도록 하겠습니다.

 

 

신고
posted by 정홍주
2012.11.26 08:00 SharePoint/SharePoint 2013

 

SharePoint 2013 Apps

 

SharePoint 2013 에서는 아래 그림처럼 사이트 콘텐츠에서 앱 추가라는 메뉴를 볼 수 있습니다.

앱 추가에서는 문서 라이브러리, 작업, 일정 도 앱으로 추가가 가능합니다. 또한 개발자들은 별도로 사용자 지정 앱을 개발해서 앱 추가에 나오도록 작업이 가능합니다.

 

 

앱을 개발하기 위해 가능한 도구는 아래와 같이 3 가지 형식이 있습니다.

구분

내용

 

Access 2013,

Office Templates with Apps

손쉽게 App을 작업,배포

Power User

 

 

 


Developer

“Napa” Office 365
 Development Tools

가벼운, 브라우저 개발 경험

Visual Studio 2012

커스터마이징, 다양한 앱 작업

적절히 골라서 사용하면 되는데 일단 VS 2012를 먼저 다루어보도록 하겠습니다.

위 중에서 특히 Visual Studio 2012를 통해서는 아래와 같은 앱을 구성할 수 있습니다. 앱에 따라 실행위치와 작업하는 내용이 다르며 ASP.NET MVC 로 앱을 구성할 수 도 있습니다.

 

http://msdn.microsoft.com/ko-kr/library/fp179930.aspx

 

3가지 형태의 앱을 개발하고 배포하는 부분은 뒤에서 자세히 다루도록 하겠습니다.

위와 같은 앱을 개발 하기 위해서는 VS 2012 Web Platform Installer 를 통해서 Microsoft Office Developer Tools for Visual Studio 2012 RTM 을 설치해주셔야 합니다.

http://redju.tistory.com/228

 

다음 글에서 Cloud 기반의 Auto-Host Hello World App을 생성하고 배포해서 테스트해보도록 하겠습니다.

 

 

신고
posted by 정홍주
prev 1 next