add-on 같은 React App 만들기

개시하다

Google을 사용하여 JavaScript

를 적으면 됩니다.

Terminal 등 명령줄 사용

Node.자체 설치 가능 js

라고 구상했다.
이번 리액트는 거의 안 써요. 몰라도 괜찮아요.
마음에 드는 점이 있으면 공식 문서를 참조하세요.
Hello World – React
미리 보기FileMaker 웹 뷰어 및 JavaScript 로드 매크로 분석하면 이해가 깊어질지도 몰라요.
그리고 이번 코드는 GiitHub에 있습니다.
복사 후 바로 사용하면 문제없습니다.
GitHub: hazi/fmapp_calculator_sample

Node.js

다양한 설치 방법이 있지만 앞으로 개발하려면 nodebrew 등 다양한 버전의 Node를 사용하세요.js를 관리할 수 있는 환경을 추천합니다.
다음 환경에서 실행합니다.

node -v
> v15.9.0
yarn -v
> 1.22.10

만든 물건

이번 목적은 간단한 컴퓨터 프로그램을 만들어 HTML 파일로 컴파일하는 것이다.
FileMaker를 위한 웹 응용 프로그램을 개발할 때, 목표는 수동으로 HTML 파일로 통합하는 작업에서 벗어나는 것이다.
결론적으로 웹 애플리케이션을 빠르게 만드는 것이 목표이기 때문에 상황에 따라(특히 리액트를 사용하지 않는 경우 등) 부적합한 경우도 있으니 유의하시기 바랍니다.

create-react-app

1부터 웹페이지를 작성하는 것은 관리가 매우 번거롭기 때문에 리액트 앱으로 빠른 제작create-react-app을 통해 간단한 컴퓨터를 만들어 보세요.

npx create-react-app fmapp_calculator
cd fmapp_calculator
yarn start

브라우저가 열리고 프레젠테이션 프로그램이 브라우저에서 실행되는지 확인합니다.

1. 간이 컴퓨터 만들기

다음 코드를 복사하기 위해서 src/app.js를 엽니다.
src/app.js

import './App.css';
import * as React from 'react';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      result: 0
    };

    this.onChange = this.onChange.bind(this);
  };

  onChange(event) {
    const result = this.calculation(event.target.value);
    this.setState({result});
  };

  calculation(formula) {
    try {
      const filterd = formula.match(/[0-9]|\.|\*|\+|-|\/ /g);
      if (filterd === null) return "";

      return Function('"use strict"; return (' + filterd.join('') + ')')();
    } catch (error) {
      console.log({error: error});
      return "?";
    }
  };

  render() {
    return (
      <div>
        <h1>簡易計算機</h1>
        <p>
          <input type="text" onChange={this.onChange} /> = <input type="text" value={this.state.result} readOnly />
        </p>
      </div>
    );
  }
}

왼쪽 필드에 1 + 1를 입력하면 오른쪽 필드에 2라는 컴퓨터가 나타납니다.

yarn start

에서 동작을 확인하고 정상적인 동작인지 확인하세요.

2. 일단 build

yarn build 일단 지령으로 구축해 봅시다.

yarn build

일 때 파일은 build 디렉터리로 출력됩니다.
이걸 서버에 올리면 아까yarn start와 같은 프로그램이 시작됩니다.

3. HTML 1 파일로 요약

일반적인 웹 응용 프로그램으로서, 이렇게 하면 되지만, FileMaker는 여러 개의 CSS, 자바스크립트, HTML을 처리하기 어려워서 하나의 파일로 정리한다.
보통webpack.config.js을 사용하여 웹 패키지의 설정을 맞춤형으로 만들지만 이번에는 create-react-app를 사용했기 때문에 진행할 수 없다create-react-app. 복잡한 설정으로 앱을 만들 필요가 없기 때문에 그런 방법이 목표이기 때문이다.yarn eject로도 이 설정을 할 수 있지만 대량의 설정 파일이 벗겨져 사용create-react-app의 의미가 옅어지기 때문에 이번에 사용react-app-rewired했다.
참조: react-create-app에서 제작한 Type Script 프로젝트의 웹 페이지입니다.config 덮어쓰기
우선react-app-rewired을 가방에 추가합니다.

yarn add -D react-app-rewired

이후 package.json를 아래의 내용으로 개작한다.
package.json

"scripts": {
-  "start": "react-scripts start",
-  "build": "react-scripts build",
-  "test": "react-scripts test",
+  "start": "react-app-rewired start",
+  "build": "react-app-rewired build",
+  "test": "react-app-rewired test",
   "eject": "react-scripts eject"
},

그런 다음 HTML을 하나로 추가html-webpack-inline-source-plugin합니다.
그러나 현재(2021/02/28) 베타 버전1.0.0-beta.2이 없으면 정상적으로 작동할 수 없기 때문에 베타를 지정한다.
정식판 나오면 그거 써요.
수정html-webpack-inline-source-plugin의 유지보수가 끝났고react로 이전된 InlineChunkHtmlPlugin여기.로 기록되었습니다.
다만 현황InlineChunkHtmlPlugin은 CSS에 대응하는 내선 전개가 없어 당분간 계속 사용할 수밖에 없음html-webpack-inline-source-plugin.
버전 정보: html-webpack-inline-source-plugin - npm

yarn add -D [email protected]

준비되어 있어서 리메이크webpack.config.js의config-overrides.js를 제작했습니다.
config-overrides.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');

module.exports = function override(config, env) {
  if (env === 'production') {
    config.plugins.find(plugin => Object.getPrototypeOf(plugin).constructor.name === 'HtmlWebpackPlugin')
      .options.inlineSource = '.(js|css)$'
    config.plugins.push(new HtmlWebpackInlineSourcePlugin(HtmlWebpackPlugin))
  }
  return config
}

이렇게 yarn build하면 완성인데 지금은 필요 없는 파일이 많아서 삭제합니다../public 이하index.html 이외의 내용을 삭제한다.
끝나다

yarn build

에 구축됩니다.

4. FileMaker에 포함

나중에 좋아하는 방법으로 HTML을 FileMaker에 가져올 수 있습니다. 제가 지금 사용하고 있는 방법은 다음과 같습니다.

서버에서 웹 응용 프로그램을 관리하는 원본을 만드는 테이블(Library.fmp12 등)

WebApps 표를 작성하고 다음 필드를 추가합니다.

name（文字列）

html（オブジェクト）

source（計算フィールド）계산 결과:텍스트
공식.

TextDecode(html; "utf-8")

ExecuteSQL을 사용하여 WebApps:source 필드를 사용할 때 스트레칭합니다.
키 사용name.

ExecuteSQL(
  "SELECT source FROM WebApps WHERE name = 'calculator'";
  ""; "")

네.
여러 곳에서 같은 프로그램을 사용할 때 책상으로 통일적으로 업데이트하는 것을 권장합니다.
또한 복사 붙여넣기 가져오기 소스는 매우 위험하므로 객체 필드를 드래그 앤 드롭하여 객체 필드에 컴파일된 index.html를 객체 필드에 설치할 수 있습니다.
필요에 따라 버전 정보 등을 추가하는 것이 좋을 수 있습니다.
창고example/library.fmp12에 간단한 파일을 놓았다.

끝말

이번에 소개한 것은 간단한 리액트 앱을 FileMaker로 가져오는 것뿐이다.create-react-app 덕분에 한꺼번에 만들 수 있었어요.
자신이 좋아하는 편집기를 사용해 편집, 저장한 후 브라우저에 자동으로 업데이트되는 개발 환경도 준비되어 있다yarn start.
다만, 여기서부터는 리액트의 프레임을 넘어 원래 리액트를 사용하지 않는다면 스스로 웹페이지를 설정하는 방법을 사용해야 한다.
그 일대 다음에 봐요.