2017년 9월 18일 월요일

자동으로 환율 정보를 업데이트 하는 환율 계산기 만들기 (C# )

요즘 여행 계획을 짜다 보니 생각보다 환율 정보를 자주 찾게 되더라구요

간편하게 네이버 환율 계산기에 접속하여 사용할 수 있으나

필요성도 느끼고 생각이 난김에 C#으로 간단한 환율 계산기를 만들어 보겠습니다.

1. 환율 계산기에 필요한 기능

- 인터넷이 연결되면 최신 환율 정보를 가져와서 계산에 적용하는 기능
  원, 달러, 유로, 엔, 위안 5가지 환율 계산 기능 제공
  실시간 환율 정보 조회 기능
  환율 계산 결과는 숫자를 입력하면 즉시 환율 계산 결과를 볼 수 있도록 함

2. 준비물

- C# 개발 환경이 구비된 Visual Studio, 계산기에 들어갈 귀여운 사진 몇장

3. 레이아웃
- 원래 만들기 전의 레이아웃 그린걸 올릴려고 했으나 완성품을 보시는게 편할꺼 같아서 완성된 계산기를 올렸습니다.

Clear 버튼은 계산기의 모든 텍스트 박스의 내용을 삭제하는 기능 입니다.
환율 버튼은 계산기 하단부인 환율 정보를 보여주는 기능 입니다
Close 버튼은 닫기 프로그램 종료 기능입니다.


4. 개발

ⅰ환율 정보

- 환율 정보를 인터넷으로 요청하여 정보를 응답받는 기능이 필요 합니다.
  환율 정보를 XML이나 JSON으로 제공해주는 서비스는 매우 많은 편입니다 그중에서 저는 야후 API를 이용해 보도록 하겠습니다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/// </summary>
/// <param name="FromCurrency">환율 변환할 국가</param>
/// <param name="ToCurrency"> 환율 적용되는 국가 </param>
/// <returns></returns>
public string getRario(string FromCurrency, string ToCurrency)
{
    string strISO = FromCurrency + ToCurrency;
    string strRate = string.Empty;
    string url = String.Format("http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.xchange%20where%20pair%3D%22{0}%22&format=xml&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys", strISO);
    XmlDocument xml = new XmlDocument();
    xml.Load(url);
    XmlNodeList xl = xml.GetElementsByTagName("Rate");
    if (xl != null)
    {
    strRate = xl[0].InnerText;
    }
    return strRate;
}
해당 매서드는 환율 기준 국가 코드와 환율 변환 국가 코드를 입력하면 야후 API를 이용하여 환율 비율값을 리턴하는 기능 가지고 있습니다.

국가 코드는 ISO 국가 코드 알파-3을 사용하고 있으며 모든 국가 코드는 아래 링크에서 자세히 조회 할 수 있습니다.
(ISO 국가 코드 (위키백과) - https://ko.wikipedia.org/wiki/ISO_3166-1)
이중에서 환율 계산에 필요한 국가 코드는 한국 : KRW, 일본 : JPY, 미국 : USD, 유럽 : EUR, 중국 : CHY 입니다.

만약에 원화를 미화로 바꾸는 비율을 알고 싶으면 FromCurrency에는 KRW, ToCurrency에는 USD를 넣으시면 됩니다.


ⅱ텍스트 박스 컨트롤

- 텍스트 박스는 총 5개가 있으며 각국 화폐의 액수를 입력받고 출력하는 곳입니다
  따라서 숫자만 입력 받도록 되어야 하며, 구분이 쉽도록 천 단위 마다 콤마(,) 표시를 해야 합니다 그리고 소수점 2자리 까지 표현하도록 하겠습니다.

1
2
3
4
5
6
7
8
//숫자 입력
private void tbWon_KeyPress(object sender, KeyPressEventArgs e)
{
    if (!(char.IsDigit(e.KeyChar) || e.KeyChar == Convert.ToChar(Keys.Back)))
    {
    e.Handled = true;
    }
}
텍스트 박스의 KeyPress 이벤트를 받은 후 사용자에게 숫자만 입력 받도록 문제를 제한 했습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//콤마
private void tbWon_TextChanged(object sender, EventArgs e)
{
    if (!boolWon)
    {
    string strText = this.tbWon.Text;
    if (strText != "")
    {
        string lgsText;
        lgsText = tbWon.Text.Replace(",", ""); //** 숫자변환시 콤마로 발생하는 에러방지...
        tbWon.Text = String.Format("{0:#,##0.##}", Convert.ToDouble(lgsText));
        tbWon.SelectionStart = tbWon.TextLength; //** 캐럿을 맨 뒤로 보낸다...
        tbWon.SelectionLength = 0;
        calExchangeWon();
    }
    }
    else
    {
    boolWon = false;
    }
}
텍스트 박스의 TextChanged 이벤트를 받은 후 텍스트의 숫자가 변경될때 마다 천단위 콤마를 찍어 주도록 설정 했습니다.


5. 결과

- 위 기능들을 참조하여 만든 환율 계산기는 다음과 같습니다

완성된 환율 계산기 실행 영상 입니다

환율 계산기 실행 파일도 올렸습니다 - 실행파일 다운

환율 계산기 전체 소스코드는 매우 길어져서 디자인 파일과 함께 올렸습니다
환율 계산기 소스코드 다운 - 소스코드 다운로드


6. 후기

- 처음엔 혼자 필요할때 사용할 목적으로 만든거기 때문에 에비츄 짤들을 가져와 사용하였습니다. 문제가 된다면 소스코드랑 실행파일 링크는 삭제하도록 하겠습니다.

- 지금 환율 계산기는 인터넷이 연결되지 않은 환경에서 실행될 경우 환율 정보를 초기값으로 사용하도록 되어 있습니다 좀 더 공을 들인다면 환율 정보를 받을때마다 내문서 폴더 같은 곳에 환율 정보를 백업해두는 기능을 추가하는걸 생각해 볼 수 있겠습니다

- 비주얼스튜디오를 통한 결과물이라서 윈도우 전용이지만 리눅스에서 와인(WINE)을 설치한 뒤 실제로 실행해본 결과 애비츄 짤들 색상이 이상해진거 외엔 문제없이 실행됩니다.

부족한글 봐주셔서 감사합니다 오타와 잘못된 내용, 질문들은 언제나 환영입니다 ^^

Share:

2017년 9월 17일 일요일

재미있는 자료 3탄!



꼰대 인증





아름다운 우정


^.^


걷질 말아라


혼돈의 집안


장르 : 호러


미개한 외국에선 귀찮게 사용자들이 하지만

우리나라는 자동으로 해준다



거점 점령







능동형 사냥법
Share:

2017년 9월 16일 토요일

재미있는 자료 2탄! (헬스장 트레이너 호출하는 방법)


트레이너의 지도를 받지 못하면 이렇게 운동하시면 됩니다

Share:

구글 블로그 카테고리 적용하기 (Blogger Category, 접기기능)


(완성하여 현재 블로그에 적용중인 카테고리)

구글 블로그를 꾸며 나가는데 처음 만난 장벽은 카테고리 기능이였습니다

항상 블로그를 운영할땐 카테고리 메뉴를 기본으로 블로그 목적이나 내용들을 채워나갔었던 경험이 있어서 그런지 카테고리가 없는 메인 화면을 보면 답답함을 느꼈습니다

안타깝게도 구글 블로그는 기본적으로 카테고리 기능만을 담당하는 가젯을 제공하지 않습니다 제가 검색하여 본 다른 구글 블로그의 카테고리들도 전부 운영자가 스크립트를 넣어 만든 커스텀이거나 유료로 제공된 가젯들이었습니다

구글 블로그의 포스트들은 태그들을 달게 하여 태그를 기준으로 검색이나 관리 기능을 제공하고 있으며 기본 가젯 중에선 이러한 기능을 이용한 태그 리스트를 계시하고 포스트를 조회해주는 가젯이 있습니다

이러한 태그 기능을 이용하여 카레고리 메뉴를 구현하도록 하겠습니다


카테고리 기능을 표현할 가젯을 추가하기 위하여 HTML/JavaScript 가젯을 추가합니다


추가한 가젯을 원하는 곳에 위치 시킵니다


가젯의 이름을 달아줍니다


1
2
3
4
5
<div id='category' class='Kanadel1'>
   <li class='cate'>
      <a id='cate-all' href='/search/label/?'>All </a>
   </li>
</div>
가젯 내용에 들어갈 HTML 소스 입니다
<div>태그 하나로 이루어져 있으며 <li>태그를 통해 한 목록씩 작성합니다
앵커 태그는 모든 포스트 조회 화면으로 링크되었습니다
위의 소스를 내용에 적용을 하면 다음과 같은 결과가 나옵니다


카테고리 가장 큰 범주인 All이 만들어졌습니다



All 범주를 클릭하면 다음과 같이 모든 포스트들의 게시 시간 순으로 나열된 결과를 볼 수 있습니다
같은 방법으로 두번째 범주인 IT 이야기를 만들어 보겠습니다


1
2
3
4
5
6
7
8
<div id='category' class='Kanadel1'>
   <li class='cate'>
      <a id='cate-all' href='/search/label/?'>All </a>
   </li>
   <li class='cate'>
      <a id='category-IT' href='/search/label/IT 이야기?'>IT 이야기 </a>
   </li>
</div>
All과 마찬가지로 <li>태그 추가하였으며 앵커 태그는 All과는 다르게 'IT 이야기' 태그가 있는 포스트만 조회하도록 하였습니다
위의 소스를 내용에 적용을 하면 다음과 같은 결과가 나옵니다


All 다음으로 IT이야기란 범주가 생성 되었습니다
클릭하면 포스트 중에 'IT 이야기'란 태그만 있는 포스트들의 게시 시간 순으로 나열된 결과를 볼 수 있습니다
이런 방법으로 1차 범주들은 만들어 나갈수 있습니다
이번엔 IT 이야기 범주에 소속된 2차 범주들을 만들어 보겠습니다


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id='category' class='Kanadel1'>
   <li class='cate'>
      <a id='cate-all' href='/search/label/?'>All </a>
   </li>
   <li class='cate'>
      <a id='category-IT' href='/search/label/IT 이야기?'>IT 이야기 </a>
         <ul>
               <li><a id='deta-101' href="/search/label/C#?">C# </a></li>
               <li><a id='deta-102' href="/search/label/Java?">Java </a></li>
               <li><a id='deta-103' href="/search/label/Python?">Python </a></li>
               <li><a id='deta-104' href="/search/label/Windows?">Windows </a></li>
               <li><a id='deta-105' href="/search/label/Linux?">Linux </a></li>
               <li><a id='deta-106' href="/search/label/IT미분류?">기타 </a></li>
        </ul>
   </li>
</div>
IT 이야기 <li>태그 안에 새로운 <ul>태그를 통해 공간을 내어 2차 범주를 생성하였습니다
2차 범주들은 1차 범주와 똑같은 <li>태그로 작성되었습니다
위의 소스를 내용에 적용을 하면 다음과 같은 결과가 나옵니다


2차 범주들 위치가 좀 엉망이지만 이렇게 2차 범주들이 생성되었습니다
2차 범주들은 스타일을 통해 간격을 주거나 &nbsp;를 통해 강제 간격을 줌으로 해결할 수 있습니다
2차 범주들도 마찬가지로 클릭하면 각각의 태그들을 가진 포스트들만 조회된 결과를 보실수 있습니다
위 두가지 만으로 카테고리 기본은 완성되지만 이정도면 정렬된 태그 가젯 수준 정도로 보일 정도로 허전하죠


이번엔 위와 같이 하위 범위를 숨기고 보여주는 토글 버튼 기능과 범주에 속한 포스트 갯수를 표시하는 기능을 추가해보도록 하겠습니다


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
<div id='category' class='Kanadel1'>
   <li class='cate'>
      <a id='cate-all' href='/search/label/?'>All </a>
   </li>
   <li class='cate'>
      <a id='category-IT' href='/search/label/IT 이야기?'>IT 이야기 </a>
          <ul>
           <li></li>
           <li><a id='deta-101' href="/search/label/C#?">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;C# </a></li>
               <li><a id='deta-102' href="/search/label/Java?">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Java </a></li>
               <li><a id='deta-103' href="/search/label/Python?">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Python </a></li>
               <li><a id='deta-104' href="/search/label/Windows?">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Windows </a></li>
               <li><a id='deta-105' href="/search/label/Linux?">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Linux </a></li>
               <li><a id='deta-106' href="/search/label/IT미분류?">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;기타 </a></li>
        </ul>
   </li>
<script>
function Category(id, label, name)
{
  this.a = document.getElementById(id);
  this.label = label;
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.charset = 'utf-8';
  script.src = home + '/feeds/posts/summary/-/' + label + '?&alt=json-in-script&callback=' + name +'.pong';
  document.getElementsByTagName('head')[0].appendChild(script);
  
  this.pong = function(cfeed){
   var cnt = cfeed.feed.openSearch$totalResults.$t;
   this.a.innerHTML = this.a.innerHTML + '(' + cnt + ')';
  };
}
var home = 'https://kinanadel.blogspot.com';
var cate1 = new Category('category-IT','IT 이야기','cate1');
var deta101 = new Category('deta-101','C#','deta101');
var deta102 = new Category('deta-102','Java','deta102');
var deta103 = new Category('deta-103','Python','deta103');
var deta104 = new Category('deta-104','Windows','deta104');
var deta105 = new Category('deta-105','Linux','deta105');
var deta106 = new Category('deta-106','IT미분류','deta106');
</script>
</div>
범주에 속한 포스트 갯수를 표현한 기능을 추가한 소스 입니다
HTML 태그쪽은 그대로이며 아래 스크립트가 추가되었습니다
Category 함수는 블로그에 해당 태그가 있는 포스트 갯수를 구하여 표시해주는 기능을 가지고 있습니다 해당 함수를 사용하는 방법은 위 소스와 같이 하시면 됩니다
위 소스를 적용한 결과는 다음과 같습니다


포스트 갯수가 이쁘게 표현되었습니다


❃제가 전체 포스트 갯수 표현하는 과정을 빼먹어서 추가합니다
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
function TotalPostCnt(id, label, name)
{
  this.a = document.getElementById(id);
  this.label = label;
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.charset = 'utf-8';
  script.src = home + '/feeds/posts/summary/?&alt=json-in-script&callback=' + name +'.pong';
  document.getElementsByTagName('head')[0].appendChild(script);
  
  this.pong = function(cfeed){
   var cnt = cfeed.feed.openSearch$totalResults.$t;
   this.a.innerHTML = this.a.innerHTML + '(' + cnt + ')';
  };
}
var postAll = new TotalPostCnt('cate-all','All','postAll');
</script>
스크립트에 다음과 같은 함수를 추가합니다
기능은 기존의 Category 함수 기능가 거의 같습니다만 특정 태그로 검색하는 기존과 달리 블로그내 모든 포스트 갯수는 구하는 걸로 변경된 함수 입니다


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id='category' class='Kanadel1'>
   <li class='cate'>
      <a id='cate-all' href='/search/label/?'>All </a>
   </li>
   <li class='cate'>
      <a id='category-IT' href='/search/label/IT 이야기?'>IT 이야기 </a>
      <a href='javascript:void(0)' onclick="this.innerHTML=(this.nextSibling.style.display=='none')?'▲':'▼';this.nextSibling.style.display=(this.nextSibling.style.display=='none')?'block':'none'";></a><div style='display:none'>
            <ul>
           <li></li>
           <li><a id='deta-101' href="/search/label/C#?">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;C# </a></li>
               <li><a id='deta-102' href="/search/label/Java?">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Java </a></li>
               <li><a id='deta-103' href="/search/label/Python?">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Python </a></li>
               <li><a id='deta-104' href="/search/label/Windows?">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Windows </a></li>
               <li><a id='deta-105' href="/search/label/Linux?">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Linux </a></li>
               <li><a id='deta-106' href="/search/label/IT미분류?">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;기타 </a></li>
            </ul>
         </div>
   </li>
</div>
하위 범주를 보여주고 숨기는 기능이 있는 토글 버튼을 추가한 상태 입니다
1차 범주인 IT 이야기 다음에 앵커를 추가하였으며 해당 앵커는 뒤에 오는 <div>태그의 디스플레이 스타일을 변경시킴으로 보여주고 숨기는 기능을 표현하였습니다
위 소스를 적용한 결과는 다음과 같습니다


'▲'와 '▼' 문자모양의 버튼으로 하위 범주 숨김 기능이 구현되었습니다
이제 이 두가지 기능을 모두 합치면 카테고리 소스가 완성됩니다


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
<div id='category' class='Kana1'>
   <li class='cate'>
      <a id='cate-all' href='https://kinanadel.blogspot.kr'>All </a>
   </li>
   <li class='cate'>
      <a id='category-IT' href='/search/label/IT 이야기?'>IT 이야기 </a>
      <a href='javascript:void(0)' onclick="this.innerHTML=(this.nextSibling.style.display=='none')?'▲':'▼';this.nextSibling.style.display=(this.nextSibling.style.display=='none')?'block':'none'";></a><div style='display:none'>
            <ul>
           <li></li>
           <li><a id='deta-101' href="/search/label/C#?">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;C# </a></li>
               <li><a id='deta-102' href="/search/label/Java?">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Java </a></li>
               <li><a id='deta-103' href="/search/label/Python?">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Python </a></li>
               <li><a id='deta-104' href="/search/label/Windows?">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Windows </a></li>
               <li><a id='deta-105' href="/search/label/Linux?">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Linux </a></li>
               <li><a id='deta-106' href="/search/label/IT미분류?">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;기타 </a></li>
            </ul>
         </div>
   </li>
<script>
function Category(id, label, name)
{
  this.a = document.getElementById(id);
  this.label = label;
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.charset = 'utf-8';
  script.src = home + '/feeds/posts/summary/-/' + label + '?&alt=json-in-script&callback=' + name +'.pong';
  document.getElementsByTagName('head')[0].appendChild(script);
  
  this.pong = function(cfeed){
   var cnt = cfeed.feed.openSearch$totalResults.$t;
   this.a.innerHTML = this.a.innerHTML + '(' + cnt + ')';
  };
}
function TotalPostCnt(id, label, name)
{
  this.a = document.getElementById(id);
  this.label = label;
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.charset = 'utf-8';
  script.src = home + '/feeds/posts/summary/?&alt=json-in-script&callback=' + name +'.pong';
  document.getElementsByTagName('head')[0].appendChild(script);
  
  this.pong = function(cfeed){
   var cnt = cfeed.feed.openSearch$totalResults.$t;
   this.a.innerHTML = this.a.innerHTML + '(' + cnt + ')';
  };
}
var home = 'https://kinanadel.blogspot.com';
var postAll = new TotalPostCnt('cate-all','All','postAll');
var cate1 = new Category('category-IT','IT 이야기','cate1');
var deta101 = new Category('deta-101','C#','deta101');
var deta102 = new Category('deta-102','Java','deta102');
var deta103 = new Category('deta-103','Python','deta103');
var deta104 = new Category('deta-104','Windows','deta104');
var deta105 = new Category('deta-105','Linux','deta105');
var deta106 = new Category('deta-106','IT미분류','deta106');
</script>
</div>
이제 카테고리 기능 구현은 모두 완료 되었으며 태그 사용법만 남았네요

구현한 카테고리 가젯을 활용하기 위해선 모든 포스트들은 작성시 알맞은 태그를 달아야 하며 겹치지 않아야 합니다.

해당 포스트를 예로 들면 저는 이 포스트를 'IT 이야기'란 1차 범주안에 '기타'란 2차 범주에 소속 시키고자 합니다 그러면 해당 포스트는 다음과 같은 태그를 달아줘야 합니다

(1차 범주인 'IT 이야기'를 추가했고 2차 범주인 'IT미분류'를 추가했습니다)

이로써 구글 블로그 카테고리 가젯 구현은 완료되었습니다 ^^

유료 템플릿에서 제공하는 유료 가젯들도 아마 이렇게 카테고리 구현하지 않았을까요?..

구현은 했지만 추후 카테고리 변경을 해야할 경우 HTML 태그들과 스크립트를 수정해야 하는 어마어마한 불편함이 남아 있습니다

대신 시간과 공을 들인다면 상상할수있는 모든 기능들을 추가할 수 있다는 장점은 있겠습니다.

물론 저도 스타일 찾아 변경하는데 부담을 느껴 뛰어쓰기나 &nbsp;를 통한 땜빵을 했습니다

이번 포스트는 여기서 마치겠습니다

오타나 잘못된 내용, 질문은 항상 확인하니 언제든 남겨 주세요 ^^

읽어 주셔서 감사합니다 😊

Share: