Vue로 데스크탑 응용 프로그램 만들기 : Vuido

Vue로 데스크탑 응용 프로그램 만들기 : Vuido

해당 글의 출처는 여기이며 원 저자의 허락을 받고 글을 번역하였음을 밝힙니다.

#vue #javascript

나는 Vue를 아주 좋아합니다. 좋은 프레임 워크로 멋진 웹 응용 프로그램을 만들 수 있습니다. 그러나 진정한 마법은 웹에만 국한되지 않는다는 것입니다. Weex 또는 NativeScript-Vue를 사용하여 네이티브 모바일 응용 프로그램을 만들 수 있습니다. 데스크톱 앱을 만드는 방법도 있습니다. 이를 위해 Electron 또는 Vuido 라이브러리를 선택할 수 있습니다. 이 글에서는 Vuido 접근 방식에 대해 설명하고 다음 기사에서는 Electron과 함께 동일한 앱을 빌드하려고 시도합니다.

Vuido는 Michał Męciński가 만든 Vue.js를 기반으로 네이티브 데스크톱 응용 프로그램을 만들기 위한 프레임 워크입니다. Vuido를 사용하는 응용 프로그램은 Windows, OS X 및 Linux에서 기본 GUI 컴포넌트를 사용하여 실행할 수 있으며 Electron은 필요하지 않습니다.

Vuido는 각 데스크톱 플랫폼에 대한 기본 GUI 컴포넌트 제공하는 libui 라이브러리와 libui-node 라이브러리를 사용합니다.

💻 무엇을 만들 것인가

예제로 선택한 도시에서 현재 날씨를 확인하는 간단한 응용 프로그램을 만들 것입니다. OpenWeatherMap API를 사용하여 실제 데이터를 가져옵니다.

방금 최종 코드를 확인하려면 여기에서 확인하세요.

🛠️ 설치

Vuido 문서에 명시된 바와 같이, 데스크톱 응용 프로그램 개발을 시작하기 위한 몇 가지 전제 조건이 있습니다. 플랫폼에 따라 다릅니다.

💡Windows

• windows-build-tools

• Visual C++ Redistributable Package for Visual Studio 2013

💡Linux

• build-essential

• GTK+ 3

💡OSX

• Xcode

저는 개발을 위해 OSX를 사용하고 있었고 현재 Xcode를 설치했습니다.

또한 vue-cli가 설치되어 있어야합니다 (Vue CLI 3을 사용하는 경우 @vue/cli-init도 필요합니다).

새 프로젝트를 만들려면 다음 명령을 실행하십시오.

vue init mimecorg/vuido-webpack-template my-project

설치가 끝나면 src 폴더 안에 MainWindow.vue 컴포넌트가 다음과 같이 있습니다.

<template>
  <Window title="some-app" width="400" height="100" margined v-on:close="exit">
    <Box>
      <Text>Welcome to your Vuido application!</Text>
    </Box>
  </Window>
</template>
​
<script>
export default {
  methods: {
    exit() {
      this.$exit();
    },
  },
};
</script>

build와 start 태스크를 실행하면 매우 기본적인 데스크탑 어플리케이션이 있는 윈도우가 보입니다 :

이제 우리는 더 재미있는 것을 만들 준비가 되었습니다. 😅

💅 앱 스캐폴딩

Vuido에 대해 알아야 할 첫 번째 사항은 기본 컴포넌트를 사용한다는 것입니다. 따라서 친숙한 HTML 태그 나 CSS 스타일링은 없으며 다른 데스크탑 플랫폼과 호환되는 기본 GUI 컴포넌트 세트 만 있습니다. Vuido로 구축 된 응용 프로그램은 각 플랫폼에서 고유 한 모양과 느낌을 갖습니다.

이는 장점과 단점 모두로 간주 될 수 있습니다. 사용자 정의 모양으로 응용 프로그램을 작성할 수는 없지만 전자로 작성된 것보다 더 가볍고 빠르게 작동합니다.

내장 된 컴포넌트의 전체 목록은 Vuido 문서의 이 섹션에서 찾을 수 있습니다.

필자의 초기 아이디어는 사용자가 선택한 도시의 날씨를 보여주기 위한 애플리케이션을 개발하여 간단한 사용자 상호 작용과 API 호출을 테스트 할 수있었습니다. 우선 필요한 것은 버튼이 있는 입력 필드였습니다. 또한 창 크기를 400x150 픽셀로 변경했습니다.

<Window title="Weather" width="400" height="150" margined v-on:close="exit">
    <Box padded>
        <Box horizontal padded>
        <TextInput stretchy></TextInput>
        <Button>Search</Button>
    </Box>
    </Box>
</Window>

입력 필드를 버튼으로 수평으로 정렬하고 그 사이에 패딩을 추가하려면 horizontal및 padded 속성이있는 <Box> 컨테이너가 필요합니다. Box는 HTML의 div와 비슷합니다. 컴포넌트를 포함하고 정렬하는 래퍼로 작동합니다.

TextInput은 입력 필드이고 stretchy 속성은 사용 가능한 공간을 채우기 위해 늘릴 것임을 의미합니다.

이제 우리의 앱은 다음과 같이 보입니다.

컴포넌트 데이터에 query 속성을 추가하고 입력 필드에 대해 v-model으로 설정합시다. 또한 친숙한 disabled 속성을 시도했기 때문에 쿼리 문자열이 없으면 버튼을 비활성화해야합니다. 그러나 Vuido에서는 enabled 하나로 사용합니다! 이제 입력 상자는 다음과 같습니다.

<Box horizontal padded>
    <TextInput v-model="query" stretchy></TextInput>
    <Button :enabled="!!query">Search</Button>
</Box>

🔗 API 호출하기

이제는 주어진 쿼리 문자열을 도시로 사용하여 현재 기상 조건을 가져 오는 것입니다.

날씨 데이터를 얻으려면 OpenWeatherMap API를 사용했습니다. 그것은 다른 것들을 많이 제공하지만 우리는 Current weather data만 필요합니다. JSON 응답은 여기에서 확인할 수 있습니다.

데이터 가져오기를 시작하려면 axios 라이브러리를 추가해야합니다.

npm install --save axios

그다음 기본 URL 및 OpenWeatherMap API 키 변수를 설정합니다.

import axios from 'axios';
axios.defaults.baseURL = 'http://api.openweathermap.org/data/2.5'
const apiKey = process.env.API_KEY;

그다음 날씨 데이터를 위한 새로운 속성과 API에서 가져 오는 메소드를 추가해 보겠습니다.

export default {
  data() {
    return {
      query: '',
      error: false,
      city: '',
      country: '',
      weatherDescription: '',
      temp: null,
      tempMin: null,
      tempMax: null,
      humidity: null,
    };
  },
  methods: {
    exit() {
      this.$exit();
    },
    showWeather() {
      axios
        .get(
          `/weather?q=${this.query}&units=metric&&appid=${apiKey}`,
        )
        .then(response => {
          this.city = response.data.name;
          this.country = response.data.sys.country;
          this.weatherDescription = response.data.weather[0].description;
          this.temp = response.data.main.temp;
          this.tempMin = response.data.main.temp_min;
          this.tempMax = response.data.main.temp_max;
          this.humidity = response.data.main.humidity;
          this.error = false;
        })
        .catch(() => {
          this.error = true;
          this.city = '';
        });
    },
  },
};

이제 버튼에 새로운 메소드를 추가하고 주어진 모든 데이터를 표시하도록 템플릿을 변경하거나 쿼리가 기존 도시와 일치하지 않으면 오류를 발생시킵니다.

<Window title="Weather in your city" width="400" height="150" margined v-on:close="exit">
    <Box padded>
    <Box horizontal padded>
        <TextInput stretchy v-model="query"/>
        <Button :enabled="!!query" @click="showWeather">Search</Button>
    </Box>
    <Separator horizontal/>
    <Group margined>
        <Box padded>
          <Text v-if="error">There is no such city in the database</Text>
          <Box v-if="!!city">
            <Box padded horizontal>
              <Text stretchy>{{city}}, {{country}}</Text>
              <Text>{{temp}}&deg;C</Text>
            </Box>
            <Text>{{weatherDescription}}</Text>
            <Separator horizontal/>
            <Box padded horizontal>
              <Text stretchy>Min: {{tempMin}}&deg;C</Text>
              <Text stretchy>Max: {{tempMax}}&deg;C</Text>
              <Text stretchy>Humidity: {{humidity}}%</Text>
            </Box>
          </Box>
        </Box>
    </Group>
    </Box>
</Window>

보시다시피 첫 번째 상자는 이전 장에서 만든 입력 컨테이너입니다. 아래에는 Separator가 있습니다 - 구분선은 시각적으로 분리 된 위젯입니다. 다음은 Group입니다 - 내용물 주위에 캡션이 있는 경계선을 제공하는 컨테이너입니다.

Group 안에는 이미 보았던 구성 요소의 조합을 볼 수 있습니다. 간단한 텍스트 내용의 경우 Text, 컨테이너의 경우 Box 및 Separator입니다. 이제 응용 프로그램은 다음과 같이 보입니다.

📦 패키징

필자가 생각하기에, Vuido 기반 응용 프로그램을 패키지화하는 가장 쉽고 쉬운 방법은 라이브러리 작성자가 권장하는 방법입니다. LaunchUI와 LaunchUI Packager를 사용하여 응용 프로그램을 패키지로 만들고 배포 할 것을 권장합니다.

전역으로 LaunchUI Packager를 설치했습니다 :

npm install --global launchui-packager

그런 다음 앱 루트 폴더에서 다음 명령을 실행했습니다.

launchui-packager weather-app 1.0 dist/main.min.js

위의 명령에서 weather-app은 응용 프로그램 이름이고, 1.0은 버전이고 dist/main.min.js는 번들 파일의 경로입니다.

이 후 내 응용 프로그램과 폴더! 패키지 크기는 문서에 나온 것보다 조금 더 많은 39Mb이지만 (docs에 언급 된 것은 최대 20Mb) 어쨌든 별로 많지 않습니다.

실행하면 (0.1초 정도) 정말 빠르게 시작한다는 것을 알 수 있습니다.

🌟 결론

장점

• 만들기 쉽다.

• Electron으로 만들어진 앱에 비해 작은 패키지 크기 제공

• 잘 기록 된 문서

단점

• 스타일 적용 불가

• 아직 릴리즈되지 않음 (현재 버전은 0.2.0 임)

Vuido는 기본 모양의 빠른 소형 응용 프로그램이 필요한 경우 좋은 옵션입니다. 그것은 명확한 문서를 가지고 있으며 아마도 내장 된 컴포넌트의 목록이 앞으로 커질 것입니다.