Разработка мобильного приложения для просмотра документов из облачного хранилища



<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

android:orientation="vertical"

android:layout_width="fill_parent"

android:layout_height="fill_parent">

<android.support.v4.widget.DrawerLayout

android:layout_width="match_parent"

android:layout_height="match_parent"

android:id="@+id/drawer_layout"

android:fitsSystemWindows="true">

<RelativeLayout

android:layout_width="match_parent"

android:layout_height="match_parent">

<android.support.v7.widget.Toolbar

android:id="@+id/toolbar"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:minHeight="?attr/actionBarSize"

android:background="?attr/colorPrimary"

android:theme= "@style/ThemeOverlay.AppCompat.Dark.ActionBar"

app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

</RelativeLayout>

<FrameLayout

android:id="@+id/fragmentContainer"

android:layout_width="match_parent"

android:layout_height="match_parent" />

<android.support.design.widget.NavigationView

android:layout_width="wrap_content"

android:layout_height="match_parent"

android:layout_gravity="start"

android:id="@+id/nav_view"

app:menu="@menu/menu"

app:headerLayout="@layout/header" />

</android.support.v4.widget.DrawerLayout>

</LinearLayout>

Данный пример кода наглядно демонстрирует, как выглядит интерфейс пользователя с его технической стороны. Тег <android.support.v4.widget.DrawerLayout> описывает компонент, в котором содержится меню приложения. Этот компонент вызывается движением с левой стороны экрана. Данный элемент интерфейса содержится в компоненте Android.Support.Library.Appcompat. Скриншот данного компонента приведен на рис. 3.6.

Рис. 3.6 - Интерфейс компонента «меню»



Компонент, представленный на рис. 3.6 содержит в себе элементы навигационного меню приложения, а также название самого приложения. По нажатию на кнопку «Последние» пользователь попадает на страницу, отображающую последние просмотренные документы, хранящиеся на локальном мобильном устройстве. Интерфейс этой страницы представлен на рис. 3.7.

Рис. 3.7 - Интерфейс страницы «Последние»

На странице, изображенной на рис. 3.7 представлен интерфейс страницы «Последние», которая отображает последние просмотренные пользователем документы, хранящиеся на локальном устройстве. Данная о просмотренных документах хранится в базе данных в таблице DocumentsInfo. Также на данной странице отображается дата просмотра документа и страница, на которой пользователь прервал просмотр документа, либо чтение книги. По нажатию на элемент, отображающий данные о документе открывается страница просмотра документа. Просмотр начинается с той страницы, на которой пользователь остановился последний раз. На рис. 3.8 приведен интерфейс данной страницы.



Рис. 3.8 - Интерфейс страницы просмотра документа

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

public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)

{View view = inflater.Inflate(Resource.Layout.localDocuments_fragment, container, false);

if (!string.IsNullOrEmpty(fileName))

{ pdfView = view.FindViewById<PDFView>(Resource.Id.pdfView); pdfView.FromAsset(fileName).DefaultPage(count).SwipeVertical(true).EnableDoubletap(true).Load(); }

return view;

}



Приведенный выше код наглядно демонстрирует легкость работы с данным компонентом. Строка View view = … определяет элемент страницы View, на котором прорисовываются все компоненты. Следующая строка кода проверяет, что имя файла не пустое, следующая инициализирует компонент PDFView, следующая за ней загружает файл в компонент и выставляет страницу документа для отображения.

Далее, на рис. 3.6 расположен компонент, по нажатию на который производится переход на страницу «Локальные». Интерфейс данной страницы приведен на рисунке 3.9.

Рис. 3.9 - Интерфейс страницы «Локальные»

На рис. 3.9 представлен интерфейс страницы «Локальные», которая предназначена для отображения файлов, хранящихся на мобильном устройстве, расположенные во внутренней памяти, либо на карте памяти. Также данная страница имеет функционал выгрузки документа на Google Drive. Взаимодействие с Google Drive обеспечивает компонент из магазина Xamarin - Google Play Services - Drive. Это компонент, предоставляемый на бесплатной основе, содержащий в себе средства для синхронизации и обмена документами с мобильным устройством. Последняя версия на момент написания работы 42.10. Пример кода для работы с данным компонентом приведен ниже.

buttonSearch.Click += async delegate {

buttonSearch.Enabled = false;

// Создается запрос

// Вернет файлы, которые вы создавали и открывали.

var query = new QueryClass.Builder()

.AddFilter(Filters.Contains(SearchableField.Title, editTextFilename.Text))

.Build();

// Выполнение поиска и получение результата

var results = await DriveClass.DriveApi.Query(googleApiClient, query).AsAsync<IDriveApiMetadataBufferResult>();

// Проверка на правильность результата

if (results.Status.IsSuccess)

{

var files = new List<Metadata>();

for (var i = 0; i < results.MetadataBuffer.Count; i++)

files.Add(results.MetadataBuffer.Get(i).JavaCast<Metadata>());

listViewResults.Adapter = new ArrayAdapter<string>(this,

Android.Resource.Layout.SimpleListItem1,

Android.Resource.Id.Text1,

(from f in files select f.Title).ToArray());

if (files.Count <= 0) Toast.MakeText(this, "No results found!", ToastLength.Short).Show();

}

buttonSearch.Enabled = true;

};

buttonCreate.Enabled = false;

buttonSearch.Enabled = false;

googleApiClient = new GoogleApiClient.Builder(this)

.AddApi(DriveClass.API)

.AddScope(DriveClass.ScopeFile)

.AddScope(DriveClass.ScopeAppfolder)

.UseDefaultAccount()

.AddConnectionCallbacks(this)

.AddOnConnectionFailedListener(this)

.Build();

Данный пример кода наглядно демонстрирует простоту работы с сервисами Google. Предназначение данного кода - показать список файлов, хранящихся на Google Drive.

Следующим пунктом в меню на рисунке 3.6 идет компонент для перехода на страницу «Хранилище». Интерфейс данной страницы приведен на рис. 3.10.

Рис. 3.10 - Интерфейс страницы «Хранилище»



Данная страница предназначена для отображения документов, хранящихся на удаленном хранилище, в текущем случае - это Google Drive. Так же данная страница имеет функционал, позволяющий загружать документы с диска на мобильное устройство для его просмотра. Для этого служит кнопка в виде стрелки, направленной вниз. Для отслеживания прогресса загрузки служит индикатор и текстовое поле, содержащее процентное значения остатка загрузки документа на локальное устройство. После полной загрузки выбранный документ отображается во вкладке «Локальные». Работа данной страницы организована с помощью вышеописанного компонента Google Play Services - Drive.

Следующим пунктом идет страница поиска. Эта страница предназначена для поиска книг по имени автора, либо по жанру. Поиск производится по общедоступному ресурсу http://www.goodreads.com/. Интерфейс данной страницы приведен на рис. 3.11.

Рис. 3.11 - Интерфейс страницы «Поиск»

Для доступа к ресурсу www.goodreads.com используется внешнее API (application programming interface), предоставляемое непосредственно самим ресурсом. Используемое API предоставляет такие функции, как поиск, загрузка, фильтрация и прочие необходимые. Для запроса информации с данного ресурса используется стандартный get - запрос. В ответ приходит xml, в котором содержится необходимая информация. Пример xml, приходящего в ответ приведен ниже.

<GoodreadsResponse>

<GoodreadsResponse>

<Request>

<!-- ... request metadata omitted ... -->

</Request>

<search>

<query>

<![CDATA[ Ender's Game ]]>

</query>

<results-start>1</results-start>

<results-end>10</results-end>

<total-results>100</total-results>

<source>Goodreads</source>

<query-time-seconds>0.10</query-time-seconds>

<results>

<work>

<books_count type="integer">1</books_count>

<id type="integer">11571577</id>

<original_publication_day type="integer">30</original_publication_day>

<original_publication_month type="integer">4</original_publication_month>

<original_publication_year type="integer">2010</original_publication_year>

<ratings_count type="integer">300</ratings_count>

<text_reviews_count type="integer">16</text_reviews_count>

<average_rating>4.17</average_rating>

<best_book type="Book">

<id type="integer">8782597</id>

<title>Ender's Game</title>

<author>

<id type="integer">2940867</id>

<name>Frederic P. Miller</name>

</author>

<image_url>

https://s.gr-assets.com/assets/nophoto/book/111x148-6204a98ba2aba2d1aa07b9bea87124f8.png

</image_url>

<small_image_url>

https://s.gr-assets.com/assets/nophoto/book/50x75-6121bf4c1f669098041843ec9650ca19.png

</small_image_url>

</best_book>

</work>

<!-- ... additional results omitted ... -->

</results>

</search>

</GoodreadsResponse>

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

Страницы, описанные выше доступны только авторизованному пользователю. Что же касается самой регистрации и авторизации, то они рассмотрены далее. На рисунке 3.12 представлен интерфейс страницы авторизации. Как видно из рисунка, в приложении имеется возможность авторизации через популярные социальные сети, такие как facebook, вконтакте и Google+. Доступ к данным в социальных сетях производится через протокол OAuth 2.0 и доступные запросы к API социальных сетей.

Описание процесса взаимодействия на основе подключения к социальной сети вконтакте приведено далее. Первое, что необходимо сделать - получить token - ключ, по которому API Вконтакте будет распознавать именно данное приложение. Далее все просто. Подключить плагин Xamarin.Auth.Android. Пример кода для авторизации в приложении через социальную сеть вконтаке приведен ниже.

var auth = new OAuth2Authenticator (

clientId: "Id клиента, который запомнили на прошлом шаге",

scope: "friends,video,groups",

authorizeUrl: new Uri ("https://oauth.vk.com/authorize"),

redirectUrl: new Uri ("https://oauth.vk.com/blank.html"));

Описание всех параметров по порядку:

clientId -- token - ключ, полученный непосредственно с vk.com;

scope -- перечень разрешений, выдающихся приложению (в данном случае: друзья, видео, группы;);

authorizeUrl -- url авторизации по OAuth 2.0, для VK.com это oauth.vk.com/authorize;

redirectUrl -- url перенаправления, для VK.com это oauth.vk.com/blank.html.

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

Функциональная схема приложения

При разработке приложения была составлена блок-схема работы программы, в которой отражены функции и логика работы приложения [10]. Блок-схема изображена на рис. 3.13.

Рис. 3.12 - Интерфейс страницы «Авторизация»

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

После авторизации пользователь может выбрать любой их пунктов меню. После выбора «Последние» он попадает на страницу «Последние», где ему становятся доступным функционал просмотра документов. При выборе «Локальные», пользователь попадает на страницу «Локальные», на которой ему доступен функционал просмотра документа, хранящегося на мобильном устройстве, либо выгрузка документа на удаленное хранилище, также просмотр списка документов, хранящихся на мобильном устройстве. На странице «Хранилище» пользователю доступен функционал просмотра списка документов, хранящихся на удаленном хранилище, либо загрузка документов на мобильное устройство.

Рис. 3.13 - Функциональная схема приложения

На странице «Поиск» доступен функционал поиска книг по общедоступной библиотеке. На странице «Профиль» пользователь может просмотреть данные своего профиля, а также поменять необходимые данные, такие как адрес почты, авторизационные данные для доступа к удаленному хранилищу и остальные. На странице «О программе» содержится информация о приложении, разработчике и способах связи с разработчиком. По выборе пункта «Выход» происходит удаление текущей сессии пользователя и выход из приложения [11]. Реализованный функционал для развития

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



Заключение

В ходе выполнения бакалаврской работы было разработано приложение на мобильную платформу Android. для доступа к документам, хранящимся на удаленных серверах. Основными требованиями к разрабатываемому приложению было - доступ к облачному хранилищу, такому как google drive. Также доступ к документам, хранящимся на локальном устройстве и возможность обмена документами устройства с облачным хранилищем. Все требования перечислены далее:

доступ к документам, хранящимся на удаленном хранилище, а именно - Google drive;

обмен документами с удаленным хранилищем;

авторизация и регистрация пользователя;

возможность авторизации с помощью популярных социальных сетей, таких как вконтакте, facebook, google+;

сохранение информации о положении в документе, на котором пользователь прервал свою работу;

просмотр документов, находящихся на локальном устройстве.

В ходе разработки была изучена документация по разработке на мобильную платформу Android, а также инструментов, доступных разработчику. Были проанализированы несколько похожих инструментов, таких как Xamarin и Android Studio. Изучена документация и методы разработки приложений на языке C#. Также изучены средства работы с базой данных, в данной работе это SQLite.

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

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

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

Размещено на Allbest.ru

...