Сегодня напишем простое приложение для ios на Swift. Рассмотрим некоторые базовые вещи этого языка и возможности среды разработки xcode. Использовать будем API от flickr.com. Идея приложения в следующем: пользователь вводит с клавиатуры слово, и получает картинку с сайта фликра, которое соответствует этому слову. Понятно, что сейчас ничего не понятно, но к концу статьи мы получим реально работающее приложение. И так, начнем.
Для начала откроем среду разработки Xcode и создадим простой проект.
Создаем проект Single View App. Это означает в нашем проекте будет один рабочий экран, на котором будут происходить все ключевые действия.
Далее выбираем название проекта, обязательно язык устанавливает на Swift и снимаем все галочки. Далее жмем Некст до самого конца.
Развернем структуру проекта и разберем два файла.
ViewController.swift является как раз основным файлом для кодирования нашего приложения и в частности файла Main.storyboard.
Открыв его мы можем видеть экран телефона, на который необходимо с правого нижнего угла приложения перенести две вьюхи Image View и Text Field. В текстовом поле мы будем вводить слова, а в поле с фотографиями получать соответствующую фотографию.
Теперь можно приступать к кодированию, и это мы будем делать в файле ViewController.
Нам необходимо связать наши поля с кодом. Для этого необходимо нажать на два кружка вверху справа панели Xcode и зажав ctrl и представление перенести его в код.
Дело за малым, осталось закодировать эти представления средствами языка Swift.
Начнем с написания главной функции searchImage. Именно она будет искать фотографии на сайте Flickr.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
func searchImage(text: String){ showLoader(show: true) let base = "https://api.flickr.com/services/rest/?method=flickr.photos.search" let key = "&api_key=154ca59f46d012b1959cf186fc724d2f" let format = "&format=json&nojsoncallback=1" let farmattedText = text.addingPercentEncoding(withAllowedCharacters: .urlHostAllowed) ?? "" let textToSearch = "&text=\(farmattedText)" let sort = "&sort=relevance" let searchUrl = base + key + textToSearch + sort + format; let url = URL(string: searchUrl)! |
Рассмотри подробнее начало функции. Сейчас мы поймем, что язык Swift очень простой.
Функции начинаются с ключевого слова func далее идет название функции и список аргументов. В нашем случае это String поле text. showLoader это вызов функции, которую мы напишем ниже. В данном случае, наша функция не возвращает никакого значение (void в Java). В Swift значение для возвращающих функций пишется следующим образом:
|
1 2 3 4 |
func textFieldShouldReturn(_ textField: UITextField) -> Bool { searchImage(text: textField.text!) return true } |
возвращаемое значение указывается после скобок с параметрами, разделяется стрелкой вправо.
Вернемся к началу нашей главной функции. Далее идет блок формирование текстовых констант. Слово let обозначает константу. После задания констант мы использую операцию конкатенации (+) формируем URL адрес, который обращается к API Flickr, а именно к функции search. Вы можете просто воспользоваться моей готовой ссылкой, либо перейти на сайт Flickr в раздел для разработчиков, зарегестрироваться и следуя подсказкам настроить любой подходящий вам API. Если вам будет интересно я напишу статью по этому поводу.
Метод text.addingPercentEncoding(withAllowedCharacters: .urlHostAllowed) ?? “” позволяет нам использовать при написании запроса не только английские буквы, но и русские. Если мы будем просто передавать параметр с русскими символами или пробелами, то наше приложение не будет работать. Поэтому эта операция нам необходима. В самой последней строчке мы преобразуем нашу строку в URL формат.
?? является аналогом трепанного оператора, но не точно)) На самом деле суть та же, но условием является неравенство значения справа нулу(кстати говоря, null в Swift это nil). Т.е. если текст пустой вернется пустая строчка.
! в конце URL означает параметр точно является строковой переменной.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
URLSession.shared.dataTask(with: url) { (data, _, _) in guard let jsonData = data else{ self.showLoader(show: false) self.showError(text:"Error, json is empty") return } guard let jsonAny = try? JSONSerialization.jsonObject(with: jsonData, options: []) else{ self.showLoader(show: false) return } guard let json = jsonAny as? [String: Any] else { self.showLoader(show: false) return } guard let photos = json["photos"] as? [String: Any] else { self.showLoader(show: false) return } guard let photosArray = photos["photo"] as? [Any] else { self.showLoader(show: false) return } guard photosArray.count > 0 else { self.showLoader(show: false) self.showError(text:"Photos is empty") return } guard let firstPhoto = photosArray[0] as? [String: Any] else { self.showLoader(show: false) return } let farm = firstPhoto["farm"] as! Int let id = firstPhoto["id"] as! String; let secret = firstPhoto["secret"] as! String; let server = firstPhoto["server"] as! String; let pictureUrl = self.convert(farm: farm, server: server, id: id, secret: secret) URLSession.shared.dataTask(with: pictureUrl!, completionHandler: { (data, _, _) in DispatchQueue.main.async { self.imageView.image = UIImage(data:data!) } self.showLoader(show: false) }).resume() }.resume() } } |
Так как мы загружаем фотографии с серверов Flickr, нам необходимо создать сессию, подключиться к серверу и получить информацию, записав ее в нужный нам формат. Первая строчка этого блока инициирует подключение по ранее собранному адресу и возвращает значение в data. По запросу мы получим json файл, с информацией которую мы будем использовать для фото.
Далее мы используем несколько блоков guard. На самом деле можно заменить его на конструкцию if-else, но в данном приложении это создаст большое разветвление, которое будет тяжело прочесть. И так, тут мы видим всю простоту Swift. Мы читаем код так, как если бы он был написан на обычном языке.
Если мы получили непустой json файл, то сохраняем его в константу, иначе выводим сообщение с ошибкой. Если этот файл удается сохранить, то как объект json, сохраняем, иначе ошибка. Переводим файл в строку, и получаем только данные с ключом “photos”. После создаем массив из полученных данных, и если этот массив непустой, то получаем первый элемент, берем необходимые для запроса данные и с помощью функции convert создаем URL, перейдя по которому мы получим реальную фотографию. Внутри сессии мы создаем еще одну сессию и передаем полученные данные в наш блок с фотографиями. Закрываем обе сессии. Метод конверт выглядит следующим образом:
|
1 2 3 |
func convert(farm: Int, server: String, id:String, secret: String) -> URL? { return URL(string:"https://farm\(farm).staticflickr.com/\(server)/\(id)_\(secret)_c.jpg") } |
Получаем json файл в следующем виде:
Вот и данные для создания URL адреса для запроса фотографии. Из всего массива мы берем только самую первую, сортированную по релевантности. Результат выполнения функции convert для слова Lion выглядит так:
|
1 |
https://farm3.staticflickr.com/2800/4203199462_c1ba188403_c.jpg |
Скопируйте в браузер и посмотрите что получится)
Теперь рассмотрим вспомогательные функции, которые мы использовали и написали.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
func showError(text:String) { let alert = UIAlertController(title: "Упс...", message: text, preferredStyle: .alert) let ok = UIAlertAction(title: "OK", style: .default) alert.addAction(ok) DispatchQueue.main.async { self.present(alert, animated: true) } } func showLoader(show:Bool){ DispatchQueue.main.async { if(show){ self.imageView.image = nil self.loader.startAnimating() } else { self.loader.stopAnimating() } } } |
Для отражения ошибки мы используем стандартное окно с текстом и кнопкой ОК. Функция показать загрузчик отвечает за запуск вращающего стикера. Его мы добавляем в Main.storyboard и помещаем в середину фотографии.
И так, все готово, осталось только запустить наше приложение. Для того чтобы все сработало нам необходимо создать делегата, который будет запускать функцию поиска
|
1 2 3 4 5 |
extension ViewController: UITextFieldDelegate { func textFieldShouldReturn(_ textField: UITextField) -> Bool { searchImage(text: textField.text!) return true } |
Мы используем стандартное расширение нашего контроллера, который будет вызывать поиск фотографии при нажатии клавиши return на клавиатуре девайса.
Теперь заполним главный метод который запускает весь процесс работы приложения, так же как метод main в java.
|
1 2 3 4 5 6 7 |
override func viewDidLoad() { super.viewDidLoad() textFIeld.delegate = self searchImage(text: "russia") textFIeld.becomeFirstResponder() imageView.layer.masksToBounds = true } |
В работающим виде приложение выглядит следующим образом
Исходный код можно найти на моем акаете в GitHub: https://github.com/nicholasgribanov/fotosearch
