Electron 및 Vue를 사용한 애플리케이션 구축

저자: Elijah Asaolu✏️
JavaScript는 전방의 요소를 처리하는 데 뛰어나기 때문에 세계에서 가장 자주 사용하는 프로그래밍 언어 중의 하나로 여겨진다.같은 언어로 플랫폼을 뛰어넘는 모바일 응용 프로그램을 만들고 API를 개발하며 백엔드 인프라를 사용하고 데스크톱 응용 프로그램을 만들 수 있습니다.
이미 많은 라이브러리와 프레임워크가 이 모든 분야에 사용되고 있지만, Electron은 자바스크립트를 사용하여 데스크톱 응용 프로그램을 개발하는 데 매우 뛰어나다. 본고에서 Vue와 Electron을 사용하여 우리의 첫 번째 크로스플랫폼 데스크톱 응용 프로그램을 만드는 방법을 소개할 것이다.

선결 조건

이 문서에서는 다음 전제 조건을 가정합니다.

JavaScript

기본 정보

기본 숙지 Vue

노드js와 npm는

을 설치했다

Electronic Professional 우선 순위,

필요 없음

무엇이 전자입니까?

Electron은 웹 기술 (HTML, CSS, 자바스크립트) 을 사용하여 이 컴퓨터의 크로스플랫폼 데스크톱 응용 프로그램을 구축하는 데 사용되는 소스 자바스크립트 프레임워크입니다.이 기술에 익숙해지면 윈도, 리눅스, 맥OS를 위한 데스크톱 프로그램을 같은 코드 라이브러리로 개발할 수 있다는 뜻이다.
Electron은 막후에서 Chromium 엔진과 Node를 결합시켰다.js runtime는 독립된 데스크톱 프로그램 형식으로 코드 라이브러리를 읽고 실행합니다.그 기능을 증명하기 위해 Electron을 사용하여 만든 유행하는 데스크톱 프로그램은 Slack, VS Code, Whats App desktop이다.

찬성 의견

Electron을 사용하면 다음과 같은 이점이 있습니다.

단일 코드 라이브러리 - Electron을 사용하면 하나의 코드 라이브러리로 서로 다른 운영체제에 데스크톱 응용 프로그램을 만들 수 있습니다.

네트워크 기술을 활용하라. 만약 당신이 이전에 기본 네트워크 창고 (HTML, CSS, 자바스크립트) 를 사용한 경험이 있다면, Electron

을 사용하면 입문이 매우 쉽다

대 지역사회 - Electron 지역사회는 상당히 크고 활발한 지역사회이다. 이 점을 증가시키는 주요한 요소는 이 구조가 톱 회사

에 의해 사용되고 지원되고 있다는 것이다.

기만하다

다른 모든 것과 마찬가지로, Electron을 사용하여 데스크톱 프로그램을 구축하는 것도 단점이 있다.여기에는 다음이 포함됩니다.

더 높은 자원 소모 - 자바 FX, Objective C 등 다른 환경에서 작성된 프로그램에 비해 Electron으로 작성된 데스크톱 프로그램이 소모하는 CPU와 RAM이 더 많다

더 큰 응용 프로그램 크기 - 앞에서 말한 바와 같이 Electron 응용 프로그램은 구축 과정에서 Chromium 엔진을 묶어서 간단한 응용 프로그램

에도 더 큰 응용 프로그램 크기가 생길 수 있다.

Vue+전자

이전에 Vue를 사용한 적이 있다면 Electron을 사용하는 것은 상당히 간단합니다.Electron Builder라는 Vue CLI 플러그인을 통해 구현되며, 다음 섹션에서는 themoviedb API에서 유행하는 영화의 전체 목록을 반환하는 예제 어플리케이션을 구축합니다.
다음은 우리 영화 프로그램의 미리보기입니다.

개시하다

Electron builder는 Vue CLI 플러그인이기 때문입니다.즉, Vue CLI 자체를 설치한 다음 사용해야 합니다.이 작업을 수행하려면 다음과 같이 하십시오.

npm install -g @vue/cli

위 명령을 실행하면 Vue CLI의 최신 안정적인 버전이 설치됩니다. vue -V을 실행하여 Vue 버전이 설치되어 있는지 확인할 수 있습니다.
그런 다음 새 Vue 응용 프로그램을 만들려면 다음 명령을 실행하여 Vue desktop이라는 새 응용 프로그램을 만듭니다.

vue create vue-desktop

마지막 단계에서는 다음 명령을 실행하여 Vue Electron Builder 플러그인을 추가합니다.

vue add electron-builder

이 Vue 프로젝트에 추가할 Electron 버전을 요청합니다. 완료되면 Electron Builder가 설치되어 있음을 알리는 성공 메시지가 표시됩니다.그런 다음 다음 다음 명령을 실행하여 응용 프로그램을 시작할 수 있습니다.

npm run electron:serve

다음 화면 캡처와 유사한 출력을 볼 수 있습니다.

개발 도구를 닫으면 다음 그림과 같이 응용 프로그램의 전체 미리보기가 표시됩니다.

파일 구조

기본 텍스트 편집기에서 항목 폴더를 열 때는 다음 그림과 같이 다음 파일과 디렉토리를 표시해야 합니다.이전에 Vue CLI를 사용한 적이 있으면 파일 구조가 거의 동일하다는 것을 알 수 있습니다.유일한 변화는 새로운 background.js 파일을 추가한 것입니다. 이 파일은 우리의 Vue 프로그램을 독립된 데스크톱 프로그램으로 실행하는 것을 책임집니다.

이 파일에서 프로그램이 시작될 때 창의 기본 너비와 높이를 설정하고 프로그램 제목을 설정하며 자동 업데이트 기능을 추가할 수 있습니다.

우리의 영화 응용 프로그램을 구축하다

이제 우리는 Vue Electron Builder의 최신 진전을 파악하고 우리의 인기 영화 응용 프로그램을 구축하기 시작했다.
첫 번째 단계는 public/index.html을 열고 헤드 부분에 Bootstrap과 Font-Awesome 항목을 추가하는 것입니다. 다음 코드와 같습니다.

...
<link
  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
  rel="stylesheet"
/>
<link
  rel="stylesheet"
  href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
/>
...

그런 다음 src/components 폴더에 MovieCard.vue이라는 새 파일을 만들고 다음 코드를 붙여넣습니다.

<template>
  <main>
    <div class="card mb-4 shadow-lg border border-secondary bg-dark text-light">
      <img
        class="card-img-top"
        :src="'https://image.tmdb.org/t/p/w500/' + movie.poster_path"
        alt="Card image cap"
      />
      <div class="card-body">
        <p class="card-text">{{ movie.title }}</p>
        <div class="">
          <div class="d-flex justify-content-between align-items-center">
            <div class="btn-group">
              <button type="button" class="btn btn-sm btn-outline-secondary">
                <i class="fas fa-heart"></i>
              </button>
              <button type="button" class="btn btn-sm btn-outline-secondary">
                <i class="fas fa-plus"></i>
              </button>
            </div>
            <small class="ms-auto text-muted"
              >Rating {{ movie.vote_average }}/10</small
            >
          </div>
        </div>
      </div>
    </div>
  </main>
</template>
<script>
export default {
  name: "MovieCard",
  props: {
    movie: {
      type: Object,
      required: true,
    },
  },
};
</script>

여기서 우리는 각 영화의 모든 세부 사항을 포함하는 MovieCard 구성 요소를 만들었다.다음 단계에서는 src/App.vue에 포함된 모든 코드를 제거하고 다음을 사용하여 업데이트합니다.

<template>
  <div id="app">
    <div class="container">
      <div class="text-center">
        <h2 class="text-center mt-5">Trending Movies 🍿</h2>
        <p>Keep up with the hottest movies that are trending this week.</p>
      </div>

      <div class="my-4">
        <a href="#" class="mx-3 h4"> Trending today</a>
        <a href="#" class="mx-3 h4">This week</a>
      </div>
    </div>
  </div>
</template>

이 때 응용 프로그램을 실행하면 다음과 같은 출력이 있어야 합니다.

마지막 단계는 TMDB API에서 가장 유행하는 영화를 가져오는 방법을 정의하는 것입니다.이 절차에서는 API 키를 검색하려면 create a free account을 사용해야 합니다.
이렇게 하려면 다음 코드를 사용하여 src/App.vue을 업데이트하십시오.

<template>
  <div id="app">
    <div class="container">
      <div class="text-center">
        <h2 class="text-center mt-5">Trending Movies 🍿</h2>
        <p>Keep up with the hottest movies that are trending this week.</p>
      </div>

      <div class="my-4">
        <a href="#" @click="getTrendingMovies('day')" class="mx-3 h4">
          Trending today</a
        >
        <a href="#" @click="getTrendingMovies('week')" class="mx-3 h4"
          >This week</a
        >
      </div>

      <div class="row" v-if="movies.length > 0">
        <div class="col-md-3" v-for="(movie, i) in movies" :key="i">
          <movie-card :movie="movie" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MovieCard from "./components/MovieCard.vue";
export default {
  name: "App",
  components: {
    MovieCard,
  },
  data() {
    return {
      movies: [],
      apiKey: "YOUR_API_KEY_HERE",
    };
  },
  methods: {
    getTrendingMovies(category) {
      return fetch(
        `https://api.themoviedb.org/3/trending/movie/${category}?api_key=${this.apiKey}`
      )
        .then((response) => response.json())
        .then((data) => {
          this.movies = data.results;
        });
    },
  },
  mounted() {
    this.getTrendingMovies("day");
  },
};
</script>

여기에 이전에 스크립트 부분에서 만든 MovieCard 구성 요소를 가져왔고, TMDB API에서 우리의 영화를 불러오고, 마운트된 갈고리에서 이 함수를 실행하는 새로운 방법도 추가했습니다.
태그에 대한 작은 변경 사항은 TMDB에서 반환된 모든 결과를 getTrendingMovies() 구성 요소로 순환시키는 것입니다.
만약 우리가 이 단계에서 프로그램을 리셋한다면 모든 것이 정상적으로 작동할 것입니다. 아래 그림과 같은 출력이 있어야 합니다.

응용 프로그램 업데이트 아이콘

Electron 아이콘은 프로그램의 기본 아이콘으로 설정되어 있으며, 대부분의 경우 사용자 정의 아이콘을 설정해야 할 수도 있습니다.MovieCard의 newBrowserWindow() 메서드에 새 아이콘 항목을 추가하면 다음과 같이 애플리케이션 아이콘을 업데이트할 수 있습니다.

...
const win = new BrowserWindow({
    width: 800,
    height: 600,
    title: "Trending movies",
[+] icon: "./path/to/icon.png",
...

애플리케이션 구축

응용 프로그램을 독립된 실행 가능한 파일로 컴파일하는 것은 매우 간단하다.다음과 같은 명령을 실행할 수 있습니다.

npm run electron:build

생성된 실행 가능한 프로그램은 사용자가 사용하는 운영체제에 따라 달라진다는 것을 기억하십시오.그러나 Electron Builder에서는 실행 파일을 생성할 플랫폼을 정의할 수 있습니다.사용 가능한 옵션은 Mac, Win 및 Linux입니다.
즉, 애플리케이션의 Linux 버전을 구축하려면 다음 명령을 실행합니다.

npm electron:build -- --linux nsis

결론

이 자습서에서는 Electron과 Vue를 사용하여 플랫폼 간 데스크탑 애플리케이션을 만드는 방법에 대해 설명합니다.우리는 또한 일이 어떻게 작동하는지 알아보기 위해 예시적인 trending movies 프로그램을 구축했다.전체 응용 프로그램의 코드는 GitHub에서 찾을 수 있습니다.
만약 당신이 이 문장을 읽는 것을 좋아한다면, 아래에 메시지를 남겨 주세요.

사용자와 동일한 방식으로 Vue 애플리케이션을 경험할 수 있습니다.

Vue를 디버깅합니다.js 응용 프로그램은 매우 어려울 수 있습니다. 특히 사용자 세션에서 몇 십 개 (몇 백 개가 아니라면) 돌연변이가 있을 수 있습니다.프로덕션 중인 모든 사용자를 대상으로 Vue 돌연변이를 모니터링하고 추적하는 데 관심이 있다면 try LogRocket으로 전화하십시오.

LogRocket은 웹 응용 프로그램에 사용되는 DVR과 같이 Vue 응용 프로그램에서 발생하는 모든 것을 기록한다. 이는 네트워크 요청, 자바스크립트 오류, 성능 문제 등을 포함한다.문제가 발생한 원인을 추측할 필요가 없습니다. 문제가 발생했을 때의 응용 프로그램의 상태를 종합하고 보고할 수 있습니다.
LogRocket Vuex 플러그인은 Vuex 돌연변이를 LogRocket 콘솔에 기록하여 오류를 초래하는 상하문과 문제가 발생했을 때 프로그램의 상태를 제공합니다.
Vue 애플리케이션을 디버깅하는 방식을 현대화 - Start monitoring for free