SolidJS를 사용하여 가볍고 빠른 배터리 모니터 웹 앱 구축

배터리 API는 브라우저에서 배터리 상태를 쉽게 처리할 수 있는 방법을 제공합니다.

배터리 API는 다음 정보를 제공할 수 있습니다.

십진수로 0.00 to 1.00 사이의 배터리 충전 수준입니다. 100 를 곱하면 이 십진수를 백분율로 쉽게 변환할 수 있습니다.

충전 또는 방전 부울 상태

충전 시간(초)

방전 시간(초)

SolidJS

Solid is a declarative JavaScript library for creating user interfaces. It does not use a Virtual DOM. Instead it opts to compile its templates down to real DOM nodes and wrap updates in fine grained reactions. This way when your state updates only the code that depends on it runs.
SolidJS Documentation

Javascript 템플릿에서 새 Solidjs 프로젝트 초기화

 > npx degit solidjs/templates/js my-app
 > cd my-app
 > pnpm i
 > pnpm run dev

희망 UI 설치

pnpm add @hope-ui/solid @stitches/core solid-transition-group

vscode에서 프로젝트 열기

code .

useBattery 후크를 빌드하여 코드를 시작하겠습니다. 이 후크는 웹 배터리 API를 호출하고 배터리 이벤트를 수신하고 저장 상태를 업데이트합니다.

> mkdir hooks
> cd hooks
> touch useBattery.jsx

useBattery.jsx

import { onMount } from "solid-js";
import { createStore } from "solid-js/store";
export default function useBattery() {
  const [store, setStore] = createStore({
    isSupported: true,
    charging: false,
    chargingTime: 0,
    dischargingTime: 0,
    level: 0,
  });
  onMount(async () => {
    try {
      const battery = await navigator.getBattery();

      console.log(battery);
      updateAllBatteryInfo(battery);

      battery.addEventListener("chargingchange", () => {
        updateChargeInfo(battery);
      });
      battery.addEventListener("levelchange", () => {
        updateLevelInfo(battery);
      });
      battery.addEventListener("chargingtimechange", () => {
        updateChargingInfo(battery);
      });
      battery.addEventListener("dischargingtimechange", () => {
        updateDischargingInfo(battery);
      });
    } catch (error) {
      console.log(error);
      setStore("isSupported", false);
    }
  });

  function updateAllBatteryInfo(battery) {
    updateChargeInfo(battery);
    updateLevelInfo(battery);
    updateChargingInfo(battery);
    updateDischargingInfo(battery);
  }

  function updateChargeInfo(battery) {
    setStore("charging", battery.charging);
  }

  function updateLevelInfo(battery) {
    setStore("level", battery.level);
  }

  function updateChargingInfo(battery) {
    setStore("chargingTime", battery.chargingTime);
  }

  function updateDischargingInfo(battery) {
    setStore("dischargingTime", battery.dischargingTime);
  }

  return {
    store,
  };
}

onMount는 구성 요소가 마운트될 때 한 번만 실행되는 solidjs의 수명 주기 함수입니다. API 호출과 같이 이 함수 내에서 부작용을 실행할 수 있습니다. 이 함수를 사용하여 배터리 이벤트에 대한 이벤트 리스너를 추가하고 배터리 API에서 제공하는 초기 값으로 스토어를 초기화합니다.
createStore 호출은 초기 값(여기서는 배터리 관련 필드 제공)을 사용하고 읽기/쓰기 튜플을 반환합니다. 첫 번째 요소는 읽기 전용인 저장소 프록시이고 두 번째 요소는 setter 함수입니다.
navigator.getBattery() 웹 배터리 API를 호출하고 이것이 BatteryManager로 해결되는 약속을 반환합니다. 개체에는 충전 수준, 충전 시간 등에 대한 정보가 포함되어 있습니다...

브라우저가 배터리 웹 API를 지원하지 않는 경우 catch 블록이 실행되고 false로 업데이트되고isSupported UI 화면에 경고 상자를 표시할 수 있습니다.
BatteryManager 방전 중 객체

{
  charging: false
  chargingTime: Infinity
  dischargingTime: 13684
  level: 0.62
}

chargingchange 장치를 충전기에 연결하거나 분리할 때 이벤트가 발생합니다.
levelchange 장치 배터리 잔량이 변경되면 이벤트가 발생합니다. 장치가 충전 중이고 레벨이 0.79에서 0.80으로 변경되었다고 가정하면 이 이벤트가 실행됩니다.
chargingtimechange 배터리 충전 시간이 업데이트되면 이벤트가 발생합니다.
dischargingtimechange 배터리 방전 시간이 업데이트되면 시작됩니다.
App.js에서 배터리 관련 데이터를 표시하는 UI를 빌드해 보겠습니다.

import {
  Alert,
  AlertDescription,
  AlertIcon,
  AlertTitle,
  Box,
  CircularProgress,
  CircularProgressIndicator,
  CircularProgressLabel,
  Container,
  GridItem,
  Heading,
  HopeProvider,
  HStack,
  SimpleGrid,
  Tag,
  Text,
  VStack,
} from "@hope-ui/solid";
import { Show } from "solid-js";
import ThemeSwitcher from "./components/ThemeSwitcher";
import useBattery from "./hooks/useBattery";

export default function App() {
  const { store } = useBattery();
  return (
    <HopeProvider config={{ initialColorMode: "dark" }}>
      <Box minH={"100vh"} h="$full" w={"$full"} py="$10">
        <VStack spacing={"$3"}>
          <Heading textAlign={"center"} fontSize={"$6xl"}>
            Battery &nbsp;
            <Box as="span" color={"$primary10"}>
              Monitor
            </Box>
          </Heading>

          <HStack spacing={"$2"}>
            <Show when={store.isSupported}>
              <Tag
                colorScheme={store.charging ? "success" : "danger"}
                size={"lg"}
                variant="dot"
                dotPlacement="start"
              >
                <Show when={store.charging} fallback="Discharging">
                  Charging
                </Show>
              </Tag>
            </Show>
            <ThemeSwitcher />
          </HStack>
        </VStack>
        <Container mt={"$10"}>
          <Show
            when={store.isSupported}
            fallback={
              <Alert
                status="danger"
                variant="subtle"
                flexDirection="column"
                justifyContent="center"
                textAlign="center"
                height="200px"
              >
                <AlertIcon boxSize="40px" mr="0" />
                <AlertTitle mt="$4" mb="$1" fontSize="$lg">
                  Unsupported Browser
                </AlertTitle>
                <AlertDescription maxWidth="$sm">
                  Your browser does not support Web Battery API
                </AlertDescription>
              </Alert>
            }
          >
            <SimpleGrid
              w={"$full"}
              columns={{ "@initial": 1, "@sm": 2, "@md": 3 }}
              justifyContent="center"
            >
              <GridItem mx={"auto"}>
                <CircularProgress thickness={"$0_5"} size={"$xs"} value={100}>
                  <CircularProgressIndicator color={"$warning10"} />
                  <CircularProgressLabel>
                    <VStack spacing={"$6"}>
                      <Heading fontSize={"$xl"}> Charging Time</Heading>
                      <Text fontSize={"$xl"}>
                        {Math.round(store.chargingTime / 60)} Minutes
                      </Text>
                    </VStack>
                  </CircularProgressLabel>
                </CircularProgress>
              </GridItem>
              <GridItem mx={"auto"}>
                <CircularProgress size={"$xs"} value={store.level * 100}>
                  <CircularProgressIndicator color={"$success10"} />
                  <CircularProgressLabel>
                    <VStack spacing={"$6"}>
                      <Heading fontSize={"$xl"}> Battery Level</Heading>
                      <Text fontSize={"$xl"}>{store.level * 100} %</Text>
                    </VStack>
                  </CircularProgressLabel>
                </CircularProgress>
              </GridItem>

              <GridItem mx={"auto"}>
                <CircularProgress thickness={"$0_5"} size={"$xs"} value={100}>
                  <CircularProgressIndicator color={"$primary10"} />
                  <CircularProgressLabel>
                    <VStack spacing={"$6"}>
                      <Heading fontSize={"$xl"}> Discharging Time</Heading>
                      <Text fontSize={"$xl"}>
                        {Math.round(store.dischargingTime / 60)} Minutes
                      </Text>
                    </VStack>
                  </CircularProgressLabel>
                </CircularProgress>
              </GridItem>
            </SimpleGrid>
          </Show>
        </Container>
      </Box>
    </HopeProvider>
  );
}

ThemeSwitcher.jsx 어두운 모드와 밝은 모드 사이를 전환하는 구성 요소 핸들.

import { Button, useColorMode } from "@hope-ui/solid";

export default function ThemeSwitcher() {
  const { colorMode, toggleColorMode } = useColorMode();

  return (
    <Button
      rounded={"$full"}
      size="sm"
      colorScheme={"warning"}
      onClick={toggleColorMode}
    >
      {colorMode() === "light" ? "Light" : "Dark"} mode
    </Button>
  );
}

거친 망 갈람 / solidjs-웹-배터리-모니터

Solidjs를 사용한 웹 배터리 모니터

용법

이러한 템플릿 종속성은 pnpm을 통해 pnpm up -Lri를 통해 유지됩니다.
이것이 pnpm-lock.yaml 가 표시되는 이유입니다. 즉, 모든 패키지 관리자가 작동합니다. 템플릿을 복제하면 이 파일을 안전하게 제거할 수 있습니다.

$ npm install # or pnpm install or yarn install

Solid 웹사이트에서 자세히 알아보고 Discord에서 대화를 나누세요.

사용 가능한 스크립트

프로젝트 디렉토리에서 다음을 실행할 수 있습니다.

npm dev 또는 npm 시작

개발 모드에서 앱을 실행합니다.
브라우저에서 보려면 http://localhost:3000을 여십시오.
수정하면 페이지가 다시 로드됩니다.

npm 실행 빌드

프로덕션용 앱을 dist 폴더에 빌드합니다.
프로덕션 모드에서 Solid를 올바르게 번들하고 최상의 성능을 위해 빌드를 최적화합니다.
빌드가 축소되고 파일 이름에 해시가 포함됩니다.
앱을 배포할 준비가 되었습니다!

전개

당신은 할 수 있습니다…

View on GitHub