진찰 중 번호 표시 WEB 앱 작성

개요

이비과의 개업 의사입니다. 자원의 예약 시스템을 GAS를 사용한 LINE Bot로 작성해 개량해 왔습니다. 지금까지 4500명 정도의 환자가 이용하고 있습니다.
1시간에 할 수 있는 LINE×GAS로 차례 예약 시스템의 작성
LINE×GAS로 만든 순차 예약 LINE Bot 개량
진찰 예약 시스템(LINE×GAS)에 푸시 메시지 기능 추가

대기실 환자가 현재 진찰중의 번호를 알 수 있도록 지금까지는 기존의 무료 번호 앱을 ipad로 표시해 수동으로 번호를 갱신하고 있었습니다. 자동화할 수 없는가와 이번에도 친구에게 손잡이를 가르쳐 주면서 작성했습니다.

구현 내용

예약 시스템의 백엔드는 Google Spread Sheet를 이용, App Script(GAS)로 LINE bot와 연계하고 있습니다. 작성법은 이쪽 1시간에 할 수 있는 LINE×GAS로 차례 예약 시스템의 작성

Spread Sheet의 A1셀이 발권된 번호, B1셀이 진찰중 번호, C1셀이 「1」일 때 발권정지, D1셀이 1인당 대기시간(분), E열에 예약권을 발행한 환자 LINE userID입니다.



이번 진찰중 번호인 GAS의 B1셀의 내용을 2초마다 취득해 표시하는 WEB어플리케이션을 작성했습니다.

기능 추가

1.GAS에 브라우저에서 B1 셀의 내용을 얻을 수 있는 코드 추가

//B1セルの中身を取得できるように追加
function doGet(e) {
  var result = getNumberB1();

  return ContentService.createTextOutput(
    JSON.stringify({ number: result })
  ).setMimeType(ContentService.MimeType.JSON);
}

2. 웹 앱용 index.html 만들기

<script>
// Vue.jsの設定
const app = new Vue({
    el: '#app', // <div id="app"></div>をVue.jsの管理対象に指定
    data() {
        return {
            number: 0,
        }
    },
    async mounted() {
        await this.updateView();

        setInterval(async () => {
            await this.updateView();
        }, 2000);
    },
    methods: {
        async getNumber() {
            const result = await axios.get('GASのURL');
            return result.data.number;
        },
        async updateView() {
            const result = await this.getNumber();
            this.number = result;
        },
        async updateViewManually() {
            try {
                await this.updateView();
                setTimeout(() => {
                    alert('更新しました。');
                }, 500);
            } catch(e) {
                alert('更新に失敗しました。');
            }
        },
    }
});
</script>

3.WEB 앱용 style.css 만들기

4.Heroku에 배포
공식은 이쪽 Deploying with Git
git이 인식되지 않으면 git 설치 htps://기 tscm. 코m/

cd myapp
heroku create
git init
git add .
git commit -m "commit"
heroku git:remote -a アプリ名
git push heroku master

오류가 발생함

remote:  !     No default language could be detected for this app.
remote:                         HINT: This occurs when Heroku cannot detect the buildpack to use for this application automatically.
remote:                         See https://devcenter.heroku.com/articles/buildpacks
remote:
remote:  !     Push failed

「No default language could be detected for this app.heroku html」로 검색하면 이 기사가 톱에 나온다.

간단한 HTML / CSS / JS를 Heroku에 배포 할 때 걸렸습니다.

Heroku는 HTML과 CSS만의 배포는 기본 허락하지 않는 서비스이지만, PHP 추가하면 바꾸게 한다.

5. 이 기사를 참고로 index.php와 composer.json 추가

Git의 커멘드는 기본, add → commit → push가 1 세트이므로, 변경하면 반드시 이 3개를 실행한다

완성

오오오! ! ! 할 수 있었어! ! !
원하는 것을 만들 수 있다면 매우 즐겁습니다.



내일부터 실제로 사용해 보겠습니다.
Takahiro Mitsuoka (내 페이지는 여기) 감사합니다!

(2020년 12월 1일 추가)

「어라? Vue.js가 제대로 표시할 수 없어!?」



아주 오래된 iPad를 사용했기 때문입니다. 조금 새로운 iPad로 하면 표시되었습니다. 직원도 기뻤습니다.

대기 환자를 위한 진찰 중 번호를 표시하는 WEB 앱을 자작하고 연동시킨다 피 c. 라고 r. 이 m/yPゔぇrYCyXz — 질병의 셀프 체크 (@Selfcheckhealt1) December 1, 2020

예약 시스템 동영상은 여기

클리닉 예약 시스템을 직접 만들었습니다. 피 c. 라고 r. 코 m / 아우에 s 6 6

— 질병의 자체 검사 (@Selfcheckhealt1) December 1, 2020

<script async=""src="https://platform.twitter.com/widgets.js"/>