15 апреля команда телеграм предоставила нам возможность разрабатывать веб ботов.
Теперь взаимодействие с ботами стало очень интерактивным, так как мы обладаем возможностью интегрировать в ботов полноценные веб-приложения.
В процессе разработки веб апп бота я столкнулся с проблемой, что после закрытия интерфейса веб апп и повторном его открытии мы теряем последнюю ссылку на которой находился пользователь, и веб приложение открывается с главной страницы.
Сперва, может показаться, что это не является проблемой, но на самом деле очень легко случайно закрыть веб-окно, так как оно не открывается на весь экран, а чтобы закрыть его, достаточно потянуть его вниз и мы теряем всё предыдущее состояние приложения.
В своём приложении я использую React, mobX и React Router Dom v6. Первое, что приходит в голову, это подписаться на изменение навигации и сохранять последнее значение в localStorage или cookies, я выбрал cookie, с временем жизни 10 минут.
Давайте посмотрим на код. Создаём location-provider.tsx
А ТЫ ЗНАЛ ?! Для чего это ПРИЛОЖЕНИЕ в твоем ТЕЛЕФОНЕ? Зачем оно нужно на ANDROID.
import React from «react» import < useLocation, useNavigate >from «react-router-dom» import Cookies from «js-cookie» interface LocationProviderProps < children: React.ReactNode >const LocationProvider: React.FC = (< children >) => < const location = useLocation() const navigate = useNavigate() React.useEffect(() =>< const currentLocation = Cookies.get(«location_app») if (!currentLocation) return navigate(currentLocation) >, []) React.useEffect(() => < const tenMinutes = new Date(new Date().getTime() + 10 * 60 * 1000) Cookies.set(«location_app», location.pathname, < expires: tenMinutes, >) >, [location]) return <> > export default LocationProvider
Импортируем его в App.tsx и оборачиваем наши роуты
import React from «react» import < BrowserRouter, Route, Routes >from «react-router-dom» import LocationProvider from «providers/location-provider» import < AppsPage >from «./pages/apps» import < DevelopersPage >from «./pages/developers» import < FavoritesPage >from «./pages/favorites» import < SearchPage >from «./pages/search» function App() < return ( > /> > /> > /> > /> > /> > /> ) > export default App
Отлично, теперь после закрытия и открытия веб приложения у нас будет открываться последняя страница, но!
Тут есть проблема, это то, что если при открытом приложении перейти на другую страницу через строку ввода URL, нас будет редиректить назад. Но у веб ботов нет адресной строки, значит на этом можно остановиться?
Да, если вам этого достаточно, то это будет работать в веб ботах. Но у вас будут проблемы при открытии вашего веб приложения вне веб ботов, например у вас есть онлайн магазин, вы бы хотели взаимодействовать с ним и в телеграм веб апп и просто как веб приложение доступное по адресу, что тогда?
Android System WebView — что за приложение и решение возможных проблем
Думаем дальше, в DOM API у объекта window есть event onbeforeunload , кажется это то, что нам нужно, будем сохранять последний URL перед закрытием веб приложения, пробуем.
Обновим наш location-provider.tsx
import React from «react» import < useLocation, useNavigate >from «react-router-dom» import Cookies from «js-cookie» interface LocationProviderProps < children: React.ReactNode >const LocationProvider: React.FC = (< children >) => < const location = useLocation() const navigate = useNavigate() React.useEffect(() =>< const currentLocation = Cookies.get(«location_app») if (!currentLocation) return navigate(currentLocation) >, []) React.useEffect(() => < window.onbeforeunload = (e: BeforeUnloadEvent) =>< e.preventDefault() const tenMinutes = new Date(new Date().getTime() + 10 * 60 * 1000) Cookies.set(«location_app», location.pathname, < expires: tenMinutes, >) > >, [location]) return <> > export default LocationProvider
Пробуем гулять по приложению через адресную строку, редиректа назад нет, отлично, так же сохраняется ссылка при закрытии вкладки с приложением, то что мы и хотели! Пробуем в телеграм, бац и тут это совсем не работает, почему?
Дело в том, что телеграм открывает браузерное окно в так называемом WebView, я не силен в разработке мобильных приложений, но знаю, что эта штука позволяет открывать браузер внутри мобильных приложений, но у них есть свои ограничения и это как раз одно из них.
Что тогда? Отличным решением будет вернуться к первому варианту, но включить кеширование только для телеграм веб апп. Давайте посмотрим на то, что у нас получилось.
import React from «react» import < useLocation, useNavigate >from «react-router-dom» import Cookies from «js-cookie» interface LocationProviderProps < children: React.ReactNode >const LocationProvider: React.FC = (< children >) => < if (!window.Telegram.WebApp.initData.length) < return <> > else < return > > const LocationProviderInner: React.FC = (< children, >) => < const location = useLocation() const navigate = useNavigate() const redirectToLastPage = () => < const currentLocation = Cookies.get(«location_app») if (!currentLocation) return navigate(currentLocation) >React.useEffect(() => < if (location.key === «default») redirectToLastPage() Cookies.set(«location_app», location.pathname, < expires: new Date(new Date().getTime() + 10 * 60 * 1000), // 10 min >) >, [location.key]) return <> > export default LocationProvider
Теперь у нас кеширование будет работать только в том случае, если приложение запущено из телеграм веб бота.
Источник: habr.com
О WebView мобильных приложениях
Операционная система «Andriod» имеет встроенный компонент «WebView», позволяющий встраивать веб-страницы в мобильные приложения. На основе данной технологии осуществляется быстрая сборка гибридных Android-приложений, использующих в качестве источника контента мобильную версию сайта. Для полноценной реализации достаточно написать легкое нативное приложение с меню и подключить к нему сайт через компонент «WebView».
Для чего это нужно?! Различные предприятия и компании, выпуская какие-либо продукты или сервисы на рынок, выполняют реализацию сайта и мобильного приложения. Разработка нативного Android-приложения занимает много времени и связана с высокими издержками. Чтобы ускорить и удешевить процесс, имеет смысл реализовать «гибрид», который будет задействовать в работе страницы веб-сайта. Несмотря на ограниченный функционал и зависимость от интернета, подобного приложения бывает вполне достаточно для предварительного тестирования и оценки со стороны интернет-пользователей.
Подобный подход тесно пересекается с таким понятием, как «MVP-продукт» — модель продукта с минимальной функциональностью, который позволяет произвести предварительный анализ и оценку со стороны целевой аудитории ещё до момента реализации полноценной версии. Это ведёт к сокращению рисков для бизнеса, а также позволяет собрать дополнительные функциональные требования к продукту от реальных пользователей. Со временем, гибрид на основе «WebView» может быть преобразован в полноценное нативное мобильное приложение.
Какие преимущества и недостатки у «WebView» Android-приложений? Плюсами служит быстрая и дешевая реализация по сравнению с нативными продуктами. К минусам можно отнести зависимость от интернета, более долгая скорость загрузки контента, ограниченный функционал.
Отдельно можно выделить проблемы с безопасностью с точки зрения пользователя. Мобильные приложения на основе компонента «WebView» имеют доступ к конфиденциальной информации и персональным данным. Всегда возникает риск их недобросовестного использования и/или утечки.
Ранее, приложения на основе «WebView» можно было разрабатывать и для пользователей платформы «iOS», но компания «Apple» запретила их распространение в официальном магазине «AppStore». Таким образом, реализовать подобным образом iOS-приложение можно, но на следующей стадии возникнет проблема с его распространением.
«WebView»-приложения — это хорошее решение для быстрого и дешевого запуска продукта на основе мобильной версии сайта. Если вы хотите протестировать свою идею, то более рационального решения и не придумаешь.
Источник: akiwa.ru
Webview ios: что это такое, и как использовать в арбитраже
Всем привет! Копаясь в гугле, я заметил, что общедоступной информации по клоакингу и, в частности, заглушкам для WebView-приложений преступно мало. Поэтому я решил поделиться своим опытом разработки заглушек для подобных приложений. Сразу оговорюсь, что я отталкиваюсь от своего скромного опыта и не претендую на истину в конечной инстанции. Поехали!
Что такое WebView-приложения?
Прежде чем погружаться в дебри клоакинга и заглушек, стоит остановиться на том, что такое WebView и зачем оно нужно.
WebView — это компонент, который отвечает за открытие ссылок внутри приложений. Другими словами, это встроенный браузер, который вы видите, когда открываете стороннюю ссылку в приложении.
В рамках арбитража трафика в подобные приложения вшиваются ссылки на оффер/офферы, после чего размещаются в магазинах приложений (таких, как Google Play, App Store), либо на сторонних сайтах-одностраничниках, куда ведется трафик. Таким образом, пользователям, открывшим такое приложение, показывается встроенный браузер с оффером.
Примерно так может выглядеть открытое WebView
Что такое заглушка?
Поскольку модераторы магазинов могут быть (и обязательно будут!) против размещения приложений по гембле, беттингу и дейтингу, в приложения вшивается клоака. Она отсеивает модераторов, ботов и всех нецелевых пользователей, которым мы не хотим показывать оффер, показывая им заглушку — часть приложения. Целевым же пользователям показывается WebView с оффером.
Так может выглядеть заглушка под дизайн гембловой прилы с Fire Joker
Контент заглушки
Контент заглушки может быть разным в зависимости от вертикали, требуемой категории и возрастного рейтинга приложения в сторе. Для gambling-приложения это может быть аркадная игра, раннер, три-в-ряд, платформер, или даже крестики-нолики.
Для betting-приложения — «читалка» с советами или информацией о командах, матчах, «новостник» или игра со спортивной тематикой и оформлением.
Для dating-приложений мы делаем «читалки», либо примитивный «свайпер» а-ля Тиндер с фотографиями со стоков, загруженными на сервер. То же касается и остальных вертикалей — финансовая грамотность под финансы и крипту, «читалка» под нутру и так далее. Проявите креативность!
Чтобы заглушка выглядела и игралась более качественно, помимо собственно игровой сцены я стараюсь добавлять в нее главное меню, ссылку на политику конфиденциальности, а также звуки и музыку.
Ниже я приведу пример заглушки для приложения под гемблинг. Суть геймплея — летать на самолете, подбирать монетки и расстреливать бомбы. При столкновении с бомбой происходит взрыв и game over:
Самолет немного уехал за экран. Вообще, он управляется наклоном телефона, но я отвлекся, пока делал скрин
Скрин заглушки для приложения под подписки. Фоторедактор с минимальным функционалом
Где взять заглушку?
- Сделать самому. Это достаточно быстро и просто, особенно, если у вас уже есть опыт разработки приложений и игр;
- Купить пачку готовых ассетов и зарескинить их. Такое я тоже проворачивал в качестве эксперимента. На срок жизни прилки это особо не повлияло. Купить ассеты можно в том же Asset Store, если вы разрабатываете приложения на Unity.
- Найти стороннего разработчика, который будет горбатиться вместо вас сможет поставлять вам заглушки за сдельную плату. Интегрируете клоаку, SDK, WebView и готово! Поискать разработчиков можно на фриланс-площадках, например, Fiverr или Weblancer.
Графика и геймплей заглушки
В целом, графика может быть любой, даже не слишком качественной — со стоков, из паков слотовой графики от самих реклов, или даже просто из поиска по картинкам в гугле. Особо это ни на что не влияет (на Android, про iOS расскажу чуть дальше ), но я стараюсь использовать в заглушках ту же графику и персонажей, что и в дизайне страницы приложения в Google Play.
Например, если это дизайн под Fire Joker ( думаю, вы уже поняли, что я люблю эти слоты ), в заглушке могут присутствовать персонажи и атрибуты этого дизайна. Рассмотрим вышесказанное на примере дизайна нашей прилы с дизайном под слоты Leprechaun Riches:
Дизайн для страницы Google Play
Ищем в интернете задник для нашей будущей игры, например, такой:
Ищем персонажа. Иногда это может быть затруднительно, придется вырезать лишнее в фотошопе.
Лепрекон ставит класс этой статье. Поставь и ты!
Теперь нужно придумать геймплей . В целом, это может быть что угодно. Вот несколько вариантов:
- Управляя лепреконом, игрок должен ловить горшки с золотом и уклоняться от стрел;
- Лепрекон прячется и появляется на ветках деревьев на заднике, игрок должен кликнуть на лепрекона, пока тот не исчез;
- Крестики-нолики на двоих с лепреконом и монеткой.
Если у разработчика достаточно набита рука, реализовать подобную заглушку не составляет труда и занимает от получаса до часа. Однако не стоит халявить!
Все в арбитраже знают, что партнёрские программы — это какой-то важный зверь. Но чем именно они занимаются и зачем нужны, представляют не все. Какими бывают партнёрские программы? В чём главная ценность партнёрок для аффилиатов? Автор TG-канала «aff BROCCOLI» для ZorbasMedia!
Уникальность заглушки и мифы
Практически в начале своего пути как разработчика, спустя месяц-другой после того, как я справился с банами на модерации, я стал ловить баны за repetitive content. Спустя некоторое время после выхода, Гугл выносит прилку под предлогом неуникального содержимого.
Спустя некоторое время я решил эту проблему. И причина не всегда заключается в уникальности геймплея/кода/графики заглушки. Однако это тоже довольно важный момент, поэтому все заглушки мы всегда пишем с нуля. Игра/приложение может быть достаточно простой, но должна выглядеть завершенной.
При этом у меня было пару раз, когда Гугл пропускал пустые приложения с белым экраном вместо заглушки. Правда, жили они недолго.
Я регулярно сталкивался и сталкиваюсь с рядом мифов. Вот парочка самых распространенных:
- «Баны по железу». Якобы Google считывает информацию о компьютере, на котором было скомпилировано приложение, и выносит его из-за этого.
- «Приложения на Unity живут дольше». Миф, связанный с предыдущим. Логика такая: Android Studio разработан Google, значит, и информации передает больше.
По факту, 90% успеха это хороший аккаунт разработчика. Если вам говорят, что аккаунт хороший и дело в приле/железе — не верьте.
В семье все должно быть поровну. В Google Play бан — в App Store тоже.
Нюансы iOS
Модерация в App Store намного жестче, чем в Google Play. На личном опыте сталкивался с тем, что разворачивают и белые приложения из-за таких мелочей, как опечатка в тексте внутри приложения, низкое разрешение спрайта (текстуры), сцена курения в фотографии внутри приложения(!) . Все это ведет к тому, что разработать качественную заглушку для iOS, которую пропустят в магазин, довольно проблематично. Кроме того, сам процесс разработки намного сложнее, чем для Android. Один только набор графики, который требуется для загрузки приложения в App Store, ужасает. Если для Google Play достаточно баннера, логотипа и трех скриншотов, то здесь…
Вся боль нашего дизайнера в одном скриншоте
Кроме того, приложение может быть отклонено за недостаточно related содержимое дизайна. Дизайн должен максимально пересекаться с содержимым приложения, в идеале — содержать его скриншоты.
Движок Unity, который использует наша команда, является кроссплатформенным, что позволяет значительно облегчить разработку. Однако даже при этом на разработку приложения для Android мы тратим всего пару часов, а на разработку приложения для iOS — до пары недель, в зависимости от сложности заглушки. В среднем, этот процесс занимает около 5-7 дней вместе с модерацией.
Хочу научиться писать прилки!
Прежде чем приступить к разработке, стоит определиться с движком и языком для написания приложений.
Многие разработчики используют Android Studio, как самый простой и удобный вариант. Существует множество курсов и видеоуроков на YouTube по разработке под Android. Я пишу на Unity, используя язык C#, но лишь потому что, моя основная деятельность связана с разработкой игр, а Unity я уверенно владел еще до того, как окунулся в арбитраж.
На Unity легко и удобно писать игры-заглушки, поскольку движок изначально заточен под разработку игр, в том числе и на мобильные платформы. Кроме того, Unity кроссплатформенный, что позволяет нам легко и непринужденно разрабатывать приложения как на Android, так и на iOS. Совсем скоро у нас стартует обучение по разработке приложений на Unity, информация об этом появится у нас на канале.
Полезная информация
На этом все на сегодня, друзья! Совсем скоро мы выпустим полный курс обучения разработке приложений на Unity. Узнать больше можно будет у нас в чате, там же можете в ысказать свое мнение о статье. Всем спасибо за прочтение, удачи и профита!
Ну ты это, заходи, если что
Источник: ru.zorbasmedia.com