반응형
SMALL

'javascript'에 해당되는 글 2건

반응형
LIST
반응형
SMALL

이번시간엔 casper.js를 이용한 날씨프로그램에 대해 포스팅해보려고한다. 사실 이건 내가 개발한건 아니고 친구가 개발한건데 공부해보려고 따라해본거였는데 생각했던거보다 고생 많이했다. 지금도 만드는과정 머릿속에 있을만큼 많이 지우고 다시하고를 반복했다. 그리고 이건 맥북기준이니 참고바란다.


1. 먼저 터미널쪽으로 가서 다음과 같이 명령어를치고 다운로드해준다.

  • brew install phantomjs
  • brew install casperjs

다음으로 Desktop 경로에서 아래와 같이 폴더를 create 한다.

  1. Desktop/자동화
  2. Desktop/자동화/날씨
  3. Desktop/자동화/자동화코드
  4. Desktop/자동화/자동화프로그램

나같은경우는 usrs/desktop/자동화쪽 경로를 설정해서 날씨, 자동화코드, 자동화프로그램에 대한 폴더를 만들어줬다.



2. 다음으로 코드를 작성해준다. 파일명은 CaptureWeather.js로 설정해주고 자동화코드 폴더쪽으로 저장해준다.

var casper = require(casper).create({
    verbose: true,
    loglevel: debug,
    viewportSize: {
        width: 1024,
        height: 768
    }
});

casper.echo(Casper started);

casper.start(http://weather.naver.com/rgn/cityWetrMain.nhn“);

casper.then(function() {

    this.captureSelector(/Users/사용자이름(변경하세요)/Desktop/
자동화/날씨/금일전국날씨.png, ‘#content);

});

casper.run();

경로는 본인컴퓨터에 맞게 알아서 설정해주면 된다. 


2. 이번에는 CaptureWeekWeather.js 파일명으로 저장하고 이역시 자동화코드 폴더안으로 경로를 지정해주고 다음과 같이 코딩한다.

var casper = require('casper').create({
    verbose: true,
    loglevel: 'debug',
    viewportSize: {
        width: 1024,\
        height: 768
    }
});

casper.echo("Casper started");

casper.start("http://weather.naver.com/period/weeklyFcast.nhn");

casper.then(function() {
    this.captureSelector('/Users/사용자이름(변경하세요)/Desktop/자동화/
    날씨/주간전국날씨.png', '#content');
});

casper.run();



3. 이번엔 myAutoProgram.sh라는 파일명으로 자동화프로그램 폴더로 저장하고 다음과 같이 코딩한다.


#!/bin/bash

echo 귀찮은 작업을 자동으로 처리합니다...
echo
echo 1. 대한민국 전국 날씨정보를 png 그림파일로 저장합니다.
echo

( exec casperjs /Users/사용자이름(변경하세요)/Desktop/자동화/자동화코드/
  CaptureWeather.js )

( exec casperjs /Users/사용자이름(변경하세요)/Desktop/자동화/자동화코드/

CaptureWeekWeather.js ) exit 0


이런식으로 3개를 직접 코딩해주면 된다. 이제 다음은 이 프로그램들을 실행시키는 과정이다.


4. 프로그램의 실행 과정

 myAutoProgram.sh’을 실행 가능한 파일로 변경해야 한다.

터미널을 실행하고 ‘Desktop/자동화/자동화프로그램’ 경로로 이동한다.

이제 아래 명령어를 사용하면 끝난다.

  • chmod +x myAutoProgram.sh

myAutoprogram.sh 파일을 실행시켜 보자.

‘Desktop/자동화/날씨’ 경로에

  • 금일전국날씨.png
  • 주간전국날씨.png


이런식으로 화면이 나오면 성공이다. 자동화프로그램을 이용해서 날씨를 이렇게 편하게 바로 볼 수가 있다. 자동화프로그램이 실행될때마다 업데이트가 바로바로 되기때문에 구지 인터넷들어가서 찾아보지 않아도 이렇게 편리하게 날씨프로그램을 볼 수가있다. 다음번에도 자동화프로그램을 이용해서 어떤걸 개발해볼지 조금 더 생각해봐야 할것같다.



반응형
LIST

'javascript' 카테고리의 다른 글

node.js, express 프레임워크를 이용한 채팅프로그램  (0) 2016.08.23
블로그 이미지

만년필석사

,
반응형
SMALL

이번시간엔 채팅프로그램에 대해서 포스팅해보려고한다. 사실 채팅프로그램 만드는게 쉽지 않았다. 컴퓨터 환경맞춰야하지, 구글링 해봐야하지. 구글링에서 찾아도 또 리눅스 환경 설치해야하고 정말 어려움이 많았다. 하지만 이걸 만들어봄으로써 node.js에 대해서도 많이 배울 수 있었다. 본 포스팅은 맥북 기준 포스팅이다. 




1. node.js의 설치





일단 node.js를 설치해줘야 한다. 맥북같은 경우는 브루로 금방 깔 수 있을 것이다.


2. express 프레임워크의 설치

npm install --save express를 리눅스에 입력해서 설치한다.


3. 서버 구동 확인

var app = require('express')();

var http = require('http').Server(app);

var io = require('socket.io')(http);


app.get('/', function(req, res){

  res.sendFile(__dirname + '/index.html');

});


http.listen(3000, function(){

  console.log('listening on *:3000');

});


이걸 그대로 Sublime Text에 입력해서 서버가 잘 동작하는지 테스트해본다.  만약에 ^327 에러가 나온다면 express 프레임워크에 var에 관련된 항목들이 설치가 안된것이다. 그땐 npm install http, npm install socket.io를 쳐서 설치해주고 실행해본다. 그러면 아마 서버가 잘 동작할 것이다. 만약 다 됐으면 localhost:3000을 인터넷 주소에다 쳐서 확인해본다. 



이렇게 나오면 정상이다.


4. index.js 파일 만들기

Sublime Text에다 다음과 같은 코드를 입력하고 index.js로 저장해준다.


var app = require('express')();

var http = require('http').Server(app);

var io = require('socket.io')(http);


app.get('/', function(req, res){

  res.sendFile(__dirname + '/index.html');

});


http.listen(5000, function(){

  console.log('listening on *:5000');

});




var userList = [];



io.on('connection', function(socket){

  var joinedUser = false;

  var nickname;


  // 유저 입장

  socket.on('join', function(data){

    if (joinedUser) { // 이미 입장 했다면 중단

      return false; 

    }


    nickname = data;

    userList.push(nickname);

    socket.broadcast.emit('join', { 

      nickname : nickname

      ,userList : userList

    });


    socket.emit('welcome', { 

      nickname : nickname

      ,userList : userList

    });


    joinedUser = true;

  });



  // 메시지 전달(내가 치면 나오는 메시지)

  socket.on('msg', function(data){

    console.log('msg: ' + data);

    io.emit('msg', { 

      nickname : nickname

      ,msg : data

    });

  });



  // 접속 종료

  socket.on('disconnect', function () {

    // 입장하지 않았다면 중단

    if ( !joinedUser) { 

      console.log('--- not joinedUser left'); 

      return false;

    }


    // 접속자목록에서 제거

    var i = userList.indexOf(nickname);

    userList.splice(i,1);


    socket.broadcast.emit('left', { 

      nickname : nickname 

      ,userList : userList

    });    

  });

});


5. index.html이라고 파일명을 저장하고 다음과 같이 코딩한다.


<!doctype html>

<html>

<head>

  <title>Socket.IO chat</title>

  <style>

    * { margin: 0; padding: 0; box-sizing: border-box; }

    body { font: 13px Helvetica, Arial; }

    form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }

    form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }

    form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }

    #messages { list-style-type: none; margin: 0; padding: 0; }

    #messages li { padding: 5px 10px; }

    #messages li:nth-child(odd) { background: #eee; }


    #messages span.nickname { font-weight: bold; font-size: 120%; display: inline-block; width: 100px; }



    div.userList { text-align: center; width: 200px; min-height: 200px; border: 1px solid #999;}

    #userList { list-style-type: none; margin: 0; padding: 0; }

    #userList li { }


    #before { text-align: center; margin-top: 50%; }

    #after { display: none; }

    .noti { text-align: center; color: blue; }

  </style>

</head>

<body>


<section id="before">

  <p>닉네임을 입력하세요</p>

  <input id="nickname"><button id="joinBtn">들어가기</button>

</section>



<section id="after">

  <div class="userList">

    <h2>현재 접속자</h2>

    <ul id="userList"></ul>

  </div>


  <hr>

  <ul id="messages"></ul>

  <form>

    <input id="m" autocomplete="off" /><button>Send</button>

  </form>

</section>


<script src="/socket.io/socket.io.js"></script>

<script src="http://code.jquery.com/jquery-1.11.1.js"></script>

<script>


var nickname;

var socket = io();


// 이벤트: join 클릭 

$('#joinBtn').click(function(e){  

  fnNickname(e);

});


// 이벤트: nickname 엔터키 

$('#nickname').keypress(function(e) { 

  if (e.which == 13) {

    fnNickname(e);

  }

});


// 송신: 닉네임

function fnNickname(e) {

  if ($('#nickname').val().trim() == '') {

    alert('Input your nickname!');

    return false;

  }

  nickname = $('#nickname').val().trim();

  socket.emit('join', nickname);  // 접속 이벤트

}




// 수신: 환영인사

socket.on('welcome', function(data){

  // 유저리스트 업데이트

  fnUpdateUserList(data.userList);


  $('#before').hide();

  $('#after').show();

  $('#messages').append($('<li class="noti">').text(nickname + '님 환영합니다.'));  

});



// 유저리스트 업데이트

function fnUpdateUserList(userList) {

  $('#userList').text('');

  for (i = 0; i < userList.length; i++) {

    $('#userList').append($('<li>').text(userList[i]));

  };

}


// 수신: 신규자 접속

socket.on('join', function(data){

  // 입장 알림

  $('#messages').append($('<li class="noti">').text(data.nickname + '님이 입장하셨습니다'));

  

  // 유저리스트 업데이트

  fnUpdateUserList(data.userList);

});


// 수신: 퇴장

socket.on('left', function(data){

  // 종료 알림

  $('#messages').append($('<li class="noti">').text(data.nickname + '님이 퇴장하셨습니다'));

  

  // 유저리스트 업데이트

  fnUpdateUserList(data.userList);

});



// 송신: 메시지

$('form').submit(function(){

  socket.emit('msg', $('#m').val());

  $('#m').val('');

  return false;

});

  


// 수신: 메시지

socket.on('msg', function(data){

  var span = $('<span class="nickname">').text(data.nickname);

  var li = $('<li>').append(span).append(data.msg);

  $('#messages').append(li);

});


</script>


</body>


6. 서버를 구동시키고 닉네임 달아서 로그인하면 다음과 같이 나올 것이다.


출저: 개발::[Express.js] Node.js


간단해 보이지만 환경구축하고 설치하고 고생많이했다... 다음번에는 귓속말까지 가능한 채팅프로그램을 만들어볼 생각이다. 


반응형
LIST

'javascript' 카테고리의 다른 글

casper.js를 이용한 날씨프로그램  (0) 2016.08.30
블로그 이미지

만년필석사

,