Как подключить iOS приложение к бэкэнду? Alamofire

alamofire

Почти каждое iOS приложение использует бэкэнд. В этом посте мы будем использовать один из самых популярных библиотек в iOS — Alamofire.

Alamofire — это библиотека, которая помогает нам отправлять и принимать данные с сервера. Для того, чтобы каждый мог реализовать приложение, описанное в этом посте, я использовал публичное API. Попробуем попрактиковаться на загрузке текущей погоды в городе Гамбург. Мы будем использовать OpenWeatherMap API.

Вы можете найти исходники в моем GitHub аккаунте.

Шаг 1

Создайте Xcode проект. Выберите шаблон «Single View Application». Мы будем писать весь код в ViewController.swift. Изначально ваш проект должен выглядеть так:

Screen Shot 2017-02-07 at 10.11.24

Шаг 2

Создайте аккаунт в OpenWeatherMap и сгенерируйте API ключ. Данный ключ будет использован в приложении. OpenWeatherMap будет идентифировать вас через API ключ и не позволит делать слишком частые запросы. В бесплатном пакете количество запросов ограничено 60 в минуту.

Шаг 3

Строим интерфейс. Интерфейс будет очень простым. Я предпочитаю строить вид только через код (без использования storyboard).

    var activityIndicatorView:UIActivityIndicatorView!
    var whiteLoadingView:UIView!
    var responseLabel:UILabel!

    override func viewDidLoad() {
        super.viewDidLoad()
        buildView()
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
    
    func buildView() {
        let mainView:UIView = UIView(frame: CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height))
        self.view.addSubview(mainView)
        
        let titleLabel:UILabel = UILabel(frame: CGRect(x: 30, y: 30, width: mainView.frame.width - 60, height: 25))
        titleLabel.font = UIFont(name: "Helvetica-Bold", size: 18.0)
        titleLabel.text = "Current Hamburg weather:"
        mainView.addSubview(titleLabel)
        
        responseLabel = UILabel(frame: CGRect(x: titleLabel.frame.origin.x, y: 55, width: mainView.frame.width - 60, height: 20))
        responseLabel.font = UIFont(name: "Helvetica", size: 16.0)
        responseLabel.text = "-°C, -"
        mainView.addSubview(responseLabel)
        
        whiteLoadingView = UIView(frame: mainView.frame)
        whiteLoadingView.backgroundColor = UIColor.white
        whiteLoadingView.alpha = 0.7
        whiteLoadingView.isHidden = true
        mainView.addSubview(whiteLoadingView)
        
        activityIndicatorView = UIActivityIndicatorView(activityIndicatorStyle: .gray)
        activityIndicatorView.center = CGPoint(x: mainView.frame.width/2, y: mainView.frame.height/2)
        activityIndicatorView.hidesWhenStopped = true
        mainView.addSubview(activityIndicatorView)
    }
    
    func loadingAnimation(isLoading:Bool) {
        if (isLoading) {
            self.whiteLoadingView.isHidden = false
            self.activityIndicatorView.startAnimating()
        } else {
            self.whiteLoadingView.isHidden = true
            self.activityIndicatorView.stopAnimating()
        }
    }

В responseLabel я написал изначальное значение. Текст этого элемента будет динамическим. activityIndicatorView показывает процесс загрузки. whiteLoadingView не дает пользователю тапнуть по странице пока идет загрузка и делает анимацию загрузки более заметным. Запустите проект, вы должны увидеть такую страницу:

Screen Shot 2017-02-06 at 18.25.43

Шаг 4

Установите Alamofire Pod. Пример

Шаг 5

Мы собираемся использовать незащищенное соединение (не https), поэтому для того, чтобы избежать ошибки «The resource could not be loaded because the App Transport Security policy requires the use of a secure connection» надо внести изменения в info.plist. Добавьте «App Transport Security Settings» с элементом «Allow Arbitrary Loads» => «YES«:

Screen Shot 2017-02-07 at 16.27.12

Шаг 6

Загрузка данных. Мы будем использовать этот API метод.

    func loadData() {
        let API_URL:String = "http://api.openweathermap.org/data/2.5/weather"
        let API_KEY:String = "----------------------------"
        let parameters:[String:String] = [
            "q": "Hamburg",
            "units": "metric",
            "APPID": API_KEY
        ]
        let headerParameters:[String:String] = [
            "Authorization": "just example of header parameter"
        ]
        print(parameters)
        self.loadingAnimation(isLoading: true)
        Alamofire.request(API_URL, method: .get, parameters: parameters, encoding: URLEncoding.default, headers: headerParameters)
            .responseJSON { response in

                self.loadingAnimation(isLoading: false)

                if let JSON:[String:Any] = response.result.value as? [String:Any] {
                    let mainObject:[String:Any] = JSON["main"] as! [String:Any]
                    let temperatureInt:Int = mainObject["temp"] as! Int
                    
                    let weatherObjects:[Any] = JSON["weather"] as! [Any]
                    let weatherObject:[String:Any] = weatherObjects[0] as! [String:Any]
                    let descString:String = weatherObject["description"] as! String
                    
                    self.responseLabel.text = String(temperatureInt) + "°C, " + descString
                }
        }
    }

Используйте свой API_KEY. Запустите loadData в viewDidLoad после buildView.

Шаг 7

Запускаем и проверяем приложение.

Screen Shot 2017-02-08 at 15.45.19

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Картинка профиля Doszhan Kalibek

Doszhan Kalibek