Visual Studio 2017에서 Raspberry Pi 3를 위한 Windows 10 IoT App 작성하는 방법

Visual Studio 2017에서 Raspberry Pi 3를 위한 Windows 10 IoT App 작성하는 방법을 다룹니다.

프로그래밍적인 부분에 대한 설명은 아직 준비 안되어있으며 새로운 프로젝트 생성 후, 샘플 코드를 가져와 실행시키는 방법을 설명합니다.

진행하기 전에 다음 포스팅을 먼저 해보셔야 합니다.

Raspberry Pi 3에 Windows 10 IoT Core 설치 및 샘플 앱 테스트

http://webnautes.tistory.com/918

1. 다음 링크에서 Visual Studio 2017 Community 설치 파일을 다운로드 받아 실행합니다.

https://www.visualstudio.com/ko/downloads/

이미 설치되어 있다면 시작 메뉴에서 Visual Studio Installer를 선택하고

수정을 클릭합니다.

2. 워크로드에서 유니버설 Windows 플랫폼 개발을 선택합니다.

창 오른쪽에 유니버설 Windows 플랫폼 개발에 대해 추가로 선택 가능한 항목이 보입니다.

C++ 유니버설 Windows 플랫폼 도구와 Windows 10 SDK(10.0.14393.0)을 추가로 체크해주었습니다.

설치를 진행하기 위해  창 오른쪽 아래에 위치한 수정 버튼(또는 설치 버튼)을 클릭합니다.

3. Windows IoT 프로젝트를 위한 템플릿을 설치해야 합니다.

Visual Studio의 메뉴에서  도구 > 확장 및 업데이트를 선택합니다.

확장 및 업데이트 창의 왼쪽에 있는 메뉴에서 온라인을 선택합니다.

창 오른쪽에 위치한 검색창에 Windows IoT Core Project Templates를 입력합니다.

잠시 후, Windows IoT Core Project Templates이 검색되면 다운로드를 클릭합니다.

Visual Studio를 종료시키면 확장 설치를 위한 창이 뜹니다. 수정을 클릭하면 설치가 진행됩니다.

4. PC를 개발자 모드로 변경해야 합니다.

윈도우 10의 시작 메뉴에서 설정을 클릭합니다.

업데이트 및 복구를 선택합니다.

창의 왼쪽 메뉴에서 개발자용을 선택합니다.

개발자 모드를 체크하면 관련 패키지가 설치됩니다.

5. 샘플 코드를 작성합니다.

( 출처 https://github.com/ms-iot/samples/archive/develop.zip )

Visual Studio 2017를 실행시켜서 새로운 프로젝트를 생성하기 위해 메뉴에서 파일 > 새로 만들기 > 프로젝트를 선택합니다.

Visual C++ 하위 항목인 Windows 유니버설을 선택합니다.

오른쪽에 보이는 템플릿 목록에서 비어 있는 앱(유니버설 Windows)를 선택합니다.

프로젝트 이름으로 HelloBlinky를 적어 주고 확인 버튼을 클릭하여 프로젝트를 생성합니다.

대상 버전을 빌드 15063으로 하면 Visual Studio 2015에서 열 수 없다고 파란색 느낌표 클릭시 알려줍니다.

여기에선 디폴트로 두고 확인을 클릭했습니다.  

솔루션 탐색기에 프로젝트를 위한 폴더 및 파일들이 다음과 같이 보입니다.

6. 솔루션 탐색기에서 MainPage.xaml 파일을 선택하고 다음 노란색 줄을 추가합니다.

<Page    x:Class="HelloBlinky.MainPage"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="using:HelloBlinky"    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    mc:Ignorable="d">    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">        <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">            <Ellipse x:Name="LED" Fill="LightGray" Stroke="White" Width="100" Height="100" Margin="10"/>            <TextBlock x:Name="DelayText" Text="500ms" Margin="10" TextAlignment="Center" FontSize="26.667" />            <TextBlock x:Name="GpioStatus" Text="Waiting to initialize GPIO..." Margin="10,50,10,10" TextAlignment="Center" FontSize="26.667" />        </StackPanel>    </Grid> </Page>

디스플레이 크기를 나타내는 콤보 박스를 23인치 데스크탑으로 바꾸고

화면에 보여지는 배율을 33.33 %로 수정합니다.(사용하는  모니터 해상도에 따라 조정하세요)

그러면 모니터에 보이게 될 디자인을 미리 확인해 볼 수 있습니다.

7. 솔루션 탐색기에서 MainPage.xaml.h 파일을 선택하고

노란 줄들을 추가합니다.

// // MainPage.xaml.h // MainPage 클래스의 선언입니다. // #pragma once #include "MainPage.g.h" namespace HelloBlinky { /// <summary> /// 자체적으로 사용하거나 프레임 내에서 탐색할 수 있는 빈 페이지입니다. /// </summary> public ref class MainPage sealed { public: MainPage(); private: void InitGPIO(); void OnTick(Platform::Object ^sender, Platform::Object ^args); Windows::UI::Xaml::DispatcherTimer ^timer_; Windows::Devices::Gpio::GpioPinValue pinValue_ = Windows::Devices::Gpio::GpioPinValue::High; const int LED_PIN = 5; Windows::Devices::Gpio::GpioPin ^pin_; Windows::UI::Xaml::Media::SolidColorBrush ^redBrush_ = ref new Windows::UI::Xaml::Media::SolidColorBrush(Windows::UI::Colors::Red); Windows::UI::Xaml::Media::SolidColorBrush ^grayBrush_ = ref new Windows::UI::Xaml::Media::SolidColorBrush(Windows::UI::Colors::LightGray); }; }

8. 솔루션 탐색기에서 MainPage.xaml.cpp 파일을 선택하고 노란 줄들을 추가합니다.

// // MainPage.xaml.cpp // MainPage 클래스의 구현입니다. // #include "pch.h" #include "MainPage.xaml.h" using namespace HelloBlinky; using namespace Platform; using namespace Windows::Foundation; using namespace Windows::Foundation::Collections; using namespace Windows::UI::Xaml; using namespace Windows::UI::Xaml::Controls; using namespace Windows::UI::Xaml::Controls::Primitives; using namespace Windows::UI::Xaml::Data; using namespace Windows::UI::Xaml::Input; using namespace Windows::UI::Xaml::Media; using namespace Windows::UI::Xaml::Navigation; using namespace Windows::Devices::Enumeration; using namespace Windows::Devices::Gpio; using namespace concurrency; // 빈 페이지 항목 템플릿에 대한 설명은 https://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x412에 나와 있습니다. MainPage::MainPage() { InitializeComponent(); InitGPIO(); if (pin_ != nullptr) { timer_ = ref new DispatcherTimer(); TimeSpan interval; interval.Duration = 500 * 1000 * 10; timer_->Interval = interval; timer_->Tick += ref new EventHandler<Object ^>(this, &MainPage::OnTick); timer_->Start(); } } void MainPage::InitGPIO() { auto gpio = GpioController::GetDefault(); if (gpio == nullptr) { pin_ = nullptr; GpioStatus->Text = "There is no GPIO controller on this device."; return; } pin_ = gpio->OpenPin(LED_PIN); pin_->Write(pinValue_); pin_->SetDriveMode(GpioPinDriveMode::Output); GpioStatus->Text = "GPIO pin initialized correctly."; } void MainPage::OnTick(Object ^sender, Object ^args) { if (pinValue_ == GpioPinValue::High) { pinValue_ = GpioPinValue::Low; pin_->Write(pinValue_); LED->Fill = redBrush_; } else { pinValue_ = GpioPinValue::High; pin_->Write(pinValue_); LED->Fill = grayBrush_; } }

9. LED를 다음처럼 연결합니다.

10.  플랫폼을 ARM으로 변경하고 그 옆에 있는 것은 원격 컴퓨터로 설정합니다.  

11.  메뉴에서  프로젝트 > HelloBlinky 속성을 선택합니다.

속성 페이지 창의 왼쪽 항목 중 디버깅을 선택합니다.

컴퓨터 이름 선택시 보이는 콤보박스에서 찾기를 선택합니다.

라즈베리파이3의 장치 이름과 아이피가 자동으로 감지됩니다. 해당 항목을 클릭합니다.

자세한 정보를 보여줍니다.  선택을 클릭합니다.

자동으로 감지 안된 경우 수동으로 아이피를 입력하고 선택을 클릭합니다.

확인을 클릭하여 속성 페이지를 닫습니다.

12. F5키를 눌러 컴파일 및 배포를 시작합니다.  배포가 완료되면 툴바에 다음처럼 보이게 됩니다.

앱이 정상적으로 실행되면 라즈베리파이3에 연결된 LED가 깜빡이는 것을 볼 수 있습니다.  

13.  이제 실행 결과를 원격으로 확인해봅니다. 시작메뉴에서 대시보드를 실행합니다.

실행 후 잠시 기다리면 내 장치에 라즈베리파이3 항목이 추가됩니다.

마우스 우클릭하여 Device Portal에서 열기를 선택합니다.

( 이전 포스팅에서 했던 작업인데  설정이 저장되지 않는듯합니다. )

사용자 이름에 Administrator, 암호에 p@ssw0rd를 입력하고 확인을 클릭합니다.

메뉴에서 Remote를 선택합니다.

Enable Windows IoT Remote Server를 체크하고 잠시 기다립니다.

잠시 후, 활성화 되었다는 메시지가 보이게 됩니다.

14. 다시 마우스 우클릭을 하여 IoT 원격 클라이언트 시작을 선택합니다.

잠시 기다리면 UI가 보입니다.  LED 처럼  동그라미가 점멸합니다.