WebView 에서 JavaScript 실행은 간단히 아래와 같히 펑션을 호출하면 된다.

this.webView.Eval("TestFunction()");

 

하지만 리턴이 있는 JavaSecript funtion 실행결과는 저 형태로는 안된다.

따로 Renderer 를 이용해 구현하는 방법을 소개한다.

 

먼저 .Net Standard 프로젝트에 아래와 같이 WebViewer 를 만든다.

using System;
using System.Collections.Generic;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace Test
{
    public class WebViewer : WebView
    {
        public static BindableProperty EvaluateJavascriptProperty =
        BindableProperty.Create(nameof(EvaluateJavascript), typeof(Func<string, Task<string>>), typeof(WebViewer), null, BindingMode.OneWayToSource);

        public Func<string, Task<string>> EvaluateJavascript
        {
            get { return (Func<string, Task<string>>)GetValue(EvaluateJavascriptProperty); }
            set { SetValue(EvaluateJavascriptProperty, value); }
        }
    }
}

이제 위 항목을 상속받아서 각 기기별로 Renderer 를 생성하자.

 

Android

using System;
using System.Threading;
using System.Threading.Tasks;
using Android.Content;
using Android.Webkit;
using Test;
using Test.Droid;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(WebViewer), typeof(WebViewRender))]
namespace Test.Droid
{
    public class WebViewRender : WebViewRenderer
    {
        public WebViewRender(Context context) : base(context)
        { }

        protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.WebView> e)
        {
            base.OnElementChanged(e);

            if (e.NewElement is WebViewer webView)
            {
                webView.EvaluateJavascript = async (js) =>
                {
                    var reset = new ManualResetEvent(false);
                    var response = string.Empty;
                    Device.BeginInvokeOnMainThread(() =>
                    {
                        Control?.EvaluateJavascript(js, new JavascriptCallback((r) => { response = r; reset.Set(); }));
                    });
                    await Task.Run(() => { reset.WaitOne(); });
                    return response;
                };
            }
        }
    }

    internal class JavascriptCallback : Java.Lang.Object, IValueCallback
    {
        public JavascriptCallback(Action<string> callback)
        {
            _callback = callback;
        }

        private Action<string> _callback;
        public void OnReceiveValue(Java.Lang.Object value)
        {
            _callback?.Invoke(Convert.ToString(value));
        }
    }
}

 

iOS

using System.Threading.Tasks;
using Test;
using Test.iOS;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(WebViewer), typeof(WebViewRender))]
namespace Test.iOS
{
    public class WebViewRender : WebViewRenderer
    {
        protected override void OnElementChanged(VisualElementChangedEventArgs e)
        {
            base.OnElementChanged(e);

            if (e.NewElement is WebViewer webView)
            {
                webView.EvaluateJavascript = (js) =>
                {
                    return Task.FromResult(this.EvaluateJavascript(js));
                };
            }
        }
    }
}

 

UWP

using System;
using Test;
using Test.UWP;
using Xamarin.Forms;
using Xamarin.Forms.Platform.UWP;

[assembly: ExportRenderer(typeof(WebViewer), typeof(WebViewRender))]
namespace Test.UWP
{
    public class WebViewRender : WebViewRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<WebView> e)
        {
            base.OnElementChanged(e);
            if (e.NewElement is WebViewer webView)
            {
                webView.EvaluateJavascript = async (js) =>
                {
                    return await Control.InvokeScriptAsync("eval", new[] { js });
                };
            }
        }
    }
}

 

이제 화면에서 아래와 같이 컨트롤을 넣고

<test:WebViewer x:Name="webView" HorizontalOptions="FillAndExpand"  VerticalOptions="FillAndExpand"/>

아래와 같이 코딩하면 function 의 결과 값을 받아올수 있다.

var result = await this.webView.EvaluateJavascript("GetTest();");

 

심각도 코드 설명 프로젝트 파일 줄 비표시 오류(Suppression) 상태
오류  /Users/mac/Library/Caches/Xamarin/mtbs/builds/MiGong.iOS/c10cbd8fd317519d3dd23b704514d419/bin/iPhone/Release/MiGong.iOS.app: errSecInternalComponent MiGong.iOS   

위과 같은 오류가 발생

mac 이 잠자기 모드이거나 로그인 활성화가 풀린경우 발생된다.

mac 으로 들어가 로그인하면 위 오류는 사라진다.

visual studio 에서 apple accounts 로 로그인 하는데 아래처럼 에러가 발생되었다.

authentication failure. Reason : {"authType" : "hsa2" }

이중 인증 키까지 잘 패스가 되었는데 떠서 먼가했는데

아래 사이트에서 한번더 인증 절차를 또 거쳐야한다.;;

https://appleid.apple.com

위사이트에서 한번더 로그인 한다 이중 인증을 다시;;

그러면 사이트에서 아래처럼 나오고

 

다시 로그인하면 로그인이 성공한다.

 

이제 프로비저닝 프로파일을 다운받으러....ㅠㅜ

Image 클릭시 이벤트 주는 방법은 아래와 같다

this.Image.GestureRecognizers.Add(new TapGestureRecognizer(메서드명));

this.ActionImage.GestureRecognizers.Add(new TapGestureRecognizer(OnTab));

private void OnTab(View sender, object e)
{
    ...
}

 

 

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 버전을 다운로드 하고 설치를 한다.

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

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

 

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

 

 

우선 서버 만들기는 아래 포스팅을 참고한다.

2017/11/27 - [C#.NET/C#] - 카카오 쳇봇 만들기 - 2 (C# 서버 만들기)

2017/11/27 - [C#.NET/C#] - 카카오 쳇봇 만들기 - 3 (C# 서버 만들기)

 

서버쪽 코드

        #region PostUpLoadImage
        [Route("api/Files/Upload")]
        public async Task<string> PostUpLoadImage()
        {
            try
            {
                var httpRequest = HttpContext.Current.Request;

                if (httpRequest.Files.Count > 0)
                {
                    foreach (string file in httpRequest.Files)
                    {
                        var postedFile = httpRequest.Files[file];

                        var fileName = postedFile.FileName.Split('\\').LastOrDefault().Split('/').LastOrDefault();

                        var filePath = HttpContext.Current.Server.MapPath("~/Uploads/" + fileName);

                        postedFile.SaveAs(filePath);

                        return "/Uploads/" + fileName;
                    }
                }
            }
            catch (Exception exception)
            {
                return exception.Message;
            }

            return "no files";
        }
        #endregion

 

Xamarin Forms

Nuget 에서 Xam.Plugin.Media 설치

 

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"
             x:Class="MiGong.TestPage">
    <ContentPage.Content>
        <StackLayout>
            <Label Text="File Upload"
           HorizontalOptions="Center" TextColor="Black" FontSize="20"/>

            <Button Text="Pick Photo"
            BackgroundColor="Teal" TextColor="White" FontSize="20" Clicked="PickPhoto_Clicked"/>

            <Button Text="Take Photo"
            BackgroundColor="Navy" TextColor="White" FontSize="20" Clicked="TakePhoto_Clicked"/>

            <Image x:Name="FileImage" WidthRequest="400" HeightRequest="220"/>

            <Label x:Name="LocalPathLabel" TextColor="Black" FontSize="18"/>

            <Button Text="Upload Photo"
            BackgroundColor="Purple" TextColor="White" FontSize="20" Clicked="UploadFile_Clicked"/>

            <Label x:Name="RemotePathLabel" FontSize="20" TextColor="Black"/>

        </StackLayout>
    </ContentPage.Content>
</ContentPage>

xaml.cs 코드 - 동작은 간단하다 파일을 선택하거나 카메라를 찍어서 서버에 해당 파일을 업로드한다.

[XamlCompilation(XamlCompilationOptions.Compile)]
 public partial class TestPage : ContentPage
 {
        private MediaFile _mediaFile;

        public TestPage ()
  {
   InitializeComponent ();
  }

        private async void PickPhoto_Clicked(object sender, EventArgs e)
        {
            await CrossMedia.Current.Initialize();

            if (!CrossMedia.Current.IsPickPhotoSupported)
            {
                await DisplayAlert("No PickPhoto", ":( No PickPhoto available.", "OK");
                return;
            }

            _mediaFile = await CrossMedia.Current.PickPhotoAsync();

            if (_mediaFile == null)
                return;

            LocalPathLabel.Text = _mediaFile.Path;

            FileImage.Source = ImageSource.FromStream(() =>
            {
                return _mediaFile.GetStream();
            });
        }

        private async void TakePhoto_Clicked(object sender, EventArgs e)
        {
            await CrossMedia.Current.Initialize();

            if (!CrossMedia.Current.IsCameraAvailable || !CrossMedia.Current.IsTakePhotoSupported)
            {
                await DisplayAlert("No Camera", ":( No camera available.", "OK");
                return;
            }

            _mediaFile = await CrossMedia.Current.TakePhotoAsync(new StoreCameraMediaOptions
            {
                Directory = "Sample",
                Name = "myImage.jpg"
            });

            if (_mediaFile == null)
                return;

            LocalPathLabel.Text = _mediaFile.Path;

            FileImage.Source = ImageSource.FromStream(() =>
            {
                return _mediaFile.GetStream();
            });
        }

        private async void UploadFile_Clicked(object sender, EventArgs e)
        {
            var content = new MultipartFormDataContent();

            content.Add(new StreamContent(_mediaFile.GetStream()),
                "\"file\"",
                $"\"{_mediaFile.Path}\"");

            var httpClient = new HttpClient();

            var uploadServiceBaseAddress = "http://localhost:12214/api/Files/Upload";

            var httpResponseMessage = await httpClient.PostAsync(uploadServiceBaseAddress, content);

            RemotePathLabel.Text = await httpResponseMessage.Content.ReadAsStringAsync();
        }
    }

안드로이드쪽 MainActivity.cs 의 아래 굵은 부분 코딩 추가

public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
    {
        protected override void OnCreate(Bundle bundle)
        {
            TabLayoutResource = Resource.Layout.Tabbar;
            ToolbarResource = Resource.Layout.Toolbar;

            base.OnCreate(bundle);

            CrossCurrentActivity.Current.Init(this, bundle);

            global::Xamarin.Forms.Forms.Init(this, bundle);
            LoadApplication(new App());
        }

        public override void OnRequestPermissionsResult(int requestCode, string[] permissions, Android.Content.PM.Permission[] grantResults)
        {
            Plugin.Permissions.PermissionsImplementation.Current.OnRequestPermissionsResult(requestCode, permissions, grantResults);
        }

    }

AssemblyInfo.cs 파일에 아래 코드 추가

[assembly: UsesFeature("android.hardware.camera", Required = false)]
[assembly: UsesFeature("android.hardware.camera.autofocus", Required = false)]

매니패스트 권한을 부여한다.

 <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
 <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
 <uses-permission android:name="android.permission.CAMERA" />

서버쪽에 사이트 루트에 Uploads 폴더를 만든다.

위 까지 하면 파일 선택하여 업로드가 가능하다.

카메라를 사용하려면 좀더 설정이 필요하다.

AndroidManifest.xml 에 아래 내용추가

 <application ...">
    <provider android:name="android.support.v4.content.FileProvider"
          android:authorities="${applicationId}.fileprovider"
          android:exported="false"
          android:grantUriPermissions="true">

      <meta-data android:name="android.support.FILE_PROVIDER_PATHS" android:resource="@xml/file_paths"></meta-data>
    </provider>
  </application>

안드로이드 쪽 프로젝트에 아래 처럼 Resources 폴더 밑에 xml 폴더를 만들고 file_paths.xml  을 만들고

 

내용은 아래처럼 작성

<?xml version="1.0" encoding="utf-8" ?>
  <paths xmlns:android="http://schemas.android.com/apk/res/android">
<!--
    <external-path name="my_images" path="Android/data/com.example.package.name/files/Pictures" />
    <external-path name="my_movies" path="Android/data/com.example.package.name/files/Movies" />
-->
   
    <external-files-path name="my_images" path="Pictures" />
    <external-files-path name="my_movies" path="Movies" />
  </paths>

 

추가 자세한 사항은 아래 링크를 참고

https://github.com/jamesmontemagno/MediaPlugin

 

이미지 표현시 아래 처럼 에러가 발생되었다.

Failed to allocate a 88542732 byte allocation with 16768576 free bytes and 70MB until OOM

이미지 크기가 width 1440 , height 2560 을 넘으면 이런 에러가 발생된다고 한다.

이미지 크기를 조절하니 에러가 바로 사라졌다.

Xamarin Forms 에서

푸쉬알림을 Firebase, App Center 를 이용해서 처리하는 방법을 간략히 정리해봅니다.

1. Firebase 가입

https://firebase.google.com/ 가입 후 (구글 및 다른 계정으로도 로그인 가능)

https://console.firebase.google.com/ 로 이동하여 프로젝트 추가

Android 앱에 Firebase 추가 선택

안드로이드 프로젝트의 패키지명 기입 후 앱등록 이후 2,3 단계는 그냥 확인.

좌측 상단의 톱니바퀴 선택 후 프로젝트 설정으로 이동하고

클라우드 메시징 탭을 선택.

위그림과 같이 Server Key 와 SenderId 정보를 기억.

 

2. Xamarin Forms 프로젝트 구성 (.Net Standard)

 

 

3. Nuget 에서 Microsoft.AppCenter.Push 설치

 

4. App Center 가입

https://appcenter.ms 사이트로 이동하여 가입 (마이크로소프트 계정 및 구글, 페이스북 으로 로그인 가능)

App 만들기 하여 아래 그림과 같이 Android 와 Xamarin 을 선택 하여 이름 지정 후 생성

Push 를 선택하고 가이드에 따라 코딩.


AndroidManifest.xml 파일에 아래 내용  추가
<permission android:protectionLevel="signature"android:name="${applicationId}.permission.C2D_MESSAGE" />
<uses-permissionandroid:name="${applicationId}.permission.C2D_MESSAGE" />

${applicationId} 은 패키지명으로 변경 해야함.


안드로이드인 경우 아래 처럼
Push.SetSenderId("{SenderId}");
AppCenter.Start("282b7f5d-18b4-4e26-8920-8414d6df405b", typeof(Push));

Xamarin Forms 인 경우 아래 처럼 코딩
Push.SetSenderId("{SenderId}");
LoadApplication(new App());

SenderId 는 1번에서 기억해 놓은 senderID 를 이용

▼ Firebase 의 Server Key 기입

 

5. 추가 프로젝트 설정

안드로이드에서 permission 을 INTERNET 도 주어야 함

AndroidManifest.xml 파일에 아래 내용  추가

<uses-permission android:name="android.permission.INTERNET" />

 

 

참고링크

https://docs.microsoft.com/en-us/appcenter/sdk/push/xamarin-android

 

다른 방법

https://onesignal.com 을 통해서도 처리 가능

=> https://www.youtube.com/watch?v=EPIrNxuwAj8&t=851s
=> https://documentation.onesignal.com/docs/xamarin-sdk-setup

이번시간에는 Picker 와 WebView 컨트롤을 알아보겠습니다.

(추가로 DisplayActionSheet 메서드 사용법도 알아볼께요)

 

Picker 는 윈폼으로 말하면 ComboBox 와 같은 형태로 여러 항목중에 하나를 선택할수 있는 컨트롤입니다.

https://developer.xamarin.com/api/type/Xamarin.Forms.Picker/

 

WebView 는 컨트롤 명에서도 유추할수 있듯이 웹페이지를 보는 컨트롤입니다.

WebView 에 url 을 넣어도 되지만 직접 html 코딩을 넣을수도 있습니다.

반드시 Android 에서 실행할때는 INTERNET 권한을 줘야합니다.

https://developer.xamarin.com/guides/xamarin-forms/user-interface/webview/

 

위 두 컨트롤의 예시 입니다.

WebPickerPage.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"
             x:Class="XamarinFormsStudy.WebPickerPage">
    <ContentPage.Content>
        <StackLayout>
            <Label Text="Picker"/>
            <Picker x:Name="picker" SelectedIndexChanged="picker_SelectedIndexChanged"/>
            <Button x:Name="button" Text="DisplayActionSheet" Clicked="button_Clicked"/>
            <Label Text="WebView"/>
            <WebView x:Name="webView" VerticalOptions="FillAndExpand"/>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

WebPickerPage.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace XamarinFormsStudy
{
 [XamlCompilation(XamlCompilationOptions.Compile)]
 public partial class WebPickerPage : ContentPage
 {
  public WebPickerPage()
  {
   InitializeComponent ();

            this.Padding = new Thickness(10, Device.OnPlatform(40, 20, 20), 10, 5);

            // Picker 에 데이터를 Add 합니다.
            this.picker.Items.Add("Easy");
            this.picker.Items.Add("Normal");
            this.picker.Items.Add("Hard");


            this.webView.Source = new UrlWebViewSource { Url = "http://m.naver.com" };
        }

        private void picker_SelectedIndexChanged(object sender, EventArgs e)
        {
            // 선택한 항목을 팝업으로 띄워줍니다.
            string selectData = this.picker.Items[this.picker.SelectedIndex];
            DisplayAlert(selectData, "SelectValue", "OK");
        }

        private async void button_Clicked(object sender, EventArgs e)
        {
            // 선택 팝업이 뜨고 선택한 항목에 따라 버튼 색을 바꿔줍니다.
            string color = await DisplayActionSheet("선택하세요", "취소", "닫기", "BLUE", "YELLOW", "RED", "GREEN");
            switch (color)
            {
                case "BLUE": this.button.BackgroundColor = Color.Blue; break;
                case "YELLOW": this.button.BackgroundColor = Color.Yellow; break;
                case "RED": this.button.BackgroundColor = Color.Red; break;
                case "GREEN": this.button.BackgroundColor = Color.Green; break;
            }
        }
    }
}

결과

Normal 을 선택한 경우

 

추가로 DisplayActionSheet 함수는 목록 데이터를 팝업으로 보여주고 선택할 수 있게 합니다.

선택에 따른 처리도 가능합니다.

* 아래처럼 선택 항목들이 나열되고 선택하게되면 버튼 색이 선택한 색으로 변경됩니다.

 

GitHub > https://github.com/kjundev/XamarinForms

SQLite 다루는 참고 동영상 링크

https://www.youtube.com/watch?v=t3w8HIdBFiA

 

+ Recent posts

티스토리 툴바