회사의 접수 시스템을 PWA로 바꾸어 만든 이야기

16084 단어 RaspberryPi파이썬Vue.jsPWA
JX 통신사 Advent Calendar 2018 , 22일째 담당의 kain_jy입니다.

꽤 전의 이야기입니다만, 지금의 사무실에 이사했을 때에 만든, 접수 시스템에 대해 소개합니다.

단지 사내에, 낡은 iPad와, 방치되고 있던 Raspberry PI, 참신해 받은 PC 스피커가 있었으므로, 나머지를 활용해 뭔가 할 수 없을까라고 생각한 것이 계기입니다.

iOS의 네이티브 앱을 만드는 것도 검토했지만, 이사로 시간이 없었기 때문에, PWA(Progressive Web Apps)를 사용해 바삭하게 만들기로 했습니다.

구성도





슬랙 설정



Slack API Incoming Webhook URL 가져오기 합니다.

Raspberry PI 설정



Raspberry PI에 스피커를 연결하고 집무실에 설치합니다.

또한 iPad에서 HTTP POST를 받으면 차임 소리가 흐르게 합니다. Raspberry PI에는 미리 최신 Raspbian을 설치하고 흐르고 싶은 차임 소리 (/opt/reception/chime.mp3)를 넣어 둡니다.
# 必要なライブラリをインストール
$ sudo apt-get update
$ sudo apt-get install build-essential python3 python3-pip mpg321
$ sudo pip3 install flask uwsgi

/opt/reception/app.py
from flask import Flask
from subprocess import Popen, PIPE

app = Flask(__name__)


@app.route('/call')
def call():
    proc = Popen(['mpg321', '/opt/reception/chime.mp3'], stdin=PIPE, stdout=PIPE)
    proc.communicate()

    return "OK"

# 起動
$ uwsgi --socket 0.0.0.0:5000 --protocol=http --wsgi-file /opt/reception/app.py

접수 화면 만들기



이번에는 Vue.js와 Element.js를 이용하여 화면을 만들어 보았습니다. 대상이 iOS에서 Service Worker를 사용하지 않으므로 manifest.json가 필요하지 않습니다.

index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-title" content="PWA Reception">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body style="margin: 0; padding: 0;">
  <div id="app">
    <ul style="display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0;">
      <li v-for="m in members" style="width: 25%;">
        <el-card shadow="always" style="margin: 1rem" :body-style="{ padding: '0px' }">
          <img :src="m.avatar" style="width: 100%" alt="">
          <div style="padding: 1rem">
            {{ m.name }}
          </div>
          <div style="padding: 1rem">
            <el-button type="primary" style="width: 100%" @click="call(m)">呼び出し</el-button>
          </div>
        </el-card>
      </li>
    </ul>
  </div>
</body>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: function() {
        return {
          // 実際には社員マスタを参照するようにします
          "members": [
            {"name": "山田太郎", "slack": "@taro", "avatar": "https://placekitten.com/300/200"},
            {"name": "山田二郎", "slack": "@jiro", "avatar": "https://placekitten.com/301/200"},
            {"name": "山田三郎", "slack": "@saburo", "avatar": "https://placekitten.com/302/200"},
            {"name": "山田四郎", "slack": "@shiro", "avatar": "https://placekitten.com/303/200"},
            {"name": "山田五郎", "slack": "@goro", "avatar": "https://placekitten.com/304/200"},
            {"name": "山田六郎", "slack": "@rokuro", "avatar": "https://placekitten.com/305/200"},
            {"name": "山田七郎", "slack": "@shichiro", "avatar": "https://placekitten.com/306/200"},
            {"name": "山田八郎", "slack": "@hachiro", "avatar": "https://placekitten.com/307/200"},
          ]
        }
      },
      methods: {
        call: function(m) {
          axios.post('<Raspberry PIのIPアドレス>/call');
          axios.post('<Slack Incoming Webhook URL>', {text: m.slack + " さんにお客様です。"});
        }
      }
    })
  </script>
</html>

리셉션 화면을 iPad에 설치



마지막으로 iPad에 PWA로 접수 화면을 설치합니다. 방금 만든 접수 화면 ( index.html )을 iPad의 Safari에서 표시합니다. 적당한 웹 서버에 올리거나 간단한 웹 서버를 시작하여 iPad에서 보러 가십시오.

회사는 사내에서 운영하고 있는 GitLab Pages에 index.html를 출력하도록 하고 있습니다.

Safari에서 표시한 후 "홈 화면에 추가"를 선택하면 홈 화면에 새 아이콘이 만들어집니다. 이것으로 설치가 완료됩니다.

마지막으로





홈 화면의 아이콘에서 접수 화면을 열면 이렇게 Safari의 헤더나 네비게이션이 표시되지 않고 오프라인에서도 화면을 열 수 있습니다.

설치할 때 iOS 자동 절전 모드를 사용 중지하고 액세스 가이드 모드를 사용하여 이 앱(PWA)만 사용할 수 있도록 하세요.
Hackason으로 차이를 내십시오! 순간 Firebase Authentication ~ 3 분 요리 ~ Vue와 함께
PWA에서 홈 화면에 추가하는 아이콘을 무작위로 시도했습니다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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