무코드 airtable과 Netlify를 사용하여 기계 로그 응용 프로그램을 신속하게 구축
코드나 비슷한 것을 사용하지 않고 이 도구를 구축할 수 있는지 보고 싶습니다.나는 에어테이블로 약 2시간 안에 그것을 완성했다.비록 나는 내가 자신의 URL을 더욱 전문적으로 하기 위해 코드가 필요하다는 것을 발견했다.
솔루션 단계
기본 에어테이블 계정 설정
첫 번째 단계는 항공사에 가서 계좌를 개설하는 것이다.당사의 목적을 위해 Pro 수준의 계정을 구매해야 합니다.이것은 폼에 있는 사용자 정의 브랜드와 비밀번호 제한을 제공하기 때문에 비밀로 할 수 있습니다.
여기로 신청: https://airtable.com
새 기지를 세우다
쿠션선에는 기지라는 개념이 있다.이것은 데이터베이스나 응용 프로그램과 같다.우리의 응용 프로그램은 새로운 것이 필요하다.
추가 기준(기호 +)을 클릭한 다음 [처음부터 시작]을 클릭합니다.기계 일지라고 부른다.
새 받침대를 열다.이것은 격자 보기를 보여 줍니다. 열을 편집할 수 있습니다. (에어 테이블에서'필드'라고 합니다.)Airtable은 기본 열과 예제 데이터를 추가했습니다.응용 프로그램에 대해 우리는 이 열을 맞춤형으로 만들어야 한다.기본적으로 airtable이 추가한 "Name"오른쪽의 모든 필드를 삭제할 수 있습니다.
기록자가 로그에 언제 들어갔는지 기록할 열을 추가해야 합니다.이를 위해 이름: "DateOfAction", "Created time", 날짜 형식: ISO, 시간, 24시간 시계 및 GMT 시간 사용을 추가했습니다.
다음으로 우리는 기록할 기계 작업의 이름을 추가합니다.이것은 이 프로그램의 고정 옵션 목록입니다. 따라서'작업 이름'이라는 열을 추가했습니다.입력: "단선"옵션을 추가합니다.
작업자가 기록 중인 작업을 추가합니다.우리는 사건이라고 부른다.시작, 중지 및 일시 중지 옵션이 있는 다른 라디오 필드.
작업자가 작업을 일시 중지하는 이유를 표시하기 위해 이 필드를 사용할 수 있는 필드를 추가했습니다.작업자가 이벤트 필드에서 일시 중지를 선택한 경우에만 표시됩니다.
우리가 필요로 하는 마지막 열 변경은 새 기록을 만들 때 자동으로 이름 열을 채우는 것입니다.이를 위해, 우리는 공식 열을 사용할 것이다.공식은
DateOfAction & "-" & {Job Name} & "-"&Event 입니다.단일 로그 항목에 대해 이 조합은 유일해야 합니다.
테이블을 기계 작업 로그로 이름 바꾸기
양식 추가
지금 우리는 데이터를 저장할 시계가 하나 생겼다.격자 보기/excel 보기보다 더 좋은 ui로 데이터를 입력하기 위해 기계 조작자를 위한 폼을 만들어야 합니다.이렇게 하려면 [양식 추가]를 클릭합니다.폼은 모든 필드를 포함하고 있을 것입니다.만약 당신이 좋아한다면, 여기에 로고를 추가할 수 있습니다.
제목과 설명을 바꾸어 우리의 기계 조작원을 돕다.양식 필드의 제목을 클릭하여 양식 필드 속성을 편집할 수 있습니다.
작업 이름 필드 속성을 다음과 같이 변경합니다.지금은 옵션이 많지 않기 때문에 디스플레이 옵션 목록으로 변경해야 합니다.
이벤트 동일 - 필수, 목록 표시
일시 중지 원인을 이벤트가 일시 중지된 경우에만 표시하도록 설정합니다.
다음을 위해 형식을 변경합니다.
테스트 양식
미리 보기 기능을 사용하여 새 폼을 테스트합니다!우리의 프로 계정 때문에, 그것은 아주 적은 브랜드를 표시할 것이다.완전한 코드를 설정하고 테스트하기 위해서는 (적어도 나의) 많은 작업이 필요할 것이다.
코드 추가
지금 우리는 코드를 좀 추가해야 하지만, 많지 않다.
컴퓨터에 폴더를 만들고 이 내용을'index.html'이라는 파일에 추가합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Machine Job Logging</title>
<script src="https://static.airtable.com/js/embed/embed_snippet_v1.js"></script>
</head>
<body>
<iframe
class="airtable-embed airtable-dynamic-height"
src="======PASTE EMBED LINK HERE========"
frameborder="0"
onmousewheel=""
width="100%"
height="1000"
style="background: transparent; border: 1px solid #ccc;"
></iframe>
</body>
</html>
포함된 링크 가져오기
Air table에서는 양식을 다른 사이트에 삽입할 수 있습니다.우리는 곧 netlify 사이트를 만들어서 우리의 표를 위탁 관리할 것이다.airtable에서 공유 링크를 삽입합니다.공유 양식 클릭
그리고 "이 폼을 사이트에 삽입하세요."이것은 우리가 필요로 하는 상세한 정보를 포함하는 새 창을 열 것입니다.
src=""비트의 내용을 이 페이지를 index.html로 복사하여 "======= 여기에 삽입 링크를 붙여넣습니다 ======"로 바꿉니다. 따라서 그림의 예시를 보면 index.html은...
<body>
<iframe
class="airtable-embed airtable-dynamic-height"
src="https://airtable.com/embed/shr0pGWyApaYYKXf0?backgroundColor=blue"
frameborder="0"
onmousewheel=""
width="100%"
height="1000"
style="background: transparent; border: 1px solid #ccc;"
></iframe>
</body>
...
github 저장소 추가
인터넷에는 이 점을 어떻게 하는지 보여주는 지침이 많다.그러나 새로운github 저장소를 만들고 인덱스를 추가합니다.html 폴더.
netlify 사이트 추가
netlify를 등록하고 새로운 netlify 사이트를 추가합니다.위의 새 github 저장소를 사용하라고 알려 주십시오.우리의 사이트는 매우 간단하기 때문에, 우리는 어떠한 구축 명령이나 출력 디렉터리도 지정할 필요가 없다.
사이트 배포
그것은 반드시 1초 안에 배치해야 한다.링크를 클릭하면 표를 볼 수 있습니다!
비밀번호로 웹 사이트 보호
당신들의 사이트는 이미 전 세계에 공개되었습니다. 우리는 사람들이 그것을 어지럽히고 싶지 않기 때문에 비밀번호를 추가해 주십시오.공중으로 돌아가 공유 양식 팝업 창을 다시 엽니다.암호를 사용하여 액세스를 제한하고 암호를 입력합니다.현재, 누군가가 당신의 넷lify 사이트를 방문할 때, 그들은 반드시 비밀번호를 입력해야 한다.
도메인 추가
netlify를 사용하여 사용자 정의 필드를 설정합니다.그들의 지시에 따라: https://docs.netlify.com/domains-https/netlify-dns/
Reference
이 문제에 관하여(무코드 airtable과 Netlify를 사용하여 기계 로그 응용 프로그램을 신속하게 구축), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/darraghor/using-no-code-airtable-and-netlify-to-quickly-build-a-machine-log-application-2m7i텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
