Как сделать мобильное приложение Вконтакте

Год назад я мечтал сделать свое собственное мобильное приложение на iPhone, а учить Swift мне не хотелось. Так вышло, что Swift я учить начал, но дело продвигалось слишком медленно, ведь я давно не студент и работы на основном месте завались, что-то учить с запоем уже не выходит.

И тут я натыкаюсь на Quasar, инструмент с MIT лицензией, с помощью которого можно создавать кроссплатформенные приложения под Android и iOS. Все что нужно знать программисту — это JavaScript и потрясающий реактивный фреймворк Vue.js.

Введение (или дисклеймер)

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

Если выполнить все команды и условия, описанные в этой статье, у вас получится собрать простое мобильное приложение. Правда, по пути вас поджидает куча непредвиденных проблем, связанных с настройкой виртуального окружения. Будьте готовы.

Как сделать свой OFFLINE-клиент из обычного приложения ВКонтакте на Android [ROOT]

Перед началом.

Если вы хотите сделать приложение для Android, то вам понадобится установить на рабочий компьютер Android Studio, Java SDK 8, Gradle и настроить корректно все системные переменные ($path на Mac и Linux или “Системная переменная” на Windows).

Если вы хотите сделать приложение для iOS, понадобится Xcode и компьютер с операционной системой Apple.

Как видите, вам придется не один час потратить на установку и отладку своего виртуального окружения.

Зачем компьютер от Apple

Ограничение, которое наложило Apple на разработчиков. Без этого невозможно собрать приложение под iOS. Не хотите тратить деньги? Можете поставить хакинтош. И точка.

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

Знакомство c Quasar

Quasar — это фреймворк (для фреймворков, но об этом чуть позже). Сам он имеет набор собственных тегов, а весь JavaScript располагается во Vue компонентах.

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

В остальном, это обычный Vue.js, и здесь нет ничего “необычного” кроме его собственных тегов и некоторых методов из документации. Все также вызываем корневой экземпляр Vue, в каждом модуле заполняем data и пишем методы. Все это дело собирается через webpack (dev server с hot reload в комплекте). Classic. Если вдруг не поняли мое последнее предложение, прочитайте статью про webpack по ссылке выше.

Ах да, в установочном пакете (об этом позже) из коробки есть поддержка scss и stylus (что просто божественно).

Резюмируя: если вы работали с Webpack и Vue, знаете как без проблем передавать данные между Vue компонентами, знакомы с , знакомы со store (vuex), знакомы с webpack переменными, у вас достаточно энергии и сил разбираться с грядущими проблемами сборки и есть желание копаться в Android Studio и Xcode — тогда проблем с разработкой не будет.

Как запустить рекламу Вконтакте в мобильном приложении

Как оно работает

Да тех, кому интересно как же JavaScript работает в мобильном устройстве. Все очень просто, ваше приложение — это браузер.

Quasar- это инструмент, который позволяет элегантно вписать ваш Vue.js код в программное обеспечение Cordova. А Cordova это уже сам браузер (образно), который запускает ваш JavaScript.

Также, Cordova содержит в себе ряд плагинов, которые через JavaScript (внутри браузера Cordova) позволяют обращаться к камере, push уведомлениям, геолокации, контактам, bluetooth и.т.д. Полный список поддерживаемых функций можно найти здесь.

Конечно, можно обойти Quasar и напрямую работать с Cordova. Возможно, у вас получится подружить Cordova с React. Хотя у последнего для мобильной разработки есть React Native.

Боже, да, я знаю людей, которые на JQuery писали программу и превращали ее в приложение через Cordova. Правда, результат их работы выглядел очень мерзко. Представьте реакцию пользователя, который нажимает на “каталог” в такой “программе” и вместо реактивного изменения компонента (беззагрузочной подстановки страницы) получает обычную загрузку страницы как в браузере.

Vue.js позволяет создавать шикарные SPA и PWA приложения, которые запускаются в браузере, но выглядят как натуральные мобильные и десктопные приложения! Блин, современные SPA и PWA почти ничем не отличаются от программ, лишь наличие браузера показывает пользователю, что он находится все еще на сайте. Quasar позволяет стереть эту грань.

Первые шаги

Давайте создадим проект. Для начала нам понадобится Node.js, а конкретно менеджер пакетов npm. Скачать можно отсюда.

После установки Node.js идем на страницу установки Quasar. Отсюда берем команду:

Если вы используете Mac OS или Lunix, добавьте команду sudo перед установкой пакетов.

Далее создаем Quasar проект командой:

Важно: название проекта должно быть написано единым словом, иначе при сборке все полетит к чертям. Рекомендую не запариваться и использовать Camel Case. Все равно название приложение можно будет потом поменять.

Далее вам зададут 8 вопросов.

1. Заполните имя проекта (пишете как хотите).
2. Заполните описание.
3. Заполните автора приложения.
4. CSS препроцессор выбирайте по вкусу.
5. Если понимаете о чем речь, выбирайте сами. Если нет — включайте автоимпорт.
6. Подключите дополнительные функции на выбор (я тут обычно отказываюсь от всего, хотя, думаю, вещи из этого списка типа Axios вам знакомы)
7. Введите cordova id. Это будет что-то вроде уникального сертификата для сборки приложения в дальнейшем.
8. Выбирайте NPM.

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

И запускайте проект с помощью команды:

После команды у вас откроется классический localhost сервер с hot reload. Предлагаю вам свернуть статью на это время и пошалить с вашим будущим приложением. Сделайте пару статических страниц, напишите маленькое приложение, например, to do list или калькулятор шашлыка. Я не знаю, просто творите.

Вопрос: особо технически грамотные могут спросить: «Макс, а вот пользователь вносит какие-то данные в программу, но после перезагрузки браузера данные же стираются (если их не сохранять в cookie или базу данных), здесь не будет так же (после перезагрузки приложения)?»

Ответ: естественно, здесь будет также. Как и на любом другом сайте, так и в приложении от Cordova данные после выключения будут потеряны. Но вы можете использовать Local Storage или попытаться приделать своему приложению Web SQL. Грубо говоря, вам нужно воспользоваться готовым API от браузера (Cordova), чтобы сохранять введенные пользователем данные. Вот ссылка на документацию.

Эмуляция: проблемы и головная боль

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

В quasar.conf.js в разделе manifest можно задать имя и описание проекта. Имя из manifest пойдет в название приложения (под иконкой). Возможно, здесь я ошибаюсь, так как название приложения я обычно меняю позже в config.xml в папке src-cordova, которая появляется после запуска проекта в dev режиме на мобильном устройстве.

Запускать проект в тестовом режиме для iOS можно командой:

quasar dev -m cordova -T ios

quasar dev -m cordova -T android

Если возникли какие-то проблемы с эмуляций, читайте тут. Здесь я вам вряд ли помогу. Проблем, которые могут на вас обрушиться на данном этапе миллион, но давайте я перечислю парочку, которые возникли у меня, вдруг я смогу вам помочь.

Проблемы с эмуляцией Android

Например, у меня никак не получалось запускать через Терминал команду “quasar dev -m cordova -T android”.

Сначала у меня была ошибка, в которой компилятор сказал якобы у меня нет Gradle.

Данную проблему я решил довольно просто: перед стартом dev/build команды я добавляю путь к Gradle к системной переменной $PATH:

Я надеюсь, вы понимаете, что путь после …$PATH. у вас совсем другой будет. Тем более это решит проблему на Mac, но не на Windows. Как это сделать на Windows читайте тут.

Также, у меня была ошибка “PANIC: Missing emulator engine program for ‘x86’ CPUS”, (после того как я разобрался с Gradle) поэтому я сначала “собрал финальную сборку” проекта без эмуляции через команду:

quasar build -m cordova -T android

Ведь у меня больше не было проблем с Gradle. А после открыл проект (билд) через Android Studio

Далее я полез в AVD Manager, чтобы создать эмуляцию телефона. Иначе без этого запустить приложение нельзя. Можно кстати попытаться подключить свой.

После, студия попросила меня поставить пакет системных картинок. К слову, сначала я поставил пакет ‘R’, и вроде бы у меня все заработало, эмулятор стал запускаться (через нажатие на зеленую кнопку пуск в navbar внутри android studio), но терминальная команда до сих пор не работала. После я вычитал здесь, что нужно поставить Oreo и, о боже, у меня теперь все запустилось через терминал.

Теперь, когда я вызывал через терминал команду “quasar dev -m cordova -T android” у меня наконец-то открывалась эмуляция.

Проблемы с эмуляцией iOS

К моей радости, на этом этапе работы я не столкнулся с проблемами. Но это не значит, что их нет.

Сборка: финал

Для “финальной” сборки используются команды.

quasar build -m cordova -T ios

Финальная сборка будет лежать в папке название_проекта/src-cordova/platforms/ios, здесь будет файл название_проекта.xcodeproj. Можете его запустить, и у вас откроется Xcode.

quasar build -m cordova -T android

Финальная сборка будет лежать в папке название_проекта/src-cordova/platforms/android. Просто откройте этот путь в Android Studio и увидите свой проект.

Теперь вы можете работать в этих “системах”. Например, можно выпустить приложение к себе на телефон и проверить его работоспособность. Или бесконечно эмулировать на различных устройствах, ища баги. Ах да, еще не забудьте установить иконки для своего приложения, это можно сделать по инструкции от Quasar или через Xcode и Android Studio.

Если все хорошо, можно выпускать приложение в Apple Store или Google Play. Но это уже другая история и достойна отдельной статьи. Если интересно, можете почитать соответствующий раздел в документации Quasar. Хотя, там не все так подробно описано как хотелось, но мне хватило. Свою же статью на эту тему постараюсь написать попозже.

P.S: По «секрету» хотелось добавить: Хотя получившиеся приложение получилось кроссплатформенным (т.е это как бы браузер), его исходный код все равно можно расширить через написание нативных плагинов под Cordova. Т.е нет особого труда в том, чтобы добавить в свое приложение Face/Touch ID, хотя изначально это не предусмотренно фреймворком Quasar и Cordova.

P.S.S: Если интересно как локализировать iOS приложение на Swfit с помощью Xcode, Storyboard и NSLocalizedString, милости прошу пройти по ссылке выше.

Опубликовано: 2020-06-05 9:55

Нужен сайт?

Готов за разумную плату разработать сайт, CRM-систему или внедрить дополнительный функционал в существующий проект.

Как связаться

Источник: kolmogorov.pro

ВКонтакте запустила отдельное приложение VK Знакомства

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

Социальная сеть ВКонтакте представила бета-версию отдельного приложения VK Знакомства для Android. Разработчики обещают выпустить версию для iOS в ближайшее время.

Пользователи теперь могут выбирать, где им удобнее искать пару и новых друзей: в сервисе внутри ВКонтакте или в отдельном приложении. Технологические возможности платформы VK Mini Apps позволили ускорить адаптацию продукта для запуска клиентов на мобильных платформах.

Новое приложение поддерживает все существующие функции сервиса VK Знакомства, включая поиск и выбор понравившихся людей, общение в чате после взаимной симпатии и подсказки по различным акциям.

Авторизоваться в приложении можно с помощью VK ID. При этом история мэтчей и чатов из мини-приложения настольной версии синхронизируются с мобильным приложением VK Знакомства. Отдельно стоит отметить, что пользователи VK Знакомств не встретят в сервисе своих друзей из ВКонтакте и пользователей из черного списка. Соцсеть гарантирует максимальную приватность для комфортного общения.

Кроме того, сервис VK Знакомства предлагает премиум-функции для расширения возможностей профиля, такие как суперлайк и просмотр посетителей при оформлении подписки.

Источник: ichip.ru

Как сделать мобильное приложение вконтакте

Самый старый сервис для знакомств в России: создан в 2003 году. Приложение очень похоже на Tinder: те же описания анкеты, профили и свайпы вправо и влево.

Однако возможности поиска — более широкие. Среди параметров есть не только возраст, но и рост, вес собеседника. Также можно выбрать цель общения: «отношения», «флирт» или «встреча, свидание». Люди, выбравшие разные цели, не смогут пообщаться друг с другом.

В Mamba пользователи также могут проводить прямые эфиры и знакомиться таким образом. Помимо приложения доступен сайт. По словам создателя проекта, у сервиса более 70 млн пользователей.

Этот сервис восполняет только одну из функций ушедшего Tinder — поиск секс-партнера. Сервис анонимный, и много личных данных он не требует: не понадобится даже телефон, зарегистрироваться можно с помощью почты.

При заполнении профиля можно указать рост, возраст и сексуальные предпочтения: при включении геолокации показываются ближайшие партнеры. Число пользователей неизвестно, но в Google Play у приложения более 5 млн скачиваний.

Свежее приложение от выпускников НИУ ВШЭ, вышло в 2023 году. Сервис нацелен на глубокие и серьезные знакомства: подбирает пару на основе психологической совместимости, используя ИИ и методы машинного обучения.

Пользователи должны пройти психологический тест, а приложение подберет лучшую пару, учитывая особенности личностей пользователей. Несмотря на то, что приложение запущено недавно, по словам создателей, в нем зарегистрировались более 100 тыс. пользователей из России и стран СНГ.

Классический дейтинговый сервис с несколькими отличиями: при регистрации в анкету можно сразу перенести данные из профиля VK, а сервис доступен в приложении или профиле на сайте VK. Заполнять информацию о себе не нужно: можно добавить фото со страницы в соцсети, музыкальные предпочтения, место работы и другие данные.

База для знакомств широкая: аудитория VK — около 80 млн пользователей. Однако для свайпов доступны только пользователи «Знакомств».

Также VK говорили о планах создать свой аналог Tinder без авторизации в VK и с отдельным приложением. Запуск планируют летом 2023 года.

На момент публикации сервис доступен только для устройств на Android: веб-версии и приложения в App Store нет.

«Блум» — сервис для знакомств, который также очень похож на Tinder. Однако здесь можно выбрать формат знакомств — для дружбы или для отношений. В чатах доступны не только текстовые, но и голосовые сообщения. А еще — у каждого пользователя есть возможность вести микроблоги и оставлять комментарии под постами других людей.

В Google Play — более 10 млн скачиваний.

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

Помимо онлайн-знакомств, доступно и общение офлайн: понравившимся пользователям можно отправить приглашение на мероприятие Fitil. Участие в таких событиях платное — от 1000 рублей за вход.

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

Приложение для поиска партнера или друга на основе музыкальных предпочтений. Доступно только пользователям на iOS. Для анкеты можно выгрузить плейлист из Apple Music.

Количество пользователей неизвестно, но приложение достаточно старое: запущено в 2010 году.