블로그 이미지
* Microsoft MVP - Windows Development 2014 ~ 2019 5ring * LINE : kaki104 * facebook : https://www.facebook.com/kaki104 https://www.facebook.com/groups/w10app/ kaki104

카테고리

List All (551)
Xamarin Forms (4)
Bot Framework (19)
Azure (9)
Windows 10 (35)
Facebook News & Tips (158)
Windows App(Universa.. (83)
Windows 8&8.1 (113)
Windows Phone 8 (42)
Silverlight (37)
HTML5 & MVC4 (16)
WPF (1)
Portable Class Library (2)
Uncategorised Tips a.. (3)
Kinect for Windows (2)
ETC (12)
kaki104 Scrap (4)
App News (11)
Total521,316
Today35
Yesterday108

Accessing Native Features with DependencyService


윈도우 10 앱 개발(Windows 10 UWP app)에 박문찬 MVP입니다. 자마린에서는 각 디바이스 별로 기능을 구현해야하는 경우 DependencyService를 이용해야 합니다. 그래서, 자마린 홈 페이지를 참고해서 Text-To-Speech 만들어 보겠습니다.



1. 참고

Accessing Native Features with DependencyService



2. 시작하기


DependencyService를 사용하면 앱이 공유 코드에서 플랫폼 관련 기능을 호출 할 수 있습니다. 이 기능을 통해 Xamarin.Forms 앱은 기본 앱이 할 수있는 모든 것을 할 수 있습니다.


여기서 예제로 사용하는 Text-To-Speech의 경우 기본적으로 자마린에서 해당 기능을 제공하지는 않습니다만, 기본 인터페이스를 정의하고, 그 인터페이스를 각 플랫폼에서 구현한다면, 구현하지 못하는 기능이 없다는 것입니다.



구현하기 위해 필요한 사항은 아래와 같습니다.

* Interface - 필수 항목으로 공유 프로젝트에 구현하려는 기능에 대한 인터페이스를 생성합니다.

* Implementation Per Platform - 인터페이스를 구현한 클래스를 각 플랫폼마다 생성합니다.

* Registration - 각 플랫폼마다 구현된 클래스는 DependencyService를 이용해서 사용할 수 있도록 미리 등록되어야 합니다.

* Call to DependencyService - DependencyService를 이용해서 구현된 클래스를 사용합니다.

3. 신규 프로젝트 생성과 인터페이스 생성


File -> New -> Project -> Blank App


이름은 TTSSample로 지정했습니다. 생성시 UWP의 경우 Windows 10 (10.0; Build 10586)을 선택합니다.



프로젝트 생성 후 Windows, WinPhone 프로젝트는 Remove로 지워버리고, iOS 프로젝트는 unload project 했습니다.




TTSSample (portable) 공용 프로젝트에 Interfaces라는 이름의 폴더와 인터페이스 파일을 추가합니다.



namespace TTSSample.Interfaces
{
    public interface ITextToSpeech
    {
        void Speak(string text); //note that interface members are public by default
    }
}



4. 각 플랫폼 별로 구현하기


각 플랫폼 별로 구현할 때 꼭 기본 생성자가 존재해야 한다고 어디선가 본 것 같습니다.


iOS Implementation - iOS가 없어서 넘어갑니다.



Android Implementation


안드로이드 프로젝트 루트에 TextToSpeechImplementation.cs라는 클래스를 추가하고 아래와 같이 코딩을 합니다.


using System.Collections.Generic;
using Android.Speech.Tts;
using Java.Lang;
using TTSSample.Droid;
using TTSSample.Interfaces;
using Xamarin.Forms;


[assembly: Dependency(typeof(TextToSpeechImplementation))]

namespace TTSSample.Droid
{
    public class TextToSpeechImplementation : Object, ITextToSpeech, TextToSpeech.IOnInitListener
    {
        private readonly TextToSpeech _speaker;
        private string _toSpeak;

        //기본 생성자

        public TextToSpeechImplementation()
        {
            var ctx = Forms.Context; // useful for many Android SDK features
            _speaker = new TextToSpeech(ctx, this);
        }

        #region IOnInitListener implementation

        public void OnInit(OperationResult status)
        {
            if (!status.Equals(OperationResult.Success)) return;
            var p = new Dictionary<string, string>();
            _speaker.Speak(_toSpeak, QueueMode.Flush, p);
        }

        #endregion

        public void Speak(string text)
        {
            _toSpeak = text;
            var p = new Dictionary<string, string>();
            _speaker.Speak(_toSpeak, QueueMode.Flush, p);
        }

    }
}


중요 부분은 굵은 글씨로 표시되어 있습니다.


[assembly: Dependency(typeof(TextToSpeechImplementation))] : DependencyService에 이 클래스를 등록해주는 기능으로 ITextToSpeech라는 인터페이스를 구현해 놓은 것이라는 걸 알려주는 것입니다.


실제 Speak라는 메서드에서 text를 보이스로 변환해서 출력해 줍니다.

다른 설정 해줄 내용은 없습니다.


Universal Windows Platform Implementation

UWP 프로젝트에 TextToSpeechImplementation.cs 클래스를 루트에 추가하고 아래와 같이 입력 합니다.

using System;
using System.Threading.Tasks;
using Windows.Media.SpeechSynthesis;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media;
using TTSSample.Interfaces;
using TTSSample.UWP;
using Xamarin.Forms;

[assembly: Dependency(typeof(TextToSpeechImplementation))]
namespace TTSSample.UWP
{
    public class TextToSpeechImplementation : ITextToSpeech
    {
        /// <summary>
        ///     미디어 엘리먼트
        /// </summary>
        private readonly MediaElement _mediaElement;
        /// <summary>
        ///     신디사이저
        /// </summary>
        private readonly SpeechSynthesizer _synth;
        /// <summary>
        ///     기본 생성자가 반드시 필요
        /// </summary>
        public TextToSpeechImplementation()
        {
            _mediaElement = new MediaElement {AudioCategory = AudioCategory.Speech};
            _synth = new SpeechSynthesizer();
        }
        /// <summary>
        ///     구현되어야할 Speak라는 메서드
        /// </summary>
        /// <param name="text"></param>
        public async void Speak(string text)
        {
            var stream = await _synth.SynthesizeTextToStreamAsync(text);
            if (stream == null) return;
            if (_mediaElement.CurrentState != MediaElementState.Stopped)
                _mediaElement.Stop();
            //음성 출력 종료 후 스트림을 Dispose 시키기 위해서 추가한 내용
            var taskCompleted = new TaskCompletionSource<bool>();
            RoutedEventHandler endOfPlayHandler = (s, e) =>
            {
                stream.Dispose();
                taskCompleted.SetResult(true);
            };
            _mediaElement.MediaEnded += endOfPlayHandler;
            _mediaElement.SetSource(stream, stream.ContentType);
            _mediaElement.Play();
            await taskCompleted.Task;
            _mediaElement.MediaEnded -= endOfPlayHandler;
        }
    }
}


[assembly: Dependency(typeof(TextToSpeechImplementation))] : DependencyService에 이 클래스를 등록해주는 기능으로 ITextToSpeech라는 인터페이스를 구현해 놓은 것이라고 표시를 하며 Speak라는 메서드에서 text를 보이스로 변환해서 출력해 줍니다.



5. 공통 프로젝트 작업


MainPage.xaml

<?xml version="1.0" encoding="utf-8"?>

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:TTSSample"
             x:Class="TTSSample.MainPage">

    <StackLayout>
        <Label Text="Welcome to Xamarin Forms!"
               VerticalOptions="Center"
               HorizontalOptions="Center" />

        <Button Text="TextToSpeech" Clicked="Button_OnClicked" />
    </StackLayout>

</ContentPage>


MainPage.xaml.cs

using System;
using TTSSample.Interfaces;
using Xamarin.Forms;

namespace TTSSample
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void Button_OnClicked(object sender, EventArgs e)
        {
            DependencyService.Get<ITextToSpeech>().Speak("Hello from Xamarin Forms");
        }
    }
}


사용은 위와 같이 간단하게 사용할 수 있습니다.



6. 결과 확인


UWP 프로젝트를 윈폰 에뮬레이터를 이용해서 출력한 경우 입니다.


주의 사항! 윈폰 에뮬레이터로 실행하기 위해서는 CPU를 x86으로 변경하시고 실행하시기 바랍니다.

또한, 앱에서 사용하는 볼륨을 최고로 올리셔야 또렷하게 들립니다.

UWP 앱을 데스크탑 모드로 실행한 경우 화면 입니다. 목소리 좋고 잘됩니다. -0-




안드로이드 프로젝트를 선택하고 마쉬멜로 에물레이터로 돌린 결과 입니다. 음..목소리가 좀 그렇습니다만. 잘 됩니다.







7. 마무리


직접 만들어보니, 원하는 기능을 구현하는 것이 크게 어려울 것 같지는 않습니다. UWP 쪽은 자료를 찾기가 쉬운데, 안드로이드의 기능을 c#에서 사용하는 자료가 얼만큼 있고, 찾기가 쉬운지가 관건일 것 같습니다. 


Posted by MVP kaki104

윈도우 10 앱 개발(Windows 10 UWP app) 12월 오프 모임 후기


Microsoft MVP 박문찬입니다. Xamarin 환경 설정을하기위한 오프라인 모임이 마이크로소프트 멜팅팟의 도움으로 강남 토즈1호점에서 무사히 진행되었습니다.


여러분들이 참석해 주셨고, 그 중 몇 분은 트러블 슈팅에 성공을해서 Hyper-V로 안드로이드 에물레이터를 실행할 수 있었습니다. 음 모두 성공했으면 좋았겠지만, 여러가지 환경적인 요소들로 인해 불가능했습니다.


Xamarin 트러블 슈팅 포스트는 업데이트를 했습니다. 물론 직접 여러분들과 진행을 하다보니, 처음 하시는 분들이 쉽게 하지는 못할 것 같은 내용들이 존재하네요. 하지만, 해결이 아에 불가능 한 것은 아니니 꼭 다시 시도해 보시기를 바랍니다.


*하지만...정 실행이 않된다면 그냥 안드로이드 에물레이터를 이용하셔도...


참석해주신 여러분들과 멜팅팟 관계자 분들께 감사드리며, 2017년 1월 모임때 뵙겠습니다.



Posted by MVP kaki104

Microsoft MVP, 윈도우 10 앱 개발(Windows 10 UWP app)  운영자 박문찬입니다. 11월 27일날 MSP가 추최하는 Xamarin 세션에 참여해서 좋은 시간을 보냈습니다. 차분히 내용을 보니 예전 Universal app 개발하는 방법과 거의 비슷하다는 생각을 했습니다. 에.. 그동안은 윈도우 앱 개발 공부하기 바뻐서 손을 못대고 있었는데.. 이제는 시작해야 준비해서 시작해야 할 것 같습니다. 앞으로 자주 Xamarin 관련 포스트도 등록하겠습니다.



0. 참고

Xamarin.Forms Quickstart


Xamarin.Forms Requirements


포스트 작성하는 환경 :

OS : Windows 10 version 1607

기타 : Windows SDK 14393 (이전 버전 SDK도 역시 설치되어있습니다. UWP 앱 개발을 주로 하고 있기 때문입니다)



1. 자마린 설치


https://www.xamarin.com/platform


Download now for free를 눌러서 설치파일을 다운로드 받습니다. 물론 설치전에 Requirements 문서를 읽어 보시면 많은 도움이 됩니다.




설치하는데 시간이 오래 걸리고, 기본 옵션으로 설치해야 성공하지 않는가 생각됩니다. 옵션 다른거 좀 건들이면 제대로 설치가 앙되더군요;;


총 다운로드받을 용량이 3GB가 넘으니..반드시 집에서 설치하시는 것을 권장합니다.



한참을 기다리고 인스톨 완료가 되면 비주얼 스튜디오를 실행합니다. 설치전 입력 사항에 비주얼 스튜디오가 이미 설치 되어 있다고 선택했습니다.



2. Visual Studio 2015 시작


File -> New Project -> Cross-Platform -> Blank XAML App(Xamarin.Forms Portable) 선택


Name은 HelloWorldXamarinForms로 하겠습니다.


* Blank App (Xamarin.Forms.Portable)은 UI를 코드로 작성합니다.

* Blank XAML App(Xamarin.Forms Portable)은 UI를 XAML로 작성합니다.


두가지 중에 편한 것으로 하시면 되는데..아무래도 저는 xaml이 편하네요..




만들기를 하면...머 Mac이 필요하다는 설명이 나옵니다. 물론 Mac이 없기 때문에 대충 읽고 패스, 다음에 나오는 메시지 박스도 Close시킵니다.



이 화면은 UWP 앱의 버전을 지정하는 화면입니다. 제 예상인데..자마린을 이용해서 크로스 플랫폼 앱을 개발하도록 하면서 자연 스럽게 UWP 앱 개발까지 할 수 있도록 하려는 것이 아닐까 생각됩니다.



그런데 UWP 앱 프로젝트를 생성하는 중에 오류가 발생하네요;; 다시 만들어 보겠습니다.



다른 버전을 선택해서 다시 만들어 보겠습니다.



11월 30일 기준으로 아직 Windows 10 Anniversary Edition이 적용된 것 같지 않습니다. 바로 이전 버전을 선택해서 만드시면 좋을 것 같습니다. 몇번 만들어 봤는데..오류가 발생하지 않는 경우도 있습니다;;


프로젝트 만들기가 완료되면, 6개의 프로젝트가 생성됩니다.



F6을 눌러서 전체 빌드를 한번 해주겠습니다.


빌드를 하면 Nuget package들을 다운 받기 때문에 역시나 빠른 네트워크가 연결되어있어야 합니다. 빨리 4G 무제한으로 변경해야 할듯합니다..쿨럭;;


Xamarin 환경 확인을 이용하면, 설치 상태에 대한 점검을 할 수 있습니다.

https://msdn.microsoft.com/en-us/library/mt488769.aspx



3. NuGet Packages 업데이트

반드시 모든 프로젝트에 포함되어있는 자마린 폼즈 패키지를 최신 버전으로 업그레이드를 해야합니다.


Solution 'HelloWorldXamarinForms' 선택 -> 마우스 오른쪽 클릭 -> 컨텍스트 메뉴에서 Manage NuGet Packages for Solution... 선택



Installed 탭 선택 -> Xamarin.Forms 선택 -> 전체 프로젝트 선택 -> 콤보박스에서 최신 버전(Latest stable...) 선택 -> Install 클릭



확인 창이 몇번 출력되고, OK를 눌러주면 인스톨 완료. 다시 시작해야 한다는 메시지가 출력되면 비주얼 스튜디오를 다시 시작해 주세요.


F6을 눌러서 빌드를 진행합니다.


Severity Code Description Project File Line Suppression State
Error  error: package android.support.v7.internal.widget.ActivityChooserModel does not exist
  android.support.v7.internal.widget.ActivityChooserModel.OnChooseActivityListener HelloWorldXamarinForms.Droid C:\Samples\HelloWorldXamarinForms\HelloWorldXamarinForms\HelloWorldXamarinForms.Droid\obj\Debug\android\src\mono\android\support\v7\internal\widget\ActivityChooserModel_OnChooseActivityListenerImplementor.java 8 


머 대략 이런 오류가 발생하는 경우에는 솔루션을 선택한 후 마우스 오른쪽 버튼을 눌러서 컨텍스 메뉴를 출력한 후 Rebuild Solution...을 선택해서 다시 빌드를 진행하고, 이상이 없으면 다음으로 넘어 갑니다.


* 프로젝트를 생성하는 중에 Xamarin for Visual Studio Update가 뜨는 경우가 있는데 역시 클릭해서 업데이트 해줍니다.



4. 시작 프로젝트 설정 및 필요없는 프로젝트 언로드..


실행할 프로젝트를 선택하고 F5를 눌러서 시작하기 위해서 솔루션에서 마우스 오른쪽 클릭 -> Properties 선택



Current selection 선택 -> OK 클릭



이렇게 하면 선택한 프로젝트 실행됩니다. 하지만, 난 F5를 눌렀을때 항상 드로이드 프로젝트가 실행되었으면 좋겠어!!라고 하시는 분들은 Single startup project에서 드로이드 프로젝트를 선택하시면 됩니다.


전 mac이 없기 때문에 ios용 앱을 실행해 볼 수 없기 때문에..ios용 프로젝트를 선택 후 Unload Project를 선택하면 다음부터는 맥을 연결하라는 메시지도 나오지 않고 편합니다.  동일한 방법으로 Windows 8.1, Windows Phone 8.1도 Unload 합니다.


결국 남는건 Portable, Droid, UWP 3개가 되겠습니다.




5. 실행


Droid 프로젝트를 선택하고, F5를 누르면 에뮬레이터가 실행되면서 앱이 실행됩니다. (PC에서는 기본 에물레이터 Android_Accelerated_x86(Android 6.0 - API 23이 실행이 앙돼서, 자마린 홈페이지에 있는 Xamarin Android Player를 이용해서 Nexus 4(KitKat)(Android 4.4 - API 19)를 다운로드 받아서 사용하고 있습니다.)




6. 설치해서 실행까지..


아마 이 과정이 PC마다 약간씩 다를 것 같습니다. 중간에 발생하는 오류도 많을 듯하고요..

Facebook 윈도우 10 앱 개발(Windows 10 UWP app)에 오류 사항에 올려주시면 같이 해결해서 해결하고, 해결한 내용은 이 포스트에 추가해 놓으면 새로 시작하는 분들에게 많은 도움이 될 것 같습니다.



12월 윈도우 10 앱 개발(Windows 10 UWP app) 그룹 오프라 모임 때 HelloXamarin을 함께 만들어 보는 시간을 마련 하려고 합니다. 설치는 시간이 너무 걸리기 때문에..될 수 있으면 설치는 하신 후에 오시면 좋을 것 같습니다.


진행할 내용은

* 프로젝트 구성에 대한 설명

* XAML을 이용해서 화면 구성하기

* 버튼 추가하고, 메시지 박스라도 하나 출력

이 정도를 진행하려고 합니다. 제가 Mac을 못해봤으니 Mac을 가지고 오시면 더 좋을 것 같습니다.


예상 일시

12월 14일 오후 7시부터 10시까지


예상 장소

강남역 토즈1호


참석을 원하시는 분들은 미리 페이스북에 리플로 남겨주시면 좋겠습니다.

12월 3일까지 신청 받은 인원을 기준으로 예약 진행 하겠습니다.




4.2.1.64
Xamarin.VS 4.2.1.64 is an updated Stable Release of Cycle 8 Service Release 1. Please see https://releases.xamarin.com/connect-keynote-releases for more information. You can also see the latest builds in all channels at https://developer.xamarin.com/releases/current/.

Notes from previous releases:

4.2.1.62
Xamarin.VS 4.2.1.62 is an updated Stable Release of Cycle 8 Service Release 1. Please see https://releases.xamarin.com/connect-keynote-releases for more information. You can also see the latest builds in all channels at https://developer.xamarin.com/releases/current/.


* Java update






Posted by MVP kaki104

티스토리 툴바