Приложение «Браузер»

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

Настройка приложения

Первоначальные настройки будут минимальны — нужно приложению дать имя. Например, «Браузер». Если есть желание, добавить иконку. Остальное можно оставить по умолчанию.

Простой браузер

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

Дизайн-макет

Приложение будет выглядеть следующим образом:

Необходимые компоненты:

Настроим Экран:

• Выравнивание — Центр Верх,
• Ориентация экрана — лучше Альбомный (так будет больше места для просмотра страниц),
• Отключим показ заголовка и статус-бара.

Остальные настройки можно оставить как есть или сделать свои.

Добавим Горизонтальное расположение. Его настройки:

• Выравнивание — Центр Центр,
• Высота — автоматически,
• Ширина — наполнить родительский.

Внутрь расположения добавим Поле для ввода текста (в русскоязычной версии Интерфейс пользователя — Текст). Его настройки можно оставить по умолчанию, или изменить размер и начертание шрифта, фон и т.п. Но это уже косметические мелочи, которые вы можете сделать по своему желанию. Ниже приведем свойства, установленные по умолчанию.

В то же расположение после поля для ввода текста добавим две Кнопки. Они будут помогать обрабатывать введенную в текстовое поле информацию. Предполагается, что в поле может быть введено 2 вида информации: непосредственно адрес сайта, например, informatica-pro.ru, или поисковый запрос, например, «сайт с проектами на App Inventor». Поэтому нужно 2 вида действия: непосредственный переход по введенной ссылке или поиск в поисковой системе.

Первую кнопку, которая будет отвечать за переход по адресу, мы настроим так:

• Название компонента — Go,
• Текст — Go,
• Оформление можно выбрать любое, лучше, чтобы обе кнопки немного отличались.

Вторая кнопка, отвечающая за поиск:

• Название компонента — Поиск,
• Текст — Поиск,
• Оформление любое.

Как видите, у нас кнопки отличаются только заливкой фона (кроме текста и названия компонента).

Теперь добавим Web-просмотрщик. Его нужно разместить ниже горизонтального расположения. Это будет окно для просмотра сайтов, поэтому его нужно сделать как можно большим по размеру — пусть он занимает всю свободную часть экрана.

• Высота — наполнить родительский,
• Ширина — наполнить родительский,
• Перейти по ссылкам — галочка установлена (чтобы вы смогли переходить по ссылкам на другие сайты, когда будете пользоваться поисковиком),
• Домашняя страница — можно не устанавливать, но если решитесь, то адрес обязательно нужно писать в формате https://адрес-сайта, иначе браузер не сможет её открыть.
• Игнорировать ошибки SSL — галочку можно установить, в таком случае просмотрщик будет открывать сайты, у которых просрочен SSL сертификат.

Будьте осторожны! Если на сайте отсутствует SSL-сертификат (соединение не защищено HTTPS), то передаваемые вами данные (логины, пароли) могут быть перехвачены злоумышленниками.

Остальные настройки оставим как есть.

Добавим ниже просмотрщика еще одно Горизонтальное Расположение. Его настройки:

• Выравнивание — Центр Центр,
• Высота — автоматически,
• Ширина — автоматически.

Внутрь расположения добавляем две Кнопки. Как и предыдущем случае, они будут отличатся названиями, текстом и заливкой.

Первая кнопка:

• Название компонента — Обновить,
• Текст — Обновить,
• Оформление любое, по вашему желанию.

Вторая кнопка:

• Название компонента — Назад,
• Текст — Назад,
• Оформление любое.

Внешний вид готов, можно переходить к программированию.

Программирование

Начнем с программирования кнопки перехода к сайту по его адресу — Go. Казалось бы, команды должны быть самые простые: когда нажата кнопка Go, задать web-просмотрщику переход по url, указанному в текстовом поле.

Но тут надо сделать оговорку, что в таком случае адрес в текстовом поле нужно писать с протоколом http:// или https://, т.к.

Web-просмотрщик не воспринимает адрес сайта без протокола.

Т.е. попросту не совершит переход, если вы введете mail.ru вместо https://mail.ru. Да-да, каждый раз, придется писать эту абракадабру в виде http:// или https://. Но можно упростить себе жизнь и включить проверку на ввод протокола. Для этого следует использовать условие ЕСЛИ. Условие будет следующим: если текст в текстовом поле уже содержит набор символов http:// или https://, то будет осуществляться переход по ссылке. Для создания такого условия нам понадобится тестовый блок contains any («содержит любой из»). В разъем «текстовый» мы подставляем тестовое поле (куда вводили адрес) — там мы будем искать совпадения, а в разъем piece list («список частей») нужно добавить список с вариантами, которые будем проверять.

Всю эту конструкцию добавляем в условие ЕСЛИ и прописываем блок команд для перехода по ссылке: вызов просмотрщик Перейти к URL — содержимое текстового поля.

Нужно также добавить второй вариант условия: что делать, если протоколов в адресе не обнаружено. Для этого добавим в ЕСЛИ блок ИНАЧЕ. А иначе у нас получается, что нам нужно принудительно добавить протокол к введенному адресу и перейти по ссылке. Т.е. мы предварительно перезаписываем значение текстового поля, добавляя в начало строки протокол https:// (лучше использовать именно этот, как наиболее защищенный), а потом уже переходим по получившемуся адресу.

В итоге блок с командами для щелчка по кнопке Go будет выглядеть вот так:

Теперь можно вводить в текстовое поле просто домен, а программа сама добавит протокол и откроет сайт.

Займемся поиском. Для начала откройте в соседней вкладке сайт Яндекса. В поисковой строке введите «проекты на апп инвентор», нажмите Enter. У вас должна открыться страница с результатами поиска по данному запросу. Обратите внимание на адресную строку:

URL страницы с результатами поиска формируется по принципу: строка «https://ya.ru/search/?text=» + «поисковый запрос» + регион пользователя (вот эта приписка &lr=21643, она подставляется автоматически). Нам отсюда нужно взять первый компонент, т.е. строку «https://ya.ru/search/?text=», и приклеивать к ней поисковый запрос, который мы будем вводить в нашем приложении. А дальше уже будет происходить переход по уже готовой ссылке сразу на страницу результатов поиска в Яндекс. Следовательно, блок команд для кнопки поиска будет выглядеть вот так:

Теперь перейдем к программированию кнопки обновления страницы. В компоненте просмотрщика есть команда перезагрузки, её и будем использовать.

Кнопка Назад программируется аналогично, ведь у просмотрщика есть и для этого команда. Почему нельзя использовать кнопку назад в телефоне? Если без программирования вы нажмете её, то приложение свернется. Поэтому нам нужно или сделать отдельную кнопку для перехода назад по сайтам, или перепрограммировать кнопку телефона на этот переход. Поскольку в дизайнере мы уже добавили кнопку, то её и запрограммируем:

Но если хотите, можете и перепрограммировать кнопку телефона:

Простейший браузер готов: он может открывать сайты, искать в Яндекс, перезагружать страницы и переходить назад в истории.

Браузер с закладками

Давайте немного доработаем наш браузер. Добавим сюда функционал закладок, чтобы можно было сохранять понравившиеся сайты. Стоит заметить, что простые приложения, созданные в App Inventor, не сохраняют информацию вне приложения, т.е. память приложения очищается при его закрытии. Чтобы этого не случилось, необходимо подключить компонент баз данных, который поможет сохранять информацию в памяти устройства и извлекает её при включении приложения.

В нашем случае мы возьмем компонент TinyDB.

Дизайн-макет

Вернемся к макету приложения, и на вкладке Хранилище найдем компонент TinyDB. Это невидимый компонент с одной настройкой. Добавим его в приложение. Опция Namespace отвечает за пространство имен, грубо говоря, за название базы данных, которая будет хранить данные приложения на устройстве. Назовем её bookmarks.

Также нужно добавить еще одну Кнопку во второе горизонтальное расположение (там, где «Обновить» и «Назад»). Оформить внешний вид её можно как угодно, главное, указать:

• название компонента — Сохранить,
• текст — Сохранить,
• включено — галочка снята.

Когда приложение только запустилось и ни на какой сайт мы еще не переходили, сохранять пока еще нечего, так что кнопку отключим.

Кнопка, как нетрудно догадаться, будет отвечать за сохранение или удаление сайта из закладок.

Добавим еще Выбор из Списка в то же самое расположение сразу после кнопки сохранить. Зачем это нужно? Мы уже добавили базу данных, которая будет хранить данные, но она их никуда не выводит. Значит, нам требуется еще что-то, чтобы было можно просмотреть список имеющихся закладок и выбрать нужную. Выбор из списка оптимально подходит под эту задачу. Поскольку компонент визуально представляет из себя кнопку, то и настройки в большинстве своем как у кнопки. Из них нам нужно только одна — надпись на самой кнопке. Здесь мы напишем «Закладки». Оформление кнопки можно сделать по своему желанию. Название компонента лучше переписать на «Список закладок».

В итоге нам макет должен выглядеть примерно так:

А это обновленный список компонентов:

Макет мы доработали, можно переходить к программированию.

Программирование

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

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

Возьмем блок когда screen инициализировать — он отвечает за команды, выполняемые при старте приложения (если у приложения только 1 экран).

Первое, что нужно сделать — обнулить значения списка закладок. Это нужно на случай, чтобы в списке не оказалось ничего лишнего. Присвоим свойству Элементы из Цепочки списка значение пустой строки.

В базе данных хранятся в виде словаря, то есть какой-то значение записывается в память по собственным уникальным названием — ключом. В итоге база состоит из пар «ключ — значение». Это важно знать, так как далее мы будем использовать блок для каждого ключа со значением (for each key with value).

В качестве словаря будут использоваться извлеченные значения из базы данных. Есть специальная команда Get Entries (получить записи) для TinyDB.

Таким образом блок будет перебирать все значения по очереди. Своеобразные цикл перебора значений. И каждое значение нам нужно добавить в список, т.е. каждую итерацию мы берем полученное значение и добавляем в имеющийся список. Переменную значения (value) можно взять прям из блока, наведя курсор на название

Должна получится вот такая конструкция:

Добавляем это в блок инициализации.

С извлечением имеющегося списка разобрались, теперь разберемся с сохранением. Для этого запрограммируем кнопку Сохранить. И тут нужно помнить, что нам надо не только сохранять адрес сайта в памяти телефона, но и выводить его в список (чтобы мы его могли увидеть и выбрать), поэтому под «сохранить» мы будем понимать сразу два действия — записать в память и добавить в список для просмотра.

Берем блок щелчка по кнопке Сохранить. Первое действие — записать адрес сайта в базу данных, для этого возьмём блок Сохранить Значение. В базе главное, чтобы теги были уникальными, если мы будем сохранять что-то под тегом, который уже есть в базе, его значение перезапишется на новое. Поэтому будем сохранять адрес сайта под тегом, который будет совпадать с ним. Так мы избежим лишних ошибок.

Второе действие — добавить сохраненный адрес в список закладок для отображения.

Соберем это все в блоке:

Теперь при клике на кнопку Сохранить адрес сайта запишется в память и выведется в списке закладок. Но нам же нужно еще и иметь возможность удалять адреса. Чтобы не городить дополнительных кнопок, добавим условие, чтобы при клике на кнопку происходила проверка: если сайт уже есть в спсике, удаляем его, есть нет — добавляем.

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

Итак, если адрес текущего сайта найден в списке закладок, мы его удаляем из базы с помощью команды Очистить Тег (Тег совпадает с адресом сайта):

Далее удаляем из списка. Тут нужна оговорка, что в русскоязычной версии App Inventor неверный перевод: блок удаления элемента из списка называется Заменить Элемент Списка. И удаление происходит не по значению, а по индексу (порядковому номеру) элемента. То есть предварительно, нам нужно узнать индекс адреса сайта в списке, а потом уже уго удалять. Для этого создадим такую конструкцию:

Добавим оба блока в условие. Блоки для ИНАЧЕ у нас уже собраны — это сохранение адреса. В итоге должно получится следующее:

Сохранение/удаление мы запрограммировали. Теперь настроим открытие сайтов при клике по закладке. У компонента Выбор из Списка все для этого есть: после того, как сделан выбор, переходим к этому URL.

Осталась малость: настроим включение/отключение кнопки сохранения и текст на ней. Для этого в блок с командами при клике на кнопку Go добавим включение кнопки Сохранить.

И условие: если сайт, на который мы сейчас зашли, есть в списке, то текст кнопки изменится на «Удалить», если нет — текст будет «Сохранить».

В итоге блок команд будет выглядеть вот так:

То же самое мы добавим в кнопку Поиска:

Вот и все. Разработка браузера с закладками окончена. Теперь тест на внимательность: проверьте, все ли блоки вы правильно сформировали. У вас их должно быть 7: инициализация, после выбора из списка и клики по кнопкам Go, Поиск, Обновить, Назад, Сохранить.

Можно генерировать apk-файл и проверять приложение.