KakiSoft - Windows 10 app development. UWP, Universal Windows Platform

2019-07-24 버전

Visual Studio 2019 Preview 버전을 이용해서 Blazor client-side 앱을 만드는 과정을 상세히 설명합니다.

https://docs.microsoft.com/en-us/aspnet/core/blazor/get-started?view=aspnetcore-3.0
.NET Core 3.0 Preview SDK
Blazor template
Visual Studio 2019 Preview
Microsoft Edge Insider

https://youtu.be/n9kiD3WxqL8

UWP 앱에서 Cookie 관리하는 방법에 대해서 알아 보도록 하겠습니다.

* Cookie
클라이언트 컴퓨터에 저장된 작은 정보입니다.
클라이언트 컴퓨터에 Username, Password, City, PhoneNo 등의 사용자 환경 설정 정보를 저장하는 데 사용됩니다.
Persist Cookie : 만료되는 시간이 없는 지속형 쿠키
Non-Persist Cookie : 만료시간이 존재하는 비 지속형 쿠키

* HttpBaseProtocolFilter
Sharing Sessions Between HttpClient and WebViews on Windows Phones
HttpBaseProtocolFilter 클래스는 HttpClient 인스턴스에서 사용하는 기본 필터 또는 처리기를 제공합니다. 추가 필터가 HttpClient 인스턴스에 추가되지 않으면 HttpBaseProtocolFilter 개체가 유일한 필터가됩니다.
HttpBaseProtocolFilter 클래스는 여러 가지 저수준 HTTP 스택 동작을 전환하기위한 속성 집합을 제공합니다.

https://youtu.be/cr-sduHHiAs

소스

https://github.com/kaki104/PrismSample2019

Prism으로 시작하는 UWP app Part12
UWP에서 Script 직접 호출과 팝업 처리

UWP 앱에서 Script를 직접 호출하는 방법과 window.alert, window.confirm 등의 팝업 처리에 대해서 알아보도록 하겠습니다.

* InvokeScriptAsync
특정 인수를 사용하여 현재로드된 HTML에 지정된 스크립트 함수를 실행 합니다.
InvokeScript() 메소드는 Windows 8.1 이후 변경되거나 사용할 수 없습니다.
리턴 타입이 string이라는 점을 유의하시기 바랍니다.

* window.alert(), window.confirm() 사용 불가?

UWP의 MessageDialog()를 이용해야 합니다.
Package.appxmanifest - Content URIs
notify를 허용할 Uri 주소를 입력합니다.
window.external.notify()
var messageDialog = new MessageDialog(e.Value);
await messageDialog.ShowAsync();

https://youtu.be/ioDI03iXYy0

소스 : https://github.com/kaki104/PrismSample2019

WebView - Async, EventAggregator - Prism으로 시작하는 UWP app Part11

JavaScript에서 Async 메소드를 호출하고 결과를 처리하는 방법
Windows Runtime Component에서 비동기 메소드를 처리하는 방법
IEventAggregator를 이용해서 UWP나 다른 프로젝트로 이벤트를 넘기는 방법 등에 대해서 다루고 있습니다.

* Async : Windows Runtime Component에서 async Task 메소드 사용 방법
* IEventAggregator : 개념 및 사용 방법

https://youtu.be/LBS-UJtG2PQ

소스

https://github.com/kaki104/PrismSample2019

WebView 컨트롤에서 JavaScript와 연동을하는 기본적인 방법을 설명합니다.

* GitHub에서 소스 다운로드 받고, Branches에서 Part9 소스 싱크하기
* Windows Runtime Component 설명
* Examples

https://youtu.be/R89emHtaFvU

기존 VS 2017 개발 환경을 VS 2019 환경, Nuget package 업그레이드를 했습니다.
또한, WebView를 추가하고, User-Agent를 변경하여 모바일 브라우저로 인식이 되도록 하는 방법을 설명합니다.

* 개발 환경 설명
* 따라하기 위해서 GitHub에서 소스를 어떻게 받아서 사용하는지 설명
* WebView 페이지 추가
* User-Agent란
* UserAgentHelper 추가하고 사용하기

https://youtu.be/pou8078vX2w

소스 : https://github.com/kaki104/PrismSample2019

WinForms, WPF 프로젝트에서 Windows 10 API를 사용하는 방법과 MSIX 패키징을 만들어서 배포하는 방법등을 설명합니다.

* 환경
* Microsoft.Windows.SDK.Contracts
* Microsoft.Toolkit.Wpf.UI.Controls
* XAML Islands Components Future
* Seamless application deployment, updates, and optimized for DevOps
* MSIX Core
* 트러블슈팅

https://youtu.be/oVJJMGlc_Ew

* 소스 :

https://github.com/kaki104/WpfTest

Windows 10 IoT Core에 음성으로 명령을 내려서 음악을 재생, 다음곡, 이전곡, 장르 검색의 기능을 수행하는 UWP 앱을 개발하는 과정을 동영상으로 만들었습니다. 개발 소스, 동영상, ppt를 참고하시면 여러분도 멋진 앱을 만드실 수 있을 것이라고 생각합니다.

감상하시기 전에 유튜브 채널 구독 신청 부탁드립니다~. 유튜브 채널 바로가기

완성된 앱 시연 영상

Part 1

* 환경 및 준비
* 참고 자료
* Media Player
* SRGS
* IoT Player with voice commands
* Begin Playback
* PC 환경 설정 확인
* 앱 개발 순서
* 뮤직 플레이 페이지 구현 로직

Part 2

* 프로젝트 추가
* package.appmanifest 설정
* 앱 초기화 모듈 구현
- 외장 디스크 연결 확인
- 일단 음악 재생이 되도록 작업
* MediaPlayerViewModel.cs
- Navigation_Navigated 구현
- 음성 인식 초기화
- MediaPlayerElement 초기화

Part 3

* SRGS 만들기
- begin playback
* MediaPlayerViewModel.cs
- SRGS 파일 불러와서 음성 인식 컴파일
* 시작 페이지를 MediaPlayerPage로 변경
* MediaPlayerViewModel.cs
- 시작하면서 음성 인식 시작 하도록
- 음성 인식 후 넘어오는 데이터 확인
- tag에 ECMAScript를 이용해서 반환 결과 변경
- 음성 인식 결과 확인
- 음성 인식 결과를 action에 넣어서 어떤 명령인지 구분해서 명령 실행
- BeginPlaybackAsync() 실행
- DispatcherHelper 초기화, 사용
- 결과 확인

Part 4

* 음성 입력 대기 상태 구현 및 음성 명령 종류에 따른 분기 처리 시작
* SRGS에 기능 추가
- pause playback
- MediaPlayerViewModel에도 pause playback 구현
- stop playback
- next playback
- previous playback
* MediaPlayerPage.xaml 디자인 작업
- Binding

Part 5

* Begin playback 구현
* MediaPlayerViewModel.cs
- InitPlaylistAsync()
- 외장 드라이브에서 파일 목록 가지고오도록...
- BeginPlaybackAsync() 수정
- GetMusicPropertiesAsync()를 사용해서 타이틀, 앨범, 아티스트, 이미지 출력
- PosterSource 수정
* MediaPlayerBehavior 추가 및 구현
- CurrentPlaybackState 추가
* MediaPlayerBehavior를 MediaPlayerElement와 연결 - blend
- Binding
* MediaPlayerViewModel.cs
- Init() 수정 - PropertyChanged 추가
* MediaPlayerBehavior 수정
- MediaPlayer를 MediaPlayerElement에 추가

Part 6

* 외장 드라이브에서 파일 목록 가지고 오는 것 포기!! 그래서 Music Library에서 파일 목록을 가지고 오는 방법으로 변경
- SD 카드에 Music Library에 파일 복사하기..
* MediaPlayerViewModel.cs
- CreateFileQueryWithOptions()를 이용해서 파일 필터링과 목록 조회를 동시에
* Pause playback 구현
* CommandMediaPlayer enum 추가
- Messenger를 이용해서 MediaPlayerBehavior에 명령 전달
* MediaPlayerBehavior 수정
- Messenger 구독
- Source 프로퍼티 추가
- ExecuteCommandMediaPlayer 구현

Part 7

** Next, Previous 기능 구현 동영상은 생략 합니다.

(편집했는데..날려서..ㅜㅜ 혹~~~~~~시라도..필요하다고 하시는 분이 계시면..한 10분 정도;; 그러면 다시 편집해서 추가하도록 하겠습니다~)

* 음악 검색 기능 구현
- Filter 추가
* MediaPlayerViewModel.cs
- SelectSourceAsync()
* SRGS.xml 파일에 장르 추가
- 재생 완료 후 다음 곡으로 넘어가는 기능 구현
- ContinuousRecognitionSession_Completed 이벤트 발생 이유에 대해..
* 존재하지 않는 장르를 이야기하면 미친듯이 돌아가는 버그!! 잡아주세요

PPT

iot-mediaplayer.pptx

IoT Core에서 동작하는 Speech Recognition에 대한 내용입니다.

ppt작성, 코딩, 촬영, 편집까지.. 시간이 많이 걸리내요.. 아침에 일어나서 바로 시작한 작업인데..밤새고 새벽에..쿨럭..

음성 인식에 대해서 처음 접하시는 분들이 보시고 이해하실 수 있으면 좋겠습니다. 

앞으로 지속적으로 음성 인식과 연결된 주제에 대해서 동영상을 만들려고 합니다. 그 끝에는 어떤 것이 있을까요?

높은 산의 꼭데기만 보고 뛰어서 올라가면 힘이 마니 듭니다. 하지만, 산 아래에서 부터 천천히 꾸준히 올라간다면, 아무리 높은 산이라도 정복 할 수 있습니다. 그러니, 모두 함께 천천히 올라갔으면 좋겠습니다.

마지막, 한가지 작은 부탁이라면, 유튜브 구독자가 좀더 늘었으면 하는..후후

유튜브 채널 바로가기

Part 1

* 환경 및 준비
* 참고 자료
* Speech Recognition Constraints
* Speech Recognition 기초
* SpeechRecognizer
* List of speech recognition supported languages

Part 2

* 영어 말하기 연습 앱 개발
* PC 환경 설정 확인
* 앱 개발 순서
* 프로젝트 생성
* 세팅

Part 3

* 영어 단문을 CSV 파일로 생성
* 생성한 파일 프로젝트 추가하고 빌드시 앱 설치 폴더에 복사되도록 설정
* 파일을 읽어서 ShellPage CaseList 프로퍼티에 추가
* GitHub에 Project생성
* To-do 등록 - issues로 변경

* 브랜치 생성

* PR 생성

Part 4

* 기본 연습 페이지 구현 시작
* MainPage.xaml.cs 코딩
- SpeechAndTTS 셈플 프로젝트 중 Scenario_ListConstraint의 코드를 복사해서 붙여 넣는 방법으로 기본 작업
- OnNavigateTo 코딩
- AudioCapturePermissions 클래스 복사
- InitializeRecognizerAsync 코딩
- CommonHelper 클래스 추가, ShowMessageAsync 추가

Part 5

이번 포스트 주제는 Windows 10 IoT Core - Hello World 입니다.

IoT를 처음 시작하시려는 분들을 위한 포스트로, 자세하게 설명하고 있습니다. 앞으로 동영상의 방향은 IoT를 이용한 여러가지 앱을 만들어서 응용하는 방향으로 진행할 예정입니다.

많은 구독 신청 부탁드립니다.

Part1

*Why Windows 10 IoT Core?
Windows 10 IoT Core Compatible Boards
Raspberry Pi 3 kits
What can you make?
라즈베리파이에 윈도우 설치 및 설정
해상도 설정 참고 자료

Part2

Hello World Windows 10 IoT Core

PPT

iot-helloworld.pptx