SMALL

안녕하세요. salzzak 입니다~

 

저번엔 이미지로 캡쳐를 했는데, 이번에는 pdf로 캡쳐를 해보겠습니다.

사실 https://github.com/GoogleChrome/puppeteer 에 다 있는 내용인데... 공부도 할겸.. 이렇게 포스팅을 해봅니다!

 

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('http://www.salzzakart.com/portfolio', {waitUntil: 'networkidle2'});
  await page.pdf({path: 'salzzak.pdf', format: 'A4'});

  await browser.close();
})();

 

저는 제 개인 홈페이지 ~ 를 pdf 로 만들어보는 소스코드 입니다.

 

hn.js 로 파일 저장 후... 실행을 시켜보면

 

살짝 시간이 걸리지만, 소스코드 파일 경로에 salzzak.pdf 가 생긴걸 확인하실 수 있습니다.

 

 

홈페이지 생긴대로 나오지는 않았는데, 어쨋든 추출은 되고 있네요!

 

 

 

인스타그램 : https://www.instagram.com/salzzak_art/ 
스팀잇 : https://steemit.com/@salzzakart

LIST
SMALL

안녕하세요 salzzak 입니다.

저는 파이썬으로 자동화하는 것이 목적이어서... 이번에는 selenium을 설치해보겠습니다.

 

pip install selenium

cmd에 위 코드로~ selenium을 설치해봅니다.

Successfully 떴으니 설치 되었겠지만 아래 코드로 재확인 해봅니다.

 

pip freeze

 

설치 되어있네요~~

 

simpleAuto 라는 폴더 생성 후, 그 안에 simpleAuto.py 폴더를 만들어줍니다.

 

그 다음에... 필요한 것이 http://chromedriver.chromium.org/downloads 크롬 드라이버를 받아줍니다.!

 

크롬드라이버 Win 최신버전을 받아서~! 취향에 맞는곳에 압축을 풀어둡시다.

저같은 경우는 소스코드와 동일한 곳에 위치시켜두겠습니다.

 

 

네이버 창이 열리는 간단한 자동화 소스 코드 작성을 해봤습니다.

 

from selenium import webdriver
import time

driver = webdriver.Chrome("chromedriver.exe")
driver.get("http://www.naver.com")

time.sleep(5)

driver.close()

 

이렇게 소스코드를 작성 후... cmd 에서 해당 소스파일 경로로 이동 후 아래 커맨드 라인을 입력해줍니다.

python simpleAuto.py

 

소스코드에 작성한 대로 네이버 창이 열렸다가 5초 뒤에 닫힙니다.

성공!

 

저번 블로그 https://keefojifo.tistory.com/32?category=798164

에서 작성한 것 같이 exe 파일까지 만들어보겠습니당

 

pyinstaller -F simpleAuto.py

cmd에 입력 시 마찬가지로 여차저차해서 dist 폴더 안에 simpleAuto.exe 파일이 생깁니다.

 

저번처럼 바로 exe 파일을 여니, chromedriver 경로가 달라서 실행이 안되더라구요.

그래서 chromedriver를 dist 폴더 내에 이동 후 실행하니, 아까와 같이 정상 구동 되었습니다.

 

 

어쨋든 성공!

 

 

인스타그램 : https://www.instagram.com/salzzak_art/
스팀잇 : https://steemit.com/@salzzakart

LIST
SMALL

안녕하세요 저번에는 지금까지 등록한 글 정보들을 쭉 뽑아봤는데요

이번에는 그 정보들을 보기 좋게 정리해보겠습니다!

 

curator_payout_value / pending_payout_value / total_payout_value

 

"숫자 SBD" 의 형태

 

위 3가지 payout_value 들은 "숫자 SBD" 형태로 추출이 되는데요.

이는 String 값이므로 뒤 "SBD" 를 떼어내고 "숫자" 부분을 숫자형 데이터로 바꿔주겠습니다.

 

function steemSplit(string) {
    splitString = string.split(" ");
    // split 함수는 함수 내 인자값를 기준으로 String 값을 나눠줍니다.
    // ex) 2.1234 SBD -> splitString[0] = 2.1234 / splitString[1] = SBD

    tt = splitString[0];
    tt = parseFloat(tt);
    // tt 를 Float 형식 데이터로 바꿔줍니다.

	return tt;
}

 

이제 steemSplit 함수안에 payout_value 값들을 넣어주면 순수한 float 값을 돌려받을수 있습니다!

 

지난 글에서 설명 드렸다시피,

 

1) pending_payout_value : 저자와 큐레이터가 보상 "받을" 금액 

"받을" 금액이기 때문이기 때문에 일주일 지난 글에는 모두 0.000 SBD 값을 띈다.

 

제 모든 글에 있는 pending_payout_value 값을 더하면

일주일이 지나지 않은 글에 대해서 보상 받을 금액 

 beforeWeek 이라고 변수를 설정해봤습니다.

 

2) total_payout_value : 저자가 보상 "받은" 금액 

"받은" 금액이기 때문이기 때문에 일주일 지나지 않은 글에는 모두 0.000 SBD로 노출됩니다.

 

제 모든 글에 있는 total_payout_value 값을 더하면

저자가 일주일이 지난 글에 대해서 보상 받은 금액 

 afterWeek 이라고 변수를 설정해봤습니다.

 

3) curator_payout_value : 해당 글에 보팅을 해준 사람이 "받은" 금액입니다. 

"받은" 금액이기 때문이기 때문에 일주일 지나지 않은 글에는 모두 0.000 SBD로 노출됩니다.

 

제 모든 글에 있는 curator_payout_value 값을 더하면

보팅해주신 분들이 일주일이 지난 글에 대해서 보상 받은 금액의 총합 

 curator 라고 변수를 설정해봤습니다.

 

for (var i = 0; i < result.length - 1; i++) {

                    if(result[i].author == query.tag){
                    document.write("<b>Title : " + result[i].title + "<br> </b>");

                    beforeWeek = beforeWeek + steemSplit(result[i].pending_payout_value);
                    afterWeek = afterWeek + steemSplit(result[i].total_payout_value);
                    curator = curator + steemSplit(result[i].curator_payout_value);

                    }

                }

 

각 변수를 0으로 설정 후, 전체를 돌면서 글 제목 출력함과 동시에 각 변수값을 점차 더해가도록 했습니다.

 

 

var account = prompt("확인하고 싶으신 계정을 입력해주세요!");
        query.tag = account;

        allBlog();

        document.write("<b>beforeWeek : " + beforeWeek + "<br> </b>");
        document.write("<b>afterWeek : " + afterWeek + "<br> </b>");
        document.write("<b>curator : " + curator + "<br> </b>");

재귀함수인 allBlog 함수를 다 돌고 난후 값이 저장되어있는 각 변수 값들을 노출시켜봅니다.

 

 

전체 글이 노출된 후에 payout_value 가 모두 더해진 결과값이 노출되네요~! :)

 

 

지금 만든 페이지는 http://www.salzzakart.com/steem/test_2.html 에서 확인 가능하십니다!

 

인스타그램 : https://www.instagram.com/salzzak_art/

스팀잇 : https://steemit.com/@salzzakart

 

 

LIST
SMALL

출처 :

https://steemit.com/kr-dev/@codingman/steem-js-post

https://steemit.com/kr-dev/@morning/steem-js-api

 

안녕하세요, salzzak 입니다!

 

저번에는 getDiscussionsByBlog 함수를 이용해서, 그 블로그에 대한 정보들을 추출하는 걸 확인해봤는데요.

그 정보들이 어떤걸 의미하는지 좀 더 자세히 살펴보겠습니다. 

 

사실 제가 스팀잇 활동을 하면서 불편했던것이

오늘 스팀파워 & SBD로 얼마가 들어올지, 그 동안 어느정도 양의 보팅을 받았는지, 일주일동안 쌓인 보팅금액은 어느 정도인지, 지난 날동안 받은 스팀파워 & SBD 등이 잘 계산이 안되더라구요.

 

왜 주는지조차 모르겠다.

 

이미 https://steemworld.org 에서 너무 잘만들어놨지만,

이왕 관심이 생긴 거, 직접 만들어서 써보기로 했습니다.

 

사실 그림만 올리다가 뜬금없이 steem.js 라이브러리 공부 포스팅을 하는 이유입니다. ㅎㅎ;

 

댓글을 통해서도 voting을 받을 수 있지만, 우선 순수하게 내가 올린 블로그에서 받은 보팅금액만 계산 해보겠습니다!

 

steem.api.getDiscussionsByBlog

지난번에 위 함수를 통해서 여러가지 항목들을 받아올 수 있었는데요.

 

일주일이 안 지난 글과 지난 글을 각각 따왔습니다.

 

위 정보에서 내가 필요한 정보만 빼서 설명을 간단히 적어보겠습니다.

제가 이해한 토대로 적기 때문에 혹시 틀린게 있으면 알려주심 감사하겠습니다.

 

1) author & permlink : 해당 블로그의 저자와 좌표(?) 인데요.

앞으로 쓰게 될 재귀함수에서 들어가는 인자 query내에 넣어줘야 하는 값입니다.

또한 리스팀되는 글도 author를 이용하여 걸러줄 수 있습니다.

 

2) curator_payout_value : 해당 글에 보팅을 해준 사람이 "받은" 금액입니다. 

"받은" 금액이기 때문이기 때문에 일주일 지나지 않은 글에는 모두 0.000 SBD로 노출됩니다.

 

3) pending_payout_value : 저자와 큐레이터가 보상 "받을" 금액 

"받을" 금액이기 때문이기 때문에 일주일 지난 글에는 모두 0.000 SBD로 노출됩니다.

실제 글에 표시되는 보팅금액 이기도 합니다.

 

4) total_payout_value : 저자가 보상 "받은" 금액 

"받은" 금액이기 때문이기 때문에 일주일 지나지 않은 글에는 모두 0.000 SBD로 노출됩니다.

 

그래서 간단한 연관 관계를 표현하자면,

(보상을 받기 전) pending_payout_value = (보상을 받은 후) curator_payout_value + total_payout_value

이렇게 됩니다.

 

steem.api.getDiscussionsByBlog 함수 내 limit 값은 고정적으로 넣을 수 밖에 없기 때문에, 유동적인 블로그 갯수를 모두 불러오기는 어렵습니다. 그래서 어쩔수 없이 재귀함수를 써야하는데요!

 

이 부분은 스팀잇 @codingman 님께서 쓰신 글

https://steemit.com/kr-dev/@codingman/steem-js-post

을 따라하면서 구현했습니다 ㅠ 감사합니다.

 

지난 블로그에서 

query = {"tag": "블로그 계정 명", "limit": 결과 노출 갯수}

이렇게 쓰인다고 말씀드렸었는데, "start_author"과 "start_permlink" 인자를 더 추가 해줄 수 있었습니다.

 

steem.api.getDiscussionsByBlog로 읽어온 마지막 글의 author & permlink 를 각각 "start_author"과 "start_permlink" 에 넣어주면, 해당 글을 기준으로 다시 limit 설정 값만큼 읽어 올 수 있게 됩니다!

 

재귀함수 구현 부분은 @codingman님께서 너무 잘 써주셨기 때문에... 위 URL에서 보시는 것이 더 좋을 것 같습니다.

아래는 이름만 바꾼 @codingman님 코드 입니다.

 

Ctrl C / V

 

실행해보니 정상적으로 제가 쓴 글들을 가지고 오고 있습니다.

 

생각보다 엄청 많진 않네요

 

 

저 같은 경우는 위 코드 출력 부분에 제가 알고 싶은 payout_value들을 추가해봤습니다. 

 

for (var i = 0; i < result.length - 1; i++) { 

console.log(err, result[i].title);

console.log(err, result[i].pending_payout_value);

console.log(err, result[i].curator_payout_value);

console.log(err, result[i].total_payout_value);

}

 

payout_value 들이 잘 노출되고 있네요.

 

어차피 html에 직접 노출시킬 생각이기 때문에, 웹페이지에 이 정보들을 직접 띄워보겠습니다.

 

for (var i = 0; i < result.length - 1; i++) { //10개의 post중 마지막 post는 출력 안함

document.write("<b>Title : " + result[i].title + "<br> </b>");

document.write("pending_payout_value : " + result[i].pending_payout_value + "<br>");

document.write("curator_payout_value : " + result[i].curator_payout_value + "<br>");

document.write("total_payout_value : " + result[i].total_payout_value + "<br>");

document.write("<br>");

 

}

 

웹 상에도 잘 노출되고 있습니다!

 

지금까지는 제 계정 중심으로 썼는데요, 처음 웹페이지 접근 시 사용자 계정을 입력받은 뒤, 해당 계정의 정보들을 노출시켜 보겠습니다.

 

var tag = prompt("확인하고 싶으신 계정을 입력해주세요!");

query.tag = tag;

 

prompt 명령어를 이용해 입력값을 account에 받은 뒤, query.tag에 넣어줍니다.

위 코드를 함수를 직접 실행 시키는 allBlog(); 위에 추가해줍니다.

 

이제 실행을 시켜보면

계정명을 입력해봅니당

 

@june0620 님의 아이디를 무단으로 넣어보겠습니다.

 

june0620님의 글들

 

다행히 잘 노출되고 있습니다! 가독성이 엄청 떨어지지만...!

다음에는 이 값들을 이용해서 좀 더 의미있는 정보들로 만들어보겠습니다! 

 

 

지금 만든 페이지는 http://www.salzzakart.com/steem/test_1.html 에서 확인 가능하십니다!

 

인스타그램 : https://www.instagram.com/salzzak_art/

스팀잇 : https://steemit.com/@salzzakart

 

 

LIST
SMALL

안녕하세요. salzzak 입니다!

 

저번에는 스팀 간단한 예제만 확인해봤는데,

https://github.com/steemit/steem-js 에 있는 함수들을 써보려고 합니다.

 

우선 첫번째로 steem.api.getTrendingTags 를 사용해보겠습니다.

 

steem.api.getTrendingTags(afterTag, limit, function(err, result) { console.log(err, result); });

 

제가 잘못찾는건지 모르겠지만, 함수 안에 들어가 있는 인자에 대한 설명이 따로 없어서 ㅠㅠ 단어만 보고 유추를 해야했습니다.

 

afterTag 는 들어가는 태그 이하로 인기있는 (영향력있는) 태그를 보여줍니다.

limit 는 몇 개 까지 보여주는지 설정값입니다.

 

afterTag 를 '' 로 입력 시 가장 영향력 있는 Tag 1위부터 보여주게 됩니다.

 

afterTag를 '' 로 입력
6위에 kr 이 당당히 자리매김하고 있네요.

dtube가 현재 가장 영향력있는 Tag 인가보네요!

이어서 afterTag 를 'kr' 로 입력시에는 ...

 

아까 전 결과에서 kr 부터 노출

 아까 전 결과의 kr 부터 Tag 랭킹 리스트가 노출되고 있습니다.!

 

 

두번째로 steem.api.getDiscussionsByBlog 를 사용해보겠습니다.

steem.api.getDiscussionsByBlog(query, function(err, result) { console.log(err, result); });

역시나 query 에 대한 설명이 없어서, 구글링을 하던 도중,

{"tag": "블로그 계정 명", "limit": 결과 노출 갯수}

 

위와 같은 형태로 query를 입력해야 된다는 걸 알았습니다.

(@morning 님 스팀잇 참고했습니다. 감사합니다.)

 

제 아아디 salzzakart를 넣어봤습니다.

위와 같이 입력 후 실행 시...

 

제가 최근에 포스트한 글 내역이 10개 노출되고 있습니다! (리스팀한 글도 포함되네요.)

첫번째 글 ▶를 눌러서 자세히 봐보겠습니다.

 

하나의 글을 펼쳐보았을 때의 모습

여러가지 항목들로 나누어져있는데요, 필요한 정보만 빼서 확인하고 싶었습니다.

 

함수 내에 

 

for( n in result ){

console.log(err, result[n]."원하는 항목");

}

 

형식으로 입력하면 원하는 정보만 추출할수 있다는걸 알았습니다. 저같은 경우는 title을 넣어봤습니다.

(@codingman 님 스팀잇 참고했습니다. 감사합니다.)

 

result 안에 담겨지는 모든 정보들

 

제가 최근에 올린 글 10개 제목만 노출이 되고 있습니다.

 

 

이제 제가 원하는 항목을 뽑아낼수 있다는 걸 알게되어서 속이 후련하네요 ㅎㅎ

다른 분들은 너무 쉽게 하셨겠지만 ㅠㅠ 저는 여기까지도 꽤 시간이 걸렸네요.

 

다음에는 각 항목들이 무엇을 뜻하고 어떻게 매칭 되는지 더 알아보겠습니다!

 

 

인스타그램 : https://www.instagram.com/salzzak_art/

스팀잇 : https://steemit.com/@salzzakart

 

 

 

 
LIST
SMALL

안녕하세요. keefojifo 티스토리 블로그에서 활동을 조금씩 해보려는 salzzak 입니다.

 

steem.js 라이브러리는 암호화폐 STEEM을 사용하는 SNS 스팀잇 공식 node.js 라이브러리 입니다.

사실 지금 이 글을 쓰고 있는 와중에도 한번도 사용해보진 못했는데요.!

 

글을 씀과 동시에 사용을 해보면서 같이 배워보겠습니다.

 

우선 node.js와 visual studio code가 설치된 상태에서 부터 시작해보겠습니다.

 

steem.js 설치

먼저 node.js 잘 설치되어 있는지 node -v / npm -v 를 cmd 창에 입력해봅니다.

잘 나오네요.

다음은 steem.js를 설치하는 커맨드 npm install steem --save 을 입력해봅시다.

뭔가 WARN이 많아서 불안하지만..

 

visual studio code에서 steemTest.js 을 생성 후 다음 예재를 입력합니다. 

https://github.com/steemit/steem-js/tree/master/doc#install 에 있는 'ned', 'dan' 의 정보를 조회하는 예제입니다.

 

var steem = require('steem')

steem.api.getAccounts(['ned', 'dan'], function(err, response){ console.log(err, response); });

console.log(err, response);

});

 

저는 제 아이디를 넣어봤습니다.

파일 저장 후 cmd > 파일 존재하는 경로 이동 후 node steemTest.js 입력 시

잘은 모르겠지만 ...

잘은 모르겠지만, 제 salzzakart 정보가 노출되고 있네요, 일단 작동한다는 것은 알았습니다.

 

 

근데 사실 위 방법보다도 편하게 javascript에서 steem.js를 사용할 수 있습니다.

(위에건 왜 한겨?)

 

우선 빈 파일 steem.html을 생성해봅니다.

 

 

html:5 을 입력 후 Tab 을 눌러주면 다음과 같이 html 틀이 자동 입력됩니다.

 

 

head 태그 안에 steem.js 라이브러리를 추가해줍시다.

<script src="https://cdn.steemjs.com/lib/latest/steem.min.js"></script>

 

 

아까 입력했던 기본 예제를 body 태그안에 다시 한번 입력해봅시다.

 

<script>

steem.api.getAccounts(['salzzakart'], function (err, response) {

console.log(err, response);

});

</script>

 

 

여기서 잠시 꿀팁!

※ Visual studio code는 정렬하고 싶은 부분을 선택 후 Ctrl+K ,F 를 누르면 자동정렬이 됩니다. 

 

저장 후. chrome 페이지에서 소스코드가 정상 작동하는지 확인해보겠습니다.

저장한 파일을 직접 열어도 되지만, 바로바로 실행해보기 위해서 EXTENSIONS 에서 open-in-browser 를 설치해보겠습니다.

 

왼쪽 하단 사각형 퍼즐 주목

왼쪽 메뉴에서 사각형 퍼즐 모양 아이콘을 클릭하면 EXTENSIONS 메뉴가 나오는데요,

검색창에 open-in-browser 를 입력하고 coderfee 가 등록한 EXTENSION 을 설치해봅시다.

 

그럼 위처럼 Ctrl + Alt + O 입력 시, 해당 소스코드를 브라우저로 열 수 있게 됩니다.

 

이제 steemTest.html 로 돌아온 후, Ctrl + Alt + O 입력 > chrome 을 클릭해주면,

해당 소스코드가 chrome 으로 열리게 됩니다.

 

아무것도 없잖어~

네 빈 창이 노출되고 있었는데요, 당황스러웠지만 F12를 눌러 console 탭으로 이동해봤습니다.

 

와! salzzakart!

위에서 봤던 것 처럼 salzzakart의 정보가 노출되고 있고, ▶를 눌러 더 자세한 정보를 볼수 있습니다.

 

이래저래 첫번째 포스팅을 해봤는데 여기저기서 정보를 많이 얻어왔고, 제 기준에서 작성한 것이라 틀린 부분이 있을 수 있습니다 ㅠ 혹시 문제가 있으면 알려주시면 감사하겠습니다!

 

인스타그램 : https://www.instagram.com/salzzak_art/

스팀잇 : https://steemit.com/@salzzakart

 

 

 

 
LIST

+ Recent posts