Как писать мобильные приложения на vue
Эта статья — пошаговое руководство по настройке базового CRUD-приложения с помощью Vue и Flask. Начнём с создания нового приложения Vue, используя Vue CLI, а затем перейдём к выполнению основных операций CRUD с помощью RESTful API на бэкенде под управлением Python и Flask.
- Vue v2.5.2,
- Vue CLI v2.9.3,
- Node v10.3.0,
- npm v6.1.0,
- Flask v1.0.2,
- Python v3.6.5.
К концу этого урока вы узнаете:
- что такое Flask;
- что такое Vue и как он соотносится с другими UI-библиотеками и фронтенд-фреймворками вроде Angular и React.
- выстраивать Vue-проект, используя Vue CLI;
- создавать и рендерить компоненты Vue в браузере;
- создавать одностраничные приложения с компонентами Vue;
- подключать Vue-приложение к бэкенду Flask;
- разрабатывать RESTful API с помощью Flask;
- стилизовать компоненты Vue с помощью Bootstrap;
- использовать Vue Router для создания маршрутов и рендеринга компонентов.
Что такое Flask?
Flask — это простой, но мощный микро-фреймворк для Python, идеально подходящий для создания RESTful API. Как Sinatra (Ruby) и Express (Node), он минималистичен и гибок, поэтому вы можете начинать с простых проектов и при необходимости создавать более сложные приложения.
Если вы первый раз работаете с Flask, вам стоит изучить следующие ресурсы:
Что такое Vue?
Vue — это JavaScript-фреймворк с открытым исходным кодом. Используется для создания пользовательских интерфейсов. Он содержит некоторые из лучших концепций React и Angular, но по сравнению с ними он более доступен, поэтому новички могут быстро приступать к работе. Также он не уступает этим фреймворкам в мощности и предоставляет все необходимые функции для создания современных фронтенд-приложений.
25–27 ноября, Онлайн, Беcплатно
Чтобы узнать больше о Vue, а также о плюсах и минусах его использования по сравнению с Angular и React, можете посмотреть следующие статьи:
Если вы первый раз работаете с Vue, вам следует прочитать введение из официального руководства Vue.
Настройка Flask
Начнём с создания новой директории проекта:
В директории flask-vue-crud создайте новый каталог с именем server . Затем в этом каталоге создайте и активируйте виртуальную среду разработки:
Вышеуказанные команды могут отличаться в зависимости от вашей среды разработки.
Установите Flask вместе с расширением Flask-CORS:
Добавьте файл app.py в только что созданный каталог:
Flask-CORS нужен для отправки cross-origin-запросов (запросы, исходящие из другого протокола, IP-адреса, имени домена или порта), поэтому необходимо включить общий доступ к ресурсам (CORS).
Стоит отметить, что описанная выше настройка позволяет отправлять запросы из разных источников по всем маршрутам из любого домена, протокола или порта. В продакшне должны быть разрешены только запросы из домена, на котором размещено фронтенд-приложение. Для получения дополнительной информации можете ознакомиться с документацией Flask-CORS.
Нажмите Ctrl + C , чтобы завершить работу сервера. Затем вернитесь к корневой папке проекта. Теперь перейдём к фронтенду и настроим Vue.
Настройка Vue
Для создания индивидуального темплейта проекта используем мощный интерфейс Vue CLI.
Установите его глобально:
Если вы первый раз работаете с npm, вам будет полезно почитать официальное руководство по нему.
В каталоге flask-vue-crud выполните следующую команду для инициализации нового проекта Vue под именем client с конфигом webpack:
webpack — это пакетный модуль и инструмент для сборки, используемый для создания, минимизации и объединения файлов JavaScript и других клиентских ресурсов.
Шаги создания нового проекта Vue:
- Vue-сборка: Runtime + Compiler.
- Установить vue-router? — Да.
- Использовать ESLint для линтинга кода? — Да.
- Выберите пресет ESLint — Airbnb.
- Настроить юнит-тесты? — Нет.
- Настроить тесты e2e с Nightwatch? — Нет.
- Запустить установку npm после создания проекта? — Да, использовать NPM.
Должно получиться следующее:
Обратите внимание на сгенерированную структуру проекта. Она может показаться большой, но по факту вы будете иметь дело только с файлами и папками в каталоге /src вместе с файлом index.html .
Файл index.html является отправной точкой данного Vue-приложения.
Также обратите внимание на элемент <div> с идентификатором app . Это контейнер, который Vue будет использовать для присоединения сгенерированных HTML и CSS при создании пользовательского интерфейса.
Файлы и каталоги внутри папки src :
main.js — точка входа в приложение, которая загружает и инициализирует Vue вместе с корневым компонентом.
App.vue — корневой компонент, из которого будут рендериться все остальные компоненты (отправная точка).
assets — место хранения статических ассетов вроде изображений и шрифтов.
components — место хранения UI-компонентов.
router — место определения URL-адресов и сопоставление их с компонентами.
Взгляните на файл client/src/components/HelloWorld.vue . Это компонент Single File, который разбит на три разных подраздела:
- template: для компонентного HTML;
- script: здесь компонентная логика реализована через JavaScript;
- style: для стилей CSS.
Добавьте новый компонент с именем Ping.vue в папку client/src/components :
Обновите файл client/src/router/index.js так, чтобы он отображал / в компонент Ping:
В client/src/App.vue удалите изображение из темплейта:
Теперь в браузере должно отобразиться « Hello! ».
Чтобы соединить клиентское Vue-приложение с бэкендом на Flask, можно использовать библиотеку axios для отправки AJAX-запросов.
Начнём с установки:
Обновим раздел script компонента в Ping.vue следующим образом:
Создание веб-приложения с помощью Vue.js, Vuetify и FirebaseНастройка Bootstrap
Добавим Bootstrap, чтобы можно было быстро настроить стиль приложения.
Игнорируйте предупреждения для jquery и popper.js . Не добавляйте их в свой проект.
Импортируем стили Bootstrap в client/src/main.js :
Обновим раздел style в client/src/App.vue :
Убедитесь, что Bootstrap подключён корректно, используя Button и Container в компоненте Ping :
Добавим компонент Books в новый файл Books.vue :
Для избавления от хеша в URL замените mode на history , чтобы использовать history API браузера для навигации:
Добавим таблицу в стиле Bootstrap в компонент Books :
Отображаться должно следующее:
Теперь можно приступить к созданию функциональности CRUD-приложения.
Что будем создавать?
GET-маршрут
Сервер
Добавим список книг в server/app.py :
Добавим обработчик маршрута:
Клиент
После инициализации компонента вызываем метод getBooks() через хук жизненного цикла (lifecycle hook) created, который выбирает книги из только что настроенного маршрута на бэкенде.
Больше информации про Lifecycle Hook находится здесь.
В темплейте просматривается список книг с помощью директивы v-for, которая создаёт новую строку таблицы на каждой итерации. Значение индекса используется в качестве ключа (key). Затем используется директива v-if для отображения Yes или No — читал пользователь книгу или нет.
Bootstrap Vue
В следующем разделе используем компонент Modal для добавления новых книг. Для этого добавим библиотеку Bootstrap Vue, которая предоставляет набор Vue-компонентов, стилизованных с помощью HTML и CSS на основе Bootstrap.
Выбор Bootstrap Vue обоснован тем, что компонент Modal Bootstrap использует jQuery. Следует избегать совместного использования jQuery и Vue в одном проекте, поскольку последний использует Virtual Dom для обновления DOM-структуры. Другими словами, если вы используете jQuery для манипуляций с DOM, Vue об этом не узнает. По крайней мере, если вам необходимо использовать jQuery, не используйте его вместе с Vue на одних и тех же элементах DOM.
Подключим библиотеку Bootstrap Vue в файле client/src/main.js :
POST-маршрут
Сервер
Обновим существующий обработчик маршрута для обработки POST-запросов для добавления новых книг:
Запустив сервер Flask, вы можете проверить POST-маршрут на новой вкладке браузера:
Клиент
Внесём следующий modal для добавления новой книги. Начнём с HTML:
Эту часть нужно добавить непосредственно перед закрывающим тегом </div> . Взгляните на код, v-model — это директива, используемая для привязки входных значений обратно к стейту.
Что делает Hide-Footer , вы можете просмотреть самостоятельно в документации по Bootstrap Vue.
Обновим раздел script :
Рассмотрим, что происходит в этом фрагменте кода.
- addBookForm() привязывается к входным данным формы через v-model . Это называется двусторонней привязкой. Узнать об этом подробнее вы можете здесь.
- onSubmit() запускается, когда пользователь успешно отправляет форму. При отправке предотвращается обычное поведение браузера ( evt.preventDefault() ), закрывается modal ( this.$Refs.addBookModal.hide() ), запускается метод addBook() и очищается форма ( initForm() ).
- addBook() отправляет POST-запрос в /books для добавления новой книги.
- Остальные изменения вы можете посмотреть самостоятельно в документации Vue по мере необходимости.
Теперь обновим кнопку «Add Book» в темплейте, чтобы при её нажатии отображался modal:
Теперь компонент должен выглядеть следующим образом:
Можно выполнить проверку, попробовав добавить книгу.
Компонент Alert
Добавим новый файл с именем Alert.vue в каталог client/src/components :
Затем импортируем его в разделе script компонента Books и зарегистрируем:
Теперь можно ссылаться на новый компонент в разделе template :
Обновите браузер. Должно быть отображено следующее:
Теперь добавим фактический компонент b-alert в шаблон:
Больше информации о props находится здесь.
Добавьте message в параметр data в Books.vue :
Добавим v-if , чтобы alert отображался, только если showMessage имеет значение true :
Добавим showMessage в data :
Снова обновим addBook() , установив в showMessage значение true :
Теперь можно проверить работу.
PUT-маршрут
Сервер
Для обновлений необходимо использовать уникальный идентификатор, поскольку нельзя полагаться на то, что заголовок книги будет уникальным. Можно использовать uuid из стандартной библиотеки Python.
Обновим BOOKS в server/app.py :
Также не забудьте импортировать:
Рефакторинг all_books для учёта уникального идентификатора при добавлении новой книги:
Добавим новый обработчик маршрута:
Добавим вспомогательную функцию:
Клиент
Будем идти пошагово:
- Добавление modal и формы.
- Обработка нажатия кнопки Update.
- Подключение AJAX-запроса.
- Оповещение пользователя (Alert).
- Обработка нажатия кнопки Cancel.
1. Добавление modal и формы
Сначала добавим новый modal к темплейту, сразу после первого modal:
Добавим стейт формы в часть data раздела script :
2. Обработка нажатия кнопки Update
Обновим кнопку «Update» в таблице:
Добавим новый метод для обновления значений в editForm :
Затем добавим метод, обрабатывающий отправку формы:
3. Подключение AJAX-запроса
4. Оповещение пользователя (Alert)
5. Обработка нажатия кнопки Cancel
Обязательно протестируйте приложение. Убедитесь, что modal отображается при нажатии кнопки и что введённые значения заполнены правильно.
DELETE-маршрут
Сервер
Обновим обработчик маршрута:
Клиент
Обновим кнопку «Delete» следующим образом:
Добавим методы для обработки нажатия кнопки, а затем удалим книгу:
Когда пользователь нажимает кнопку удаления, вызывается метод onDeleteBook() , который запускает другой метод removeBook() . Этот метод отправляет DELETE-запрос на сервер. Когда приходит ответ, отображается Alert и запускается getBooks() .
Заключение
В этой статье были рассмотрены основы настройки CRUD-приложения с помощью Vue и Flask. Исходный код из тега v1 вы можете найти в репозитории flask-vue-crud.
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, выполнив следующую команду:
Затем инициализируйте новый проект:
Выполнение этой команды загрузит приложение Create React Native App с помощью Expo CLI.
На момент написания этого руководства Vue Native CLI требуется React Native версии 0.55.4 и expo версии 29.0.0. Обновите файл package.json , чтобы установить эти версии. Мы также добавим команды для сборки под платформы iOS и Android , изменив объект scripts .
Затем обновите sdkVersion в файле app.json , чтобы он соответствовал версии expo. Откройте файл app.json и измените его, как показано ниже:
После этого запустите команду npm install или yarn , чтобы установить необходимые версии приложений. Затем запустите приложение с помощью команды npm start .
Для создания и запуска нашего приложения мы будем использовать Expo. Это набор инструментов с открытым исходным кодом, созданный на основе React-native и предназначенный для разработки приложений под Android и iOS.
Тестирование на мобильном устройстве
Expo-cli предоставляет различные методы тестирования: используя URL-адрес, сгенерированный после запуска приложения. Его можно открыть в мобильном браузере для последующего тестирования приложения.
Вы можете выбрать один из трех вариантов подключения: внешний туннель, локальная сеть или локальное соединение. Для локального подключения мобильное устройство и рабочий компьютер должны быть подключены к одной сети, а туннель работает независимо.
Следующий простой способ – загрузить официальное мобильное приложение Expo. Его можно найти Apple App Store или Google Play.
Чтобы запустить приложение в iOS, после установки откройте камеру и отсканируйте штрих-код. В Android вы также можете использовать приложение Expo.
Выполните следующую команду:
После запуска приложения отсканируйте штрих-код и просмотрите приложение в Expo.
Следующий вариант тестирования на мобильном устройстве – использование эмулятора или симулятора в Android studio или Xcode . Скачайте и установите инструмент для интересующей вас платформы. После этого выполните любую из следующих команд, чтобы запустить приложение:
Создание приложения Giphy
Чтобы начать использовать Giphy API, войдите в свою учетную запись Giphy. Следующим шагом является создание приложения в платформе разработчика .
На панели инструментов учетной записи разработчика есть кнопка «Создать приложение», нажмите её и введите сведения о своем приложении.
После этого приложение должно отображаться на панели инструментов с ключом API. Этот ключ будет использоваться при отправке запросов в Giphy.
Для этого мы будем использовать Javascript SDK . Выполните следующую команду для установки пакета:
Теперь можно использовать API с помощью этого SDK.
Компонент приложения
Создаваемое нами приложение отображает популярные гифки, доступные на платформе Giphy. Через Giphy API мы получаем нужное изображение, заголовок и тип Gif. Данные будут отображаться с помощью компонентов, предоставляемых vue-native. Откройте файл App.vue, расположенный в корневой папке проекта и измените его, как показано ниже:
В приведенном выше фрагменте кода компонент App отображает компонент scrollview . Он является контейнером для других компонентов. Он отображает только ActivityIndicator , который будет заменен списком гифок после завершения вызова API.
Вызов метода trending осуществляет запрос к Giphy. Первым передаваемым параметром является gifs . Он указывает, какие популярные элементы должны быть возвращены: гифки или стикеры. Второй параметр – это объект, предоставляющий необязательные параметры: limit (лимит), offset (смещение), rating (рейтинг) и fmt (формат).
Мы передадим только параметр limit , ограничив результаты 20 элементами. Этот вызов выполняется в созданном жизненном цикле компонента. Далее мы создадим элемент gif для отображения возвращенных результатов.
После перезагрузки приложение должно отобразить индикатор активности:
Создание компонента gif
Каждый элемент gif будет отображаться с использованием компонента View . Он поддерживает макет с использованием flexbox, стилей и специальных возможностей. Каждый элемент будет отображать гифку, заголовок и тип. Создайте папку components в корневой папке проекта. В каталоге компонентов создайте файл GifItem.vue и измените его, добавив приведенный ниже код:
Изменим файл App.vue , чтобы создать новый GifItem . Добавьте в файл следующий фрагмент кода:
После открытия приложения в Expo вы увидите следующий результат:
Компонент заголовка
После успешного запроса популярных гифок и их отображения добавим заголовок для представления контекста приложения. Используя компонент View, создадим область для размещения заголовка приложения. Создайте файл header.vue в каталоге components и измените его с помощью кода, приведенного ниже:
Теперь добавим компонент заголовка к компоненту приложения. Это отобразит простой заголовок в верхней части приложения. Обновите файл `App.vue`, включив в него компонент Header :
После этого заголовок будет добавлен в верхнюю часть приложения.
Развертывание приложения
Мы будем развёртывать наше приложение в магазине Google Play. Для этого нужно в файл app.json добавить специфические свойства Android. Откройте файл app.json и включите в него поле `android`:
Поле 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 .
Пожалуйста, оставляйте свои отзывы по текущей теме статьи. За комментарии, подписки, дизлайки, отклики, лайки низкий вам поклон!
Дайте знать, что вы думаете по этой теме в комментариях. Мы крайне благодарны вам за ваши комментарии, лайки, отклики, подписки, дизлайки!
Из-за этого все, что можно сделать в React Native, можно сделать в Vue Native, а код компилируется в React Native. Таким образом, разработчики получают выгоду от того, что предлагают экосистемы Vue и React Native.
В этом посте мы рассмотрим функции Vue Native и то, как создать мобильное приложение с помощью Vue Native.
Возможности Vue Native
Vue Native имеет множество полезных функций, которые следует учитывать при создании мобильного приложения с Vue.js.
Декларативный рендеринг
Vue Native использует парадигму декларативного программирования. Это означает, что мы просто объявляем, как мы хотим, чтобы наши компоненты и состояние отображались для получения желаемых результатов.
Двусторонняя привязка
В нашем приложении Vue Native мы можем обмениваться данными между нашим классом компонента и его шаблоном. Если мы изменим данные в нашем состоянии, они автоматически отобразятся в пользовательском интерфейсе.
Фреймворк VUE JS: быстрый старт
Получите бесплатный курс и узнайте, как создать веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля
Мы по-прежнему должны получить доступ к v-модели для двусторонней привязки данных. Это означает, что мы можем привязать значение входного элемента к свойству данных нашего компонента с помощью v-модели.
Богатство экосистемы Vue.js
Компиляция в React Native
Поскольку Vue Native зависит от React Native, разработчикам, знакомым с экосистемой React Native, легче освоиться. Мы также можем визуализировать компоненты React Native в Vue Native, не написав ни единой строчки дополнительной конфигурации для интеграции и повышения производительности.
Настройка среды разработки
Это означает, что мы должны установить любой CLI, в зависимости от потребностей нашего приложения, чтобы использовать Vue Native CLI.
Для начала мы должны установить некоторые зависимости. Сначала выполните следующую команду, чтобы глобально установить Vue Native CLI:
NativeScript - это фреймворк с открытым исходным кодом для создания по-настоящему нативных мобильных приложений с использованием JavaScript.
Что такое Vue.js?
Vue (произносится /vjuː/, примерно как view) — это прогрессивный фреймворк для создания пользовательских интерфейсов. Его ядро в первую очередь решает задачи уровня представления (view), что упрощает интеграцию с другими библиотеками и существующими проектами.
Что такое NativeScript-Vue?
NativeScript-Vue - это плагин для NativeScript, который дает вам возможность ипспользовать Vue.js для создания мобильного приложения.
Если вы уже использовали Vue.js ранее, то вы почувствуете себя как дома с NativeScript-Vue.
Зачем вам это?
Существует множество возможностей для создания мобильных приложений. Вот список ситуаций, где, как мы думаем, NativeScript-Vue отлично пригодится.
Вам нужно по-настоящему нативное iOS или Android приложение: NativeScript строит ваши приложения, используя нативные компоненты пользовательского интерфейса iOS и Android. Приложения, которые вы создаете, не основываются на веб, и поэтому они лишены ограничений, которые присутствуют у фреймворков, основанных на WebView. NativeScript также предоставляет внушительную коллекцию плагинов, которые позволяют использовать различные нативные возможности устройств. Таким образом, если вам понадобится подключиться к API или возможности iOS или Android как части вашего приложения, вы сможете сделать это при помощи NativeScript.
Вам нравится JavaScript: С NativeScript вы пишите ваше мобильное приложение на JavaScript. Не на Objective-C, не на Swift, и не на Java. Если вам нравится JavaScript, то вы полюбите писать нативные приложения для iOS и Android с помощью того же языка, который вы используете для веб- и/или Node-приложений.
Вам нравится Vue: Vue известен простотой управления слоем отображения. Если вам нравится разрабатывать приложения с использованием Vue, вы будете в своей тарелке с NativeScript-Vue, так как вы будете использовать такой же синтаксис для решения обычных задач, таких так связывание данных или обработка событий.
В чем подвох?
Если у вас есть опыт работы с Vue, то есть две большие темы, которые вам необходимо изучить для успешной разработки в NativeScript-Vue.
Работа с NativeScript CLI: NativeScript - это проект для разработки приложений для iOS и Android, а не для веб-приложений. Вам понадобится изучить несколько команд в NativeScript CLI и основы работы с iOS-симуляторами и виртуальными устройствами Android (Android Virtual Devices).
Но не стоит волноваться. Несмотря на то, что для работы с NativeScript-Vue требуется изучение, вы обнаружите, что это намного легче, чем изучение iOS или Android с нуля. В конце концов, вы все равно будете писать свой исходный код на JavaScript и Vue.
Хотите принять участие?
Насколько стабилен этот проект?
NativeScript-Vue относительно завершен. В настоящее время мы сфокусированы на двух вещах:
Читайте также: