Кроссплатформенная мобильная разработка Xamarin.Forms

Программные решения для бизнеса

Мы разберем этапы кроссплатформенной разработки на Xamarin.Forms и детально изучим этапы создания собственного приложения, продолжая работать с имеющимися данными.
Глоссарий
Для успешного освоения материала рекомендуем вам изучить следующие понятия:
Видеолекция
Конспект
Продолжим тему мобильной разработки и поговорим о кроссплатформенной разработке на Xamarin.Forms. Эта платформа позволяет создавать одну единственную логику приложения с применением C# сразу для всех трех платформ: Android, iOS и UWP. Из преимуществ можно назвать: единый код для всех платформ, прямой доступ к нативным API каждой платформы, возможность использования платформы .net и языка программирования С#, который является достаточно производительным, и в то же время простым для освоения и понимания.
1. Для начала создаем проект в Xamarin.Forms
  • Даем ему название
  • В Xamarin представлен ряд шаблонов. Можно использовать списки, вкладки… Пока что мы будем просто выбирать Blank — пустую страницу, и убираем платформу iOS — нам сейчас нужен только Android
  • В файле App.xaml прописываем главную страницу для навигации
  • Ставим разрешение на использование интернет-подключения. Делается это в настройках Android Manifest
2. Начинаем с верстки MainPage. Она будет представлять собой простой
список — ListView. Здесь мы обрабатываем события нажатия, привязываем данные и делаем разметку
  • Важно
    В свойство ListView установливаем параметр HasUnivenRows, который позволит иметь динамический размер объекта. Немного упрощаем верстку списка и не отображаем звездность отеля, как было с RatingBar в Android Studio, так как аналогичного стандартного компонента в Xamarin нет, а на его реализацию уйдет значительное количество времени
3. Давайте попробуем получить с помощью API список отелей и работать с ним
  • Сначала тестируем запрос в браузере
  • Полученный ответ мы можем скопировать
  • Создаем новый класс Hotel в нашем проекте. И с помощью специальной вставки в группе Past Special, мы можем вставить скопированный текст в виде JSON-объектов
Т. е. мы проанализировали полученный ответ и создаем в соответствии с этим, свойство
  • Также мы можем добавить свое свойство — оно нам пригодится для вывода изображения
  • По аналогии создаем класс HotelComment
4. На странице MainPage мы получаем список отелей с помощью класса WebClient, где указываем строку подключения, также, как это было в Android 10.0.2.2.
5. Результат возвращается нам в формате json, который мы будем обрабатывать. Удобнее всего использовать библиотеку Newtonsoft. Json, позволяющую конвертировать объекты в формат типа json и обратно. Эти процессы называются сериализацией и десериализацией соответственно.
  • Для начала подключаем библиотеку Newtonsoft. Json в проекте
  • Десериализуем ответ в список отелей и установливаем в качестве источника данных ListView. Не забудьте пересобрать проект, прежде чем это делать
  • Запускаем созданный проект на эмуляторе. Список отелей выводится
6. Теперь создаем вторую страницу CommentsPage для просмотра комментариев для отеля и добавления новых
7. Добавляем ListView для вывода комментариев
  • указываем динамический размер элементов, привязку данных — как будет отображаться комментарий
  • выполняем привязку к указанию автора, содержимого и даты создания
8. В качестве источника данных для привязки мы можем использовать объект любого публичного класса. В том числе и CommentsPage
  • Поработаем с конструктором новой страницы CommentsPage, передавая в качестве параметра объект выбранного отеля. Cоздаем дополнительные свойства для биндинга
  • Создаем метод для обновления списка комментариев, где получаем ответ с помощью запроса GetHotelsComments, и десериализуем ответ. После этого загружаем полученный результат в список
  • Вызываем метод updateComments после отображения страницы
  • Теперь создаем переход на эту страницу с главной. С помощью метода PushAsync мы будем передавать экземпляр выбранного отеля в списке
  • Делаем остальные элементы управления для добавления комментария. Сразу делаем привязку и обрабатываем клик по кнопке «отправить»
  • Используем метод POST для загрузки комментария. В нем мы будем использовать метод UploadString для загрузки данных и передавать туда тот объект, который мы создали. При этом его нужно будет сериализовать. Не забудьте указать ContentType у вашего запроса и после этого обновить комментарии
9. Запускаем и тестируем созданный функционал. Выбрав отель, запускаем комментарии, которые к нему относятся, и можем добавить свой
Мы рассмотрели создание приложения Xamarin.Forms, освоили навигацию между страницами, поработали со списками, получая информацию с помощью GET запросов нашего API, а также протестировали работу POST запроса на примере добавления отзыва об отеле.
А теперь проверьте полученные знания, выполнив небольшие задания.
Интерактивное задание
Тест
Для закрепления полученных знаний пройдите тест
Стартуем!
Xamarin Forms. Свойство в ListView, которое позволит отображать объекты с динамическими размерами?
Дальше
Проверить
Узнать результат
Xamarin Forms. Метод класса WebClient для отправки Post запросов?
Дальше
Проверить
Узнать результат
К сожалению, вы ответили неправильно
Прочитайте лекцию и посмотрите видео еще раз
Пройти еще раз
Неплохо!
Но можно лучше. Прочитайте лекцию и посмотрите видео еще раз
Пройти еще раз
Отлично!
Вы отлично справились. Теперь можете ознакомиться с другими компетенциями
Пройти еще раз