JavaScript 응용 프로그램의 Firebase 실시간 데이터베이스 설정

10438 단어 codenewbiewebdevdatabasejavascript
나는 this sweet tutorial by CodingTheSmartWay.com의 지도 아래 일반적인 자바스크립트 버그 추적 프로그램을 개발하기 시작했다.간단하고 이해하기 쉽다. 이것은 나에게 있어서 매우 좋은 출발점이다.
오류/문제 설명, 우선순위 (낮음, 중간, 높음) 를 입력하고 처리할 사람에게 분배하는 웹 응용 프로그램이 있습니다.양식을 제출하면 오류 통지서가 양식 아래의 DOM에 첨부됩니다(안내카드를 사용하여 문제를 쉽게 구분할 수 있습니다). 설명, ID 번호, 우선 순위, 양식에 할당된 사람의 이름과 문제 상태를 표시합니다(처음에는 항상 열기로 설정됨).또한 새 발행어음마다 두 개의 단추가 있습니다. 하나는 "닫기"를 위한 것이고, 다른 하나는 "닫기"를 위한 것이고, 다른 하나는 "삭제"를 위한 것입니다.
제가 배운 강좌는 순수한 JavaScript를 사용하고 localStorage 데이터를 저장합니다.이것은 매우 유용하지만, 나는 곧 "닫기"또는 "삭제"단추를 클릭할 때마다 어떤 것이 나를 괴롭히는 것을 알아차렸다.
매번 페이지를 다시 불러옵니다!
따라서 만약에 내가 긴 발행표 목록을 보고 있다면, 나는 단지 이 어음의 상태 부분이'열기'에서'닫기'로 업데이트되는 것을 간단하게 보지 않고'닫기'라고 표시하고 싶을 뿐이다. 그러면 페이지는 다시 불러오고 페이지 맨 위에서 발행표 목록 업데이트를 다시 시작하게 할 것이다. ('삭제'단추를 눌렀을 때 같은 문제가 발생한다.)
이 문제에 대해 연구를 한 후에 나는 모든 localStorage 호출이 동기화되었다는 것을 알게 되었다. 이것은 내가 페이지를 다시 불러올 때의 문제를 설명한다.
이 점에서 저는 다른 방식으로 데이터를 저장하기로 결정했습니다. 그러면 저는 DOM에 대한 즉각적인 변경에 독립하여 이 결과를 처리할 수 있습니다. 이것이 바로 제가 우연히 발견한 것입니다Firebase.

Firebase란 무엇입니까?


Firebase는 웹과 모바일 응용 프로그램을 만드는 데 사용되는 구글 플랫폼이다.클라우드에 데이터를 저장하는 Firebase 실시간 데이터베이스를 포함한 다양한 제품이 포함되어 있으며, 실시간으로 데이터를 저장하고 동기화할 수 있습니다.
나는 구름과 관련된 일을 해 본 적이 없다. 그래서 나는 여기서부터 배워야 한다고 생각한다.

Firebase 시작


documentation에 따라 설정하는 것은 매우 간단하다.구글 계정이 있어야 시작할 수 있습니다.
먼저 https://console.firebase.google.com 로 이동하여 [프로젝트 만들기] 를 클릭합니다.그리고 이 항목의 이름을 지정하고 Firebase 조항을 받아들이라는 메시지가 표시되면 계속합니다.
다음 섹션에서는 Google Analytics를 사용할지 여부를 묻습니다. (응용 프로그램이 사용되는 것을 보지 못했기 때문에 사용하지 않기로 선택했습니다.) 그리고 새 프로젝트를 만들 수 있습니다.이제 아래와 같은 항목 페이지로 방향을 바꿔야 합니다.

현재 우리는 각종 개발 도구를 사용할 수 있다.우리의 목적을 위해서, 우리는 웹 응용 프로그램의 데이터베이스 설정에 중점을 둘 것이다.iOs와 Android 버튼 왼쪽에 있는 원형''단추를 누르면 새 프로그램을 등록할 수 있습니다.우리는 지금 이런 상황을 보아야 한다.

저희 응용 프로그램에서 Firebase 개발 도구를 사용할 수 있도록 상기 스크립트를 복사하여 index.html 파일에 <body> 표시된 내부와 밑에 붙여넣어야 합니다.

실시간 데이터베이스 구현


메인 화면 왼쪽에는 각종 개발 도구의 목록이 있습니다.실시간 데이터베이스는'개발'에서 찾을 수 있다.
데이터베이스 만들기 단추를 누르면 데이터베이스를 만들 수 있습니다.계속하기 전에 우리는'잠금 모드'에서 작업할지 결정해야 한다. 이것은 데이터베이스를 사유로 유지할 것인지, 아니면'테스트 모드'에서 작업할 것인지, 이것은 데이터베이스를 공개할 것이다.이것은 작은 응용 프로그램이기 때문에 나는 테스트 모드에서 전진한다.사용 을 클릭하면 화면에 큰 빈 상자가 표시됩니다.이것이 바로 우리의 데이터가 최종적으로 저장된 곳이다.
HTML 페이지에 입력한 데이터가 실제로 데이터베이스를 업데이트하는지 테스트하기 위해서는 양식이 필요합니다.이것은 내가 사용하고 있는 것 중의 하나이다.
지수html
<h3>Report New Bug:</h3>
  <form id="issueInputForm">
    <div class="form-group">
      <label for="issueDescInput">Description</label>
      <input type="text" class="form-control" id="issueDescInput" placeholder="Describe the issue">
    </div>
    <div class="form-group">
      <label for="priorityLevelInput">Priority Level</label>
      <select id="priorityLevelInput" class="form-control">
        <option value="Low">Low</option>
        <option value="Medium">Medium</option>
        <option value="High">High</option>
      </select>
    </div>
    <div class="form-group">
      <label for="issueAssignedToInput">Assigned To</label>
      <input type="text" class="form-control" id="issueAssignedTo" placeholder="Person responsible">
    </div>

    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
이것은 내가 추적할 새로운 문제를 입력하는 함수입니다.
주요했어회사 명
document.getElementById("issueInputForm").addEventListener("submit", saveIssue);

function saveIssue(e) {
    e.preventDefault();

    const desc = document.getElementById("issueDescInput").value;
    const id = chance.guid();
    const status = "Open";
    const priority = document.getElementById("priorityLevelInput").value;
    const assignedTo = document.getElementById("issueAssignedTo").value;

    firebase.database().ref('issues/' + id).set({
        desc: desc,
        id: id,
        status: status,
        priority: priority,
        assignedTo: assignedTo
    });
}
여기서 관건은 밑에 있는 Firebase 데이터베이스 함수를 호출하는 것입니다. 여기에 입력 값을 설정하여 데이터를 저장합니다.이것은 이 위치와 모든 하위 위치의 모든 데이터를 덮어씁니다.
현재 HTML 페이지로 돌아가서 새 버전을 제출하려고 하면 데이터베이스가 업데이트되었기 때문에 Firebase에 빈 상자가 더 이상 없습니다.

지금 이대로!다음 단계는 데이터를 검색하여 DOM에 첨부하는 것입니다. 따라서 다음 단계에서 이에 대해 소개하겠습니다.
즐거운 코드!:)
POI 작업 Excel 문서(2)
남교배 역대 시험문제 Excel 주소

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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