[Steemtech] 보팅 건강검진(?)의 @lazyrodi 버전 release...
서문
오늘 @asbear님께서 보팅 건강검진에 대한 툴을 공개하셨습니다.
사실 저도 @clayop님께서 보상 어뷰징 관련 글을 작성하신 것을 보고 공부할 겸 도전해 보고 있었습니다.
웹 개발자는 아니지만 웹쪽은 눈에 보이는 결과도 있고 재미가 있거든요. 그리고 잘 모르니 공부도 될 것 같아서 시작해 보았습니다.
이번 공부의 목표는 @clayop님의 python코드를 javascript로 포팅하는 것 그리고 billboard.js를 이용해서 차트를 그려보는 것이었습니다.
사이트
작성한 사이트는 아래와 같습니다. 공개할만한 수준은 아니지만 @asbear님께서 프로토 타입을 공개하셔서 저도 오픈해 보았습니다.
PC로 보시는 것을 추천드립니다.
[ 제가 셀봇이 1위일 줄은... ]
설명
Usecase
상단에 Steemit ID만 입력하시면 됩니다.
저를 포함하여 뉴비분들은 금방 로딩이 끝나지만 활동을 많이 하신 분들의 경우 30초 이상 로딩하기도 합니다.
Profile 구역
Steemd에서 확인할 수 있는 내용들을 넣는 중입니다.
지금 구현된 사항들은 아래와 같습니다.
- ID
- Name
- Profile image
- Reputation
- Posts count
- Voting power
- MVest
Voting power의 경우 @maanya님의 포스팅을 보고 참고하여 구현하였습니다.
하지만 보정용 VP를 구하는 공식이 잘 되지 않아 제 편의대로 수정하였습니다.
Selfvote & Vote per Day 구역
파란색 선이 셀프보팅 비율이며 좌측 y축을 참조해 주시기 바랍니다.
주황색 선이 일 별 보팅 수이며 우측 y축을 참조해 주시기 바랍니다.
모든 차트들은 최대값에 따라 y축이 가변적으로 변하게 하였습니다.
뉴비분들과 고래분들의 수치 차이가 심하게 나는 항목도 있었기 때문입니다.
Vote Diversity 구역
Inverse Simpson index값으로 얼마나 다양한 사람에게 보팅을 하였는지 알려주는 지표입니다.
자세히는 뭔지 잘 모릅니다. @clayop님의 코드를 보고 공식을 베껴왔습니다.
Author that User votes... 구역
자신이 보팅한 상위 9명과 others의 비율을 나타냅니다.
10명이 아닌 이유는 기본 색상이 10가지라 겹쳐서입니다. filter를 이용하여 추가하면 될 것 같은데 일단은 9명으로도 데이터가 충분할 것 같아서 남겨두었습니다.
우측의 RShares에 대한 차트는 좌측의 보팅 비율을 실제 RShares 값으로 나타낸 것입니다.
이 값은 특정 공식을 통해 실제 보팅 액수를 구할 때 사용됩니다.
사용한 라이브러리
- Semantic-ui
- Frontend framework으로 레이아웃을 효율적으로 배치할 수 있게 도와줍니다.
- jQuery
- Javascript를 편하게 사용할 수 있게 도와줍니다. (코드를 보신다면 아시겠지만 저는 잘 사용을 못해서 개판입니다.)
- D3.js
- Billboard.js를 사용하기 위해 필요합니다.
- Billboard.js
- naver에서 만든 차트 그리기 Javascript 라이브러리 입니다.
Github
코드를 확인하실 수 있습니다.
후기
신기해서 이것저것 copy & paste하며 진행을 해보았습니다. ajax를 통해 데이터를 받아서 가공하는 것은 처음 해 본 작업이라 고생을 많이 했습니다.
당장 눈에 보이는 큰 문제는 아래와 같습니다.
- 코드가 엄청 지저분합니다. 하드코딩을 위한 전역변수가 엄청납니다.
- 폰에서 보았을 때 viewport가 맞지 않아 보기가 어렵습니다. 그런데 이 부분을 잘 몰라서 시간이 좀 걸릴듯 합니다.
- 검증이 충분히 이루어지지 않았습니다. (이에 대한 핑계로 버전을
beta v0.1이라고 달아두었습니다. - 익스플로러에서 차트가 마우스를 올려야 보이고, footer가 고정되어 있습니다. 크롬이나 파이어폭스를 이용해 주시기 바랍니다. 익스플로러는 그냥 버리렵니다. (...)
언제 완벽하게 고칠 수 있을지는 잘 모르겠습니다만 하다보면 되지 않을까요...?
이것저것 라이브러리를 사용하고 구글에서 소스를 가져다가 사용해도 웹 작업은 역시 어렵다는 것을 느꼈습니다.
며칠 밤을 새다시피 했는데 잠시 좀 쉬다가 천천히 달려봐야 할 것 같습니다. :)
PS. 포스팅 직전에 steem.js(https://github.com/steemit/steem-js)라는 것이 있다는 사실을 알게 되었습니다. 공부할 것이 자꾸 늘어나네요...
출근전에 피씨로 해봤어요 ㅋㅋㅋ 굉장히 흥미로운 통계네요 ㅋㅋ 너무 잘 만드셨어요 힛
감사합니다. :)
clayop님이 해두신거에 껍데기만 씌워봤어요!
멋지네요.
깔끔하니 보기 좋습니다.
감사합니당 ㅎ
짱짱맨 부활!
호출감사합니다
저야말로 감사합니다~!!
이 버전은 스파 제한이 없는건가요?
스파 제한이란 것이 어떤 것을 말씀하시는지 모르겠습니다.
개인 별 정보를 steem 서버로부터 받아와서 그래프로 보여주는 것이 다입니다. :)
[추가코멘트]
방금 asbear님의 작품을 보았습니다. 제가 구현한 것은 별도의 캐싱정보 없이 브라우저에서 모두 처리하기 때문에 아무나 검색이 가능합니다.
대단하시네요. 실력이 부럽습니다. 감사히 쓰겠습니다.
모바일에서도 잘 보이게 수정좀...ㅎ
@홍보해
감사합니다. :)
모바일 건 외에도 아마 버그들이 있을텐데요 꾸준히 업데이트 하겠습니다.
대량 통계는 아니지만 소소한 것에 유용할 것 같네요. 잘 써먹게(?) 습니다.
사용해 주셔서 감사합니다. :)
공부하면 할 수록 많은게 나와서 이것저것 추가해보고 싶은 욕심이 더 있습니다.
짱짱맨 호출로 왔어요..
즐거운 하루 되세요..
짱짱맨 서포터 분들께 항상 감사합니다. :)
Good~!입니다ㅋ
감사합니다. :D
UI가 진짜 이쁩니다. 게르른 저는 엄두도 못낼.. ㅠㅜ.. 화이팅입니다!! ^^
응원해주셔서 감사합니다!
semantic ui가 다 해준겁니다. :)
전문가시니 금방 적용하실 수 있으실거예요!
저는 스파 구하는데서 막혀서 지지부진하네요... steemjs를 공부해야겠습니다. :)
steemjs 쓰시면 편리하고 아니면 rest API에서 operation 만 바꾸셔도 됩니다.^^ 그리고 gatAccounts는 파라미터가 리스트여야하기떄문에 그것도 바꿔주시구요.
조언 캄사합니다~!!
파이썬 코드는 이렇습니다. acc_name 이 리스트에 들어가야해서 브라켓 하나 더들어간걸 보실수 있습니다.
아 account 는 가져왔는데 steemd메인에 있는 steem_per_mvests같은 정보가 어디에 있는지를 모르겠더라구요.
보팅 계산기 보니까 steemjs를 사용하고 있어서 공부하려고 했는데 요새 여유가 잘 안나서요. :(
해보고 싶은건 잔뜩인데 시간이 아쉽네요 정말. ㅎㅎ
그나저나 아직 안 주무시나 했는데 검색해보니 제가 엉뚱한 시차를 생각했네요. ㅋㅋ
아하 그부분은 그냥 vesting_shares 를 2054.45 로 나누시면 정확한 스팀파워를 계산하실 수 있습니다. steem_per_mvests 로 계산하고 싶으신 마음은 알겠으나.. 제가 알기로 하드포크 하지 않는 한 안바뀌는 값이니 그냥 단순히 가시는것도 좋죠 ㅎㅎ
오 좋은 정보 감사합니다! 하드포크때만 업데이트 하면 되는거군요. 하트 드립니다. ♥ (?)