미니언 트레이닝 웹 응용 프로그램 개발

12189 단어 minionscodenewbiewebdevjavascript
이 블로그를 통해 HTML, CSS, 자바스크립트를 사용하는 번역 웹 프로그램을 만들 수 있습니다.
만약 당신이 이 기술의 초보자라면, 당신은 나의 HTML와 CSS에 있는 블로그를 참고할 수 있습니다.그것들은 쉽게 이해하고 시작한다.

대국을 세우는 작은 절차


이 프로그램을 구축하기 위해 한 걸음 한 걸음 방법을 채택합시다.우선, 입력을 받아들일 텍스트 상자를 만들고, 번역을 터치하는 단추와 번역된 텍스트를 표시하는 출력 영역을 만들 것입니다.다음과 같이 HTML에 세 요소를 모두 만들 수 있습니다.

HTML 코드 세그먼트 - 기본 본문 템플릿


…
<body>
<input type="text" placeholder="Enter your message in English" id="txt-input">
<button id="btn-translate">Translate</button>
<div id="txt-output">
</div>
<script src="app.js" type="text/javascript"></script>
</body>
…
위 코드는 다음과 같은 출력을 생성합니다.

세 가지 HTML 요소가 있습니다. 탭을 입력하면 사용자의 입력을 받아들일 것입니다.Button 태그는 번역 텍스트를 출력으로 표시하는 "Translate"라는 버튼과 빈 div 요소를 만듭니다.스크립트 태그는 이 HTML 파일을 파일 "app.js"의 자바스크립트 논리와 연결하는 데 사용됩니다.응용 프로그램에서 논리를 실현합시다.js.
우리는 프로그램의 입력, 단추, 출력을 참고할 것이다.js는 문서 조회 선택기를 통해 id 값을 사용합니다.

JavaScript 코드 세그먼트 - 변수 선언


var btnTranslate = document.querySelector("#btn-translate");
var textData = document.querySelector("#txt-input");
var outputData = document.querySelector("#txt-output");
var serverURL = "https://api.funtranslations.com/translate/minion.json";
모든 요소의 값을 변수 (var) 에 저장했기 때문에, 응용 프로그램 전체에서 같은 값을 인용할 수 있습니다.
현재, 우리는 입력 텍스트가 'Translate' 단추를 눌렀을 때만 받아들여지고 번역되기를 희망합니다.이를 위해, 우리는 단추가 '클릭' 되는 소리를 감청할 수 있는 내장 함수 'add Event Listener' 를 사용했다.
btnTranslate.addEventListener("click",btnClickHandler);
우리는 이 함수에 두 개의 매개 변수를 전달할 것이다.첫 번째 인자 "클릭"은 이벤트 리스트가 단추를 눌렀을 때 함수 "btnClickHandler"를 실행하도록 요구합니다.여기서 btnClickHandler는 콜백 함수입니다.이벤트가 발생할 때만 리셋 함수를 터치하거나 호출합니다. 즉, "translate"단추를 눌렀을 때만 이 함수를 호출합니다.
btnClickHandler 함수를 계속 실현하기 전에 API와 JSON을 알아야 합니다."서버 URL"이라는 변수를 보았을 수도 있습니다.이것은 번역 데이터를 가져오는 서버 API 호출 URL입니다.

API 및 JSON 정의


응용 프로그램 프로그래밍 인터페이스.API 자체의 이름을 통해 우리는 그것이 응용 프로그램 간의 통신 인터페이스라는 것을 이해할 수 있다.Google 웹 응용 프로그램에서 funtranslationAPI에 연결하여 Google 응용 프로그램과 번역 기능이 통신할 수 있도록 합니다.이 API 호출은 JSON 객체를 반환합니다.
JSON-JavaScript 객체 표현앞에서 설명한 대로 데이터는 JavaScript 객체로 반환됩니다.따라서 키 값이 맞을 것이다.
이제 일부 텍스트를 이 API 호출에 메시지로 전달해야 합니다. 그렇지 않으면 다음 텍스트가 출력으로 반환됩니다.

API 호출된 출력


{
    "error": {
        "code": 400,
        "message": "Bad Request: text is missing."
    }
}
이 예제 텍스트로 메시지를 전달하면 출력이 다음과 같이 표시됩니다.
{
    "success": {
        "total": 1
    },
    "contents": {
        "translated": "umplop zin aca",
        "text": "sample text here",
        "translation": "minion"
    }
}
상기 두 번의 호출 사이에서, 우리는 첫 번째 호출이 오류를 되돌렸고, 두 번째 호출이 성공했다는 것을 알게 되었다.다음과 같은 속성을 가진 총 1개의 객체를 반환합니다.

  • text-는 우리가 전달한 입력 메시지를 표시한다

  • 번역-종속어를 제공하는 번역문장

  • 번역--이것은 사용 중인 번역 언어를 대표한다.
    FunTranslation API는 대량의 자유 번역 API를 포함하는데 그 중에서 우리는 미니언이나 바나나 언어를 선택했다.
    • 설령 우리가 이미 필요한 출력을 받았다 하더라도, 우리는 웹 응용 프로그램에 같은 출력을 표시할 수 없다.div 요소에서 순수한 텍스트로 표시하고 id는 txt 출력으로 표시해야 합니다.현재, 우리는 이 실현을 btnClickHandler () 에 추가할 것입니다.

    JavaScript 코드 세그먼트 - 함수 구현


    function getTranslatedURL(value) {
    return serverURL + "?text=" + value;
}

function btnClickHandler() {
    var textValue = textData.value;
    outputData.innerText = "Translation in progress..."
    fetch(getTranslatedURL(textValue))
    .then(response => response.json())
    .then(json => outputData.innerText = json.contents.translated)
    .catch(errorHandler);
}
    이 프로그램은 주어진 문장을 미니언 언어로 변환하기를 원하기 때문에 API 호출 매개 변수로 전달되는 메시지는 각각의 상황에서 다를 수 있습니다.따라서 getTranslated URL 함수를 사용하여 텍스트 메시지를 서버 API URL에 연결합니다.
    btnClickHandler()에서 입력한 텍스트 값이 수집되어 새 변수 "textValue"에 저장됩니다.클라이언트-서버 통신이 필요하기 때문에 제한된 시간이 필요합니다.다음 몇 줄은 입력 메시지를 통해 보내는 주요 논리를 포함하고 번역된 메시지를 출력으로 표시합니다.

    JavaScript에서fetch 호출 이해


    Fetch API는 HTTP 파이프의 특정 부분(예: 요청 및 응답)에 액세스하고 조작할 수 있는 JavaScript 인터페이스를 제공합니다.


    위의 코드로 간단하게 분해합시다.함수 getTranslated URL과 입력 메시지 textValue를 이fetch API에 전달합니다.
    이 함수가 호출된 결과가 무엇이든지 '응답' 으로 간주됩니다.
    arrow 함수를 사용하여 이 응답을 json 형식으로 변환합니다.화살표 함수에 대한 정보를 읽을 수 있습니다 here.
    일단 json 출력을 받으면, 우리는 완전한 json 대상 자체가 아니라 번역된 텍스트 데이터만 얻을 수 있습니다. (위에서 논의한 3가지 속성 포함)번역 후의 속성은'contents'대상에 존재하기 때문에 우리는 이를 json.contents.translated라고 부른다.
    현재 output div 부분을 업데이트합니다. 'translation in progress' 를 미니언 언어로 바꾸는 메시지를 통해 번역 텍스트 값을 표시합니다.
    Funtranslation API는 무료로 사용되기 때문에 이 API의 호출 횟수에 제한이 있습니다.일단 이 제한을 초과하면 착오를 초래할 수 있다.이 오류 메시지를 처리하기 위해서, 우리는 이상 처리 프로그램 .catch(errorHandler) 을 사용합니다.API가 올바른 결과를 제공하지 못할 경우 다음과 같은 논리를 통해 사용자에게 경고 메시지를 표시합니다.
    function errorHandler(error) {
    console.log("error occured", error);
    alert("Something wrong with the server, try again later.");
}
    마지막으로 우리는 반드시 다음과 같은 결과를 얻을 수 있어야 한다.

    이것은 우리가 이 프로그램을 만드는 논리를 끝낸다.우리가 남은 것은 CSS와 관련된 양식을 결합시키는 것이다.자신의 디자인 스타일을 제공함으로써 이 프로그램을 디자인할 때 모든 창의력을 발휘할 수 있습니다.너는 더욱 진일보해서 서로 다른 번역 언어로 유사한 응용 프로그램을 만들 수 있다.
    너는 내가 만든 응용 프로그램 -->Let's go Bananas을 참고할 수 있다.당신의 버전을 만들고 평론 부분에서 당신의 경험과 피드백을 공유해 보세요.
    이 문서가 JavaScript 및 서버 호출에 대한 몇 가지 의견을 제공하는 데 도움이 되었으면 합니다.
    평화!
    C# 개체 복제 전쟁
    AWS Lambda의 물체 감지 API(Flash+ylolov5)를 사용한 구축

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage