이 앱은 매우 간단하며 위키 페디아에서 무작위로 얻은 단어와 관련된 단어를 세 개 입력하는 앱입니다.
(엄청 간단한 앱입니다. 알려주십시오.)

구현 환경

우분투: 18.04.5 LTS
node.js : v10.14.2
express : 4.16.0

github: htps : // 기주 b. 코 m / S 파로 w 42 / 아소시 아테 - 아 p

앱 사용법

여기가 톱 화면입니다. 「기후중 경찰서」라고 나와 있습니다. 생각해 낸 것도 좋기 때문에, 3개 입력합니다.


중학교인가, 경찰서인가, 어느 쪽인가요…
그리고는 기후로부터 연상했습니다.



전송을 누르면 새로운 단어가 나옵니다. "광원 일유"는 누구입니까? 여러 번 하고 있으면 "이 사람 누구야"라는 인물 이름이 엄청 나옵니다. 웃음
정말 모르는 것이 많기 때문에 고도의 연상력이 시험됩니다.

기술소개

이번에는 random-word-wikipedia이라는 API를 사용했습니다. Wikipedia의 모든 페이지에서 무작위로 단어를 끌어 오는 것입니다.

사용법

먼저 random-word-wikipedia를 설치합니다.

$ npm install random-word-wikipedia

그리고 require로 모듈을 읽고 then으로 얻을 수 있습니다. 아래의 코드는 공식 문서의 usage입니다.

const randomWordWikipedia = require('random-word-wikipedia');

randomWordWikipedia().then(console.log);
//=> [ 'Saxifraga spathularis' ]

randomWordWikipedia('ja', 2).then(console.log);
//=> [ 'ジョン・イサーク・ブリケ', '月は闇夜に隠るが如く' ]

소스 코드

실제로이 API를 사용하는 코드의 발췌입니다.

index.js

const randomWordWikipedia = require('random-word-wikipedia');

function wrap_randomWordWikipedia(callback){
  randomWordWikipedia('ja').then((value) => {
    callback(value);
  })
}

router.get('/', function(req, res, next){
  function callback(param){
    var data = {
        theme: param,
    }
    res.render('index', data);
  }

  wrap_randomWordWikipedia(callback);

});

router.post('/add', (req, res, next) => {
  function callback(param){
    console.log('callback: ', param);
    var ans1 = req.body['ans1'];
    var ans2 = req.body['ans2'];
    var ans3 = req.body['ans3'];
    var data = {
      theme: param,
      ans1: ans1, 
      ans2: ans2, 
      ans3: ans3
    }
    res.render('index', data);
  }
  wrap_randomWordWikipedia(callback);
})

index.pug

extends layout

block content
  h1= "Output three objects"
  p 「#{theme} 」に関連したものを入力してください
  form(method="post" action="/add")
    input(type="text" name="ans1")
    input(type="text" name="ans2")
    input(type="text" name="ans3")
    input(type="submit" name="送信")

  p #{ans1} #{ans2} #{ans3}

고전한 포인트

random-word-wikipedia 가 비동기로 움직이는 모듈이라는 점에 고전했습니다.
나중에 움직이는 모듈을 어떻게 렌더링하는지 여러가지 시행 착오 했습니다만, 결국 콜백 함수를 사용하는 것으로 동기 처리를 비동기 처리 후에 실행시켰다.
더 좋은 쓰는 방법이 있으면 교수하실 수 있으면 다행입니다.

해결 방법을 쓰고 있으면 길어졌으므로, 다른 기사로 합니다. (업 되는 대로, 이쪽에 링크 붙입니다.)

이것을 만든 의도

사람과 대화할 때, 아무것도 화제라든지 대답이 생각나지 않는 일은 없습니까?
나는 자주 있기 때문에, 머리의 체조가 되지 않을까 하는 가벼운 추억으로 만들었습니다.

마지막으로

아직 데이터베이스 접속도 하지 않고 매우 간단한 구조입니다만, 우선 출력했습니다.
조금 만들 생각이었습니다만, 만들어 내면 여러가지 발상이 태어나, 타임 계측이나 오리지날 문제등 여러가지 기능 추가할까 생각하고 있습니다. 역시 자작 앱은 재미있네요.

끝까지 봐 주셔서 감사합니다!
만약 참고가 되었다고 하는 분이 있으면, LGTM 부탁합니다!