MobileApp/통합2015. 2. 1. 16:16

ionicframework 설치


참고 공식 홈페이지

 - http://ionicframework.com/getting-started/


1. node.js 설치 npm 필요

  다운로드 설치 : http://nodejs.org/


2. npm 실행 확인

C:\Users>npm -v 1.4.28

※ 실행 안될 경우 시스템속성->환경변수->시스템변수->PATH 에 추가함


3. cordova 설치

C:\Users>npm install -g cordova
C:\Users\admin\AppData\Roaming\npm\cordova -> 
C:\Users\admin\AppData\Roaming\npm\node_modules\cordova\bin\cordova
cordova@4.2.0 C:\Users\admin\AppData\Roaming\npm\node_modules\cordova


4. ionic 설치

C:\Users>npm install -g ionic
C:\Users\admin\AppData\Roaming\npm\ionic -> 
C:\Users\admin\AppData\Roaming\npm\node_modules\ionic\bin\ionic
ionic@1.3.3 C:\Users\admin\AppData\Roaming\npm\node_modules\ionic


5. ionic 실행해보기

C:\Users>ionic
  _             _
 (_)           (_)
  _  ___  _ __  _  ___
 | |/ _ \| '_ \| |/ __|
 | | (_) | | | | | (__
 |_|\___/|_| |_|_|\___|  CLI v1.3.3

Usage: ionic task args

=======================

※ 실행 안될 경우 npm 환경 변수 PATH 설정


6. 샘플 템플릿 프로젝트 시작

C:\Users>ionic start myApp tabs
Creating Ionic app in folder C:\Users\myApp based on tabs project
Downloading: https://github.com/driftyco/ionic-app-base/archive/master.zip
[=============================]  100%  0.0s
Downloading: https://github.com/driftyco/ionic-starter-tabs/archive/master.zip
[=============================]  100%  0.0s
Update config.xml
Initializing cordova project
Fetching plugin "org.apache.cordova.device" via plugin registry
Fetching plugin "org.apache.cordova.console" via plugin registry
Fetching plugin "com.ionic.keyboard" via plugin registry


7. 디렉토리 구조확인 www가 메인홈디렉토리, 해당안에 html / css /javascript 작업하면됨

C:\Users>cd myApp
C:\Users\myApp>dir
2015-02-01  오후 03:37    <DIR>          .
2015-02-01  오후 03:37    <DIR>          ..
2015-02-01  오후 03:37                29 .bowerrc
2015-02-01  오후 03:37               138 .gitignore
2015-02-01  오후 03:37               120 bower.json
2015-02-01  오후 03:37               798 config.xml
2015-02-01  오후 03:37             1,353 gulpfile.js
2015-02-01  오후 03:37    <DIR>          hooks
2015-02-01  오후 03:37                37 ionic.project
2015-02-01  오후 03:37               354 package.json
2015-02-01  오후 03:37    <DIR>          plugins
2015-02-01  오후 03:37    <DIR>          scss
2015-02-01  오후 03:37    <DIR>          www


8. 안드로이드 플랫폼 추가하기 확인하기

C:\Users\myApp>ionic platform add android
Running command: D:\nodejs\node.exe C:\Users\myApp\hooks\before_platform_add\ini
t_directories.js C:\Users\myApp
Creating android project...

C:\Users\myApp>dir
2015-02-01  오후 03:42    <DIR>          .
2015-02-01  오후 03:42    <DIR>          ..
2015-02-01  오후 03:37                29 .bowerrc
2015-02-01  오후 03:37               138 .gitignore
2015-02-01  오후 03:37               120 bower.json
2015-02-01  오후 03:37               798 config.xml
2015-02-01  오후 03:37             1,353 gulpfile.js
2015-02-01  오후 03:42    <DIR>          hooks
2015-02-01  오후 03:37                37 ionic.project
2015-02-01  오후 03:37               354 package.json
2015-02-01  오후 03:42    <DIR>          platforms
2015-02-01  오후 03:42    <DIR>          plugins
2015-02-01  오후 03:37    <DIR>          scss
2015-02-01  오후 03:37    <DIR>          www

C:\Users\myApp>cd platforms
C:\Users\myApp\platforms>dir
2015-02-01  오후 03:42    <DIR>          .
2015-02-01  오후 03:42    <DIR>          ..
2015-02-01  오후 03:42    <DIR>          android


9. 안드로이드 빌드 하기 

※ CordovaApp-debug.apk 확인

C:\Users\myApp>ionic build android
BUILD SUCCESSFUL
Total time: 43 seconds
Built the following apk(s):
    C:\Users\myApp\platforms\android\ant-build\CordovaApp-debug.apk

C:\Users\myApp>cd platforms\android\ant-build\
C:\Users\myApp\platforms\android\ant-build>dir
2015-02-01  오후 03:47    <DIR>          .
2015-02-01  오후 03:47    <DIR>          ..
2015-02-01  오후 03:47             1,266 AndroidManifest.cordova.xml
2015-02-01  오후 03:47               124 AndroidManifest.xml.d
2015-02-01  오후 03:47               189 build.prop
2015-02-01  오후 03:47    <DIR>          classes
2015-02-01  오후 03:47           404,956 classes.dex
2015-02-01  오후 03:47             1,327 classes.dex.d
2015-02-01  오후 03:47         3,404,475 CordovaApp-debug-unaligned.apk
2015-02-01  오후 03:47               267 CordovaApp-debug-unaligned.apk.d
2015-02-01  오후 03:47         3,404,491 CordovaApp-debug.apk
2015-02-01  오후 03:47         3,246,481 CordovaApp.ap_
2015-02-01  오후 03:47             6,287 CordovaApp.ap_.d
2015-02-01  오후 03:47    <DIR>          dexedLibs
2015-02-01  오후 03:47               115 proguard.txt
2015-02-01  오후 03:47               195 R.txt
2015-02-01  오후 03:47    <DIR>          res

10. 안드로이드 앱 실행해보기

 1) 에뮬레이터로 실행하기

C:\Users\myApp>ionic emulate android

  ※ 안드로이드 SDK 설치되어 있어야하며 AVD(Android Virtual Device) Manager 로 설정 되어있어야함   

    - http://developer.android.com/sdk/installing/index.html?pkg=tools


 2) USB 연결되어 있는 상태에서 스마트폰 개발자모드에서 바로 실행

C:\Users\myApp>ionic run android

 ※ 개발자모드 enable 

   설정 -> 스마트폰정보(태블릿정보) -> 빌드번호 여러번 클릭하면됨 메시지뜸(아래 링크참고)

  - http://www.greenbot.com/article/2457986/how-to-enable-developer-options-on-your-android-phone-or-tablet.html

  - http://www.androidcentral.com/how-enable-developer-settings-android-42

 ※ Google USB Driver selected 설치 되어있어야 하며 추가로 장치관리자에서 연결된 Android 기계 Driver 업데이트 해줘야됨

   - http://delphi.org/2014/01/custom-android-adb-usb/


 3) Apk파일 안드로이드에 넣어서 apk Install 로 설치해도됨


11. 웹소스 수정이로 인한 매번 빌드해서 디버깅하는 시간 단축하기 위해서 가상서버 실행

 ※ 브라우져로 http://localhost:8100 에서 확인가능

C:\Users\myApp>ionic serve
Running dev server: http://localhost:8100
Running live reload server: http://localhost:35729
Watching : [ 'www/**/*', '!www/lib/**/*' ]
Ionic server commands, enter:
  restart or r to restart the client app from the root
  goto or g and a url to have the app navigate to the given url
  consolelogs or c to enable/disable console log output
  serverlogs or s to enable/disable server log output
  quit or q to shutdown the server and exit


Posted by 시니^^
MobileApp/Android2015. 1. 31. 18:13

안드로이드 APK 파일 Decompile(디컴파일) 하고 소스 수정후 다시 컴파일(Compile) 하는 방법


1. APK-Manager 파일 다운로드

 - http://softdx.kr/60208948613


2. 압축을 풀면 place-apk-here-for-modding 라는 폴더가 존재함 해당 폴더안에 apk 파일을 넣는다


3. Script.bat파일 실행 상단에 Current-App 에 해당 apk 확인 또는 아닐 경우 22번 Set Cureent project에서 프로젝트 선택


4. 위에 Script.bat에서 9번 Decompile apk 입력해서 디컴파일 실행


5. 디컴파일 완료 후 아래 projects폴더에서 디컴파일된 폴더 내용 확인


6. 해당 디컴파일에서 필요한 부분 수정작업


7. 다시 Script.bat에서 11번 Compile apk 실행 / 최종 12번 Sign apk까지 실행함


8. 최종 signed Apk 결과 확인 후 해당 apk Install 하면됨 끝~!! 





Posted by 시니^^
SERVER/Etc2015. 1. 13. 11:05

iftop

 -  좀 오래되긴 한 툴인데 성능 테스트 할때 간단하게 네트워크로 들어오는 트래픽 실시간으로 체크하기 좋음



설치 방법은 Centos경우 간략하게 하면됨..
$ yum install iftop
왜만해서 저장소에 되어있을텐데 없으면 구글링하면 저장서 정보 많이 나옴

아니면 아래와 같이 소스 받아서 소스 설치 가능

$ sudo yum -y install ncurses-devel libpcap-devel $ wget http://www.ex-parrot.com/~pdw/iftop/download/iftop-0.17.tar.gz $ tar xvfvz iftop-0.17.tar.gz $ cd iftop-0.17 $ ./configure $ make $ make install


그리고 옵션 명령어로 네트워크 카드 인터페이스 별로 지정가능하다.
$ iftop -i eth0

추가적인 정보는 -h 옵션으로 확인 가능하다.
$ iftop -h 






Posted by 시니^^
Programming/JS/Jquery/Ajax2014. 10. 13. 10:55

브라우져에 데이터를 저장하는 할 수 있는 


IndexedDB / WebSQL / WebStorage에 대해서 보다 쉽게 사용할 수 있는 자바스크립트 라이브러리


공식사이트 : http://dev.yathit.com/ydn-db

Github : https://github.com/yathit/ydn-db

LICENSE : Apache License ( https://github.com/yathit/ydn-db/blob/master/LICENSE )


사용방법은 심플한 편인 듯하다.


var db = new ydn.db.Storage('db-name');
db.put('store-name', {message: 'Hello world!'}, 'id1');
db.get('store-name', 'id1').always(function(record) {
  console.log(record);
});


그리고 공식사이트를 보면 다양한 쿼리 방법으로도 사용 가능 하고


RESTful API를 활용해서 동기화하는 방법도 가능 하다

(기본적으로 다양한 클라우드 서비스 지원하는 듯하고 자제적으로 API를 만들어서 사용해도 가능 할것으로 생각된다)


http://dev.yathit.com/ydn-db/doc/sync/build-in.html


Synchronizing with YDN-DB

YDN-DB have build in synchronization support for AWS S3 (Amazon simple storage service), ATOM syndicate formatODataGData, GCS (Google cloud storage).



우선 내세우는 자세한 특정은 아래 정도인 듯한데  테스트를 해봐야 될 듯 하다.

- Multi-browser support

- Powerful query

- Database that Syncs

- Easy to debug

- High performance

- SQL support

- Custom build

- Full-text search


Posted by 시니^^
Programming/HTML/CSS2014. 9. 27. 16:14

canvas 이용 머리쪽은 세모 아래쪽은 네모 대각선 그리기


  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title> canvas 이용 화살표 있는 대각선 그리기</title>
  5. </head>
  6. <body>
  7. <div style="width:402px;height:402px;border:1px solid;">
  8. <div style="position:absolute;"><canvas id="lineDiv1" height="400" width="400"></canvas></div>
  9. </div>
  10. <script type="text/javascript">
  11. function ArrowLine(id){
  12. this.headSize=10;
  13. this.endSize=6;
  14. this.canvas=document.getElementById(id);
  15. this.ctx=this.canvas.getContext("2d");
  16. this.ctx.lineWidth=1;
  17. this.ctx.strokeStyle='blue';
  18. this.ctx.fillStyle='blue';
  19. // var gradient=this.ctx.createLinearGradient(0,0,170,0);
  20. // gradient.addColorStop("0","red");
  21. // gradient.addColorStop("0.5","magenta");
  22. // gradient.addColorStop("1.0","blue");
  23. // this.ctx.strokeStyle=gradient;
  24. // this.ctx.fillStyle=gradient;
  25. };
  26. ArrowLine.prototype.draw=function(x1,y1,x2,y2){
  27. // draw the line
  28. this.ctx.beginPath();
  29. this.ctx.moveTo(x1,y1);
  30. this.ctx.lineTo(x2,y2);
  31. this.ctx.stroke();
  32. var radians = Math.atan((y2-y1)/(x2-x1));
  33. //Head
  34. headRadians = radians + ((x2>x1)?-90:90)*Math.PI/180;
  35. this.drawhead(this.ctx,x1,y1,headRadians);
  36. //End
  37. endRadians = radians + ((x2>x1)?90:-90)*Math.PI/180;
  38. this.drawEnd(this.ctx,x2,y2,endRadians);
  39. };
  40. ArrowLine.prototype.drawhead=function(ctx,x,y,radians){
  41. ctx.save();
  42. ctx.beginPath();
  43. ctx.translate(x,y);
  44. ctx.rotate(radians);
  45. ctx.moveTo(0,0);
  46. ctx.lineTo(5,this.headSize);
  47. ctx.lineTo(-5,this.headSize);
  48. ctx.closePath();
  49. ctx.restore();
  50. ctx.fill();
  51. };
  52. ArrowLine.prototype.drawEnd=function(ctx,x,y,radians){
  53. ctx.save();
  54. ctx.beginPath();
  55. ctx.translate(x,y);
  56. ctx.rotate(radians);
  57. ctx.moveTo(0,0);
  58. ctx.lineTo(-this.endSize,0);
  59. ctx.lineTo(this.endSize,0);
  60. ctx.lineTo(this.endSize,-this.endSize);
  61. ctx.lineTo(-this.endSize,-this.endSize);
  62. ctx.lineTo(-this.endSize,0);
  63. ctx.closePath();
  64. ctx.restore();
  65. ctx.fill();
  66. };
  67. var ArrowLine=new ArrowLine("lineDiv1");
  68. ArrowLine.draw(45,90,250,275);
  69. </script>
  70. </body>
  71. </html>


원본 참고 자료

http://stackoverflow.com/questions/16025326/html-5-canvas-complete-arrowhead

http://jsfiddle.net/m1erickson/Sg7EZ/


Posted by 시니^^
Programming/HTML/CSS2014. 9. 26. 17:18

간단하게 프로트타입 웹앱 개발용


  1. <!-- 모바일용웹 -->
  2. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  3. <!-- 안드로이드 홈화면추가시 상단 주소창 제거 -->
  4. <meta name="mobile-web-app-capable" content="yes">
  5. <link rel="icon" href="/img/favicon.ico">
  6. <!-- ios홈화면추가시 상단 주소창 제거 -->
  7. <meta name="apple-mobile-web-app-capable" content="yes">
  8. <link rel="apple-touch-icon" href="/img/favicon.ico">



설명 잘되어있는 곳 링크

http://www.html5rocks.com/ko/mobile/fullscreen/


Posted by 시니^^
Programming/node.js2014. 9. 24. 12:21

1. Server 예시

  1. var io = require('socket.io').listen(8001);
  2. io.sockets.on('connection', function (socket){
  3. var room_id;
  4. socket.on('joinRoom',function(data){
  5. room_id = data;
  6. socket.join(room_id); //룸입장
  7. console.log('JOIN ROOM LIST', io.sockets.adapter.rooms);
  8. });
  9. socket.on('leaveRoom',function(){
  10. socket.leave(room_id);//룸퇴장
  11. console.log('OUT ROOM LIST', io.sockets.adapter.rooms);
  12. });
  13. socket.on('sendMsg',function(data){
  14. io.sockets.in(room_id).emit('msgAlert',data);//자신포함 전체 룸안의 유저
  15. //socket.broadcast.to(room_id).emit('msgAlert',data); //자신 제외 룸안의 유저
  16. //socket.in(room_id).emit('msgAlert',data); //broadcast 동일하게 가능 자신 제외 룸안의 유저
  17. //io.of('namespace').in(room_id).emit('msgAlert', data) //of 지정된 name space의 유저의 룸
  18. });
  19. socket.on('disconnect', function(){
  20. console.log('NOT USER DISCONNECT : ', socket.id);
  21. console.log('ROOM LIST', io.sockets.adapter.rooms);
  22. });
  23. /*
  24. * 룸리스트 콘솔로그
  25. * socket.io 1.x 에서 io.sockets.manager.rooms => io.sockets.adapter.rooms
  26. * ROOM LIST { qNADgg3CCxESDLm5AAAA: [ qNADgg3CCxESDLm5AAAA: true ],
  27. test_room:
  28. [ qNADgg3CCxESDLm5AAAA: true,
  29. '0rCX3v4pufWvQ6uwAAAB': true,
  30. 'iH0wJHGh-qKPRd2RAAAC': true ],
  31. '0rCX3v4pufWvQ6uwAAAB': [ '0rCX3v4pufWvQ6uwAAAB': true ],
  32. 'iH0wJHGh-qKPRd2RAAAC': [ 'iH0wJHGh-qKPRd2RAAAC': true ] }
  33. */
  34. });


2. Client

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <title>Insert title here</title>
  6. <script src="/js/jquery-1.11.1.min.js"></script>
  7. <script src="/js/socket.io.js"></script>
  8. </head>
  9. <body>
  10. </body>
  11. <script type="text/javascript">
  12. $(function(){
  13. var socket = io.connect('http://127.0.0.1:8001', {'forceNew':true,reconnection:false});
  14. socket.on('connect', function () {
  15. socket.emit('joinRoom','test_room');
  16. socket.on('msgAlert',function(data){
  17. alert(data);
  18. });
  19. });
  20. $('#leaveRoomBut').click(function(){
  21. socket.emit('leaveRoom');
  22. });
  23. $('#msgSendBut').click(function(){
  24. socket.emit('sendMsg','TEST_MSG');
  25. });
  26. });
  27. </script>
  28. <input id="leaveRoomBut" type="button" value="leaveRoom">
  29. <input id="msgSendBut" type="button" value="msgSend">
  30. </html>


Posted by 시니^^
Programming/node.js2014. 9. 20. 12:14

node.js는 싱글프로세스다 보니까 한개 데몬당 하나의 CPU 코어만 이용한다.


이걸 보완하고 위해서 클러스터를 이용한다.


자세한 api 설명은 아래 내용을 참고 하면 된다.

http://nodejs.org/api/cluster.html


1. 기본 샘플 사용 방법

  1. var cluster = require('cluster');
  2. var http = require('http');
  3. var numCPUs = require('os').cpus().length;
  4. if (cluster.isMaster) {
  5. //cpu갯수만큼 프로세스 실행
  6. for (var i = 0; i < numCPUs; i++) {
  7. cluster.fork();
  8. }
  9. cluster.on('exit', function(worker, code, signal) {
  10. console.log('worker ' + worker.process.pid + ' died');
  11. //서버가 죽었을시 프로세스 자동 추가 실행 또는 알아서 알람sms나 이메일등 모니터링 알람 처리
  12. cluster.fork();
  13. });
  14. } else {
  15. // Workers can share any TCP connection
  16. // In this case its a HTTP server
  17. http.createServer(function(req, res) {
  18. res.writeHead(200);
  19. res.end("hello world\n");
  20. }).listen(8001);
  21. console.log('PID ['+process.pid+'] HTTP SERVER');
  22. }


2. 프로세스 정보

$ node cluster.js PID [1571] HTTP SERVER PID [1573] HTTP SERVER PID [1574] HTTP SERVER PID [1575] HTTP SERVER $ ps aux | grep node root 1569 node cluster.js ### 클러스터 마스터node ###### root 1571 /data/nodejs/bin/node /data/nodejs/www/cluster.js root 1573 /data/nodejs/bin/node /data/nodejs/www/cluster.js root 1574 /data/nodejs/bin/node /data/nodejs/www/cluster.js root 1575 /data/nodejs/bin/node /data/nodejs/www/cluster.js


3. Kill 시 자동으로 프로세스 추가 실행됨

$ kill 1571
worker 1571 died
PID [1617] HTTP SERVER

$ ps aux | grep node
root      1569   node cluster.js
root      1573   /data/nodejs/bin/node /data/nodejs/www/cluster.js
root      1574   /data/nodejs/bin/node /data/nodejs/www/cluster.js
root      1575   /data/nodejs/bin/node /data/nodejs/www/cluster.js
root      1617   /data/nodejs/bin/node /data/nodejs/www/cluster.js


4. 추가적인 참고자료

Node JS 멀티코어 CPU 지원하기 - http://eclipse.or.kr/wiki/특집기사:Node_JS_멀티코어_CPU_지원하기

Cluster모듈에서 Socket.IO 사용하기 - http://blog.outsider.ne.kr/764




Posted by 시니^^
Programming/node.js2014. 9. 19. 11:53

출처 샘플 참고 사이트

http://www.hacksparrow.com/node-js-udp-server-and-client-example.html


1. UDP Server

  1. var PORT = 7001;
  2. var HOST = '127.0.0.1';
  3. var dgram = require('dgram');
  4. var server = dgram.createSocket('udp4');
  5. server.on('listening', function () {
  6. var address = server.address();
  7. console.log('UDP Server listening on ' + address.address + ":" + address.port);
  8. });
  9. server.on('message', function (message, remote) {
  10. console.log(remote.address + ':' + remote.port +' - ' + message);
  11. });
  12. server.bind(PORT, HOST);


2. UDP Client

  1. var PORT = 7001;
  2. var HOST = '127.0.0.1';
  3. var dgram = require('dgram');
  4. var message = new Buffer('TEST!');
  5. var client = dgram.createSocket('udp4');
  6. client.send(message, 0, message.length, PORT, HOST, function(err, bytes) {
  7. if (err) throw err;
  8. console.log('UDP message sent to ' + HOST +':'+ PORT);
  9. client.close();
  10. });


3. PHP UDP Client

  1. <?php
  2. $socket = socket_create(AF_INET, SOCK_DGRAM, SOL_UDP);
  3. $in = 'test!';
  4. var_dump (socket_sendto($socket, $in,strlen($in), 0,'127.0.0.1',7001));
  5. socket_close($socket);
  6. ?>


Posted by 시니^^
Programming/node.js2014. 9. 18. 19:14

1. http/ querystring만 사용


  1. var http = require('http')
  2. ,qs = require('querystring');
  3. http.createServer(function (req, res) {
  4. if( req.url == '/' && req.method == 'POST'){
  5. var postBody = '';
  6. req.on('data', function (data) {
  7. postBody += data;
  8. });
  9. req.on('end', function () {
  10. var post = qs.parse(postBody);
  11. //post데이터확인
  12. console.log(post['postname']);
  13. });
  14. res.end('true');
  15. }else{
  16. res.writeHead(404, {'Content-Type': 'text/plain'});
  17. res.end('404 ERROR');
  18. }
  19. }).listen(8001);


2. http / express  / body-parser 사용


  1. var express = require('express')
  2. ,http = require('http')
  3. ,bodyParser = require('body-parser');
  4. var app = express();
  5. app.use(bodyParser.urlencoded({extended: true}));
  6. //app.use(bodyParser.json());
  7. app.post("/", function( req, res){
  8. res.writeHead(200,{"Content-Type" : "text/plain"});
  9. //post데이터확인
  10. console.log(req.param('postname',null));
  11. res.end('test');
  12. });
  13. app.use(function( req, res){
  14. res.writeHead(404,{"Content-Type" : "text/plain"});
  15. res.end('404 ERROR');
  16. });
  17. http.createServer(app).listen(8001);


Posted by 시니^^