Ruby + Carlo로 데스크톱 프로그램 만들기

8457 단어 ovtoRubyCarlo
Opal Advent Calendar 2016 오팔과 일렉트로닉을 조합해 데스크톱 앱을 만든다는 보도가 나왔다.이번에는 오팔과 캐롤의 조합을 시도해 절차를 설명한다.
클로로는 일렉트론과 마찬가지로 자바스크립트로 데스크톱 애플리케이션을 제작했지만, 환경에 들어오는 크롬을 활용하기 위해 작은 크기를 산발하는 장점있는 것 같다이 있다.

카로의 설치


기본적으로 npm i carlo만 해당되지만 환경에 따라 다릅니다.[email protected] 때때로 컴파일할 수 없습니다.이 경우 nodebrewNode.js8.11.2 가입로 해결할 수 있다(이하 절차).아니면 최신 노드도 괜찮아요.
$ brew install nodebrew
...
==> Caveats
You need to manually run setup_dirs to create directories required by nodebrew:
  /usr/local/opt/nodebrew/bin/nodebrew setup_dirs

Add path:
  export PATH=$HOME/.nodebrew/current/bin:$PATH

To use Homebrew's directories rather than ~/.nodebrew add to your profile:
  export NODEBREW_ROOT=/usr/local/var/nodebrew
...
$ /usr/local/opt/nodebrew/bin/nodebrew setup_dirs  
$ nodebrew install 8.11.2
$ export PATH=$HOME/.nodebrew/current/bin:$PATH
$ nodebrew use 8.11.2
$ node -v
$ npm i carlo

Example 시작


Carlo가 설치되어 있으면 먼저 JavaScript로 응용 프로그램을 만듭니다.https://github.com/GoogleChromeLabs/carlo에 나와 있습니다.js와 example.내가 준비할게.
example.js
const carlo = require('carlo');

(async () => {
  // Launch the browser.
  const app = await carlo.launch();

  // Terminate Node.js process on app window closing.
  app.on('exit', () => process.exit());

  // Tell carlo where your web files are located.
  app.serveFolder(__dirname);

  // Expose 'env' function in the web environment.
  await app.exposeFunction('env', _ => process.env);

  // Navigate to the main page of your app.
  await app.load('example.html');
})();
example.html
<script>
async function run() {
  // Call the function that was exposed in Node.
  const data = await env();
  for (const type in data) {
    const div = document.createElement('div');
    div.textContent = `${type}: ${data[type]}`;
    document.body.appendChild(div);
  }
}
</script>
<body onload="run()">
node example.js가 실행되면 Chrome가 시작되고 환경 변수 차트가 표시됩니다.

Opal 포함 코드


Opal 코드를 포함시키는 것은 간단합니다.opal -c.js로 변환한 다음script 탭으로 읽습니다.
예를 들어 Ovto의 샘플 코드를 편입해 보았다.복제yhara/ovto examples/static/ 이하, 실행bundle install 및 rake 어플리케이션.제작
$ git clone https://github.com/yhara/ovto.git
$ cp ovto/example/static/* .
$ bundle install
$ rake
example.>은(는) 다음과 같습니다.
example.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>Carlo + Ovto example</title>
    <script src='app.js' type='text/javascript'></script>
  </head>
  <body>
    <div id='ovto'></div>
  </body>
</html>
node example.js에 따라 집행하면 다음과 같다.

이후 pkg 등exe를 사용하면 따로 나눠줄 수 있을 것 같아요.
이렇게 되면 섭씨랑 화씨로 전환하는 앱을 만들 수 있을 텐데... 그렇게 말하고 싶었는데 맥북 두 대로 해봤어요한 쪽이 순조롭게 돌아가지 못한다(input 탭에 초점을 맞추고 버튼을 눌러도 텍스트를 입력할 수 없다. app.js를 떼어내고 단순한 input 탭을 넣는 것도 똑같기 때문에 Opal과 상관없는 것 같다...)

총결산


이번에는 칼로를 이용해 오팔에서 데스크톱 애플리케이션을 만드는 방법을 설명했다.이처럼 자바스크립트와 관련된 자산을 활용하고 루비를 활용하는 것이 오팔의 흥미로운 대목이다.
leetcode-Maximal Rectangle
각도 응용 프로그램에서 의존 관계를 위조하다

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage