KnockKnock

최근 살이 너무 많이 쪄서, 운동을 해야겠다고 생각을 했다.

하지만 퇴근하면 8~9시가 되고, 조금만 밍기적 거리면 잘 시간이 되어 운동할 시간이 없었다.

운동을 찾아보니 Plank 운동이라고, 하루에 몇분만 투자하면 살이 쏙 빠진다는 홈쇼핑적 글들을 많이 보았다.

내가 해야 할 운동이다 생각하고 실제로 좀 따라해봤다.

.... 생각보다 너무 힘들었다.

포기할까 싶었는데, 조금씩 시간을 나눠서 횟수와 시간을 늘려나가면 된다는 말에 운동 방법을 그렇게 해보기로 했다.

하지만, 항상 공부하기 전에는 책상 정리를 하듯이, 나에게 맞는 앱을 검색해도 너무 많은 기능들이 있길래 그냥 내가 만들기로 했다.

가장 쉽고 빠르게 만들 수 있는 것은 당연히 웹이고, 그걸 더 빠르게 만들기 위해서 Bootstrap을 활용해서 UI를 구성했다.

우선 Plank운동의 횟수와 각각의 lab time을 체크하기로 했다.

Start 버튼과 Pause 버튼은 toggle이 되어야 하고, Reset 버튼도 추가했다.

각각의 기록들은 누적되어 쌓이고, 개별 item별로 삭제도 가능하여야 한다.

이러한 기준으로 HTML, JS, CSS 파일 3개로 구성했으며, 소스는 아래와 같다.

Bootstrap을 사용해보는 것이 목적이었기 때문에, JS는 웹에서 검색하여 여러가지 중, 적당한 것으로 사용했다.

plankRecord.html

-주석 처리한 부분은 나중에 추가로 개발할 수도 있어서 UI만 추가했었던 부분이다.

-사용자 로그인, 그리고 데이터 저장을 위한 부분이다. (나중에 책상정리가 더 필요하면 개발 예정)

<title>Plank</title>

function saveRecord() {

var recordlist = [];

// loop trough the li
		$("ul.list-group > li").each(function() {
			//push element data to the array
			recordlist.push({
				"userId" : "tempId",
				"seq" : $(this).attr('id'),
				"time" : $(this).attr('value')
			});
		});
/* 		$.ajax({
			type : "POST",
			url : "/user",
			data : recordlist,
			success : function(jsonResult) {
				$('#userResult').val(jsonResult.USER_NAME);
			}
		}); */
	}
</script>

</head>

</div>

stopwatch.js

-해당 소스는 http://jsfiddle.net/rdesai/8qmyg/15/ 에서 참조하였으며, 일정 부분 수정하였음

$(function() {
    
    var hours = minutes = seconds = milliseconds = 0;
    var prev_hours = prev_minutes = prev_seconds = prev_milliseconds = undefined;
    var timeUpdate;
	
    // Start/Pause/Resume button onClick
    $("#start_pause_resume").click(function(){
        // Start button
        if($(this).hasClass("start")){  // check button label      	
        	$(this).attr("class","pause glyphicon glyphicon-pause h100");
            updateTime(0,0,0,0);
        }
		// Pause button
        else if($(this).hasClass("pause")){
        	$("#record").prepend("<li id='recordNo"+timeUpdate+"' value='"+minutes+":"+seconds+":"+milliseconds+ " '"+
        			"class='list-group-item'> #"+ timeUpdate +"    <span class='glyphicon glyphicon-time'></span>  " + minutes+ " : " + seconds+" : "+milliseconds+ "" +
        			"<span class='glyphicon glyphicon-remove pull-right ' onclick='removeSelf("+timeUpdate+")'></span></li>");
        	$(this).attr("class","start glyphicon glyphicon-play h100");
        	
            clearInterval(timeUpdate);
            
        }

});
    
    // Reset button onClick
    $("#reset").click(function(){
        if(timeUpdate) clearInterval(timeUpdate);
        setStopwatch(0,0,0,0);
      
    });
    
    // Update time in stopwatch periodically - every 25ms
    function updateTime(prev_hours, prev_minutes, prev_seconds, prev_milliseconds){
        var startTime = new Date();    // fetch current time
        
        timeUpdate = setInterval(function () {
            // calculate the time elapsed in milliseconds
            var timeElapsed = new Date().getTime() - startTime.getTime();

// calculate hours                
            hours = parseInt(timeElapsed / 1000 / 60 / 60) + prev_hours;
            
            // calculate minutes
            minutes = parseInt(timeElapsed / 1000 / 60) + prev_minutes;
            if (minutes > 60) minutes %= 60;
            
            // calculate seconds
            seconds = parseInt(timeElapsed / 1000) + prev_seconds;
            if (seconds > 60) seconds %= 60;
            
            // calculate milliseconds 
            milliseconds = timeElapsed + prev_milliseconds;
            if (milliseconds > 1000) milliseconds %= 1000;
            
            // set the stopwatch
            setStopwatch(hours, minutes, seconds, milliseconds);
            
        }, 25); // update time in stopwatch after every 25ms
        
    }
    
    // Set the time in stopwatch
    function setStopwatch(hours, minutes, seconds, milliseconds){
        /*$("#hours").html(prependZero(hours, 2));*/
        $("#minutes").html(prependZero(minutes, 2));
        $("#seconds").html(prependZero(seconds, 2));
        $("#milliseconds").html(prependZero(milliseconds, 2));
    }
    
    // Prepend zeros to the digits in stopwatch
    function prependZero(time, length) {
        time = new String(time);    // stringify time
        return new Array(Math.max(length - time.length + 1, 0)).join("0") + time;
    }
});

custom.css

전체 소스 :

plankRecord.zip

저작자표시 비영리 동일조건

'IT > Programming' 카테고리의 다른 글

MariaDB에서 쿼리를 이용한 파일 생성 (0)	2016.12.18
MariaDB의 EventScheduler 사용 (0)	2016.12.08
일정 주기마다 백업 테이블 생성/삭제 Procedure (0)	2016.12.08
MariaDB에서 StoredProcedure를 활용한 암호화 인증 (0)	2016.11.25
MariaDB를 활용한 암호화 (0)	2016.11.23

TensorFlow를 스터디하면서 뭔가 응용을 해보고 싶은 마음에 주가 예측을 시도해봤다.

지금부터 기술할 내용은 단순히 응용을 해보고 싶었던 것일 뿐이므로, 실제 데이터 예측에는 도움이 되지 않음을 미리 알려둔다.

* TensorFlow 강의는 홍콩 과기대의 김성훈 교수님의 것을 들었으며, 아래 코드 또한 강의에서 참조한 것이다.

( https://www.youtube.com/watch?v=BS6O0zOGX4E&list=PLlMkM4tgfjnLSOjrEJN31gZATbcj_MpUm )

1. 데이터 준비

주가 등락 예측을 위해서 필요한 데이터들은 아래에서 가져올 수 있다.

http://stats.krx.co.kr

이번에 사용된 데이터는 2014년 12월 10일 ~ 2015년 9월 10일 까지의 KOSPI Index 이다.

Feed data는 총 8개의 항목이며, 이 중 1개는 bias를 없애기 위한 column이다.

X0 : bias

X1: 전일 종가 대비 금일 종가 등락률

X2: 금일 시가 대비 금일 종가 등락률

X3: 금일 고가 대비 금일 종가 등락률

X4: 금일 저가 대비 금일 종가 등락률

X5: 전일 대비 5일 평균 종가 등락률

X6: 전일 대비 30일 평균 종가 등락률

X7: 전일 대비 60일 평균 종가 등락률

이렇게 Feed data를 정한 것은 큰 의미가 없고, krx에서 제공하는 데이터 기준이다.

목표가 등락 예측이었기 때문에 결과값은 + 또는 - 두가지 경우이다.

따라서 Label에 해당하는 Y 항목은 2개이다

Y1: 금일 종가 대비 내일 종가 상승 ( + )

Y2: 금일 종가 대비 내일 종가 하락 ( - )

(X 값에 1000을 곱해서 데이터를 만들었다.)

2015data.csv

2. Python Coding

앞에서 말한바와 같이, 김성훈 교수님의 강의에서 참조했기 때문에, 코드 수정이 거의 없었다.

코드는 다음과 같다.

3, 결과

Cost : 0.66944

총 20만번 반복하였으며, 반복 횟수가 8만번 이상이 되니 Cost의 변화가 없었다.

정확성을 생각하기보다는 한번 테스트를 해본다는 의미가 컸기 때문에, 이정도로도 만족을 한다.

다만, 정확도는 대략 55% ~ 65% 정도로 큰 의미없는 결과를 확인할 수 있었다.

저작자표시 비영리 동일조건

보통 iOS 앱은 Appstore에서 다운로드 받는다.

그런데, 기업에서 사용하기 위한 용도로 Enterprise Program에 가입하여 iOS 앱을 만들고, 배포한다.

iOS 앱을 빌드하는 것은 인증서의 차이이므로 크게 어려울 것은 없으나,

Enterprise Program의 앱을 배포하는 것에는 차이가 있다.

바로 웹을 통한 ipa 파일 다운로드이다.

이를 위해서는 3가지가 준비되어야 한다. (html 파일도 필요한데, 아래에서 확인!)

1. iOS앱을 배포할 수 있는 SSL 인증서 + 인증서가 적용된 웹서버

2. 신규로 Build된 iOS의 ipa 파일

3. 신규 Build된 iOS의 ipa파일에 맞는 plist 파일

ipa 파일과 plist 파일은 iOS 앱을 빌드하게 되면 생성되는 파일이다.

그런데 이 두개의 파일은 SSL 환경에서만 배포가 가능하다.

(SSL 인증서 중, iOS 앱을 다운받지 못하는 인증서가 있으니, 미리 확인이 필요하다.)

위의 3가지가 준비되었으면,

우선, .ipa 파일과 .plist 파일을 웹서버에 업로드한다.

(ex. https://www.chohyunsu.com/iosPub/target_ios.plist)

(ex. https://www.chohyunsu.com/iosPub/target_ios.ipa)

그리고 .plist 파일에서 ipa 파일의 위치를 수정한다.

.pist 파일 수정이 완료되었으면, 또다시 plist 파일을 가리키는 html 파일을 생성하고, 아래의 script를 삽입하고, body의 onload시에 호출한다.

( 사용자 → .html → .plist → .ipa 의 순서로 호출하는 방식이다.)

이때, html 파일의 위치는 plist와 ipa 파일의 SSL 웹서버에 위치하지 않아도 된다.

즉, plist와 ipa 파일만 SSL 웹서버에 있으면 http 파일은 다른 도메인이어도 문제가 없다.

(관리를 위해서 같은 위치에 있는 것도 나쁘진 않다)

이제 iOS Enterprise Program에서의 앱 배포 준비는 모두 끝났다.

iPhone이나 iPad에서 방금 만들었던 html 의 주소로 입력하게 되면 앱 설치를 물어본다.

설치하겠냐는 것에 승인을 클릭하면 앱 설치가 시작된다.

(html 화면이 자동적으로 닫히진 않으므로, 홈 버튼으로 바탕화면을 확인하면 된다.)

* plist 파일로 바로 접근해서 다운로드 받으면 편할텐데, 지금은 html 파일로 접근하는 방법밖에 모르겠다.

* iOS 9.0 이상 버전의 기기에서는 html로 앱 다운로드 후, 설정→일반→기기관리 에서 승인을 해줘야 한다.

( https://support.apple.com/ko-kr/HT204460 )

저작자표시 비영리 동일조건

'IT > Environment' 카테고리의 다른 글

Eclipse에 Gradle+Springboot 환경 구축하기 (0)	2017.05.30
Portable JDK를 이용한 Tomcat8의 JDK 수동 설정 (Windows) (0)	2017.02.07
Portable JDK 생성하기 (0)	2017.01.18
iOS의 VPP와 Enterprise Program 비교 (1)	2016.10.20
사설 IP 대역에서 SSL 적용하기 (0)	2016.10.05

KnockKnock

Bootstrap 활용한 Stopwatch 예제 (Plank 운동을 위하여)

'IT > Programming' 카테고리의 다른 글

TensorFlow를 활용한 주가(KOSPI) 등락 예측

1. 데이터 준비

2. Python Coding

3, 결과

iOS Enterprise Program에서의 앱 배포

'IT > Environment' 카테고리의 다른 글

+ Recent posts

티스토리툴바