(Xamarin Forms) 고릴라 플레이어 설치하기 - Gorilla.Player.Setup.1.2.0.6

Xamarin Forms 으로 모바일 개발을 하다보면

xaml 에 대한 화면을 미리 보고 싶을때가 있다. (아니 미리보는게 편하다.)

다행히 Xamarin.Forms Previewer 가 있어 사용해 봤는데 너무 느려서

사용을 안해왔다;; 코딩을 바꾸는데도 버벅인다;;

차라리 디바이스에 계속 배포해서 확인하는게 더 빠르다.

그런데 가끔 유투브 동영상을 보면 고릴라 플레이어로 디자인을 미리 보기 하면서 코딩하는걸 봐왔다..

그런데 고릴라 플레이어 셋팅하는게 그리 간단하지 않아 보여

계속 미루다가 드디어 오늘 셋팅을 완료했다.

그래서 과정을 정리해본다.

 

일단 아래 블로그는 mac 환경에서 환경 셋팅을 한 내용이다.

http://picory.com/entry/Forns-XAML-Previewer-Gorilla-Player

난 Window10 으로 시도했다.

 

1. 고릴라 플레이어 사이트에서 계정을 만든다.

아래링크로 들어가 REGISTER NOW 를 클릭한다.

https://grialkit.com/gorilla-player/

계정을 만든다. 암호는 대문자가 포함되어야한다. (특수문자는 없어도 됨)

 

계정을 만들었으면 계정 메일로 아래와 같이 메일이 오고 링크를 클릭하여 메일 인증을 한다.

메일 인증 완료!

 

2. 고릴라 플레이어(Gorilla Player)를 다운로드 한다.

아래 링크로 들어가서

https://grialkit.com/gorilla-download/

Windows 버전을 다운로드 하고 설치를 한다.

가끔사이트가 먹통이 될때가 있어 설치파일을 첨부한다.

Gorilla.Player.Setup.1.2.0.6.z01

Gorilla.Player.Setup.1.2.0.6.z02

Gorilla.Player.Setup.1.2.0.6.z03

Gorilla.Player.Setup.1.2.0.6.z04

Gorilla.Player.Setup.1.2.0.6.zip

설치 과정은 아래와 같다. 특별한 건 없다.

 

3. 고릴라 플레이어를 실행한다.

고릴라 플레이어 실행 과정이다.

아래 그림에서는 당연히 동의를....

설치할걸 체크해야하는데 기본적으로 알아서 잘 체크가 되어있다.

체크 추가 없이 다음.. (Install addin for Visual Studio, Install Player + Sample)

설치 진행중...

설치 완료!!

아래 처럼 고릴라 아이콘이 시계표시줄에 표시되어있으면 일단 정상적으로 설치 및 실행이 된것이다.

 

4. 시뮬레이터 셋팅

실행(Continue)을 하면 아래와 같은 화면이 나온다.

친절하게 설명이 잘되어있다.

아래 부분이 조금 헷깔리는데 구글 플레이에서 고릴라플레이어앱을 다운받거나 직접 소스를 열어서 설치를 할수 있다.

시뮬레이터에 설치할것이므로 소스를 열어서 직접 설치를해야한다.

아래 화면에서 빨간색 버튼을 클릭한다. 그러면  Player.sln 솔루션 이 열린다.

아래와 같이 솔루션이 열리면 구동하고자 하는 시뮬레이터를 선택한 후 Run 한다.

그럼 아래 처럼 시뮬레이터에 고릴라 플레이어앱이 설치가 된다.

설치된 앱을 구동해 보자.

앱을 구동하면 Connecting 을 기다리고 있다.

 

5. xaml 파일 보기

이제 xaml 파일을 열어 디자인이 보여지는지 확인해보자.

Visual Studio 를 열고 도구>Gorilla Player 에서 아래 그림과 같이 Disconnect From Gorilla  으로 되어있는지 확인한다.

만약 안되어있다면 Connect From Gorilla 를 실행해야된다.

이제 xaml 파일을 하나 선택하고 마우스 우측 버튼의 메뉴에서

Stick Gorilla to this XAML 를 클릭한다.

그럼 아래 처럼 시뮬레이터에서 먼가 연결이 진행된다.

엇 에러가 발생되었다.

xaml 에 에러가 있거나 하면 아래 처럼 에러가 표시된다.

마스터 디테일 페이지(MasterDetailPage) 인 경우는 아직 표현하지 못하는것 같다.

아래처럼 xaml 페이지가 정상적으로 시뮬레이터에 표시가 된다.

xaml 의 내용이 시뮬레이터에 보여지고 있다면 아래처럼 우측 상단에 고릴라 아이콘이 나타난다.

xaml 파일을 변경하면 실시간으로 시뮬레이터에 반영된다. (아래 동영상참고)

* 참고

도움말 : https://github.com/UXDivers/Gorilla-Player-Support

* 추가

혹 비쥬얼 스튜디오에 addin 이 제대로 되지 않았다면 직접 addin 쪽만 아래 링크나 첨부파일로 설치를 진행하면된다.

https://marketplace.visualstudio.com/items?itemName=UXDivers.GorillaPlayerVisualStudioddin

UXDivers.Artina.Player.VSAddin.vsix