getPokeData.js 코드 설명

이 글은 2024-08-09에 최종 업데이트 되었습니다.

Table of contents

코파일럿 플러그인의 전체적인 동작 흐름

코파일럿 플러그인의 관점에서의 전체적인 흐름을 보면

  1. 사용자가 프롬프트를 입력해서 전송합니다.
  2. 코파일럿 오케스트레이터가 프롬프트의 내용을 보고 포켓몬 플러그인을 사용하기로 결정합니다.
  3. 코파일럿 오케스트레이터가 플러그인의 매니페스트 파일을 참조해 필요한 파라미터를 추출합니다.
    • “피카츄 포켓몬 찾아줘” » {“name” : “피카츄”}
  4. 코파일럿 오케스트레이터가 플러그인의 봇 정보를 확인해 봇을 호출합니다
    • 봇에게 앞서 추출한 파라미터도 전달합니다.
  5. 호출된 봇은 알고 있는 웹앱 서비스에 파라미터를 전달합니다
  6. 웹앱이 호출되어 getPokeData.js 가 수행됩니다.
    • name 이나 type 의 파라미터를 취득합니다.
    • 어떤 파라미터를 받았는지를 현재시간과 함께 콘솔창에 출력합니다.
    • 포켓몬 데이터 API를 호출하면서 파라미터를 전달합니다.
    • API가 반환한 데이터셋을 루프 돌면서 어댑티브 카드 템플릿에 적재합니다.
    • 어댑티브 카드 컬렉션을 아웃풋으로 반환합니다.
  7. 웹앱이 반환한 어댑티브 카드 컬렉션을 봇이 받습니다.
  8. 봇이 반환한 어댑티브 카드 컬렉션을 코파일럿 오케스트레이터가 받습니다.
  9. 코파일럿 오케스트레이터가 LLM을 이용해 답변을 작성합니다.
  10. LLM의 답변에 어댑티브 카드 UI를 적용하여 사용자에게 응답을 전달합니다.

Azure 구동


getPokeData.js 코드 살펴보기

getPokeData.js 를 살펴보겠습니다.

  • name 이나 type 의 파라미터를 취득합니다.
1
2
3
4
5
6
7
    let poke_name = "", poke_type = "";
    if (search('poke_name', query.parameters, false)){
      poke_name = search('poke_name', query.parameters, false).value;
    }
    if (search('poke_type', query.parameters, false)){
      poke_type = search('poke_type', query.parameters, false).value;
    }

  • 어떤 파라미터를 받았는지를 현재시간과 함께 콘솔창에 출력합니다.
1
2
3
    console.log(search('poke_name', query.parameters, false));
    console.log(search('poke_type', query.parameters, false));
    console.log(timestamp());

  • 포켓몬 데이터 API를 호출하면서 파라미터를 전달합니다.
1
2
3
4
5
6
    const response = await axios.get(
      `https://pogokrapi.azurewebsites.net/api/pogo?${querystring.stringify({
        name: poke_name,
        type: poke_type,
      })}`
    );

  • API가 반환한 데이터셋을 루프 돌면서 어댑티브 카드 템플릿에 적재합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
      const template = new ACData.Template(pokemonCard);
      const card = template.expand({
        $root: {
          num: pokemon.num,
          name: pokemon.name,
          img: pokemon.img,
          type: pokemon.type,
          height: pokemon.height,
          weight: pokemon.weight,
          candy: pokemon.candy,
          weaknesses: pokemon.weaknesses.join(", "),
          evolimg1: temp_evolimg1,
          evolname1: temp_evolname1,
          evolimg2: temp_evolimg2,
          evolname2: temp_evolname2,
          evolimg3: temp_evolimg3,
          evolname3: temp_evolname3,
          evolimg4: temp_evolimg4,
          evolname4: temp_evolname4,
        },
      });
      const preview = CardFactory.heroCard(pokemon.name);
      const attachment = { ...CardFactory.adaptiveCard(card), preview };
      attachments.push(attachment);

  • 어댑티브 카드 컬렉션을 아웃풋으로 반환합니다.
1
2
3
4
5
6
7
    return {
      composeExtension: {
        type: "result",
        attachmentLayout: "list",
        attachments: attachments,
      },
    };