시간표 생성기로 첫 번째 Electron 프로젝트 만들기

우리는 전자 프레임워크에서 시간표 생성기 앱을 만들 것입니다. 이 앱은 .xlsx로 내보내고 시스템에 저장할 수 있는 시간표를 생성할 수 있습니다.

종속성

시작하려면 전자, 노드 js 및 npm을 설치했는지 확인하십시오.

앱 설정

터미널을 열고 npx create-electron-app time-table-generator를 입력합니다. 다음과 같은 출력이 표시됩니다.

index.html

시간표를 만들려면 수업 수와 과목 이름에 대한 정보가 필요합니다. 이를 위해 레이블을 만들고 다음과 같이 상자를 선택합니다.





이제 주제 이름이 필요합니다. 이를 위해 입력 필드를 동적으로 생성합니다. 이것은 자바스크립트로 할 수 있습니다. 그게 다야, 이제 우리는 시간표를 생성하기 위해 javascript 파일에서 작업할 것입니다.

자바스크립트 파일로 테이블 생성

이제 새로운 자바스크립트 파일을 생성합니다. 앞에서 언급한 주체 이름을 배열에 추가해야 합니다. 이를 수행하는 방법은 다음과 같습니다.



참고: 이 기능은 새 주제 이름을 입력하기 위해 새 입력 필드에 대해 '+' 버튼을 클릭할 때 호출됩니다.



우리는 위의 데이터를 로컬 저장소에 저장할 것입니다(왜 로컬 저장소를 사용하여 데이터를 저장했는지는 나중에 설명하겠습니다). 이제 시간표를 생성하고 다음 페이지에 표시하는 함수를 만들고 이를 위해 다음을 사용할 것입니다.

window.location.replace("02.html") //to store in localstorage
localStorage.setItem("time", time)

var nClass = Number(localStorage.getItem("nClass")) // to get data from localstorage
for (var i = 1; i <= 5; i++) {
        html += "
" + days[i-1] + '' //days is array containing days of the week.
        for (let j = 1; j < nClass; j++) {
            if (j == nClass/2) {
                html += '' + subjects[Math.floor(Math.random() * subjects.length + 0)] + '' + ' Lunch ' + '' + subjects[Math.floor(Math.random() * subjects.length + 0)] + ''
            } else {
                html += '' + subjects[Math.floor(Math.random() * subjects.length + 0)] + ''
            }
        }
    html += ""
  }
  html += ""
  document.getElementById("tt").innerHTML = html;

다음 페이지에 표 표시

다음 페이지에 테이블을 표시하기 위해 새 HTML 파일을 만들고 on-load in body 태그에 해당 함수 이름을 추가합니다.
이제 로컬 저장소의 역할이 있습니다. 이전 페이지에서 데이터를 가져오기 위해 로컬 저장소에 저장했습니다. 이제 저장된 데이터를 사용하여 테이블을 만들 수 있습니다.

이제 터미널에 npm start를 입력하여 앱을 시작합니다.

보너스

.xlsx로 내보내려면 table2excel.js를 사용합니다. 이를 위해서는 종속 항목을 설치해야 합니다. 터미널을 열고 npm install bootstrap jquery popper.js xlsx file-saverjs를 입력합니다. 순서대로 포함해야 합니다(부트스트랩, jquery, table2excel).

이제 이 jQuery 함수를 추가합니다.


당신은 놀 수 있고 더 많은 기능을 추가할 수 있습니다. 이 프로젝트는 time-table-generator에서 찾을 수 있습니다.