55
В третьей главе будет поэтапно представлено создание приложения. В
том числе будет детально описана разработка интерфейса и логика работы
приложения с примерами написанного кода.
56
3. СОЗДАНИЕ ПРИЛОЖЕНИЯ
3.1 Создание внешнего вида приложения в XCode
Необходимо максимально упростить процесс взаимодействия
пользователя с приложением, поскольку это значительно увеличит скорость
работы и положительно отразится на его желании и дальше использовать
приложение.
Обозначим несколько пунктов, которые помогут нам в достижении этой
цели:
1. Следует максимально сократить количество шагов, которые
пользователю необходимо совершить для достижения цели, ради которой это
приложение было установлено;
2. Необходимо запрашивать разрешение пользователя на
использование функций мобильного устройства нашим приложением;
3. Если стоит выбор между увеличением функциональности и
улучшением внешнего вида приложения, то следует делать выбор в сторону
увеличения функциональности;
4. Интерфейс приложения должен соответствовать его назначению;
5. Необходимо добавить возможность поиска;
6. Интерфейс приложения должен быть максимально простым и
интуитивно понятным, чтобы даже у человека, увидевшего приложение в
первый раз, не возникало вопросов по его использованию.
Начнем с выбора имени нашего приложения. Чтобы можно было понять
назначение приложения, исходя из его названия, было выбрано имя Library
(библиотека).
Поскольку приложение предназначено для учета выдачи и хранения
литературных произведений, иконку приложения было решено сделать в виде
открытой книги (Рисунок 10).
57
Рисунок 10 – Иконка приложения
Для упрощения навигации между сценами встроим корневой контроллер
представления в контроллер навигации (Navigation Controller). Все
последующие контроллеры представления будут в него встроены по
умолчанию. Он управляет своими дочерними контроллерами, используя
упорядоченный массив, также называемый стеком. Корневой контроллер
является первым в стеке, а контроллер, отображаемый в текущий момент,
последним. Пользователь может удалить последний контроллер из стека,
используя кнопку в верхнем левом углу экрана.
Необходимо определиться с разделами, которые будут появляться на
«Основной сцене» при запуске приложения. Поскольку нам необходим список
литературы, одним из разделов будет «Список книг». Для учета
зарегистрированных читателей и выдачи им книг нам понадобится «Список
читателей». Третий раздел будет предназначен для считывания QR-кодов.
«Основная сцена» является корневым контроллером представления, на котором
размещены кнопки, для перехода на соответствующие сцены.
58
Рисунок 11 – Корневой контроллер
При нажатии на кнопку «Список книг» будет отображаться
одноименная сцена, содержащая список литературы, находящейся в библиотеке
в данный момент (Рисунок 12). Эта сцена является табличным контроллером
представления. Переход на экран с вводом информации о новой книге будет
осуществляться при помощи кнопки «Новая книга», расположенной в правом
верхнем углу на панели навигации. Для отображения названия книги и имени
автора добавим соответствующие поля для отображения текста в ячейку-
прототип.
59
Рисунок 12 – Контроллер представления «Список книг»
На сцене «Новая книга» (Рисунок 13) добавим возможность ввода
основной информации об экземпляре, а именно:
- ISBN;
- Фамилия автора;
- Инициалы автора;
- Заглавие книги;
- Название издательства, выпустившего книгу;
- Год издания и место (город);
- Объем книги;
- Инвентарный номер;
- Цена;
- ББК;
- Авторский знак.
Поскольку все вышеуказанные поля для ввода текста и их наименования
не умещаются на одном экране, разместим их внутри представления с
прокруткой (Scroll View). Это позволит пользователю получить доступ к полям,
находящимся за пределами экрана.
60
Добавим кнопки для сохранения этой информации в нашу базу данных и
для экспорта в АБИС ИРБИС. Для улучшения навигации и визуальной
дифференциации, кнопки на этом и на остальных контроллерах было решено
разместить горизонтально и присвоить им разные цвета.
Рисунок 13 – Контроллер представления «Новая книга»
После выбора книги, путем нажатия на соответствующее поле,
осуществляется переход на контроллер представления, содержащий основную
информация о книге (Рисунок 14), которая включает в себя фамилию и имя
автора, название книги, инвентарный номер и код ББК, для быстрого
нахождения экземпляра на полках библиотеки. Также необходимо добавить
фамилию, имя и отчество читателя, у которого книга находится в данный
момент, и дату предполагаемого возврата. На этом же контроллере добавим
две кнопки: одна для выдачи выбранной книги, а вторая для редактирования
61
информации о ней.
Рисунок 14 – Контроллер представления «Информация о книге»
При выборе раздела «Список читателей» осуществляется переход на
страницу, содержащую список всех зарегистрированных читателей (Рисунок
15). В верхней части экрана разместим поле для поиска необходимого читателя.
Добавление нового читателя будет осуществляться путем нажатия на кнопку
«Новый читатель», расположенную в верхнем правом углу экрана.
62
Рисунок 15 – Контроллер представления «Список читателей»
На сцене «Новый читатель» добавим поля для ввода основной
информации о новом читателе:
- ФИО читателя;
- Год рождения;
- Пол;
- Род занятий;
- Номер читательского билета;
- Адрес;
- Номер телефона;
- E-mail.
Далее добавим кнопки для сохранения информации о читателе в базу
данных и для экспорта информации в АБИС ИРБИС (Рисунок 16).
Добавим контроллер представления, отвечающий за отображение
информации на экране пользователя после выбора читателя (Рисунок 17). На
этом контроллере разместим контактную информацию читателя (Номер
телефона, адрес и e-mail). Ниже разместим табличное представление для
отображения информации о взятых читателем из библиотеки книгах и датах их
возврата.
63
Нажатие кнопки с изображением QR-кода на «Основной сцене»
открывает окно для считывания и распознавания QR-кода. При условии, что
QR-код был создан верно, откроется окно редактирования новой книги, а поля
для ввода данных будут содержать информацию закодированную в QR-коде.
Рисунок 16 – Контроллер представления «Новый читатель»
Для перемещения между контроллерами представления создадим связи
(segue) и присвоим значения их идентификаторам.
Полную схему интерфейса приложения можно увидеть на рисунке 18.
64
Рисунок 17 – Контроллер представления «Информация о читателе»
Рисунок 18 – Схема интерфейса приложения
3.2 Написание кода программы
Открываем Xcode и создаем новый проект с именем «Library». Перед
началом работы необходимо добавить в наш проект возможность работать с