LoginSignup
0
4

More than 5 years have passed since last update.

(初心者向け)Swift3.0で初アプリ - アプリからNode-REDヘアクセス

Last updated at Posted at 2017-10-05

Swift3.0を使って簡単なiPhoneアプリを作ってみます
(初心者向け)Swift3.0で初アプリ - 外部ライブラリを使ってみる - CocoaPods, CarthageでAlamoFireを使えるようにしました
(初心者向け)Swift3.0で初アプリ - iPhoneからMacbookへアクセスでiPhoneからMacbookへアクセスできるようにしました
(初心者向け)Swift3.0で初アプリ - iPhoneからNode-REDヘアクセスでiPhoneからNode-REDへアクセスできるようにしました

次はiPhoneのアプリから自分のMacbookで稼働しているNode-REDへアクセスできるようにします

1.Node-REDのフローを用意します

  • Node-REDを起動します
  • 下記のフローをコピペして動かします
  • このフローでは/test10に対してPOSTメソッドでデータを受信しているので注意します(GETだと404エラーで受信されません)
アプリからのリクエストを受信するフロー
[{"id":"386498ec.918b48","type":"debug","z":"6daf1ea.58ba66","name":"","active":true,"console":"false","complete":"false","x":350,"y":120,"wires":[]},{"id":"662f2b11.b3d67c","type":"http in","z":"6daf1ea.58ba66","name":"","url":"/test10","method":"post","upload":false,"swaggerDoc":"","x":170,"y":60,"wires":[["1cc428b9.c7b2ff","386498ec.918b48"]]},{"id":"f814e629.f0152","type":"http response","z":"6daf1ea.58ba66","name":"","statusCode":"","headers":{},"x":610,"y":60,"wires":[]},{"id":"1cc428b9.c7b2ff","type":"template","z":"6daf1ea.58ba66","name":"htmlを返す","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<html>\n    <body>\n        <h1>\n        祝!開通!!\n        </h1>\n    </body>\n</html>","output":"str","x":410,"y":60,"wires":[["f814e629.f0152"]]}]

スクリーンショット 2017-10-05 15.53.04.png

2. iPhoneアプリを用意します

  • Xcodeを起動し、新しいSingle View Applicationを用意します
  • ViewController.swiftへ下記をコピペします
Node-REDへデータを送付するフロー
import UIKit
import Alamofire

class ViewController: UIViewController {

    let url = "http://192.168.2.1:1883/test10"  //送付先を指定
    let headers: HTTPHeaders = [
        "name": "value"
    ]

    let button = UIButton()     // ボタンを定義

    override func viewDidLoad() {
        super.viewDidLoad()

        // ボタンの位置とサイズ
        button.frame = CGRect(x: 120, y: 150, width: 120, height: 100)
        // ボタンの背景色
        button.backgroundColor = UIColor.lightGray
        // ボタンのタイトル
        button.setTitle("送信", for: .normal)
        // ボタンのタイトルのサイズ
        button.titleLabel?.font = UIFont.systemFont(ofSize: 30)
        // ボタン押下時のアクションとして送信処理("sendJson()")を指定
        button.addTarget(self, action: #selector(self.sendJson(sender:)), for: .touchUpInside)
        // 画面の背景色を指定
        view.backgroundColor = UIColor(red:1.0,green:1.0,blue:0.875,alpha:1.0)
        // 画面に追加
        view.addSubview(button)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }

    // 送信処理
    @objc func sendJson(sender:UIButton){
        let parameters: Parameters = [
            "moji_param": "こんにちは",   // 文字パラメータの例
            "suji_param": 123,          // 数値パラメータの例
            "nested": [
                "nested_param": "ごきげんよう" // ネストしたパラメータの例
            ]
        ]
        // Alamofireでの送信処理
        Alamofire.request(url,
                          method: .post,    // POSTメソッド
                          parameters: parameters,
                          encoding: JSONEncoding.default,
                          headers: headers)
            .authenticate(user: "user", password: "password")
            .responseJSON { response in
                if
                    let json = response.result.value as? [String: Any],
                    let prop1 = json["prop1"] as? String
                {
                    debugPrint(prop1)
                }
                debugPrint(response)
        }
    }
}
  • 必要に応じ下記の行の送付先URLを編集します
    let url = "http://192.168.2.1:1883/test10"  //送付先を指定
  • Xcode画面左側のナビゲーターペイン(プロジェクト名やMain.storyboardなどが並んでいるところ)からInfo.plistを開きます
  • リスト上部の「Information Property List」の右側にある「+」記号をクリックします
    スクリーンショット 2017-10-05 16.03.01.png

  • 「NSAppTransportSecurity」と打ち込み、

スクリーンショット 2017-10-05 16.03.21.png

  • [Enter]キーを押下すると、「App Transport Security Settings」に変化します

スクリーンショット 2017-10-05 16.03.31.png

  • この「App Transport Security Settings」の右側の「+」記号をクリックすると、「Allow Arbitrary Loads」「Allow Arbitrary Loads in Web Content」の選択肢が表示されるのでこれらを追加します。右欄のValueには"YES"を指定します

スクリーンショット 2017-10-05 16.04.17.png

  • 最終的に下記のようになることを確認します スクリーンショット 2017-10-05 16.04.59.png

3. アプリを起動しNode-REDへデータを送付してみます

スクリーンショット 2017-10-05 15.55.30.png

0
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
4