'phantomjs'에 해당하는 글 7건

spookyJS :: 오류(1) tiny-jsonrpc

MEAN stack/SNS Crawler App 2017. 1. 27. 02:56

새로 프로젝트를 하면서 이전에 사용한 SpookyJS 를 npm 을 이용하여 설치후 


테스트 데이터를 넣은후 실행을 해보았다 


하지만 ...




이와 같이 오류가 계속 발생하는것이다 특별한 작업을 수행하지도 않았는데 말이다 ... 


구글링을해보아도 안나오길레 삽질을한결과 .. 


tiny-jsonrpc  이놈을 설치해 주니 정상동작 한다.. 아 이것때문에 30분날렸습니다 


npm install tiny-jsonrpc   


설치해주면 끝 

'MEAN stack > SNS Crawler App' 카테고리의 다른 글

인스타그램,트위터 크롤러 :: 인스타그램 selector 수정  (3) 2017.07.12
유튜브,트위터 크롤러 :: 배열 데이터 순서 랜덤  (9) 2017.01.08
CasperJs :: 자주 사용되는 함수  (0) 2016.12.07
인스타그램,트위터 크롤러 :: 4 Nschedule  (8) 2016.12.01
인스타그램,트위터 크롤러 :: 3 Nodejs  (0) 2016.12.01
WRITTEN BY
내가달이다
,

MSSQL :: 0 CURSOR

ASP.NET MVC/SQL 2016. 12. 1. 22:54

포스팅하던중 친구가 이러한 쿼리가 가능하냐고 연락이와서 생각난김에 글을적어본다


친구의 요구사항은 테이블이 db_20161025,db_20161125,db_20161225 매달마다 백업하는 테이블이 있다고 가정을하고


'db_' 가 포함된 테이블을 전부 셀렉트 할수있냐는것이었다



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
--커서 시작
DECLARE UserTable_Cursor CURSOR
FOR
-- 테이블 중에 name 이 'db_'값 찾기
select name   from sysobjects where name like('db_%')
OPEN UserTable_Cursor
 
DECLARE @name varchar(20)           
DECLARE @strsql nvarchar(300) 

set @name = (select top 1 name   from sysobjects where name like('db_%'))
 
FETCH NEXT FROM UserTable_Cursor INTO @name
 
WHILE (@@FETCH_STATUS = 0)
 
BEGIN    
    SET @strsql =  ' SELECT * FROM ' + @name
       EXEC SP_EXECUTESQL @strsql  
    FETCH NEXT FROM UserTable_Cursor INTO @name       
END
 
CLOSE UserTable_Cursor
 
DEALLOCATE UserTable_Cursor
cs



4번 셀렉트문을 돌린값이다 ( 샘플 예제)


커서실행시 





'ASP.NET MVC > SQL' 카테고리의 다른 글

SQL :: 3 시도별 총회원 등급 카운트  (0) 2018.05.06
MSSQL :: 1 Join  (0) 2017.01.13
WRITTEN BY
내가달이다
,

인스타그램,트위터 크롤러 :: 4 Nschedule

MEAN stack/SNS Crawler App 2016. 12. 1. 16:42

지난 포스팅에 말했다 싶이 일정 시간마다 instagram,twitter 데이터를 크롤링 하는 스케쥴링을 구현해볼 생각이다


처음에는 간단하게 twitter api,instagram api 만을 이용해서 가져오면되지않을까? 


라는 별거아닌 생각으로 프로그램 작성을 했다.. 


트위터는 api 를 무난하게 사용해 작성을하였는데.. 아뿔사... 


인스타그램은 .. 정책이변경되서 권한이 얻기가 ... 드릅게 빡세다 ...  





어쩔수없이 페이지 자체를 크롤링 하는 방향으로 포커스를 맞췄다  아 내시간 ㅁ느아ㅣㅡㅁ니ㅏㅇ




#트위터 ,인스타그램 페이지 크롤링






트위터 홈페이지에서 #블랙베리 라는 태그를 가지고 검색을 한 화면 이다


트위터  나 인스타그램 같은경우는 화면을 최하단으로 스크롤 할경우  자동으로 다음페이지를 불러오게 되어있다


이런문제때문에 생각해볼게 좀많아서 이걸 어찌하나 했는데 


http://blog.nundefined.com 이 글의 도움을 많이 받았다



우선 크롤링을 하기위해서는 


 


PhantomJS,CasperJS,SpookyJS 가 필요하다 


설치하는 방법은 구글에 많이있으니 참고해서 설치하시기 바랍니다..


간단하게 설명하자면

 

PhantomJS/CasperJS 같은경우는 webkit 기반의 headless browser 이다 즉, 단독브라우저로 웹테스트 할떄 많이들 사용한다고 하더라


SpookyJS 위의 CasperJS,PhantomJs같은 경우는 node 와 관계없이동작하기때문에 이를 컨트롤 하기 위해서 사용을한다 



function.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
 scheduletwitter: function(count) {
 
            var searchquery = config.schedule.hashtag[count];    //앞서 저장되어있던 수집태그
            var id = config.schedule.name[count];                 //앞서 저장되어있던 id값    
            var encsearchquery = encodeURIComponent(searchquery);
            var url = 'https://twitter.com/search?f=tweets&vertical=default&q=%23'+encsearchquery+'&src=typd';
 
            var Spooky = require('spooky');
 
            var spooky = new Spooky({
                    casper: {
                          logLevel: 'debug',
                            verbose: false,
                            options: {
                                clientScripts: ['https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js']
                            },
                            viewportSize: {
                                        width: 1440, height: 768
                                    },
                               pageSettings: {
                                webSecurityEnabled: false, 
                                userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/537.11 (KHTML, like Gecko) Chrome/23.0.1271.97 Safari/537.11" // Spoof being Chrome on a Mac (https://msdn.microsoft.com/en-us/library/ms537503(v=vs.85).aspx)
                            }
                            
                    }
                }, function (err) {
                    if (err) {
                        e = new Error('Failed to initialize SpookyJS');
                        e.details = err;
                        throw e;
                    }
 
             
                    spooky.start(url);
                         var twitter = function() {                            
                                spooky.then(function(){
                              this.scrollToBottom();
                                this.wait(1000);
                            var newScrolleds = this.evaluate(function() {
                                    return window.scrollY;
                                });
                            var newScrolled = this.evaluate(function() {
                                return window.document.body.scrollTop = document.body.scrollHeight;
                                });
                                    
                        });
                        spooky.then(function(){       
                        
                            this.scrollToBottom();
                            this.wait(1000);
                            var newScrolleds = this.evaluate(function() {
                                    return window.scrollY;
                                });
                                
                                this.emit('logs',newScrolleds)
                            var newScrolled = this.evaluate(function() {
                                return window.document.body.scrollTop = document.body.scrollHeight;
                                });
                                    this.emit('logs',newScrolled)
 
                            
                        });  
                    
                    }  
  
                        twitter()
               
 
                    }
 
                    spooky.run();
                             
                });
            spooky.on('logs', function (logs) {
                                        console.log(logs);
                                        });
 
  
 
 
}
cs



몇가지 코드를 살펴보자 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//spookyJS URL 접속
spooky.start(url)              
            //spookyJS 다음 행동           
            spooky.then(function(){    
                            //스크롤을 맨아래로 이동                 
                             this.scrollToBottom();   
                             // 1초 wait  
                              this.wait(1000);          
                            var newScrolleds = this.evaluate(function() {
                                     //현재 윈도우 y값
                                    return window.scrollY;  
                                });
                            var newScrolled = this.evaluate(function() {
                                //현재 윈도우 x값
                                return window.document.body.scrollTop = document.body.scrollHeight; 
                                });
 
                            // logs 값 전송
                            this.emit('logs',logs)
   
 // logs 값 get
  spooky.on('logs', function (logs) {
    console.log(logs);
     });
cs



해당 코드를 실행하게되면 검색어가 입력된 페이지를 접속한후 맨아래로 이동후 그 좌표 로그값을 받는 것이다



이런식으로 찍히게 된다 (정상작동)


본격적으로 데이터를 가져와보자




가져 오게 되면

1
2
3
4
5
6
7
        Userid = this.evaluate(function() {
                                                var elements = __utils__.findAll('#stream-items-id > li > div > div > div > a > span.username.js-action-profile-name');
                                                return elements.map(function(e) {
                                                    return e.innerText
                                                });
                                        });
        this.emit('dbinsert', Userid)
cs


이런식으로 변수에 저장시켜주면된다


값까지 찾았으니 그후에는 db 에 입력시켜줍시다


this.emit 을 통해 node 으로 돌아와서


1
2
3
4
   spooky.on('dbinsert', function (data) {
                    db.dummy.save(data, function(){
                        });
                });
cs


디비로 전송시켜주면 끝


이제 이걸 내가원하는 시간마다 돌아가게 스케쥴링을 걸어주자 


server.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
  var scheduler = new Scheduler(1);
 
 
            scheduler.add(8000, function(done,res){
 
                
                setTimeout(function() {
                    for(var i = 0; i < config.schedule.hashtag.length; i++)
                    {
                        functions.scheduleinstagram(i)
                    }
                }, 3000);
 
                setTimeout(function() {
                    for(var i = 0; i < config.schedule.hashtag.length; i++)
                    {
                        functions.scheduletwitter(i)
                    }
                }, 3000);
            done();     
        });
cs



자이제 결과를 살펴보자




인스타그램도 이와 유사하다  궁금하신 부분이있으면 댓글달아주세여


'MEAN stack > SNS Crawler App' 카테고리의 다른 글

유튜브,트위터 크롤러 :: 배열 데이터 순서 랜덤  (9) 2017.01.08
CasperJs :: 자주 사용되는 함수  (0) 2016.12.07
인스타그램,트위터 크롤러 :: 3 Nodejs  (0) 2016.12.01
인스타그램,트위터 크롤러 :: 2 UI  (4) 2016.11.29
인스타그램,트위터 크롤러 :: 1 MEAN stack  (0) 2016.11.29
WRITTEN BY
내가달이다
,

인스타그램,트위터 크롤러 :: 3 Nodejs

MEAN stack/SNS Crawler App 2016. 12. 1. 14:05

2 UI  에 이어서 마저 작성을한다



UI 에서 입력한값을 mongoDB로 입력할수있게해주려한다


2장에서 작성한 

collect.component.ts 추가 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
   addinfo(
    email:string,
    name:string,
    hashtag:string,
    frcal:string,
    tocal:string,
     twitter:string,
    ){
      
      
       var query = {
                         "hashtag" : hashtag,
                          "email" :  email,
                          "frcal" : frcal,
                          "tocal" : tocal,
                          "twitter" : twitter,
                         "name"    : name
       }
       
        var headers = new Headers(); 
        headers.append('Content-Type', 'application/json')
        this.http.post('http://localhost:4100/dbUserinsert',query,{headers: headers}).subscribe((res) => {
        
    );
cs


server.js 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var express = require('express');
var request = require('request');
var bodyParser = require('body-parser');
var cors = require('cors');
var functions = require('./functions');
var dbsearch = require('./dbsearch');
var app = express();
var Scheduler = require('nschedule');
var config = require('./config');
var async = require('async');
 
 
 
 
           
         app.use(express.static(__dirname));
        app.post('/dbUserinsert',dbsearch.Userinsert);  //입력받은값 디비 저장
        app.listen(process.env.PORT || 4100);
        console.log("Server up on port 4100");
cs

MongoDB 설치

1
2
3
npm install mongojs -g 
//MongoDB 설치
 
cs


dbsearch.js 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var searchfunctions = require('./functions')
var mongojs = require('mongojs');
var db = mongojs('mongodb://''@''.mlab.com:63406/');
 
functions = {
 
 Userinsert : (req,res) => {
    var req = req.body;
    console.log(req)
     db.collect.save(req, function(err, result){
                if(err){
                    res.send(err); 
                    console.log(err);
                } else {
                    res.json(result);
                    console.log(result);
                }
            });
        
    }}  
cs




작성한 코드를 실행하게 되면


입력받은 값을  query 변수에 입력하고 JSON 으로 보내게 된다 


서버에서는 호출 된 URL http://localhost:4100/dbUserinsert app.post 시켜서  dbsearch.js 에 있는


Userinsert 함수를 실행시켜주게 된다 


완성이되면  이전페이지에서 보게된거처럼 그리드에 바인딩이 되어진다 




#입력된값을 DB 에 저장시키는 코드 까지 작성을 완료 했다

다음페이지에서는 일정시간마다 instagram,twitter 데이터를 크롤링 하는 스케쥴링을 포스팅할예정이다 



'MEAN stack > SNS Crawler App' 카테고리의 다른 글

CasperJs :: 자주 사용되는 함수  (0) 2016.12.07
인스타그램,트위터 크롤러 :: 4 Nschedule  (8) 2016.12.01
인스타그램,트위터 크롤러 :: 2 UI  (4) 2016.11.29
인스타그램,트위터 크롤러 :: 1 MEAN stack  (0) 2016.11.29
인스타그램,트위터 크롤러 :: 0 시작  (0) 2016.11.27
WRITTEN BY
내가달이다
,

인스타그램,트위터 크롤러 :: 2 UI

MEAN stack/SNS Crawler App 2016. 11. 29. 16:44



마저 작성한다


첫번째  등록버튼을 클릭할때 위의 메뉴가 나오게 하고싶다

두번째  수집기간을 달력버튼이 말고 텍스트박스를 클릭할때 달력을 표시하게해주고싶다

세번째 수집된내용을 DB 에 저장시키고 목록을 그리드에 바인딩시켜준다

네번째 바인딩된 그리드 클릭후 엑셀출력 버튼을 클릭하면 수집된내용을 엑셀로 출력시켜준다



#첫번째

collect.component.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<div class="row">
  <div class="large-6 columns">
    <button (click)="changeState('add')" class="btn btn-primary">신규등록</button>
  </div>  
</div>
<p></p>
<div *ngIf="appState == 'add'" class="row">
    <form class="form-horizontal"  [formGroup]="VailidateForm" (submit)="addinfo(
        email.value,
        name.value,
        hashtag.value,
        frcal.value,
        tocal.value,
        twitter.value
        )">
  <fieldset>
    <legend>신규 등록</legend>
    <div class="form-group" >
      <label for="inputEmail" class="col-md-1 control-label">이메일</label>
      <div class="col-md-5" [ngClass]="{'has-error':!VailidateForm.controls['email'].valid && VailidateForm.controls['email'].touched}">
        <input type="text" class="form-control" placeholder="@naver.com" #email [formControl]="VailidateForm.controls['email']" >
        <div *ngIf="VailidateForm.controls['email'].hasError('required') && VailidateForm.controls['email'].touched" class="alert alert-danger">이메일을 입력해주세요</div>
      </div>
    </div>
    <div class="form-group">
      <div class="col-md-1">
          <input type="submit"  class="btn btn-primary" value="등록" [disabled]="!VailidateForm.valid">
      </div>
        <div class="col-md-1">
          <button  class="btn btn-primary" (click) ="changeState('appState','default')" >
            취소
          </button>
         </div>
    </div>
  </fieldset>
</form>
</div>
<div style="width: 100%;">
    <ag-grid-ng2 #agGrid style="width: 100%; height: 200px;" class="ag-fresh"
                 [gridOptions]="gridOptions" (rowClicked)='onRowClicked($event)'
                 >   
    </ag-grid-ng2>
</div>
 
 
 
cs

collect.component.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
import { Component,Input,OnInit,Injectable,OnDestroy,ViewChild } from '@angular/core';
import {Collect}  from '../collect';
import {GridOptions} from 'ag-grid/main';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 
declare  var $:any;
 
 
@Component({
    moduleId:module.id,
    selector: 'collect',
    templateUrl: 'collect.component.html',
     styleUrls: ['collect.component.css']
 
})
@Injectable()
export class CollectComponent implements OnInit{
 
 VailidateForm : FormGroup;
 
 constructor(private http:Http,fb: FormBuilder){ 
 
        this.VailidateForm = fb.group({
        'email' : [null, Validators.required],
        'id' : [null, Validators.required],
        'hashtag' : [null , Validators.required],
        'date' : [null , Validators.required]
      })
 
      console.log(this.VailidateForm);
      this.VailidateForm.valueChanges.subscribe( (form: any) => {
        console.log('form changed to:', form);
      }
    );
cs

위 화면을 작성한 코드 예제이다


돌아가는 사이클은 신규등록을 클릭할시 밑에 form 들을 보여주게한다


위 코드에서 눈여겨 볼만한것은 *ngIf , [ngClass] ,[formControl] 이다


1.*ngIf


1
2
3
4
5
6
7
 
 
<div *ngIf="appState == 'add'" class="row">
    <!-- 변수의 값이 appState와 일치할 때 이 태그가보여진다 .-->
</div>
 
 
cs

2~3.[ngClass],[formControl]

1
2
3
4
5
[ngClass]="{'has-error':!VailidateForm.controls['email'].valid && VailidateForm.controls['email'].touched}"
//email 폼 값이 비어있거나 클릭이 되었을경우 발생한다
 
[formControl]="VailidateForm.controls['email']"
//form컨트롤값 지정
cs



collect.component.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
constructor(private http:Http,fb: FormBuilder){ 
 
        this.VailidateForm = fb.group({
        'email' : [null, Validators.required],
        'id' : [null, Validators.required],
        'hashtag' : [null , Validators.required],
        'date' : [null , Validators.required]
      })
 
      console.log(this.VailidateForm);
      this.VailidateForm.valueChanges.subscribe( (form: any) => {
        console.log('form changed to:', form);
      }
cs


코드를 살펴보자 vaildateForm 값을 넣어주고 


vaildateform 값이 변할때마다 log 를 찍어주도록하였다 





코드를 실행해보면





이러한 화면을 간단하게 만들어보았다

'MEAN stack > SNS Crawler App' 카테고리의 다른 글

CasperJs :: 자주 사용되는 함수  (0) 2016.12.07
인스타그램,트위터 크롤러 :: 4 Nschedule  (8) 2016.12.01
인스타그램,트위터 크롤러 :: 3 Nodejs  (0) 2016.12.01
인스타그램,트위터 크롤러 :: 1 MEAN stack  (0) 2016.11.29
인스타그램,트위터 크롤러 :: 0 시작  (0) 2016.11.27
WRITTEN BY
내가달이다
,

인스타그램,트위터 크롤러 :: 1 MEAN stack

MEAN stack/SNS Crawler App 2016. 11. 29. 00:58

이번 개인프로젝트를 웹으로 새로 공부해볼겸 해서 MEAN stack 을 이용해서 간단하게 만들어볼까한다 



우선 MEAN stack 이란 





자세한 설명은 생략 하겠습니다 구글에 검색해보면 무궁무진하게 나와서....


대략적인 구상은 


angular2 를 이용해 원하는 키워드입력을 받아 수집하는 화면UI 를 작성하고 


node,express를 이용해 mongodb 에 저장하는  그림으로 갈예정이다






#Angular2


가장 기본적인 Angular2 의 Hello Angular2 을 찍어볼까한다  hello world가아니라니....


app.component.ts

1
2
3
4
5
6
7
import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>`
})
export class AppComponent { name = 'Angular'; }
 
cs


index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>
  <head>
    <title>Hello Angular</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      body {color:#369;font-family: Arial,Helvetica,sans-serif;}
    </style>
 
    <!-- Polyfills for older browsers -->
    <script src="https://unpkg.com/core-js/client/shim.min.js"></script>
 
    <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
    <script src="https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
 
    <script> window.autoBootstrap = true; </script>
 
    <script src="https://cdn.rawgit.com/angular/angular.io/b3c65a9/public/docs/_examples/_boilerplate/systemjs.config.web.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>
 
  <body>
    <my-app>Loading AppComponent content here ...</my-app>
  </body>
 
</html>
 
cs


참조 : https://angular.io/docs/ts/latest/quickstart.html


간단한 Hello Angular 를 찍어보는 예제 이다 


공부를 하다보니 특이하게 동작을 하더라 


app.component.ts  

 

안의 내용을 확인해보면  import component 를 통해 componenet 를 불러오고 


1
2
3
4
5
6
 
@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>`
})
 
cs


@Component를 살펴보면 


selector : 'my-app' 이 보이고 template 내용이보였다


처음에 'my-app' 은 또 어서나온거야 하고 당황했는데  찾아보니 


 index.html 


1
2
3
4
 
  <body>
    <my-app>Loading AppComponent content here ...</my-app>
  </body>
cs


이쪽에 있더라 


대강 눈치밥으로 돌아가는 것을 보니


index.html 의 <my-app> 부분이 app.component.ts 를 호출하는것으로 보인다


실행결과는 http://plnkr.co/edit/ZYvdJiYxwhdZMx8MmJYj?p=preview&open=app%2Fapp.component.ts 






다음포스팅은 기능의 한부분인 페이지를만들어볼 예정이다


대략적인 구성은 



사용자가 원하는 키워드 입력시 수집내용을 입력하고 등록을 누르고 그후 목록을 보여주고 엑셀로 출력까지 해주는  페이지를 만드려한다

'MEAN stack > SNS Crawler App' 카테고리의 다른 글

CasperJs :: 자주 사용되는 함수  (0) 2016.12.07
인스타그램,트위터 크롤러 :: 4 Nschedule  (8) 2016.12.01
인스타그램,트위터 크롤러 :: 3 Nodejs  (0) 2016.12.01
인스타그램,트위터 크롤러 :: 2 UI  (4) 2016.11.29
인스타그램,트위터 크롤러 :: 0 시작  (0) 2016.11.27
WRITTEN BY
내가달이다
,