logo

Xamarin.Forms가 아쉬운 것이 여러가지 있지만, 디자인 결과를 보기 위해서 매번 컴파일 해야 한다는 것입니다. 그걸 해결해줄 녀석이 하나 있네요. 아직 베타버전이기는 하지만 고릴라 플레이어 입니다.


고릴라 플레이어 사이트

고릴라 플레이어 다운로드 페이지







이녀석을 사용하는 데 꽤나 애를 먹었습니다. 난독증이 있는지, 이해력이 떨어지는지... ㅠ,.ㅠ;; 한참 헤매다가 겨우 알아 먹었습니다.


사용방법


시뮬레이터에 고릴라 플레이어 설치


1. 고릴라 플레이어를 설치하면 "Gorilla Player by UXDivers" 창이 뜹니다. 없다면 트레이 아이콘에서 "Getting Started Walkthrough"를 선택하여 실행합니다.



2. 두번째 탭(2-Installing Gorilla Player on your devices)에서 [Opening Player.sln...](빨간색 버튼)을 선택하여 솔루션 소스를 오픈 합니다.


3. 소스가 로드 되었다면 그대로 다시 컴파일을 합니다. 그러면 시뮬레이터에 설치가 되겠죠?? Gorillar 라는 앱이 설치 됩니다.


이제 기본적인 준비는 끝났습니다. 저도 이제부터 어떻게 하는지 헤깔렸습니다.


작업 중인 프로젝트를 열거나 새로 프로젝트를 만들어서 Xamarin Studio를 실행합니다.


시뮬레이터에서 고릴라 플레이어 사용 방법


1. 도구 > Gorilla Player > Connect to Gorilla 를 선택합니다. 별다른 반응은 없습니다.


2. Xamarin.Forms 파일을 추가 합니다. 추가한 xaml 파일에서 오른쪽 버튼으로 메뉴를 오픈합니다. Stick Gorilla to this를 선택합니다.


3. 먼저 앱을 컴파일해서 시뮬레이터를 실행합니다. 이게 먼가 싶죠? 저도 여기서 헤맸습니다. 앱이 실행이 되면 앱을 종료합니다.


4. 시뮬레이터에서 조금 전에 설치한 Gorilla 앱을 실행합니다. 자동으로 현재 앱에 연결되어 선택된 페이지가 로딩됩니다.


5. 이제 xaml 파일을 수정하고 저장해 봅니다. 다른 파일도 추가해서 Stick Gorilla to this로 랜더링할 페이지를 변경해 봅니다.


잘 되나요? ^^


[추가]

아직 문제점은 있습니다.

페이지를 삽입하는 경우 인식을 못하고 오류를 냅니다. 예로들면 MasterDetailPage에서 master나 detail에 다른 페이지를 요청하면 오류가 납니다. 아주 붉게~

하지만 단일 페이피지 랜더링은 잘됩니다. 제가 아직 쪼랩이라서 그렇겠지요~!!


컴파일 시간이 보통 1분 이내로 끝나긴 하지만 디자인 하나를 보기 위해서 여러번 컴파일을 하다보면 시간적인 낭비가 상당합니다. 이부분에 있어서 높이 평가해 주고 싶네요~~ ^^


WRITTEN BY
비트센스
뷰파인더로 보는 프로그래머의 세상 페이스북 @bitsense 트위터 @picory 스카이프 picory MSN drawhalf@dreamwiz.com

트랙백  0 , 댓글  0개가 달렸습니다.
secret
logo

c#을 잘 모릅니다. 그래도 몇년 전에 사 놓은 책이 몇 권 책장을 차지하고 있네요. 안봐서 문제겠지만요. xamarin도 익히 들었지만 솔직히 잘 모릅니다. 모바일 개발에 적용해 보려고, 그동안 해보고 싶었지만 월 $25의 가격정책은 높은 벽으로 넘기 어렵웠습니다. "공부하려고 하는데 돈을 내야 하다니..." 게다가 이래 저래 치여서 살다보니 짬이 안나는 시간도 문제였습니다. 머... 다들 그러시잖아요?? ㅠ,.ㅠ;;

그러다 얼마 전 MS가 xamarin을 인수하고, 감사하게도 무료로 풀었다는 반가운 소리에, 다시 힘을 얻어서 이것 저것 만져 본지도 벌써 석달이 되어 갑니다. 공부할 짬을 낼 수 없는 현실이 문제라고 하소연을 해 보지만... 역시 아무 것도 모르는 초보자에게 새로운 언어와 툴은 장벽입니다.

게다가 영어로 된 가이드들은..., 분명 자기네들 끼리는 쉽다고 만든 거 같은데... 어렵게만 느껴지는 이 기분은... ㅠ,.ㅠ;; 꼭 무슨 시험보는 듯한... 어흑... xamarin 열풍?이라고 하는데, 정작 국내 사이트 중에서 xamarin 강좌를 본격적으로 하는 곳도 없고, 실제 번역본이나 한글 개발서적이 거의 전무한 상태다 보니 의지할 곳이 없어서 더 힘든 것 같습니다.

2016년 5월 9일 현재 인터넷 서점에는 Xamarin 관련 서적이 거의 없네요.

그래서 허접한 내용이라도 공유를 해보고자 합니다. 제가 먼가를 만드는 것은 어렵고, 그러니 가장 최근 xamarin 서적인 "Creating Mobile App With Xamarin.Forms"[링크]Xamarin 공식 Blog 사이트[링크]에 소개된 샘플 소스들을 중심으로 분석한 내용을, 혹시 저처럼 맨땅에 헤딩하는 듯한 느낌으로 검색창을 두드려 보는 초보자님에게 공유해 보려고 합니다. 제가 c#도, xamarin도 잘 모릅니다. 모바일 용어들은 더더군다나 모릅니다. 영어도.. 무지... 한.. 켁...

대부분은 구글과 네이버를 기초한 단어 직역?과 체험을 근거로한 추측성 멘트? (이런 거 같다. 내가 해보니 이렇드라..) 가 위주가 될 것입니다. 머 그게 불만이시라면, 정확한 용어를 알려 주세요. 마음을 다해 감사하겠습니다. ^^;; 여튼, 몇개 분석한 내용을 중심으로 해서 지속적으로 만들어 보도록 하겠습니다.

참고로 해당 내용은 되도록 개별적인 스터디 모임에서 활용하기 위한 내용이기도 합니다.

현재까지 분석된 내용에 대해서 말씀을 드리면

1. ZXing 모듈을 이용한 바코드 스캐너
2. Xamarin.Facebook을 이용한 페이스북 로그인
3. Json 파서를 활용한 데이터 바인딩
4. 기타 등등 디자인 관련 자질구레한 용어 및 몇가지 트러블 슈팅 ??

음... 머 한게 없네.. 이런... =_=;;


WRITTEN BY
비트센스
뷰파인더로 보는 프로그래머의 세상 페이스북 @bitsense 트위터 @picory 스카이프 picory MSN drawhalf@dreamwiz.com

트랙백  0 , 댓글  0개가 달렸습니다.
secret

My First Angular 2 App 만들기

[링크] Angularjs 2 샘플 소스 다운받기 (QuickStart)

샘플 소스를 따라 하면 마지막에 npm start 가 나옵니다. 이 소스는 특별히 문제가 없어 보이지만, 다음 Tutorial의 소스인 Tour of Heroes를 따라하다 보면 NodeJS 위에서는 정상동작을 하나, 실제 웹서비스에서는 오류가 나옵니다. 데이터를 제대로 읽지 못해서 그런 것으로 보입니다. 그래서 TypeScript를 사용하는 것은  NodeJS 서버 위에서 사용을 해야하는 건가? 하는 고민을 하기도 했습니다. 실은 제가 NodeJS 프로젝트는 WebStorm 에디터를 이용해서 하고 있어서, 툴에 대한 종속성 문제가 생기는 거라, 좀 헤깔렸습니다. NodeJS + AngularJS + TypeScript도 한번 고민해봐야 할 거 같습니다. ^^;;

여튼 지금은 NodeJS를 제외한 상태에서 확인을 하도록 하겠습니다. 저의 경우, 이전 페이지에서 말씀드린 바와 같이 테이블 2개 이상, 입력창 3개 정도에서 데이터를 페이지 갱신없이 동작을 시키지 위한 페이지를 만드려고 하는 것입니다. 이미 웹 어플은 php로 정해져 있기 때문에, 저에게 필요한 것은 html페이지 하에서 onload 이벤트에서 async 하게 동작하는 것이 더 좋습니다. NodeJS는 전혀 고려대상이 아닙니다.

#1. tsconfig.js 작성 후 .vscode/tasks.json 파일 자동 생성
     - tasks.json 파일로 TypeScript 컴파일러 설정까지 가능합니다.

#2. typings.json, package.json 작성 후 npm install로 node_modules, typings 폴더 이하 파일 자동 생성
     - typings.json은 TypeScript의 정의 파일들, package.json은 필요한 팩키지와 스크립트들을 정의한 파일입니다.

위 두 단계는 진행을 했을 거라고 생각을 합니다. 어렵나요? 저게 어렵다기 보다는 영어가 넘사벽이지 않을까 싶네요. ㅠ,.ㅠ;;

이제 첫번째 프로젝트인 "My First Angular 2 App" 만들기를 본격적으로 시작해 보겠습니다.

index.html

<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 모바일 가로, 세로 변경에 따른 대응 메타 태그 -->
    <link rel="stylesheet" href="styles.css">

    <!-- 1. Load libraries -->
    <!-- Polyfill(s) for older browsers -->

    <script src="node_modules/es6-shim/es6-shim.min.js"></script> //  es6의 필수 기능
    <script src="node_modules/zone.js/dist/zone.js"></script> // 구버전 대응 polyfill
    <script src="node_modules/reflect-metadata/Reflect.js"></script> // 구버전 대응 polyfill
    <script src="node_modules/systemjs/dist/system.src.js"></script> // 구버전 대응 polyfill

    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script> // systemjs library
    <script>
      System.import('app').catch(function(err){ console.error(err);  });
    </script>
  </head>

  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

[참고]
polyfill? 뿔? 최신이 아닌 오래된 버전의 브라우저에서 HTML5 API를 모방한 JS 라이브러리 등의 도움을 받아 정상 작동하도록 하는 대안으로 기능을 구현하는 행위를 의미 하다고 하네요. 

app/app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: '<h1>My First Angular 2 App</h1>'
})

export class AppComponent { }

모든 angular app은 AppComponent 로 이름지어진 최소 한 개 이상의 root component를 가지고 있습니다. 컴포넌트는 angular app의 기본 구성 블록? 입니다. 하나는 컴포넌트는 각 구성 템플릿을 통한 화면(뷰)의 부분(요소)들을 관리합니다. 샘플 소스의 컴포넌트는 index.html의 <my-app> 영역에  '<h1>My First Angular 2 App</h1>' 내용을 출력 할 겁니다. 잠시 구성 내용을 보겠습니다.

import : angular app의 모듈을 호출해서 객체? { 객체명 } (영문으로는 decorator) 으로 선언을 합니다. nodejs에서는 var express = require('express'); 이런 형태가 되지 않을까 싶습니다. 

decorator : js에서는 객체? 정도의 개념을 가지고 있을 것으로 보이는데, 번역이 어렵네요. import를 통해서 모듈을 참조한 객체를 활용합니다. 샘플에서는 { Component } 선언하여 '@angular/core' 모듈을 참조시킨 후 @Component로 사용하였습니다.

metadata : @Component decorator 이하 selector, template 가 포함된 { } 영역을 말합니다. 샘플 소스 처럼 모든 decorator는 metadata를 포함하고 있습니다. 해당 모듈 실행을 위한 초기값 정도로 생각하셔도 될 거 같습니다.

selector : jQuery 등을 사용하신 분이라면 익숙한 용어일 겁니다. HTML 태그명을 지칭하고 있네요. 샘플에서는 <my-app>을 찾습니다.

template : selector로 지정된 영역을 대체할 html 내용을 넣으면 됩니다. 파일명을 넣을 경우에는 templateUrl 을 사용하시면 됩니다.

AppComponent : 이 클래스에 속성과 로직을 추가하여 확장이 가능합니다. 샘플소스는 비어 있기 때문에 아무런 일이 일어나지는 않을 겁니다. 해당 내용은 main.ts에서 확인이 가능 합니다.

app/main.ts

import { bootstrap }    from '@angular/platform-browser-dynamic';

import { AppComponent } from './app.component';

bootstrap(AppComponent);

소스만 보셔도 이녀석이 딱! 무슨 일을 하는지 아시겠죠? c에서 main() 함수와 비슷한 녀석으로 보입니다. bootstrap, AppComponent를 import 해서, 다시 bootstrap에 AppComponent를 인자로 호출을 합니다. 결국 main.ts가 실제 실행 파일로 보입니다. bootstrap ('@angular/platform-browser-dynamic')이 앱을 실행하는 방법 중에 하나 라고 하네요. 모바일의 경우에는 Apache CordovarNative Script를 로드해야 합니다. 지금은 페이지가 샘플이라 간단하지만 프로젝트에 따라 훨씬 복잡하게 만들 수도 있습니다.

import {bootstrap} from '@angular/platform-browser-dynamic';
import {ROUTER_PROVIDERS} from '@angular/router-deprecated';
import {HeroService} from './hero.service';
import {AppComponent} from './app.component';

bootstrap(AppComponent, [
  ROUTER_PROVIDERS,
  HeroService
]);

위 내용은 Turorial의 샘플인 Tour of Heroes의 main.ts 파일입니다.

systemjs.config.js

샘플 소스는 다른 앱이나 모듈을 로드하기 위해서 SystemJS를 포함하고 있습니다. 이녀석은 webpack을 포함하고 있습니다. 이 부분은 생산성이나 퍼포먼스를 위해 좋은 방법으로 보입니다. 실제 설정 파일의 내용은 좀 복잡하니 실제 파일을 참고해서 확인하시면 됩니다.

styles.css

css 파일은 아실 거라고 봅니다. html 파일에 대한 스타일 파일이라 굳이 설명할 필요는 없어 보입니다.

실행할 준비는 이제 끝났습니다. 설명이 좀 부족한 거 같기는 한데... ^^ 저도 처음 하는 거라 제가 이해하는 부분까지만 정리를 했습니다.

nodejs를 실행하시는 경우에는 아래의 명령을 콘솔에서 실행하시면 됩니다. 그러면 ts파일을 js파일로 컴파일 후 브라우저를 실행합니다.

npm start

Visual Studio Code에서 직접 실행을 원하신다면 컴파일 명령(⇧⌘B)을 실행하시면 됩니다.

중간까지의 결론, 속도가 왜 이렇게 느리지?

일단 제가 무언가 잘못한 거 같아 보입니다. nodejs와 웹서버에서도 결과물이 나오는데 3초 이상이 소요되는 거 같습니다. 가끔 빠르게 나오기는 하지만 기본적으로 느립니다. 기대 이상으로 느립니다. 샘플 코드가 그러니, 이걸 어쩌나.. 하는 생각이 듭니다. =_=;;

SPA이기 때문에 최초 실행 후 부터는 페이지 갱신이 안되니 빨라 지려나 기대를 하기도 하지만, 애시당초 이를 어쩌나 싶습니다. nodejs를 경유하지 않으려고 하는데... 이걸 어쩌나.. 싶습니다. 아직 페이지는 만들지도 않았는데...

혹시 누가 아시는 분이 있다면 저에게 지식을 나누어 주시길 바랍니다. ㅠ,.ㅠ;;


WRITTEN BY
비트센스
뷰파인더로 보는 프로그래머의 세상 페이스북 @bitsense 트위터 @picory 스카이프 picory MSN drawhalf@dreamwiz.com

트랙백  0 , 댓글  2개가 달렸습니다.
  1. 저도 시작 샘플돌려보고 heroes 샘풀돌려보고 있습니다만 typescript 도 아직 초기버전이고 angularjs2 도 초기라 nodejs 이외의 컨테이너에서는 최적화 작업을 안한 거 같애요. 당분간은 nodejs를 이용해야할 것 같애요.
    • angularjs 2 샘플은 nodejs 바탕 위에서 작동을 하도록 되어 있네요.
      저는 순수하게 angularjs + javascript 처럼 typescript 만 사용하고 싶은데
      그렇게 하기에는 아직 문제가 많네요.
      시간이 되면 다시 정리를 해봐야 할 거 같습니다.
secret

SPA 만들기를 시작하면서

필요에 의해서 웹페이지 하나를 만드는데, 테이블이 2개, 셀렉트 박스가 3개가 서로 맞물려서 데이터를 주고 받아야 하는데, 이걸 처리하려고 하니 일반 웹페이지에서는 페이지 갱신을 여러번 해줘야 하고, 그럴때 마다 할일없이 데이터 요청을 계속하게 되는 악순환?이 생겨서, 처음에는 그냥 페이지 로드하면서 백단에서 async하게 ajax call을 해볼 생각이었다.

문득 백단에서 호출하는 녀석을 ajax로 할 거면 angularjs로 하는 것도 괜찮지 않을까? 하는 생각을 했다. 그러면 이번에 나온 angularjs 2는 어떨까? 그러고 보니 angularjs가 typescript를 지원한다는데... 이참에 그것도 한번 해볼까? typescript를 잘 지원하는 에디터가 visual studio code라든데 그것도 한번 써볼까? 머 이런 꼬리에 꼬리를 무는 의구심으로 또다시 헬게이트에 발을 디뎠네요.

헬게이트라고 말하는 것이 대부분의 문서가 영어고, 구글성님이 영어만 알려줘서..., 기존 한글 문서들 보다 제가 멀 어떻게 잘 할 수 있을까 하는 생각도 있고, 그래도 그 문서들은 잘 이해는 안가고... =_=;;

여튼 문서를 따라가다 보니 AngularJS + TypeScript => SPA를 만드는 것으로 귀결되어서 일단은 퍼포먼스를 고려하지 않고 진행을 합니다. 그러다 봉사 문고리 잡는 방법이 생기면 계속 공유를 하겠습니다.

개발 환경 (참고)

OS X El Capitan
visual studio code
AngularJS
TypeScript
NodeJs (v5.8.0)

Visual Studio Code 설치 및 설정

Visual Studio Code는 Visual Studio와 비슷하다 상상하시면 안됩니다. 그냥 단순한 텍스트 에디터 + 좀 많은 플러그인 조합? 정도로만 생각하십시오. 맥이 에디터 부분에서는 진짜 빡세게 안좋다는 개인적인 생각입니다.

링크 : VS Code 다운로드

링크 : VS Code Extensions 중 TypeScript 관련 다운로드

AngularJS 2 프로젝트 생성

프로젝트 폴더 생성 : angularjs2-quickstart (샘플 코드에 나온 폴더)

mkdir angularjs2-quickstart

cd angularjs2-quickstart


tsconfig.json 파일 생성 (VS Code에서 ts 컴파일 가능 설정) 

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "sourceMap": true
  }
}


(NodeJs에서 컴파일 가능 설정)

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}


Visual Studio Code에서 ts 컴파일 가능하도록 설정

#1. HelloWorld.ts 파일 생성
class Startup {
    public static main(): number {
        console.log('Hello World');
        return 0;
    }
}

Startup.main();

#2. tasks.json 생성 (F1 클릭) - TypeScript - tsconfig.json 선택 > .vscode/tasks.json 파일 생성

#2-1. tasks.json 파일

{
// See http://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "0.1.0",
"command": "tsc",
"isShellCommand": true,
"args": ["-p", "."],
"showOutput": "silent",
"problemMatcher": "$tsc"
}

#3. 맥에서 ts 컴파일 방법 - ⇧⌘B
>>> 컴파일 오류가 나는 경우, typescript 설치
$ npm install -g typescript


typings.json 파일 생성

{
  "ambientDependencies": {
    "es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654",
    "jasmine": "registry:dt/jasmine#2.2.0+20160412134438"
  }
}


package.json 파일 생성

{
  "name": "app",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common":  "2.0.0-rc.0",
    "@angular/compiler":  "2.0.0-rc.0",
    "@angular/core":  "2.0.0-rc.0",
    "@angular/http":  "2.0.0-rc.0",
    "@angular/platform-browser":  "2.0.0-rc.0",
    "@angular/platform-browser-dynamic":  "2.0.0-rc.0",
    "@angular/router-deprecated":  "2.0.0-rc.0",
    "@angular/upgrade":  "2.0.0-rc.0",
    "systemjs": "0.19.27",
    "es6-shim": "^0.35.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",
    "angular2-in-memory-web-api": "0.0.5",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings":"^0.8.1"
  }
}


node-module 설치

> npm install

node_modules 폴더가 생성되고 package.json을 기준으로 의존적인(dependencies) 모듈들을 설치해 줍니다.


샘플 파일 생성

샘플 소스 : https://angular.io/docs/ts/latest/quickstart.html 참조


VS Code vs NodeJS 컴파일 비교

VS Code에서 컴파일(⇧⌘B) 하는 경우, 일반 컴파일러에서 하는 것 처럼 에러 로그 메시지를 보면서 확인이 가능합니다.

NodeJS에서 컴파일(node start)을 할 경우에는 3000번 포트의 웹페이지를 실행해서 결과물까지 직접 확인 가능합니다.

[추가] 현재 Visual Studio Code에서 컴파일을 한 경우에는 Duplicate 메시지가 많이 나옵니다. 그래도 돌아는 가네요. 먼가 불안한 모습을 보이고는 있지만 곧 해결이 되지 않을까 싶습니다.

# 에러메시지 샘플
app/app.component.ts(7,14): error TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.
typings/browser/ambient/es6-shim/index.d.ts(8,14): error TS2300: Duplicate identifier 'PropertyKey'.
typings/browser/ambient/es6-shim/index.d.ts(11,5): error TS2300: Duplicate identifier 'done'.
typings/browser/ambient/es6-shim/index.d.ts(12,5): error TS2300: Duplicate identifier 'value'.
typings/browser/ambient/es6-shim/index.d.ts(250,5): error TS2300: Duplicate identifier 'EPSILON'.

이상으로 AngularJS 에 대한 허접한 설치, 설정 방법을 정리해 봤습니다. 관련 페이지 내용은 다음에 다시 정리하도록 하겠습니다. Visual Studio Code 를 설치하고 쓸일이 없었던 분들에게 좋은 기회?가 되었으면 합니다. ^^;;

참고 URL

angularJS 홈페이지 : https://angular.io/docs/ts/latest/quickstart.html
visual studio code 홈페이지 : https://code.visualstudio.com/Docs/languages/typescript


WRITTEN BY
비트센스
뷰파인더로 보는 프로그래머의 세상 페이스북 @bitsense 트위터 @picory 스카이프 picory MSN drawhalf@dreamwiz.com

트랙백  0 , 댓글  0개가 달렸습니다.
secret

아직은 제가 원하는 수준은 아니지만, 일단 우측이라도 like 검색이 되는 것을 확인하니, 무료로 사용할 수 있는 범위가 얼마나 될까 하는 생각이 갑자기 들었습니다.

Cloudant 가격 정책

클라우드 DB 시장에서 IBM은 분명히 후발주자가 맞습니다. 그래도 자원봉사가 아닌 이상 무료로 50GB를 무조건 주겠습니까? 절대 아닙니다. "제한없이" 이용이 가능하다는 문구가 제 논리센서?를 혼란 시켜 여기까지 왔지만, 더이상 속을 수는 없습니다~!!!

[링크] IBM Cloudant 50GB 무료사용 페이지 

일단 사용량을 확인합니다. 어? $0.09 사용이 눈에 들어옵니다. 머지? 이제 사용방법 확인 중인데 무슨 금액이지?? 무료는 무슨 말?? ㅎㅎ For period ending Apr 30 하단에 Learn about Cloudant pricing 링크를 즉시 클릭해 봅니다. 이러다 또 털리나 싶어서... [링크] Cloudant 과금 정책

위 이미지로 보면 23회의 heavy requests 가 있었는데.. 이러면 $0.015 인거 같은데 왜 $0.09 일까요? 무려 6배를 뻥친 이유가 멀까요? 증말 궁금합니다. =_=;;

일단 링크로 들어간 과금 정책 페이지를 보고 요약한 내용은 일단 1개월은 무료이고, 30일이 지나면 혹시 모르니 신용카드를 등록해서 과금 결제가 될 수 있도록 해 주시고~~ (이런 말은 아니긴 합니다. ^^) 과금은 아래와 같이 하겠다네요.

UsageCost

Quota 

Data volume 
in GBs / month
$1.00 per GB / month

이론상 API를 사용하지 않으면 50GB가 무료 맞네.
아무것도 하지 않으면... =_=;;

"Heavy" API requests * 
PUTs, POSTs, DELETEs
$0.015 per 100

 GET이 있으니 POST는 등록만 사용하도록

"Light" API requests * 
GETs, HEADs
$0.015 per 500

$1 = 33333 (약 3만번 호출시)
$10 = 33만번 정도

  • No charge if your monthly usage is under $50.00 USD

[링크] Cloudant 가격 정책 함고

POST는 대체로 등록에 사용하고, GET은 조회를 위해 사용을 합니다. $1 당 3만번의 테스트가 가능하니 그리 나쁘진 않아 보이는데, 저 API 사용료가 누적인지는 궁금합니다. 1개월 단위로 리셋이 된다면 얼마나 좋을 까요.. O_O;;

다음 번에는 nodejs에서 데이터를 등록하는 방법과 실제 서비스를 위해서 정교한 테이블 설계를 해볼 생각입니다. 그 와중에 좌측 like 검색이 가능할 수 있는 지도 찾아봐야 겠습니다.


WRITTEN BY
비트센스
뷰파인더로 보는 프로그래머의 세상 페이스북 @bitsense 트위터 @picory 스카이프 picory MSN drawhalf@dreamwiz.com

트랙백  0 , 댓글  0개가 달렸습니다.
secret


오늘은 Cloudant의 핵심인, 그리고 제가 그토록 알고 싶은 like 검색 방법에 대한 고민을 해 보려고 합니다. 그리고 만족 스럽진 않지만 반쪽짜리 검색을 찾았습니다.

일단 복사한 animaldb의 구성을 잠시 살펴 보도록 하겠습니다. 오해의 소지가 발생할 수도 있을 것 같고, 저의 무식함이 드러나겠지만, 그래도 이해하는 선에서 열심히 떠들어 보겠습니다.

animaldb 구성

animaldb





















All Documents : 데이터인 도큐먼트 외에도 Indexes, Views 등 사용자가 등록한 모든 정보를 보여 주는 것으로 보입니다.

Query : 쿼리 실행을 테스트할 수 있는 페이지입니다. 처음 기웃거릴때는 저녀석을 활용하려고 무척 노력을 했는데... 결과적으로 이제 저에게는 별로 의미 없는 페이지였습니다.

Permissions :  API 접근 사용자 권한을 설정하는 페이지입니다. 현재 어드민 계정과 "Everybody Else" 두 계정에 대한 권한 설정이 나옵니다. 어차피 제 계정으로 앱을 설정할 거니, 디폴트 유지~!

Changes : 수정된 로그를 남기는 것 같은데... 무지하지만 시간상 해당 내용에 아직 확인할 기회는 없었습니다.

Design Documents : 오늘 확인할 녀석입니다. 기존 자료에는 Secondary Index와 Search Indexes 얘기를 하는데, 중간에 Views 가 하나 더 있습니다. 이녀석들을 어떻게 이해하는 것이 관건으로 보입니다. 다만 제가 짧은 시간 이래 저리 부딪히면서 유추하게된? 내용을 정리해 보겠습니다.

Secondary Index와 Search Indexes

문서 상의 내용은, 검색을 강화하기 위해서 추가해야할 필수적인 요소라고 합니다. 제가 이해한 RDBMS와 비슷한 것은 말 그대로 index 입니다. 테이블 필드를 조합하고 해당 필드에 대한 정렬 조건 등을 설정한 후에 정보 목록 확인이 가능합니다.

Secondary Index는 이런 index의 모음이고 Views라고 되어 있는 것은 index 들을 의미하는 것으로 보입니다. 그래도 조금 다른 것은 Map/Reduce 옵션에 따라 데이터 카운트 등의 통계용도 Views에 추가할 수 있습니다.

Search Indexes는 단어처럼 검색을 위한 index 입니다. 검색 필드를 지정해서 해당 필드만을 검색하여 결과를 뿌려주도록 하는 것 같습니다. 여기에서 like 검색을 하고 싶었습니다. 검색, 검색, 검색.. ^^ 검색이 되어야 서비스를 할 수 있으니...

검색을 위해서는 Search Indexes를 알아야 합니다. index function 내용을 전체 알 필요는 없지만, 꼭 알아야 할 것들만 잠시 설명을, 저도 잘은 모르지만, 해 보겠습니다.

function (doc) {
  index("default", doc.id);  

  if (doc.latin_name) {
    index("latin_name", doc.latin_name, { "store": true });
  }
}

위 내용은 도큐먼트(테이블)의 검색 필드를 지정하는 것으로 doc.id, doc.latin_name을 검색어로 사용한다는 것입니다. 그런데 아직 확인하지 못한 것이 index("latin_name" << "latin_name"의 용도입니다. api에서 제공되는 검색 변수명은 q 하나 밖에 안보입니다.

?q= 검색은 가능하지만 ?latin_name= 검색은 오류가 납니다. 아직은 이 이상은 모르겠네요. =_=;;; 그래서 저는 저 "latin_name" 대신에 "default"로 바꾸었습니다. 이렇게 하면 q 파람 정보를 대입해 주는 것으로 보입니다.

그리고 like 검색은 "검색어*" 이렇게 검색어 뒤에 *를 추가하면 됩니다. 하지만 이것도 오른쪽만 가능하지 왼쪽에 붙이면 오류가 납니다. 제가 원하는 내용은 아닙니다만 일단 아쉬운 데로... =_=;; 테스트 사용 방법은 아래와 같습니다. search indexes의 animals를 선택하면 쿼리 실행 창이 나옵니다.

Search Indexes test

검색이 정상적으로 되었다면 해당 내용을 외부에서 테스트하기 위해서 API를 복사합니다.

Copy API URL

해당 내용을 저는 Postman 이라는 크롬 확장 프로그램에서 테스트를 했습니다. Method = GET, Authorization = Basic (아이디 비번 추가) 후 Send를 하시면 아래와 같이 나옵니다.

Postman test

누군가 검색어 왼쪽에 *를 붙일 수 있는 방법을 알려 주신다면 너무 너무 감사하겠습니다. ^^;;

다음은 50GB가 정말 무료인지, 서비스를 하려는 입장에서 다시 한번 과금 정책을 확인하고 지나가야할 것으로 보입니다. 실망스러울 것으로 보이긴 하지만.. 그래도 확인은 해봐야죠~~ ^^;; 잘못하면 털립니다. 서비스가 좋다면 모를까...


WRITTEN BY
비트센스
뷰파인더로 보는 프로그래머의 세상 페이스북 @bitsense 트위터 @picory 스카이프 picory MSN drawhalf@dreamwiz.com

트랙백  0 , 댓글  0개가 달렸습니다.
secret

일단 이전 포스팅을 보셨다면 Cloudant 계정은 하나쯤은 가지고 있을 것으로 보입니다. 것도 무려 50기가 정도나~~~!!!

무식하면 용감하다고, Cloudant를 무슨 RDBMS 정도로만 알고, 결국은 나의 무지로, 시작된 이 프로젝트가 얼마나 성공을 거둘지는 일단 미지수 입니다.

일단 다시 링크 하나 공유 합니다. 한국 클라우던트 유저그룹이 있었네요.  [링크] 클라우던트 한국 유저 그룹

Cloudant 사이트를 자주 들어가야 하는데 용어들이 기존 RDBMS와 헤깔리니 잠깐 확인하고 가겠습니다. NoSQL 관련 구조를 원래 잘 생각하지 않고 썼던 문외한인지라, RDBMS에 익숙한 무식한 개발자인 저를 포함해서, 용어정리가 도움이 되었으면 합니다.

관계형 데이터베이스Cloudant(CouchDB)비고 

Database

계정

기존 RDBMS 와 비슷하게 하고 싶어서 그냥 넣어 봤습니다.
DB를 추가하고 싶다면?? 네 계정을 추가 생성하시면 됩니다!!

TableDatabase

저장 공간 구분 단위, 테이블의 개념

Recode or RowDocument

기본 자료 단위

ColumnAttribute

key = value  형태 값 

용어가 무척 혼선이 되겠지만 Nosql Cloudant 입장에서 용어를 선별해서 사용 하도록 하겠습니다. ^^

데이터 베이스 생성 방법

데이터베이스 생성은 생각보다 쉽습니다. 로그인 후 첫페이지가 Databases 입니다.

Cloudant Dashboard

해당 페이지 우측 상단 Database name 영역에 데이터베이스 이름을 넣고 생성하시면 됩니다.

Create Database

^ 여기에 데이터베이스 이름을 적고 Create!!

샘플 데이터베이스 가져오기

데이터베이스를 생성하고 데이터 등록하고 하는 일련의 작업을 하면서 정리하려면 시간이 좀 걸릴 것으로 보여서 Cloudant에서 제공하는 샘플 데이터베이스를 기준으로 정리해보겠습니다.

[링크] 샘플 데이터 베이스 페이지

Replicate the sample database

로그인 전이라면 "Replicate..." 버튼 대신에 로그인 창이 나올 겁니다. 로그인 후에는 "Replicate... " 버튼이 보일 겁니다.

버튼을 클릭하면 잠시 프로그레스바가 나오고, "Success. You're all set ..." 메시지가 나옵니다. 이제 복사는 일단 완료~!!

데이터베이스 구성 확인

복사된 데이터베이스를 확인해 보겠습니다.

우선 로그인 후 첫페이지인 Databases 메뉴에서 맨 하단 animaldb가 보일 거고, 해당 데이터베이스를 클릭하면 아래와 같이 나타날 겁니다.

All Documents는 전체 데이터인데, id "_design/views101"이라는 것도 보입니다. 즉 document는 아무래도 실제 데이터(Record 혹은 Row)만 의미하는 것이 아니고 query, index, view 등 데이터 외의 모든 내용도 포함이 되는 건 아닌가 싶습니다. (역시 무식함.. ㅠ,.ㅠ)

Sample animaldb

Design Documents를 클릭하면 views101이라는 "view"가 보입니다. 이녀석이 중요한 녀석으로 보이는데, 다음엔 이녀석을 분석해보도록 하겠습니다.





WRITTEN BY
비트센스
뷰파인더로 보는 프로그래머의 세상 페이스북 @bitsense 트위터 @picory 스카이프 picory MSN drawhalf@dreamwiz.com

트랙백  0 , 댓글  0개가 달렸습니다.
secret


IBM Cloudant DB? [링크]

솔직히 잘 모릅니다. 그냥 50기가 무료로 준다는 Nosql 디비라는 거... Json 기반이고, API로 제공이 가능하다는 거... 머 그렇기 때문에 이런 프로젝트를 시작하는 거니까요.

고수님들이 편하고 좋다.. 라고 말하는데.. 빅데이터를 다뤄본 적이 없기 때문에, 통계용으로 쓴다는 말이 와 닿지는 않는다. 그래도 50기가 라니... 하는 생각에 이리 저리 파보기 시작했습니다. 시간도 없는 마당에 이런 잉여짓을 내가 해보네요~

솔직히 처음에는 그냥 DB라는 개념으로 접근을 했습니다. 와 IBM이 약먹었나 디비를 공짜로? 그것도 50기가나 공짜로??? 혹~ 하며 접근을 했는데, Nosql이라고 하니 Redis 정도로만 생각을 했는데... 머 이렇게 안되는 것이 많아? 쓰뤠기네~~ 하며 이리 저리 뒤져 보니 빅데이터용이고, 통계용으로 적합하다는 얘기... 머 그런 얘기들이 즐비하면서... 역시 고수들이 많아~~ 하는... 제길... 머, 그렇다 치고...

50기가가 아깝다는 생각에 이리 저리 머리를 굴려보기 시작을 했습니다. 진짜 디비로 쓸 수는 없을까? 진짜? 진짜??? =_=;;

일단 50기가를 신청하고 열심히 DB 디자인을 해보기로 했습니다.

[링크] 무료 계정 등록 방법 (유튜브)

짧게는 며칠, 길어도 한달 이내에 정리를 해보고 안되면 나와야지.. 하는 심정으로... ^^

그 헤딩하는 내용을 여기에 남겨보도록 할 것입니다. 잘 되면 좋겠다는 심정으로... =_=;;
위에 적은 내용을 보면 알겠지만, 개념에 대한 설명은 저도 모르니 할 수가 없어서 못하겠습니다. 그냥 필드에서 구르는 데로 얻어지는 지식을 공유하도록 노력을 하겠습니다. 나의 무식함을 욕하지는 말아줬으면 좋겠네요. ㅠ,.ㅠ;;

혹시 아이디어가 있다면 많은 도움 답글을 요청드리겠습니다~ ^^;;


WRITTEN BY
비트센스
뷰파인더로 보는 프로그래머의 세상 페이스북 @bitsense 트위터 @picory 스카이프 picory MSN drawhalf@dreamwiz.com

트랙백  0 , 댓글  0개가 달렸습니다.
secret

스마트폰 4대, 태블릿(PC) 2대, 보조밧데리 2개로 거실 콘센트에는 충전 대기자가 항상 만원이다. 가끔 둘째녀석은 다른 충전선을 뽑고 자신의 것을 끼워 넣은 과감함을 보이거나, 충전기를 안방으로 가져가 충전을 한다. 콘센트 여유공간은 없고, 충전할 기기는 많은 것이 우리 집만의 문제는 아닐 것이라고 본다.

 

SONY | HDR-AS100V | Normal program | Pattern | 1/15sec | F/2.8 | 0.00 EV | 2.8mm | No flash function | 2015:08:19 20:39:35충전할 기기는 많으나 콘센트 여유분은 없다.

 

충전기가 많아지니 관리도 관리지만 항상 전기콘센트 주위는 너저분하고 정신이 없다. 덕분에 집사람은 청소때마다 충전기들을 서랍장에 쑤셔 넣는다. 아이들은 다시 빼서 충전하고... 반복이다.

그런 의미에서 Next-05AC 5포트 충전기는 이녀석 하나로 턱없이 부족한 충전기 자리를 메꿔줄 뿐만 아니라 2A의 고속 충전에 눈길을 주게 되었다.

1A? 2A? 고속 충전? 10000mAh면 되는 거 아냐?

왜 기계는 알아야 할 것이 많은가? 그냥 샤오미 10000mAh면 끝나는 거 아냐? 고속 충전은 머야? 좋은 건 알겠는데, 멀봐야 하는거야?

2A 충전시 5.5시간 1A 10시간에 비해 거의 2배 가까이 시간 차이남

샤오미 ZMI 보조배터리는 충전지다. 핸드폰도 일정공간이 배터리로 충전기를 가지고 있다. 위 그림에서 보듯이 충전시간이 1A냐 2A냐에 따라서 달라진다. 거의 두배가까이 차이가 난다.

mAh는 용량으로 물탱크로 보면 된다. A는 수도꼭지? 수압 정도로 보면 될까? 물탱크가 크면 많은 양동이에 물을 담을 수 있다. 수입이 세면 양동이에 물을 빨리 담을 수 있다. 이해 하겠나? 설명은 선생님에게~~ ㅎㅎ ^^;;

NEXT-05AC 구성품

Apple | iPhone 6 | Normal program | Pattern | 1/30sec | F/2.2 | 0.00 EV | 4.2mm | ISO-40 | Off Compulsory | 2015:08:19 14:14:48박스 구성품 (매뉴얼이 간단하네~)

구성품은 보이는 것이 전부다. 박스, 4 Page 매뉴얼, 8자 전력선, 그리고 5포트 충전기 본체... 설명할 것이 없다.

Apple | iPhone 6 | Normal program | Pattern | 1/30sec | F/2.2 | 0.00 EV | 4.2mm | ISO-64 | Off Compulsory | 2015:08:19 14:15:20요새 5포트가 대세~~!!

5포트가 자리잡은 본체 정면? 하단으로 입체감을 주기 위해서 하얀 띠?를 두른 것 같이 살짝 돌출되어 있는데, 얼핏 보면 마감이 잘못된 거 같은 느낌을 준다. 굳이 이렇게 할 필요는 없었을 거 같다. 개인적으로는 이렇게 되면 나중에 청소할때 저기에 먼지나 때가 앉아서 귀찮던데... (맘에 안든단 소리.. ^^)

Apple | iPhone 6 | Normal program | Pattern | 1/30sec | F/2.2 | 0.00 EV | 4.2mm | ISO-50 | Off Compulsory | 2015:08:19 14:15:338자형 어댑터. 좀 기계스러운 느낌

8자 연결구가 자리잡은 뒷면?의 모습. 본체 설명은 이게 전부임. 눈에 보이는 것 외에 설명할 게 없다는.. =_=;;

Apple | iPhone 6 | Normal program | Pattern | 1/30sec | F/2.2 | 0.00 EV | 4.2mm | ISO-32 | Off Compulsory | 2015:08:19 14:16:49주의!! 2개까지 2A를 지원. 3번째 이상은 1A 임

처음에 해당 제품은 2A짜리 포트 5개 인 줄 알았는데... 총 6.5A라서 이상하다 싶어서 봤더니... 2개는 2A, 3개째 부터는 1A를 지원해서 총 6.5A라고 하는 거 같다. 다 2A로 해주지... 그럼 가격이... =_=;;

외관에 대한 느낌?

1.
전체가 하얀 색으로 살짝 부담스럽기는 하다. 때타면 어쩌지? 나 뿐만 아니고 아이들도 사용을 하는데... 아니나 다를까 집에 가져간 뒤 하루만에 때가 탔다.

2.
본체의 촉감은, 딱딱한 플라스틱 느낌도 아니고 차가운 금속 느낌도 아닌, 보드라운 비닐을 만지는 느낌이다. 괜찮음

3.
충전 중 발열이 느껴진다. 뜨겁지는 않고 따뜻한 수준? 이정도면 발열이라고 말하기는 어렵다고 본다. 충전기가 아닌 일반 기기들도 이정도는 나오는 듯 싶으니깐. 다만 요새 충전기는 발열이 많지 않아서, 어? 할 수도 있으니 언급을 한 것이다.

4.
충전시 피드백은 불충분한 것으로 보인다. 충전 여부를 알려주는 LED가 하나도 없다. 완충이 된 것을 확인하려면 기기를 봐야 한다. 100%인가? 그러고 보니 아이폰도 그런게 없구나... 애플이 없으니 결국엔 별 문제가 아닌 걸로.. ^^

5.
충전 LED도 없는데.. 싶은 생각이지만 다음 버전에는 최소한 이건 있었으면 하는 건데... 어떤 녀석이 2A로 충전이 되는 지 궁금하다. 알아서 2A, 1A로 충전을 하는 스마트IC라는 기능이라는데... 내 기기가 과연 2A로, 고속 충전이 되었으면 하는 바람인데... 그냥 충전 시간의 추이로 확인할 수 밖에 없다는 것이 좀 아쉽네...

총평

무조건, 무조건 빠른 충전!!!
일단 빠른 것으로 체감이 된다. 아이폰의 충전시간이 기존 아이폰 충전기 보다 밧데리 %가 빠른 속도로 올라가는 느낌이다. 다행이 2A로 충전 중이란 소리겠지?? 이 바쁜 세상에 빠른 충전은 좋다. 완충까지 1시간 이내면 충분하고, 잘하면 30분 조금 넘으면 되지 않을까 하는 기대지만, 아직 충전시간을 체크해 보진 못했다.

부담스럽게 밝은 하얀색이어서 인테리어 소품으로...?
단품으로는 인테리어 소품으로 괜찮지 않을까 싶었다. 하지만 이게 본체만 있어선 안된다. 충전 케이블이 별도로 있어야 하는데, 이게 보통 못해도 50cm 이상은 된다. 덕분에 줄이 많아서 소품으로는 힘들 것으로 보인다.

빠른 충전을 위한 기기이기 때문에 이부분에는 대단히 만족을 한다. 다만 약간 불편한 원시적인 UI(LED없음, 충전출력 미표시) 등은 이 기기의 기능을 의심하게 만들기 충분하다. 물론 그렇게 하면 기가 가격이 올라가겠지? 하는 생각은 있다.

나처럼 기다림을 미학으로, 아트로 승화시키지 못하는 급한 성격의 사람이라면 이녀석은 한번 사 볼만 한 녀석이다. 거즘 2배의 시간으로 충전을 해주는데 마다할 사람이 어딨는가 싶다.

다만, 인테리어 소품으로는 쓸만하지 않다. 끝!!  


WRITTEN BY
비트센스
뷰파인더로 보는 프로그래머의 세상 페이스북 @bitsense 트위터 @picory 스카이프 picory MSN drawhalf@dreamwiz.com

트랙백  1 , 댓글  2개가 달렸습니다.
  1. 무의 공간 2015.11.06 11:15 신고
    안녕하세요?
    next-5ac는 아주 좋은 정보네요.
    저도 집에 하나 구입해보려고 합니다.
    그리

    남은 초대권을 보내주실 수 있나요?
    제 아이디는
    in34rag@hanmail.net 입니다.
secret

Laravel에서 디자인 블레이드의 변수는 {{}}를 사용하는데, 이 내용은 AngularJS와 동일합니다. 해서 변수를 지정하는 "{{}}"변경하는 작업이 필요합니다.

var myApp = angular.module('MyApp', []).config(function($interpolateProvider) {

  $interpolateProvider.startSymbol('[[[');

  $interpolateProvider.endSymbol(']]]');

});

저는 {{}} 대신에 [[[ ]]]로 변경을 했습니다. [Shift]키를 한번이라도 덜 눌러 보려는 꼼수? 입니다. ^^;;



WRITTEN BY
비트센스
뷰파인더로 보는 프로그래머의 세상 페이스북 @bitsense 트위터 @picory 스카이프 picory MSN drawhalf@dreamwiz.com

트랙백  2 , 댓글  0개가 달렸습니다.
secret