Elixir Phoenix LiveView를 사용한 지능형 대시보드 여행
팬데믹 기간에 나는 다른 사람들과 마찬가지로 집에도 책상을 설치했다. 싱가포르의 상황이 개선됨에 따라 우리는 직장으로 돌아가기 시작했고, 나의 설치는 주말에만 사용되며 대부분의 시간을 낭비했다.
이것은 나로 하여금 스마트 디스플레이를 구축하고 그 중의 한 화면을 사용하여 하루에 유용한 정보를 표시할 수 있다는 생각을 하게 했다.내가 필요로 하는 것은 코드를 실행하기 위해 작고 편리한 것들뿐이다. 나는 나무베리 껍질 제로가 Nerves Project의 불로장생약 지역사회에 널리 사용되기 때문에 작은 봉황 응용 프로그램을 실행하기에 충분한 것 같다. 내가 틀렸니?오해하지 마세요. Pi Zero를 설정하는 것은 쉬워요. 머리 없는 설정에 뒤떨어지지 않고 docker를 설정하기도 쉬워요. 하지만 이 플랫폼에 docker 이미지가 없다는 사실이 증명됐어요.이것은 도커가 좋지 않다는 것을 의미한다.asdf-vm을 설치할 수 있기 때문에 저는 각각 Erlang과 Elixir 23.1.3과 1.11.2를 설치했고 NVM을 사용하는 NodeJS(armv6에서 최신 지원하는 노드는 10.X)를 설치했습니다.현재 하드웨어가 준비되어 있습니다. (내가 일찍이 생각한 바와 같이)
LiveView를 탐색해 Pi Zero에 배치할 때가 됐다.많은 자원과 강좌가 있지만, LiveView는 0.15 버전이기 때문에, LiveView를 탐색하기 시작했다.x와 빠른 변화.인터넷을 섭렵한 끝에 LiveView 창시자 크리스 맥코드의 Github 예시 환매를 발견했다.이것은 LiveView 샘플 사용을 시작하는 데 도움이 되는 최신 소스일 수 있습니다.이 예들을 보기 전에 Phoenix LiveView 문서를 읽어 템플릿과 폴더 구조의 작동 방식을 이해하는 것이 좋습니다.
크리스마스 선물 / 랴오닝 성
데모
Phoenix 서버를 시작하려면:
mix deps.get
설치 종속성 사용mix ecto.setup
을 사용하여 데이터베이스 생성 및 마이그레이션npm install --prefix assets
mix phx.server
으로 Phoenix 끝점 시작localhost:4000
에 액세스할 수 있습니다.생산에 투입할 준비가 되었습니까?check our deployment guides으로 가세요.
자세히 보기
View on GitHub
환매 협의 중의 예는 매우 좋고 재미있다. 그 중 일부는 어느 정도 실용성을 가지지만 소프트웨어가 사용하는 실제 세계에서 응용하는 측면에 세워진 것은 아니다.내가 원하는 것은 GenServer를 사용하여 서로 다른 원본에서 데이터를 추출하는 것이다. 원본마다 자신의 시간표가 있고, 이를 구독 테마의 LiveView 위젯에 방송하는 것이다. 듣기에 매우 멋있다.그런데 어디서 구독과 라디오 부분을 찾을 수 있습니까?나는 이전에 GenServer를 사용해서 여러 소스에서 데이터를 추출하는 방법을 알고 LiveView 템플릿을 설정했지만 데이터를 보내고 결합을 해제하며 일을 신축성 있게 할 수 없었다.개원 지역사회의 장점을 영원히 과소평가하지 마라. 왜냐하면 나는 Real World Phoenix |> A LiveView Dashboard이라는 적절한 문장을 만났기 때문이다.이것은 PubSub에 구축된 Phoenix를 어떻게 사용하는지 보여 주었고, 나는 아직 그것을 탐색해 본 적이 없다.
드러머 / elixir conf live view 대시보드
ElixirConf 통계가 있는 LiveView 대시보드
ElixirConfLiveView
Phoenix 서버를 시작하려면:
mix deps.get
설치 종속성 사용cd assets && npm install
mix phx.server
으로 Phoenix 끝점 시작localhost:4000
에 액세스할 수 있습니다.생산에 투입할 준비가 되었습니까?check our deployment guides으로 가세요.
자세히 보기
View on GitHub
현재, 나는 나의 모든 작은 위젯을 구축할 수 있다. 모든 작은 위젯은 실시간 렌더링으로 작동한다. 이것은 모든 작은 위젯이 자신의 프로세스에서 실행된다는 것을 의미한다. 만약 그 중 하나가 붕괴되면, 그것은 고장 격리를 유지하고, 모든 작은 위젯에 GenServer가 데이터 지원을 제공한다. 이것은 데이터 획득에 실패하거나 오류가 발생하는 경우, 오류가 작은 위젯으로 전파되지 않고, 붕괴되지 않는다는 것을 의미한다.잘못된 값으로 덮어쓴 데이터를 잃어버리거나지금 계기판은 사람들에게 진실한 세계의 느낌을 주지 않습니까?;).
LiveView가 출시되는 순간 리콜 프로토콜을 Pi 0으로 복제하고
npm ci
으로 자산을 준비하기 시작했다. 당시 나는 리콜 프로토콜이 실제 실행될 수 없다는 것을 깨달았다. 한 시간 후에도 소프트웨어 패키지를 설치하고 응용 프로그램을 실행하기 전에 나는 아직도 많은 절차가 있기 때문이다.만약 내가 매번 몇 시간의 주기를 거쳐야만 변경 사항을 실행에 옮길 수 있다면, 계기판에 계기판을 설치할 가치가 없다. 왜냐하면 계기판은 지능적이라기보다는 어리석기 때문이다.또한, 이 프로그램을 Kiosk 모드에서 헤드 없는 Pi Zero 형식으로 실행하려고 했지만 Kiosk 모드가 잘 작동하지 않아서 지금 저는 기진맥진해서 아무런 노력도 할 수 없습니다. Kiosk 모드에서도 모든 버전을 준비하는 것이 너무 힘들다는 것을 알고 있기 때문에 Pi Zero의 컴파일링/구축 속도가 매우 느립니다.OpenFass 창립자 One last trip down memory lane with the Raspberry Pi Zero의 이 글을 보았으면 합니다. Pi Zero의 속도가 얼마나 느린지에 대해 Pi 3 모델 A를 주문할 수도 있습니다. 하지만 걱정하지 마세요. 저는 Pi Zero의 계획이 있습니다. 작은 것들을 실행할 수 있기 때문에 저는 유람기 실례를 하나 실행하고 다른 곳에 설치된 계기판을 방문하는 것이 어떻습니까? 어느 곳에서 제 VPN이 실행하는 것은 Raspberry Pi4입니다.그렇지 않으면, 만약 내가 다른 cpu 자원을 실행해서 계기판을 표시하거나 실행해야 한다면, 그것은 너무 심하다.P.나는 계속해서 이 항목을 용기에 넣었지만, 마지막 호에서 용기에speedtest cli를 설치하는 문제에 부딪혀 검색을 했다
브렌트 스미스 / 인터넷 속도 기록기
우아한 웹 인터페이스를 통해 인터넷 다운로드와 업로드 속도를 추적하는 프로그램을 시작합니다.
인터넷 속도 기록기
우아한 인터넷 인터페이스를 통해 인터넷 다운로드와 업로드 속도를 추적하는 응용 프로그램
이것은 인터넷 연결을 지속적으로 감시하고 응답하는 웹 보기에서 결과를 그리며 현재 보이는 시간대 (평균값) 의 기본 집합을 제공하는 시간 시퀀스 기반 프로그램입니다.이것은 Ookla가 제공하는 official Speedtest.net CLI binary을 충분히 활용하여 가능한 한 최상의 성능을 제공한다.
이 서비스의 초기 버전은 이미 여러 해 동안 운행되어 왔으며, 이는 인터넷 성능 문제를 추적하는 데 도움이 된다.
온라인 상태로 설정하려면 다음을 실행하십시오.git clone https://github.com/brennentsmith/internet-speed-logger.git
cd internet-speed-logger
docker-compose up
몇 분만 기다리면 MongoDB를 초기화하고 브라우저에서 http://localhost:3000
으로 이동해서 떠나세요!
구성 요소
인터넷 속도 레코더의 요구 사항은 다음과 같습니다.
git clone https://github.com/brennentsmith/internet-speed-logger.git
cd internet-speed-logger
docker-compose up
/index.js
) -...이것은 docker 설명이 있습니다. 용기 이미지에speedtest cli를 설치하고 구축할 준비를 해야 합니다.모든 부품이 완성된 후 Pi Zero에 Raspbian OS를 설치하여 크롬을 사용하고 Pi 4에서 Repo를 복제하였습니다. 보시오, Dashboard-0.0.1이 이미 출시되었습니다.
나의 아마추어 CSS 기교로Bootstrap을 사용하여 계기판에서 몇 차례 교체를 진행하였다.나는 많은 사람들이 백엔드 개발자가 CSS:P를 하는 고통을 알고 있다고 믿는다.
모든 물건이 준비되었으니 마지막으로 계기판 -0.2로 운행을 시작합니다.)
코드는Github에서 얻을 수 있습니다. 저는 코드를 원본으로 만들었습니다. 사람들은 HotWire, React Server Components, Laravel Livewire, 그리고 LiveView의 모든 다른 옵션을 통해 새로운 HTML 온라인 모델을 탐색하여 비슷한 응용 프로그램을 구축할 수 있기를 바랍니다.우리는 인터넷에서 더 많은 HTML을 볼 것이다.
아산달 / 메리오다스
phoenix liveview 기반의 스마트 디지털 디스플레이 계기판
메리오다스
Meliodas를 시작하는 가장 어려운 방법:
mix deps.get
설치 종속성 사용npm install
디렉터리 assets
의 js 의존항 포함mix phx.server
으로 Phoenix 끝점 시작
MIX_ENV=<prod/dev> SPEEDTESTARCH=<x86_64/armhf> docker-compose build
MIX_ENV=<prod/dev> SPEEDTESTARCH=<x86_64/armhf> docker-compose up
이제 브라우저를 통해
localhost:4000
에 액세스할 수 있습니다.이 자원들에 대한 특별한 찬양
API 포인트
http://data.fixer.io/api/latest -
https://www.dawn.com/feeds/home-rss원
Sentry
, 필요한 경우 구성에 dsn
추가If you get to use it please don't forget to add it to your credits. Thanks
View on GitHub
Reference
이 문제에 관하여(Elixir Phoenix LiveView를 사용한 지능형 대시보드 여행), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/darnahsan/smart-dashboard-with-phoenix-liveview-4e3d텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)