모바일 웹 사이트에서 apk의 기능 사용(웹뷰?)

yunri · 1월 10, 2024, 1:09오전

안녕하세요?
저번에 도움을 받고 다시 한 번 질문 드리게 되었습니다!

제가 구현하고 싶은 기능은,
현재 운영 중인 모바일 웹 사이트에서 바코드 스캔을 통해 상품을 등록하고 싶습니다.

그래서 .NET MAUI 프로젝트에 바코드 스캔 기능까진 구현했는데요.

이런 상황에서 다음 스텝으로 넘어가려는데 어떤 식으로 구현해야 하는지 감이 도통 오지 않아서 아래에 정리하려 질문드립니다.

추가하고 싶은 웹 사이트인 ‘https://m.test.co.kr/productreg’ 이라는 페이지를 MAUI에서 웹뷰로 감싼 다음에 해당 기능을 사용해야 하는 걸까요?

해당 페이지에 상품 등록이라는 버튼을 누르면 바코드 스캔을 하고, 해당 값을 전달하면 끝나는데 이 부분이 감이 잡히지 않습니다 .

지금 헷갈리는 부분이 'https://m.test.co.kr/`이라는 웹사이트가 이미 운영중에 있고, 해당 페이지에서 등록 버튼 또는 스캔 버튼을 누르면
바코드 스캔 -> 스캔 데이터를 모바일 웹 페이지에서 전달 후 등록
위 절차가 필요한 상황에서 MAUI에서 웹 뷰로 감싸서 작업을 하는 게 맞는 걸까요?

이런 작업을 해보지 않아서 헷갈리는 상황입니다.

바쁘신데 긴 글 읽어주셔서 감사합니다…!

이광석 · 1월 10, 2024, 1:23오전

보통 웹뷰의 사이트와 네이티브 앱(윈도, aos, ios)에선 상호간의 통신이 필요합니다.
그 상호간의 통신을 보통 대게 자바스크립트로 할 수 가 있습니다.

순서는 맞습니다.
웹사이트에서 버튼 누를 경우 만든 스크립트 호출 후에
마우이의 웹뷰에선 호출 된 자바스크립트를 인식 받아 바코드 스캔 진행 후
스캔 데이터를 자바스크립트로 전달해줍니다.

BigSquare · 1월 10, 2024, 1:43오전

링크가 열리지 않네요.

서버의 코드는 건들 수 없는 것인가요?
서버가 Post Api Url 을 제공하면, 간단할텐데 말이죠.

yunri · 1월 10, 2024, 1:52오전

답변 감사합니다…!
제가 가장 헷갈렸던 게,
MAUI로 만든 프로젝트는 지금 aos에서 테스트를 진행했는데요.

알려주신 것처럼,

웹사이트에서 버튼을 눌러 스크립트를 호출
마우이 웹뷰에서 호출된 자바스크립트 인식 받아 바코드 스캐 진행
스캔 된 데이터 자바스크립트로 전달.

위의 로직으로 진행하려면 제가 만든 마우이 프로젝트를 어떻게 운영(?) 해야 하는지 궁금합니다.
지금 상태는 aos apk로 빌드 해서 테스트했는데 ,
net 웹 사이트 <=> 마우이 프로젝트 바코드 스캔 가능한 apk (?)간에 호출 및 전달이 가능한걸까요…?

yunri · 1월 10, 2024, 1:54오전

아 해당 페이지는 제가 예시로 적어본 URL입니다.
실제로 test를 제외한 다른 네이밍을 사용하고 있는 운영중인 웹 사이트입니다.

저 웹 사이트에 스캔 또는 등록 버튼을 눌렀을 때 ,
제가 만든 마우이 프로젝트의 바코드 스캔 기능을 어떻게 호출하고 또 값을 전달하는지 감이 잡히지 않아서 질문을 남겼었습니다!

이광석 · 1월 10, 2024, 2:12오전

마우이 프로젝트 내부에
웹뷰로 ‘https://m.test.co.kr/productreg’를 사이트를 띄우셨다면

웹뷰에서의 javasciprt 송/수신 처리를 하시면됩니다.

웹사이트에서의 자바스크립트 생성 (송/수신 역할)
웹뷰에서의 웹사이트에서 생성된 자바스크립트 송신/수신

이거한번참고해보세요!

yunri · 1월 10, 2024, 4:42오전

댓글 감사합니다!
참고하여 한 번 테스트 해보겠습니다!
우선 알려주신 방법으로 웹뷰를 띄웠는데 이제 차근차근 해보겠습니다…!

검은눈의광룡 · 1월 10, 2024, 7:20오전

좀 헷갈리는데 MAUI를 쓰고 내장 웹뷰로 해당 사이트를 띄워둔 앱인건가요??
윗분들이 여러 말씀이미 해주셨지만 자마린을 쓸 때 QR코드 관련 비슷한걸 해본 경험을 말씀드리면

앱 실행(웹뷰로 사이트 불러옴) → 해당 버튼 실행 → 자바스크립트 인식해서 자마린 네이티브로 만든 바코드 인식 페이지 실행 → QR 인식 → 인식되면 창 닫고 다시 웹뷰 띄워진 페이지로 이동 및 자바스크립트로 데이터 전달

식으로 진행했습니다.

다만 그냥 이미 모바일페이지로 만들어 두신거라면 그냥 웹에서 카메라 권한 요청하고 바코드 인식을 웹에서 하시면 되지 않을까 싶습니당…

yunri · 1월 10, 2024, 7:28오전

네 맞습니다…!
마우이를 사용했고, 웹뷰에서 해당 사이트를 띄운 다음에 버튼 실행 →
마우이 바코드 스캔 실행 → 바코드 및 QR 인식 → 인식되면 창 닫고
다시 웹뷰 띄어진 페이지로 이동 및 자바스크립트 데이터 전달…
이렇게 작업하고 싶은데요.

현재 테스트로

private async void MauiToWebView(object sender, EventArgs e)
{
    await myWebView.EvaluateJavaScriptAsync("processBarcodeData('7777')");

}

위에 처럼 버튼을 누를 경우 스크립트에서 데이터를 받을 수 있나 없나 간단하게 테스트 하고 싶었지만…

<script type="text/javascript">

    function processBarcodeData(data) {
        alert(data);
    }

</script>

웹뷰 페이지에 alert도 안 뜨고 있어서 막막한 상황에 있었습니다 ㅠㅠ…
마우이 프로젝트에서 디버깅으로 봤을 땐 에러가 나오지 않아서요…

또,
웹에서 카메라 권한 요청하고 바코드 인식을 웹에서 하시면 되지 않을까 싶습니다..
라고 알려주셨는데,
저도 웹 라이브러리로 먼저 테스트를 진행했을 때 웹 라이브러리로 바코드 스캔을 할 수 있는 걸 확인했습니다!
그런데 바코드 스캔을 할 때마다 카메라 권한을 요청하는 이슈가 있을 거 같다 하셔서 …
마우이 프로젝트로 바코드 스캔을 해보고 있었습니다.

yunri · 1월 10, 2024, 7:54오전

혹시 어떤식으로 웹뷰에 자바스크립트 호출을 하셨는지 시간 괜찮으실 때 살짝 알려주실 수 있으실까요…?

이광석 · 1월 10, 2024, 8:24오전

xaml

<Button Click="aaaa">
<WebView>

cs

public void aaaa(Eventargs args)
{
  await myWebView.EvaluateJavaScriptAsync("processBarcodeData('7777')");
}

yunri · 1월 10, 2024, 8:31오전


<WebView x:Name="myWebView" Source="http://test.co.kr/Views/Test/ApiTest.aspx"
         VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" HeightRequest="1020" Navigating="JsExampleWebView_NavigatingAsync"/>
<Button Text="MAUI to WebView" Clicked="MauiToWebView"/>

 private async void MauiToWebView(object sender, EventArgs e)
 {
     if (myWebView.IsLoaded)
     {
         try
         {
             // WebView가 로드된 경우에만 JavaScript 함수 호출
             await myWebView.EvaluateJavaScriptAsync("processBarcodeData('7777')");
         }
         catch (Exception ex)
         {
             // JavaScript 함수 호출 중 오류 발생 시 처리
             //Debug.WriteLine(ex.Message);
             //awit DisplayAlert("ex.Message", ex.Message, "OK");
             await DisplayAlert("Alert", ex.Message, "OK");
         }
     }
 }

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="Views.Test.test" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div style="margin-top: 10px">
            <button id="btnScannerStart">스캔 시작</button>
            <button id="btnScannerEnd" >스캔 종료</button>
            <br/>
            <input name="txtBarcode" type="text"  style="width:500px;"/>
        </div>
    </form>
</body>
</html>
<script type="text/javascript" src="/Scripts/jquery/jquery.1.11.1.min.js?ver=6.0"></script>
<script type="text/javascript">

    $(function () {

        // 버튼 클릭 이벤트에 마우이 바코드 스캔 연결
        $('#btnScannerStart').on('click', function () {
            //window.external.notify('startScanning');
			//구현해야함..
        });
    });

    function processBarcodeData(data) {
        alert(data);
    }

</script>

위와 같이 간단하게 구현하여 테스트하고 있었습니다…

디바이스 로그? 라는 기능을 켜서 보니까
chromium [INFO:CONSOLE(1)] "Uncaught ReferenceError: processBarcodeData is not defined", source: http://test.co.kr/Views/Test/ApiTest.aspx (1)
위 처럼 로그가 찍히는 걸 방금 확인했습니다…!
그런데 저의 ApiTest.aspx의 소스를 보면 정의 해놨는데 왜 못찾는지 이해가 안 되네요…

검은눈의광룡 · 1월 10, 2024, 10:22오전

var data = "7777";
await myWebView.EvaluateJavaScriptAsync($"processBarcodeData({data})");

거의 비슷하긴 한데 저는 $를 붙이고 바로 데이터를 안넣고 따로 빼고 썼습니다.
고쳐질진 모르겠지만 우선 제가 했던 방법 달아봅니닷…

yunri · 1월 10, 2024, 11:24오전

늦으신데 답변 감사합니다…!
혹시 자바스크립트에선 특별한 방법으로 값 전달 받지 않고,

<script type="text/javascript">

    $(function () {

        // 버튼 클릭 이벤트에 마우이 바코드 스캔 연결
        $('#btnScannerStart').on('click', function () {
            //window.external.notify('startScanning');
			//구현해야함..
        });
    });

    function processBarcodeData(data) {
        alert(data);
    }

</script>
저런 식으로 받으셨을까요..?
오늘 하루도 고생 많으셨습니다..!

검은눈의광룡 · 1월 10, 2024, 11:50오전

아 바코드 스캔페이지를 말씀하시는거면 당시 무슨 문제인지는 잘 기억이 안나는데 뭔가 오류가 있어서(JS로 C# 메서드를 호출하는건 잘 안됐던 것 같은 기억이…) 저희는 웹페이지에서 …/ScanPage 식으로 페이지(웹) 이동 후 해당 URL이 감지되면 자마린에서 모달 오픈 방식으로 해당 스캔 페이지(자마린)을 여는 방식을 사용했습니다. 처리가 끝나면 원래 창 빼고 모두 닫아버리고요.

아까 설명에 빼먹었는데 자바스크립트는 바로 사용이 가능하지 않고 따로 커스텀렌더러를 써서 웹뷰를 만들어줘야 했던걸로 기억합니다. 찾아보니 MAUI도 뭔가 바뀌면서 제가 쓰던 기존세팅은 안되지만 커스텀해서 사용이 가능해보입니다. 아래 링크 참고 해보시면 될 것 같습니다.

c# - JS/.NET interact on MAUI WebView - Stack Overflow

yunri · 1월 10, 2024, 11:51오후

조언 감사합니다…!

자마린에서 await myWebView.EvaluateJavaScriptAsync이 방법으로 웹뷰에서 alert이 찍히는 걸 확인했는데,
이제 웹뷰에서 → 버튼 클릭 → 자마린 스캔 페이지 또는 메서드 호출하는 걸 해봐야겠습니다…
어디에 질문할 사람도 없고…
야근하고 계속 업무 생각 때문에 잠 못 이루고 있었는데 바쁘신 와중에 조언 남겨주셔서 정말 감사합니다…

BigSquare · 1월 11, 2024, 1:49오전

웹뷰는 네비게이션이 있을 때 마다, Navigating, Navigated 두 가지 이벤트를 발생시키는데, 이 중 Navigating 이벤트를 이용하면 어렵지 않을 것 같네요.

스캔 버튼 이벤트는 아래와 같은 주소로 네비게이션하도록 설정합니다.

…/on-scanned/{JS-scandata-handler-name}

스캔 버튼이 네비게이션을 유발하면, 마우이의 Navigating 이벤트 핸들러는 URL을 파싱하여 "on-scanned"이 경로가 포함되어 있는지 검사합니다.

없으면, return;
있으면,

웹뷰의 네비게이션을 중지 시키고(존재하지 않는 주소이므로),
마우이의 스캔 페이지로 이동하거나 스캔 메서드를 호출합니다.

URL에 데이터를 처리할 JS 함수명이 제시된다면, 이를 스캔 페이지나 메서드의 매개 변수로 전달합니다. 스캔 페이지나 메서드는 스캔된 데이터를 JS 함수로 전달합니다.

참고로 위 주소는 존재하지 않기 때문에, 마우이 앱이 아닌 브라우저로 접근하면 404 에러가 날 것입니다.

yunri · 1월 11, 2024, 4:07오전

답변 감사합니다…!
알려주신 방법으로도 한 번 도전해보겠습니다…!

yunri · 1월 11, 2024, 5:02오전

어떻게 해결했습니다…!
이제 위에서 힌트로 알려주신,
저희는 웹페이지에서 …/ScanPage 식으로 페이지(웹) 이동 후 해당 URL이 감지되면 자마린에서 모달 오픈 방식으로 해당 스캔 페이지(자마린)을 여는 방식을 사용했습니다.
이 방법으로 마우이 스캔페이지를 호출하면 될 거 같습니다…!

검은눈의광룡 · 1월 11, 2024, 8:51오전

아 밖이라 들어가서 답변 남기려 했는데 해결하셨다니 다행입니다. 이전 내용을 기억하고 있어서 추가 답변 드리면 현재 웹뷰가 표시되어 있는 페이지에 추가로 페이지(MAUI)가 열린 상태에서 이전 페이지(웹뷰가 있는 페이지)로 데이터를 돌리는 방법은 몇 가지가 있습니다. 당장 기억나는건 2가지 인데

앱 내 로컬 스토리지 or 시큐어 스토리지에 저장 후 웹뷰가 있는 페이지에서 해당 데이터를 불러와 웹뷰로 넘기기
Preferences - .NET MAUI | Microsoft Learn
스토리지 보안 유지 - .NET MAUI | Microsoft Learn
메시징을 이용해서 이전 페이지로 데이터 넘기고 해당 페이지에서 웹뷰로 넘기기
메시지 게시 및 구독 - .NET MAUI | Microsoft Learn

1의 경우 스캔이 완료되면 저장, 닫기, 이전 페이지에서 불러와서 자바스크립트 호출해서 데이터 넘기기
2의 경우 스캔이 완료되면 이전 페이지(웹뷰가 있는 페이지)로 데이터 넘기기, 닫기, 이전페이지에서 자바스크립트 호출해서 데이터 넘기기

같은 방법으로 하시면 될 것 같습니다.