ОСОБЕННОСТИ СОЗДАНИЯ МОБИЛЬНОГО ПРИЛОЖЕНИЯ ПРИ ПОМОЩИ IONIC FRAMEWORK - Студенческий научный форум

XI Международная студенческая научная конференция Студенческий научный форум - 2019

ОСОБЕННОСТИ СОЗДАНИЯ МОБИЛЬНОГО ПРИЛОЖЕНИЯ ПРИ ПОМОЩИ IONIC FRAMEWORK

Малкова А.С. 1, Беленкова И.В. 1
1Филиал РГППУ в г. Нижнем Тагиле
 Комментарии
Текст работы размещён без изображений и формул.
Полная версия работы доступна во вкладке "Файлы работы" в формате PDF

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

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

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

Мобильные приложения также позволяют ученикам самостоятельно определять последовательность выполнения заданий и продвигаться в обучении в своём собственном ритме. Примером такого приложения может служить «Duolingo», «Lingualeo» [2], «Эврика! Логические задачи» [5], Математика [4] и пр.

На сегодняшний день существует достаточное количество программных средств для разработки мобильных приложений. Каждая из платформ для мобильных приложений имеет интегрированную среду разработки, предоставляющую инструменты, позволяющие разработчику программировать, тестировать и внедрять приложения на целевую платформу. В таблице (см табл. 1) представлены основные преимущества разработки приложений для каждой среды.

Таблица 1

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

Средства разработки

Язык программирования

Поддерживаемые платформы

Наличие эмулятора

Стоимость инструментов

Android SDK

Java, Kotlin

Android

Встроенный эмулятор в среду разработки

Бесплатно

Intel XDK

JavaScript, HTML

Android, iOS, Web

Отладка и запуск приложений в веб-браузере

Бесплатная среда, платный сервис

Flutter SDK

Dart Google

Android, iOS

Сторонний эмулятор или реальное устройство

Бесплатно

Xamarin Framework

C#

Android, iOS

Встроенный в среду разработки

Бесплатно

Ionic Framework

JavaScript, TypeScript,
HTML

Android, iOS, Web

Встроенная студия для отладки в браузере

Бесплатная среда, платные доп. элементы

iOS SDK

Object C, Swift

iOS

Встроен в систему

Коммерческая разработка

Qt SDK

C++

Android, iOS, Linux, Windows

Отладка внутри системы

Бесплатно

kivy Framework

Python

Android, iOS, Linux, Windows

Отладка внутри системы

Бесплатно

Из таблицы видно, что для каждой платформы существует сразу несколько средств разработки мобильных приложений. Поэтому при создании нового приложения стоит ориентироваться на его функциональные особенности, наличие нестандартных элементов управления и наличие средств удобной отладки. Выполнить разработку приложения для организации учебного процесса при выполнении пошаговых практических работ целесообразно при помощи средств, поддерживающих все основные свойства платформы. Среди средств разработки гибридных приложений наиболее комплексным является пакет инструментов Ionic Framework. Он позволяет разрабатывать приложения средствами языка JavaScript, используя в качестве основы для отображения страниц файлы HTML, предоставляет быстрый доступ к встроенной студии для отладки приложения прямо в браузере и не требует установки дополнительного программного обеспечения и эмуляторов. При разработке, приложение тестируется в среде с использованием эмулятора. После этого приложение тестируется на устройстве. Эмуляторы являются простым способом тестировать приложение на мобильном телефоне, не используя его физически. Кроме этого, эмуляторы используются в случаях, когда у разработчиков нет возможности проверить работоспособность приложения на той или иной платформе (например, у разработчика отсутствует устройство на iOS или Android) [3].

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

Под мобильным обучением Алабина Т. В. [1] подразумевает любую учебную активность, в которой преимущественно используются портативные устройства – телефоны, смартфоны или планшеты. Значимость мобильных приложений для образования растет не только благодаря их общедоступности и привлекательности с точки зрения новых технологий, но и благодаря возможностям, которые они дают. Внедрение мобильного обучения стало возможным благодаря широкому набору функций современных мобильных устройств, к которым на сегодняшний день в частности, относятся: голосовая связь, обмен сообщениями, обмен графикой, интернет-браузеры и др. 

Используя возможности мобильных устройств обучающихся, система мобильного обучения позволяет решать и образовательные задачи [1].

Разработка мобильного приложения строится на основе концепций и особенностей взаимодействия пользователя с рабочими экранами. Ionic Framework содержит комплексную спецификацию создания визуальных, движущихся и интерактивных элементов для пользовательских приложений.

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

Начальный макет приложения был разработан в среде Ionic Creator, которая представляет собой визуальный редактор экранов, содержащий в себе все базовые элементы управления. Данный подход позволяет быстро увидеть общее взаимодействие экранов приложения с элементами интерфейса. (см. рис. 2).

Рис. 2. Физическая модель работы приложения

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

– оригинальный размер изображения уменьшался на 40%.

– итоговое качество сохранения устанавливалось на 30% меньше оригинала.

Данный подход позволил уменьшить размер одного изображения с 4 Мбайт до 200КБайт. Видеоматериалы итоговой работы урока были загружены на сторонний видеосервер YouTube для обеспечения компактного объема конечного файла приложения. В приложение была встроена только ссылка на данное видео.

При запуске приложения пользователь попадает на главный экран, представленный на рисунке 2. Данное меню содержит четыре основных кнопки для перехода в другие рабочие экраны приложения. Кнопки занимают всю область экрана и содержат интуитивно понятные изображения, характеризующие каждый пункт меню, максимально упрощая начальное взаимодействие с приложением. Кнопки реализованы при помощи 4 элементов типа «ionic-card», которые являются частью стандартной библиотеки элементов Ionic Framework. Данный элемент представляет собой фигурный прямоугольник со скругленными краями и тенью под ним. Размер каждого блока был выставлен в 50%. Для организации данного экрана использовались теги: «table», «td», «tr». Изображения в приложении находятся внутри папки assets, поэтому ссылка на них формируется при помощи добавления имени изображения, например, «assets/имя изображения» (см. рис. 3-4).

     

Рис. 3. Интерфейс главного меню приложения

Рис. 4. Экран выбора урока

Разработанное кроссплатформенное мобильное приложение может быть использовано для организации учебного процесса позволит сделать учебный процесс более увлекательным и персонализированным.

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

Список литературы:

Алабина Т. В. Мобильное обучение. [Электронный ресурс] URL: https://infourok.ru/statya-na-temu-mobilnoe-obucheniya-i-mobilnie-prilozheniya-v-obrazovanii-875559.html (дата обращения 17.12.2017) 2

Кевдина Л. Lingualeo. [Электронный ресурс] URL: http://lingualeo.com/ru#get-it (дата обращения: 20. 12.2017). 6

Коматинени С. Android 3 для профессионалов. Создание приложений для планшетных компьютеров и смартфонов / Сатия Коматинени , Дэйв Маклин, Саид Хашими. М.: Вильямс, 2012. 116 c. 7

Сильвен Р. Android для программистов. Создаем приложения / П. Дейтел и др. - М.: Питер, 2012. - 560 c. 17

Эврика! Логические Задачи. [Электронный ресурс] URL: https://play.google.com/store/apps/details?id=ru.allyteam.evrika (дата обращения: 20. 12.2017). 18

Просмотров работы: 10