Как устанавливать, создавать и развертывать нативные приложения с помощью Vue

Vue-Native – это фреймворк для создания кроссплатформенных мобильных приложений. Он позволят разрабатывать приложения в Vue.js, используя React Native.

Мы создадим приложение, которое извлекает популярные гифки с платформы Giphy, используя Giphy API. Приложение будет отображать гифки и информацию о них с помощью компонентов ScrollView, Text, Image и т.д.

Содержание

Требования

Чтобы следовать этому руководству, вам нужно установить Node версии не ниже 6.0. А также менеджер пакетов NPM (поставляется вместе с Node) или Yarn.

Кроме этого необходимы базовые знания JavaScript и Vue. Вы можете обратиться к официальной документации Vue, размещённой здесь.

Подготовка

Сначала нужно настроить проект и установить зависимости. Мы будем использовать встроенный CLI Vue для инициализации нашего приложения.

Сначала установите Vue Native CLI, выполнив следующую команду:

yarn global add vue-native-cli

или

npm install -g vue-native-cli

Затем инициализируйте новый проект:

vue-native init vue-gifs

Выполнение этой команды загрузит приложение Create React Native App с помощью Expo CLI.

На момент написания этого руководства Vue Native CLI требуется React Native версии 0.55.4 и expo версии 29.0.0. Обновите файл package.json, чтобы установить эти версии. Мы также добавим команды для сборки под платформы iOS и Android, изменив объект scripts.

//package.json

{
  "name": "vue-gifs",
  "main": "node_modules/expo/AppEntry.js",
  "private": true,
  "scripts": {
    ...
    "build:ios": "expo build:ios",
    "build:android": "expo build:android",
  },
  "dependencies": {
    "expo": "^29.0.0",
    ...
    "react-native": "0.55.4",
    ...
  },
  "devDependencies": {
    "babel-preset-expo": "^4.0.0",
    ...
  }
}

Затем обновите sdkVersion в файле app.json, чтобы он соответствовал версии expo. Откройте файл app.json и измените его, как показано ниже:

{
  "expo": {
    "name": "vue-gifs",
    "description": "This project is really great.",
    ...
    "sdkVersion": "29.0.0",
    ...
  }
}

После этого запустите команду npm install или yarn, чтобы установить необходимые версии приложений. Затем запустите приложение с помощью команды npm start.

Для создания и запуска нашего приложения мы будем использовать Expo. Это набор инструментов с открытым исходным кодом, созданный на основе React-native и предназначенный для разработки приложений под Android и iOS.

Тестирование на мобильном устройстве

Expo-cli предоставляет различные методы тестирования: используя URL-адрес, сгенерированный после запуска приложения. Его можно открыть в мобильном браузере для последующего тестирования приложения.

Выполните команду npm run start-native в папке проекта, чтобы запустить приложение с помощью expo. Обычно Expo запускает через порт 19002. Откройте страницу http://localhost:19002 для просмотра инструментов разработчика, предоставляемых платформой. Здесь вы сможете отправить ссылку для предварительного просмотра в SMS или по электронной почте.

Вы можете выбрать один из трех вариантов подключения: внешний туннель, локальная сеть или локальное соединение. Для локального подключения мобильное устройство и рабочий компьютер должны быть подключены к одной сети, а туннель работает независимо.

Следующий простой способ – загрузить официальное мобильное приложение Expo. Его можно найти Apple App Store или Google Play.

Чтобы запустить приложение в iOS, после установки откройте камеру и отсканируйте штрих-код. В Android вы также можете использовать приложение Expo.

Выполните следующую команду:

npm start

После запуска приложения отсканируйте штрих-код и просмотрите приложение в Expo.

Следующий вариант тестирования на мобильном устройстве – использование эмулятора или симулятора в Android studio или Xcode. Скачайте и установите инструмент для интересующей вас платформы. После этого выполните любую из следующих команд, чтобы запустить приложение:

npm run ios

или

npm run android

Создание приложения Giphy

Чтобы начать использовать Giphy API, войдите в свою учетную запись Giphy. Следующим шагом является создание приложения в платформе разработчика.

На панели инструментов учетной записи разработчика есть кнопка «Создать приложение», нажмите её и введите сведения о своем приложении.

После этого приложение должно отображаться на панели инструментов с ключом API. Этот ключ будет использоваться при отправке запросов в Giphy.

Для этого мы будем использовать Javascript SDK. Выполните следующую команду для установки пакета:

npm install --save giphy-js-sdk-core

Теперь можно использовать API с помощью этого SDK.

Компонент приложения

Создаваемое нами приложение отображает популярные гифки, доступные на платформе Giphy. Через Giphy API мы получаем нужное изображение, заголовок и тип Gif. Данные будут отображаться с помощью компонентов, предоставляемых vue-native. Откройте файл App.vue, расположенный в корневой папке проекта и измените его, как показано ниже:

<template>
    <view>
        <scroll-view class="scroll-view">
           //TODO: Создать элемент gif и заголовок
           <view class="loading-container" :style="{flex: 1, justifyContent: 'center'}" v-if="loading">
              <activity-indicator size="large" color="#0000ff"></activity-indicator>
            </view>         </scroll-view>
    </view>
</template>
<script>
  import Giphy from 'giphy-js-sdk-core';
  const client = Giphy('GIPHY_API_KEY');

  export default {
    name: 'App',
    data() {
      return {
        gifs: [],
        loading: true,
      };
    },
    async created() {
      const response = await client.trending('gifs', {limit: 20});
      this.gifs = response.data;
    },
  };
</script>
<style>
    .scroll-view {
        padding-top: 20px;
        padding-bottom: 30px;
    }
    .loading-container {
        height: 600px;
    }
</style>

В приведенном выше фрагменте кода компонент App отображает компонент scrollview. Он является контейнером для других компонентов. Он отображает только ActivityIndicator, который будет заменен списком гифок после завершения вызова API.

Также мы создаем экземпляр клиента Giphy, используя ключ API из панели инструментов разработчиков. Нужно заменить строку ‘

GIPHY_API_KEY
‘ на ключ API.

Вызов метода trending осуществляет запрос к Giphy. Первым передаваемым параметром является gifs. Он указывает, какие популярные элементы должны быть возвращены: гифки или стикеры. Второй параметр – это объект, предоставляющий необязательные параметры: limit (лимит), offset (смещение), rating (рейтинг) и fmt (формат).

Мы передадим только параметр limit, ограничив результаты 20 элементами. Этот вызов выполняется в созданном жизненном цикле компонента. Далее мы создадим элемент gif для отображения возвращенных результатов.

После перезагрузки приложение должно отобразить индикатор активности:

Создание компонента gif

Каждый элемент gif будет отображаться с использованием компонента View. Он поддерживает макет с использованием flexbox, стилей и специальных возможностей. Каждый элемент будет отображать гифку, заголовок и тип. Создайте папку components в корневой папке проекта. В каталоге компонентов создайте файл GifItem.vue и измените его, добавив приведенный ниже код:

// GifItem.vue
<template>
  <view class="container">
    <image class="img" :source="{uri: `${gif.images.original.url}`}" style="max-width:100%;"/>
    <text class="title">{{titleCase(gif.title)}}</text>
  </view>
</template>
<script>
export default {
  name: "GifItem",
  props: ["gif"],
  methods: {
    titleCase(text) {
      const textArray = text.split(" ");
      return textArray
        .map(text => {
          const trimmedText = text.trim();
          return `${trimmedText[0].toUpperCase()}${trimmedText.slice(1)}`;
        })
        .join(" ");
    }
  }
};
</script>
<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;
  position: relative;
}
.img {
  height: 200px;
  width: 300px;
}
.title {
  font-size: 14px;
  font-weight: 500;
  margin-top: 7px;
}
</style>

Используя компонент Image, мы отобразим источник каждого изображения. А с помощью компонента Text — заголовок рисунка. Компонент Image имеет свойство source, которое является объектом со свойством uri.

Метод titleCase принимает заголовок gif-файла и возвращает текст, делая первые буквы слов заглавными. Компонент GifItem имеет одно свойство — gif.

Изменим файл App.vue, чтобы создать новый GifItem. Добавьте в файл следующий фрагмент кода:

<template>
    <view>
        <scroll-view class="scroll-view">
            <gif-item v-for="gif in gifs" :gif="gif" :key="gif.id" v-if="!loading"/>
            <view class="loading-container" :style="{flex: 1, justifyContent: 'center'}" v-if="loading">
                <activity-indicator size="large" color="#0000ff"></activity-indicator>
            </view>
        </scroll-view>
    </view>
</template>
<script>
  import Giphy from 'giphy-js-sdk-core';
  const client = Giphy('API_KEY');
  import GifItem from './components/GifItem';

  export default {
    name: 'App',
    data() {
      return {
        gifs: [],
        loading: true
      };
    },
    async created() {
      const response = await client.trending('gifs', {limit: 20});
      this.gifs = response.data;
      this.loading = false;
    },
    components: {GifItem}
  };
</script>
<style>
    .scroll-view {
        padding-top: 20px;
        padding-bottom: 30px;
    }
    .loading-container {
        height: 600px;
    }
</style>

После открытия приложения в Expo вы увидите следующий результат:

Компонент заголовка

После успешного запроса популярных гифок и их отображения добавим заголовок для представления контекста приложения. Используя компонент View, создадим область для размещения заголовка приложения. Создайте файл header.vue в каталоге components и измените его с помощью кода, приведенного ниже:

// /components/header.vue
<template>
    <view class="header-container">
        <text class="header">Trending</text>
    </view>
</template>
<script>
  export default {
    name: 'header.vue'
  };
</script>
<style scoped>
    .header-container {
        background-color: rgba(0, 0, 0, 0.05);
        display: flex;
        justify-content: center;
        padding-top: 15px;
        padding-bottom: 15px;
        border-bottom-color: aquamarine;
        border-bottom-width: 1px;
        margin-top: 20px;
    }
    .header {
        font-size: 16px;
        color: black;
        opacity: 0.8;
        font-weight: 600;
        text-align: center;
    }
</style>

Теперь добавим компонент заголовка к компоненту приложения. Это отобразит простой заголовок в верхней части приложения. Обновите файл `App.vue`, включив в него компонент Header:

<template>
    <view>
        <header/>
        <scroll-view class="scroll-view">
            ...
        </scroll-view>
    </view>
</template>
<script>
  import Giphy from 'giphy-js-sdk-core';
  const client = Giphy('TxuQbNU1nyDBwpqrcib61LxmOzsXTPEk');

  import GifItem from './components/GifItem';
  import Header from './components/header';

  export default {
    name: 'App',
    data() {
     ...
    },
    async created() {
      ...
    },
    components: {GifItem, Header}
  };
</script>
<style>
   ...
</style>

После этого заголовок будет добавлен в верхнюю часть приложения.

Развертывание приложения

Мы будем развёртывать наше приложение в магазине Google Play. Для этого нужно в файл app.json добавить специфические свойства Android. Откройте файл app.json и включите в него поле `android`:

{
  "expo": {
    ...
    "android": {
      "package": "com.vue.gifs"
    }
  }
}

Поле android.package – это уникальное значение, которое будет представлять ваш пакет в магазине приложений. После изменения файла выполните команду npm run build:android.

Эта команда выдаст вам приглашение с просьбой указать хранилище ключей или сгенерировать новое. Если у вас есть хранилище ключей, то можете выбрать эту опцию или позволить expo сгенерировать новое.

После этого будет сгенерирована ссылка для загрузки приложения.

Чтобы развернуть загруженный APK-файл в магазине Google Play, перейдите в Play Console и создайте учетную запись. После чего оплатите регистрационный сбор в размере 25 долларов США.

Для окончания регистрации перейдите на эту страницу и следуйте инструкциям, чтобы загрузить приложение в магазин Google Play.

Заключение

Vue native предоставляет решение для создания мобильных приложений с использованием Vue.js. Он компилируется в React и использует компоненты React Native.

Vue native находится на ранней стадии развития и обладает большим потенциалом. Что позволяет разработчикам, использующим Vue.js, создавать кроссплатформенные мобильные приложения. Вы можете просмотреть исходный код примера, использованного в данном руководстве, на Github.

Данная публикация представляет собой перевод статьи «How to Setup, Build and Deploy Native Apps with Vue» , подготовленной дружной командой проекта Интернет-технологии.ру

Меню