프론트 엔드 개발자, 몇 달 동안 먼지를 모으는 라즈베리 파이 및 격리를 혼합하면 무엇을 얻습니까?

나는 하루에 4계절을 모두 가질 수 있는 날이 있는 도시에 살고 있습니다. 그래서 오래된 라즈베리 파이를 사용하여 일일 날씨 보고 앱을 만들기로 했습니다🔥

✨ 결과

제가 웹 기술에 대해 정말 좋아하는 점은 웹사이트에서 모바일 앱에 이르기까지 무엇이든 만들 수 있다는 것입니다. 이 작은 프로젝트를 통해 약간의 수정과 최적화를 통해 사물 인터넷에 전원을 공급하고 멋진 결과를 얻을 수 있음을 보여주고 싶습니다.

📸 스웨그

라이트 모드 🌝

다크 모드 🌚

일몰 시간 🌘

🐙 소스 코드

모곤잘레즈 / 날씨 예보

일일 일기 예보를 위한 작은 UI ⛈

🚀 Netlify 기능

이것은 프로젝트에서 가장 흥미로운 부분이었습니다.Netlify 기능을 사용하는 방법을 처음 접했지만 이미 마음에 듭니다 😍. IP를 기반으로 사용자 위치를 가져온 다음 이 위치의 날씨를 가져오는 람다 함수를 만들 수 있습니다. 다음과 같습니다.

get-weather.js

const fetch = require('node-fetch');
const IPinfo = require("node-ipinfo");
const ipinfo = new IPinfo(process.env.IP_INFO_TOKEN);

exports.handler = async function(event) {
  // The IP comes for free
  const ip = event.headers['client-ip'];

  // IPinfo gives us the location data
  const { _city, _countryCode } = await ipinfo.lookupIp(ip);

  // And finally the weather ⛈
  const weather = await 
  fetch(`http://api.openweathermap.org/data/2.5/forecast/? q=${_city},${_countryCode}&APPID=${process.env.OPEN_WEATHER_TOKEN}&units=metric`);

  return {
    statusCode: 200,
    body: JSON.stringify(weather)
  }
}

그런 다음 클라이언트에서 최종 날씨 응답을 얻기 위해 한 번의 http 호출을 할 수 있습니다.

App.js

const getWeather = () => {
  fetch('/.netlify/functions/get-weather')
    .then(x => x.json())
    .then(res => setWeather(res));
}

가장 좋은 점은 엔드포인트 호출이 개발 환경, 스테이징 및 프로덕션에서 동일하다는 것입니다. 🎊

⚙️ 웹 워커로 타이머 설정하기

Open Weather Map API는 3시간 동안의 날씨를 제공하므로 새 데이터를 사용할 수 있을 때마다 UI가 업데이트되기를 원했습니다. 이 3시간 범위를 사용하여 이러한 업데이트를 처리하기 위해 JavaScript 시간 제한을 설정할 수 있습니다.

그리고 해가 질 때마다 나타나는 다크모드를 추가했습니다. 이 두 타이머는 클라이언트에서 실행되는 두 개의 병렬 타임아웃을 만들기 때문에 각 타이머가 별도의 웹 작업자에서 실행되도록 하여 브라우저 스레드의 부하를 완화하고 싶었습니다.

이를 위해 다음 일기예보까지 남은 밀리초를 계산하고 앱에 메시지를 보내 UI를 업데이트하는 작업자를 설정했습니다. 두 번째는 일출 및 일몰과 관련된 시간을 처리합니다.

App.js

  useEffect(() => {
    if (weather.cod === '200') {
      const timeWorker = new Worker('../../static/update-time-worker.js');
      timeWorker.postMessage(`${weather.list[0].dt}`);

      timeWorker.onmessage = ({ data }) => {
        getWeather();
      }
    }
  }, [weather]);

update-time-worker.js

onmessage = ({ data }) => {
  const end = new Date(data * 1000);
  const start = new Date();

  const timeDiff = Math.floor((end.getTime() - start.getTime()));

  setTimeout(() => {
    postMessage('Update weather');
  }, timeDiff);
};

🎨 CSS

내 노트북 ​​화면의 크기와 해상도, 그리고 (작은) 라즈베리 터치스크린의 크기에 따라 글꼴이 확장되도록 하기 위해 화면 높이에 따라 달라지는 글꼴 크기를 사용했습니다.

styles.css

:root {
  --font-size-l: 6vh;
  --font-size-m: 5vh;
  --font-size-sm: 3vh;
}

브라우저에서 화면 크기를 변경하면 다음과 같은 결과가 나타납니다.

🍒 라즈베리 부분

무엇보다 사전 설치된 Chromium 버전이 포함되어 있기 때문에 Raspbian을 설치했습니다. 이 브라우저를 주소 표시줄 없이 전체 화면으로 부팅하여 기본 앱처럼 보이게 할 수 있습니다. 3월에 Raspberry Pi Imager가 출시되었으며 설치가 매우 쉬워졌습니다: https://www.raspberrypi.org/downloads/



이제 작은 터치스크린을 사용하고 싶고 이를 위해 부팅 화면을 변경하기 위한 특수 스크립트가 필요합니다.

git clone https://github.com/goodtft/LCD-show
cd LCD-show
sudo ./LCD35-show

마지막 단계를 위한 모든 설정! 탐색 표시줄 없이 전체 화면에 Chromium만 표시합니다.

/usr/bin/chromium-browser --incognito --start-maximized --kiosk https://weather-preactpi.netlify.com/

🔥💥 붐 💥🔥

📚 리소스

https://ipinfo.io/
https://openweathermap.org/
https://docs.netlify.com/functions/build-with-javascript/#format
http://frenetic.be/tricks/simple-timer.php

https://blog.gordonturner.com/2017/07/22/raspberry-pi-full-screen-browser-raspbian-july-2017/