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

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

이번 강좌는 지난번에 만들었던 영어 단문 발음 연습 앱에 TTS 기능을 추가해서 좀더 효과적인 학습앱 개발을 하는 것 입니다.

TTS는 글씨를 음성으로 변경해서 스피커를 통해서 들려주는 서비스로, 우리 주위에서 상당히 많이 사용되고 있는 기술 입니다. Windows에서는 기본적으로 한글 음성 서비스를 지원하고 있기 때문에 손쉽게 이런 기능을 구현 할 수 있습니다.

유튜브 채널 구독 신청 plz~

* 라즈베리파이3에 한국어 음성 파일 설치하기

완성 앱 데모

Part 1

* 환경 및 준비
* 참고 자료
* TTS, Text-To-Speech Service
* TTS, Text-To-Speech
* SSML Element
* TTS - Demo
* 영어 단문 발음 연습 앱 V2
* PC 환경 설정 확인
* 앱 개발 순서
* 음성 출력 방법
* 단문 발은 연습 페이지 구현 로직

Part 2

* 단문 초기화 기능 구현
* cvs 파일 프로젝트에 추가
* 단문 헬퍼 파일 추가, 구현
* CommonHelper 추가, 구현
* Singleton을 이용해서 싱글톤 인스턴스 만들어서 사용하기

Part 3

* 단문 연습 페이지 구현 - 시작 버튼 클릭 시 단문 하나 선택 하기 구현
* MainPage.xaml 화면 구현
* MainViewModel.cs 구현
- 커맨드 추가
- ShowText, Result 프로퍼티 추가 및 디자인 타임 데이터 연결
- 화면에 바인딩
- 화면에 MediaElement 컨트롤 추가
* Blend를 이용해서 커맨드와 MediaElement 연결
* MainPage.xaml 화면 추가 구현
* MainViewModel.cs 추가 구현
- Init() 구현
- NavigationServiceEx 인스턴스 가지고 와서 이벤트 연결
- NavigationService_Navigated 이벤트 핸들러 구현
- 시작 버튼 클릭 시 단문 하나 선택하기 구현

Part 4

* 단문 연습 페이지 구현 - 음성 출력 구현
* MainViewModel.cs 추가 구현
- SpeechSynthesizer 인스턴스 생성 및 초기화
- 음성 스트림 생성
- Voice 목록에서 한국어, 영어 두개의 voice 찾아서 사용
- 음성 스트림 출력
* MediaBehavior 추가 및 구현
* Blend를 이용해서 MediaBehavior를 MediaElement와 연결
* MediaElement에 바인딩 수정

Part 5

* 단문 연습 페이지 구현 - 음성 입력 받기와 결과 표시
* MainViewModel.cs 에 음성 입력 받기 구현
- MediaEndedCommand가 실행 된 후 로직 구현
- RecognizeWithUIAsync를 사용해서 음성 입력 받기
- UIOptions 수정

Part 6

* 단문 연습 페이지 구현 - 틀렸을 경우 처리와 반복 학습 처리 구현
* MainViewModel.cs 추가 구현
- HasStart 프로퍼티로 변경
- 음성 스트림 생성 부분 메소드로 변경
- 한국어일 때와 영문일 때 음성 스트림 생성 방법 다르게 구현
- 음성 입력 부분 메소드로 변경
- 틀렸을 때 영문 음성 출력이 되도록 구현(SSML 사용)
- 영문 음성 시작전 1초의 딜레이 추가
- 반복 학습을 위해 랜덤 단어 선택 부분을 메소드로 변경

Part 7

* 단문 연습 페이지 구현 - 종료 버튼 처리
* Target Version을 변경해서 Property Maker를 이용한다.
* MainPage.xaml 화면 추가 구현
- BoolToVisibilityConverter를 추가해서 버튼 보이기/숨기기 작업

PPT

iot-tts.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

이번 포스트는 GitHub와 VS를 이용해서 어떻게 프로젝트를 관리하는가에 대한 내용입니다.

5개의 part로 구분되어 있으며, 각 part별 내용은 바로 상단에 있으니 필요한 내용을 바로 찾아서 보실 수 있을 것 같습니다.

앞으로 GitHub를 이용해서 오픈 소스 프로젝트를 진행하기 위한 준비 단계이니 꼭~ 참고해 주세요

혹시 내용 중 수정 사항은 이곳에 리플로 남겨주시거나 메일로 알려주시면 수정하도록 하겠습니다.

ps. diablo3hub앱은 빌드 후 실행 가능하게 수정하도록 하겠습니다.

-> 수정 완료했습니다.

Part1
환경 및 준비
참고 자료
What is GitHub?
Why git for developer
GitHub 가입

Part2
GitHub Flow - Create a branch
GitHub Flow – Add commits
GitHub Flow – Open a Pull Request
GitHub Flow – Discuss and review your code
GitHub Flow – Deploy
GitHub Flow – Merge

Part3
GitHub – New repository
GitHub – Project 추가
GitHub – Extension download and install
UWP 프로젝트 추가, 커밋, 싱크

Part4
GitHub – Collaborators 추가
GitHub – Clone repository
GitHub – VS와 연동 작업

Part5
GitHub - Fork 후 작업하기

PPT

GitHub와VS연동작업.pptx