node.js : client를 사용하여 배터리 viz 생성

키 테이크 아웃

이 기사에서는 Node.js를 사용하여 배터리 시각화 서비스를 위해 클라이언트 부품을 구축하는 방법에 대해 설명합니다. 클라이언트는 정보가 필요하지 않은 경우 시스템에 과부하를 피하기 위해 업데이트를 일시 중지하거나 재개 할 수 있습니다. 반응성 설계 및 선언 프레임 워크는 데이터 변경에 대한 응답으로 문서 객체 모델 (DOM)을 자동으로 효율적으로 업데이트하는 데 사용됩니다. 이것은 데이터가 변경 될 때마다 데이터를 바인딩하고 DOM을 업데이트하는 라이브러리 인 ractive.js를 사용하여 달성됩니다. 저자는 ractive.js를 사용하여 배터리 시각화를 만드는 방법을 보여줍니다. 배터리 시각화를 일시 중지/재개하는 메커니즘 설정, REST 서비스에서 데이터를 비동기로 검색하는 방법. 이 기사는 Node.js를 사용하여 HTTP 서버 설정, RESTFUL APIS, Node.js 서버에서 OS 터미널 명령 실행 및 선언 프레임 워크의 기본 사항과 같이 논의 된 도구 및 개념을 추가로 탐색하기위한 호출로 마무리됩니다. 및 ractive.js.

이 미니 시리즈의 첫 번째 부분에서, 우리는 우리가 구축하는 서비스의 세부 사항과 배울 내용에 대해 논의했습니다. 그런 다음 서버가 필요한 이유와 편안한 서비스를 만들기로 선택한 이유를 다루었습니다. 서버를 개발하는 방법에 대해 논의하면서 현재 운영 체제를 식별하는 방법과 Node.js를 사용하여 명령을 실행하는 방법에 대해 논의 할 기회를 얻었습니다. 이 시리즈의 두 번째이자 마지막 부분에서는 클라이언트 부품을 구축하여 사용자에게 좋은 방법으로 정보를 제시하는 방법을 알게됩니다. 이 목표를 달성하려면 페이지를 다시로드하지 않고 X 분 (또는 초)마다 배터리의 상태를 업데이트해야합니다. 또한 정보가 필요하지 않을 때 또는 페이지를 보지 않을 때도 시스템을 침수하지 않도록 업데이트를 일시 중지/재개 할 수 있어야합니다. 그렇게하려면 우리는 다음과 같습니다.

정기 시간 간격으로 백엔드 서비스로 호출을 예약하십시오. 데이터 변경에 대한 응답으로 DOM을 자동으로 효율적으로 업데이트하는 선언 프레임 워크를 사용하십시오. jQuery 유틸리티 기능을 사용하여 삶을 더 편하게 만들 수 있습니다. 멋진 이미지와 CSS를 사용하여 대시 보드를 시각적으로 매력적으로 만듭니다 (보너스로!).

반응성 디자인

Ajax 및 비동기 통화에 대해 논의하는 것은 확실히이 기사의 범위를 벗어났습니다 (게시물 끝에 몇 가지 유용한 링크를 제공 할 것입니다). 우리의 목적을 위해 우리는 그것들을 서버에게 일부 데이터를 요청하고 데이터를 다시 전송되면 일부 조치를 실행할 수있는 블랙 박스로 취급 할 수도 있습니다. 대신 1 분 동안 반응성 디자인과 선언 프레임 워크에 대해 논의하겠습니다. HTML 페이지는 기본적으로 정적 엔티티입니다. 즉, 순수한 HTML 페이지의 경우 페이지에 표시된 내용이 브라우저에서 렌더링 될 때마다 동일하게 유지됩니다. 그러나 우리는 JavaScript와 콧수염과 같은 일부 템플릿 라이브러리를 사용하면 동적으로 업데이트 할 수 있음을 알고 있습니다. 개발자가 DOM 노드에 데이터를 바인딩하는 데 도움이되는 많은 라이브러리가 있습니다. 대부분의 사람들은 JavaScript를 사용하여 데이터를 변환 해야하는 DOM 요소를 설명하고 페이지에 대한 업데이트를 수동으로 (JavaScript를 통해) 트리거해야합니다. 따라서 시각화를 업데이트 해야하는시기와 데이터 변경에 대한 응답으로 변경해야 할 사항을 결정하기위한 응용 프로그램의 논리에 의존하게됩니다. 선언 프레임 워크는 데이터를 DOM 요소에 바인딩하고 데이터가 변경 될 때마다 DOM을 자동으로 업데이트합니다. 이 바인딩은 JavaScript가 아닌 프레젠테이션 (HTML 마크 업)에서 템플릿을 사용하여 제공됩니다. 이러한 프레임 워크의 부가 가치는 몇 가지 핵심 사항으로 식별 할 수 있습니다.

그들은 내용과 프리젠 테이션 사이의 더 큰 분리를 시행합니다. 이것은 데이터, 이벤트 처리기 및보기 구조에 대한 프리젠 테이션 레이어 바인딩에서 정의 할 수있게하여 달성됩니다 (예 : 테이블과 같은 반복 및 복합 객체와 같은);

. 그들은 데이터 모델과 프레젠테이션을 동기화하는 쉬운 방법을 제공합니다. 그들은 일반적으로 매우 효율적인 방식으로 수행하여 DOM 트리의 최소 하위 집합 만 반영해야합니다. 이와 관련하여, 반사 및 리 페인팅은 일반적으로 클라이언트 측 브라우저 애플리케이션의 병목 현상이라는 것을 명심하십시오.

<..> ractive.js RACTIVE.JS의 경우 우리가 사용할 라이브러리 인 데이터와 DOM 간의 동기화는

컨테이너 객체

를 통해 얻습니다. 라이브러리는 데이터를 감싸는 객체를 만듭니다. 이 객체는 데이터에 액세스 할 수 있으므로 속성을 설정하거나 얻을 때마다 라이브러리는 작업을 캡처하여 모든 가입자에게 내부적으로 방송 할 수 있습니다. 실습 이제 Ractive.js가 유용한 것을 보았으므로 이제 첫 번째 Ractive 템플릿을 페이지에 추가해야합니다. 이를 위해 내부의 어느 곳에서나 선택한 ID가있는 스크립트 태그를 추가 할 수 있습니다. 나중에 필요할 때 현명하게 ID를 선택하는 것이 좋습니다. 또한 type = 'text/ractive'속성을 추가해야합니다. type = 'text/ractive' Ractive의 스크립트를 페이지에 추가하지 않으면 스크립트를 무시하기 때문에 실제로 브라우저에는 이해가되지 않습니다.

이제 Ractive 스크립트 내부에서 HTML 태그 및 템플릿 변수 및 조건부/루프를 추가 할 수 있습니다. Ractive.js는 {{}} 그룹 내부의 모든 것을 평가할 것입니다.

위의 예에서는 다음을 볼 수 있습니다.

<span><span><span><script> id<span >='meterVizTemplate'</script></span> type<span>='text/ractive'</span>></span><span><span></span>></span></span>

변수 : {{배터리 스테이트}} 조건부 : {{#BatteryState}} 함수 호출 : {{배터리 스테이 클라스 (배터리 상태)}} 이러한 일이 작동하기 위해서는 JavaScript에 바인딩을 추가해야합니다. 그렇게하려면 새로운 ractive.js 객체를 만들어야합니다.

<span><span><span><script> id<span >='meterVizTemplate'</script></span> type<span>='text/ractive'</span>></span><span><span></span>></span></span>

우리가 생성자에게 전달하는 옵션은 매우 중요합니다. 첫째, EL은 Ractive.js가 템플릿을 렌더링하는 DOM 요소의 ID와 일치해야합니다. 이 경우 html 페이지에 div를 추가해야합니다.

<span><span><span><script> src<span >='http://cdn.ractivejs.org/latest/ractive.js'</script></span>></span><span><span></span>></span></span>

이 태그를 삽입하는 지점이 중요합니다. ractive.js 템플릿 시스템으로 렌더링 된 모든 요소에 대한 부모 요소가됩니다. 조심 해야하는 두 번째 중요한 매개 변수는 템플릿입니다. 그 값은 페이지의 텍스트/ractive 스크립트의 ID와 일치해야합니다. 마지막으로, 우리는 키가 템플릿에서 참조하는 변수 이름 또는 호출 된 기능인 객체를 데이터에 할당합니다. ractive.js를 사용하면 라이브러리가 응답 할 맞춤형 이벤트도 정의 할 수도 있습니다. 몇 줄로, 우리는 업데이트를 일시 중지/재개하는 메커니즘을 설정했습니다. 그러나 여전히 updatebatterystatus ()를 정의해야합니다. 기능. 데이터를 비동기로 검색 <script> id<span >='meterVizTemplate'</script> type='text/ractive'> {{#batteryState}}

{{batteryPercent.toFixed(1) + '%'}}

{{#batteryCharging}}

{{/batteryCharging}} {{#batteryPercent

{{/batteryLife}}

Battery state: {{batteryState}}
{{#batteryLife}} Time to empty: {{batteryLife}} {{/batteryLife}} {{/batteryState}} {{^batteryState}}
LOADING... {{/batteryState}} > 약속 한 바와 같이, 여기서는 휴식 서비스에서 데이터를 검색하는 데 도움이되는 기능이 있습니다. jQuery Deferred 객체를 사용하여 서버에서 일부 데이터를 수신하자마자 콜백을 호출 할 콜백을 설정했습니다. 우리는이 콜백 내에서 ractive.js를 사용하고 있기 때문에 프레젠테이션 계층을 업데이트하는 방법에 대한 논리를 살 필요는 없습니다. 실제로 템플릿 스크립트에 사용되는 변수의 값 만 업데이트하면 Ractive.js는 모든 것을 처리합니다. 방금 설명한 것은 아래에보고 된 코드에서 구현됩니다.

모든 것을 합쳐

물론,이 모든 작업을 함께 만들기 위해 더 많은 배선을 마련 할 수 있습니다. 우리는 대시 보드 ux의 디자인을 모두 건너 뛰었습니다. 템플릿 시스템에서 작동하는 방법을 얻으면 궁극적으로 당신에게 달려 있습니다! 예를 들어, 이미지와 애니메이션을 사용하여 텍스트와 시각적으로 시각적으로 표시되는 충전 백분율을 가질 수 있다면 얼마나 멋진가요? ractive.js를 사용하면 그렇게 어렵지 않습니다! 최종 결과를 살펴보십시오.

ractive <span>= new Ractive({
</span>    <span>el: 'panels',
</span>    <span>template: '#meterVizTemplate',
</span>    <span>data: {
</span>        <span>// Percentage at which the battery goes to 'red' zone (export for Ractive templates)
</span>        <span>batteryRedThreshold: BATTERY_RED_THRESHOLD,
</span>        <span>// Percentage at which the battery enters 'yellow' zone (export for Ractive templates)
</span>        <span>batteryYellowThreshold: BATTERY_YELLOW_THRESHOLD,
</span>        <span>// The capacity of the battery, in percentage. Initially empty
</span>        <span>batteryPercent: NaN,
</span>        <span>// How much more time can the battery last?
</span>        <span>batteryLife: "",
</span>        <span>// True  the update daemon for the battery has been paused
</span>        <span>batteryPaused: false,
</span>        <span>// True  the update daemon for the battery has reported an error at its last try
</span>        <span>batteryUpdateError: false,
</span>        <span>// Is the battery connected to power?
</span>        <span>batteryCharging: false,
</span>        <span>batteryStateClass: function (state) {
</span>            <span>return state === 'discharging' ? BATTERY_RED_CLASS : BATTERY_GREEN_CLASS;
</span>        <span>},
</span>        <span>batteryLifeClass: function (percent) {
</span>            <span>return percent         <span>}
</span>    <span>}
</span><span>});</span></span>

코드를 검사하려면 다시 한 번 Github에서 찾을 수 있습니다. 결론 멀티 플랫폼 배터리 대시 보드가 이제 준비해야합니다. 그러나 이것은 최종 결과가 아닌 출발점이되어야하며, 내가 당신이 그 과정에서 배운 중요한 점은 다음과 같습니다.

node.js 를 사용하여 HTTP 서버를 설정하는 방법 RESTFUL APIS node.js 서버에서 OS 터미널 명령을 실행하는 방법 선언 프레임 워크 및 ractive.js의 기본 사항 다음 단계로 끌어 올리려면 내 조언은 이러한 도구를 실험하고 그물을 파서이 영역에 대한 지식을 심화시키는 것입니다. 이 기사에서 다루는 주제를 심화 시키려면이 좋은 자료를 살펴 보는 것이 좋습니다.

아키텍처 스타일과 네트워크 기반 소프트웨어 아키텍처 설계 편안한 API를 만들기위한 지침 기본 라이브러리를 통해 REST API를 사용하는 장점/단점은 무엇입니까? 템플릿 메소드 패턴
• javaScript 의 비동기 요청 Crockford on JavaScript - 에피소드 IV : Ajax의 변태 - 평소와 같이 훌륭한 통찰력과 Ajax라는 용어의 기원에 대한 매우 재미있는 이야기, 보너스! jQuery $ .getJson 메서드 ractivejs 튜토리얼
• node.js 클라이언트를 사용하여 배터리 시각화 생성에 대한 자주 묻는 질문 (FAQ) JavaScript를 사용하여 배터리 상태를 얻을 수있는 방법
JavaScript를 사용하여 배터리 상태를 얻으려면 배터리 상태 API를 사용할 수 있습니다. 이 API는 시스템의 배터리 충전 레벨에 대한 정보를 제공하며 배터리 레벨 또는 충전 상태 변경시 전송되는 이벤트로 통지 할 수 있습니다. 다음은 사용 방법에 대한 간단한 예입니다.
• navigator.getBattery (). 그런 다음 (function (배터리) { console.log ( "배터리 레벨 :"배터리. 줄*100 "%" ); });
이 코드는 현재 배터리 레벨을 콘솔에 로그인합니다.
• Navigator.getBattery 메소드는 무엇입니까? navigator.getBattery 메소드는 배터리 상태 API의 일부입니다. 시스템의 배터리 충전 레벨에 대한 정보를 제공하고 배터리 레벨 또는 충전 상태가 변경 될 때 전송되는 이벤트로 통지 할 수있는 BatteryManager 객체로 해결되는 약속을 반환합니다. 배터리 상태 데이터?
배터리 상태 데이터를 시각화하려면 Chart.js 또는 D3.js와 같은 JavaScript 차트 라이브러리를 사용할 수 있습니다. 이 라이브러리를 사용하면 데이터에서 다양한 유형의 차트와 그래프를 만들 수 있습니다. HTML 및 CSS를 사용하여 간단한 막대 또는 파이 차트를 만들 수도 있습니다.
• 모든 장치에서 배터리 상태를 얻을 수 있습니까?
배터리 상태 API는 대부분의 최신 브라우저에서 지원됩니다. 전부는 아닙니다. 또한 데스크탑 컴퓨터와 같은 일부 장치는 정확하거나 배터리 상태 정보를 제공하지 않을 수 있음을 주목할 가치가 있습니다. 배터리 상태 변경을 처리하려면 어떻게해야합니까?
배터리 관리자 개체에 이벤트 리스너를 추가하여 배터리 상태 변경을 처리 할 수 ​​있습니다. 배터리 상태 API는‘충전 체인지’,‘LevelChange’,‘ChargingTimeChange’및‘RESARGINGTIMECHANGE’와 같은 여러 이벤트를 제공합니다. 다음은 이러한 이벤트를 사용하는 방법의 예입니다.

navigator.getBattery (). log ( "배터리 레벨 :"배터리. 줄*100 "%");
}); }); 이 코드는 새 배터리 레벨을 로그인합니다. 배터리 레벨이 변경 될 때마다 콘솔.

Node.js를 사용하여 배터리 상태를 얻을 수있는 방법은 무엇입니까?
node.js는 배터리 상태를 얻을 수있는 내장 방법이 없습니다. 그러나 하위 프로세스를 사용하여 배터리 상태를 가져 오는 시스템 명령을 실행 한 다음 출력을 구문 분석 할 수 있습니다. 특정 명령은 운영 체제에 따라 다릅니다.
사용자 권한없이 배터리 상태를 얻을 수 있습니까?
예, 배터리 상태 API에는 사용자 권한을 사용하지 않아도됩니다. 그러나 시스템에 대한 데이터를 수집하는 경우 항상 사용자에게 알리는 것이 좋습니다.
배터리 상태 API에서 제공하는 배터리 레벨이 얼마나 정확한가? 배터리 상태 API는 0.0에서 1.0 사이의 숫자이며, 현재 배터리 레벨을 전체 충전의 일부로 나타냅니다. 이 값의 정확도는 장치와 배터리에 따라 다릅니다.

웹 작업자에서 배터리 상태를 얻을 수 있습니까?

예, 배터리 상태 API는 웹 작업자에서 사용할 수 있습니다. 그러나 모든 브라우저가 웹 작업자를 지원하는 것은 아니며 웹 작업자를 지원하는 모든 브라우저가 웹 워커의 배터리 상태 API를 지원하는 것은 아닙니다.

배터리 상태 API가 지원되지 않으면 어떻게해야합니까?

배터리 상태 API가 지원되지 않으면 배터리 상태를 얻기 위해 할 수있는 일이 많지 않습니다. 기능 감지를 사용하여 API가 지원되는지 확인하고 그렇지 않은 경우 사용자에게 대체 기능 또는 메시지를 제공 할 수 있습니다.

위 내용은 node.js : client를 사용하여 배터리 viz 생성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!