AWS IoT | Flutter MQTT Client App [Full Version]

Aug 16, 2023

AWS IoT | Flutter MQTT Client App [Full Version]

In this video, I’m gonna show you completing the Flutter Mqtt Client App for ESP32CAM.
This mqtt client application works on macOS, iOS, and Android.

[Ep0. AWS IoT | How to install Mosquitto Broker on Amazon EC2]
   • AWS IoT | How to install Mosquitto Br…

[Ep1. AWS IoT | ESP32CAM working as a publisher on MQTT]
   • AWS IoT | ESP32CAM working as a publi…

[Ep2. AWS IoT | Flutter MQTT Client App for macOS - UI Part (For Newbies)]
   • AWS IoT | Flutter MQTT Client App for…

[Flutter mqtt_client]
https://pub.dev/packages/mqtt_client

[Flutter image]
https://pub.dev/packages/image

[Project Github]
https://github.com/0015/ThatProject/t…

#Flutter #MacOS #MQTTCLIENT #ESP32CAM #AWSIoT #EC2 #ThatProject

Content

0.804 -> Hi guys.

1.64 -> Welcome back to my project.

2.979 -> I'm Eric.

3.979 -> This is the final video of the Flutter mqtt client app for ESP32CAM.

9.719 -> As you can see here, I attached ESP32CAM to my bag and tested it

13.83 -> to work as an action camera.

16.1 -> Also, it's posting data using my phone's hotspot.

19.42 -> This allows you to publish data from ESP32CAM from anywhere.

24.307 -> They're receiving ESP32CAM images on this MacBook and this Android phone in real-time

28.703 -> by subscribing to the ESP32CAM's topic.

32.25 -> Okay.

33.25 -> I'm ready to go.

34.25 -> Let me walk around for a while.

36.76 -> Because mqtt broker is installed on AWS EC2, it can be also accessed from the out of local network.

44.179 -> ESP32CAM publishes data to a particular topic one-sided,

48.039 -> while other clients only subscribe to it to receive data.

51.339 -> Perhaps this is the simplest version of the mqtt client.

55.21 -> It's also possible to subscribe to a specific topic

58.469 -> and issue commands to the specific client or can be two-way communication.

63.011 -> If you need to control various sensors, I think it would be ideal to control them

66.591 -> using the mqtt protocol.

69.147 -> Of course, we have lots of options to make a communication environment

73.14 -> but HTTP or HTTPS would be too heavy in an IoT environment.

79.056 -> I want a better FPS, but this is what we can do with ESP32CAM.

83.07 -> As long as it has enough battery and stable network status,

87.322 -> we can use it anywhere.

89.173 -> If there is a chance, I think it would be good to test it on a device

92.551 -> with a sim module.

94.957 -> Following the previous video, we will complete the mqtt client on the Flutter today.

100.159 -> The video is longer than I thought but I believe this would be helpful for someone

103.898 -> who needs this.

105.729 -> Please leave your questions in the comments below if you need them.

109.962 -> Let's get started.

118.768 -> What we have to do from now on is to make MQTT Client.

122.296 -> Thanks to this MQTT client library that supports not only desktop apps but also mobile apps,

127.182 -> it's easy to create.

128.66 -> It supports AWS IoT as well as other major cloud providers, making it easy to use.

135.14 -> This library supports Mqtt version 3.1 and 3.11.

139.86 -> If your MQTT broker is version 5, you should use a different MQTT client library.

146.47 -> Let's add this library to the project.

149.86 -> Flutter's project manages all resources as well as the libraries required by the project

154.22 -> in the pubspec.yaml file.

156.51 -> You can easily use it by adding the libraries you need here.

161.299 -> After adding the library, run the pub get command

163.86 -> to download the library into the project.

166.426 -> You can run pub get command on the terminal or

168.876 -> click the pub get on the menu above Android Studio.

173.097 -> It's downloaded and ready to use.

175.93 -> I'll create the Assets folder into the root of the Project

179.69 -> and then create a folder called certs.

185.256 -> A certificate is required to access the server in this application.

189.04 -> What you need to do is that you must bring the certificate and key into the project to

193.51 -> access the AWS IoT bridge.

196.74 -> You remember that we added these keys to the secrets header file in the ESP32CAM project.

202.773 -> You can download it directly from the server, or you can copy the text and make it into each file.

213.097 -> A total of 3 files are ready.

215.118 -> Root CA, device Certificate, and private key.

218.763 -> Prepare each of them and put them all in a folder called certs in assets.

223.617 -> Go back to pubspec.yaml file and register all of them to let the application access these files.

229.14 -> This will allow you to read all of these files from your code.

236.247 -> It's time to write the code for MQTT client connections.

242.65 -> I'm making the function called mqttConnect.

246 -> Use the keyword Future to make it behave asynchronously.

250.74 -> Typically, most of the operations that work with the server work asynchronously.

255.65 -> The return type is used as a bool so that you can know if the connection is successful.

260.785 -> One string will be included as a parameter.

263.46 -> This string is the client id received from the user.

267.027 -> The reason for using the async keyword is that there is code that also works asynchronously

272.26 -> within this function.

274.092 -> There must be a return, so I'll put any value in first.

278.42 -> Another function to create is to update the status text.

281.66 -> When you call SetState, it redraws the screen, so the status text in the footer below layout

287.13 -> changes to new text.

288.99 -> Updates the status text when the connection starts.

292.09 -> I will read the files inside the project in byte format.

295.48 -> An object in a Flutter service called rootBundle can read files inside a project.

301.427 -> Make sure that the path to the file is correct.

304.252 -> Read all three files the same way.

314.165 -> SecurityContext is an object in the dart io and can contain the certificates to trust

319.18 -> when making a secure client connection, and the certificate chain and private key

323.85 -> to serve from a secure server.

326.429 -> Register all three certificates and keys above.

332.26 -> Import the mqtt_server_client and the mqtt_client required to create our Mqtt Client.

339.549 -> Create an Mqtt Client object.

345.968 -> The endpoint address is entered first and then the client id is entered.

350.909 -> The client ID receives input from the user, so I'll put the empty string in for now.

356.813 -> The client's Security Context uses the context created above.

361.002 -> You can check various logs by logging on.

363.979 -> If you intend to use a keep-alive you must set it here otherwise keep alive will be disabled.

369.572 -> The port is 8883 by default and a secure connection.

373.87 -> Adds a callback function for onConnected, onDisconnected, and pong.

378.653 -> I will update the status of each when the connection is successful and disconnected.

395.523 -> Set the client's default settings.

397.86 -> where the id entered from the user becomes the client id.

401.881 -> Start the connection.

403.379 -> If there is a problem, return false and it won't proceed further.

418.199 -> If the connection is successful, subscribe to the predefined topic with QoS 0

422.54 -> which is at most once and return true.

426 -> This is all for the mqtt connect function.

430.384 -> Now we will implement the connection button and the disconnect button.

434.014 -> There may be a time to wait for a response from the server

437.41 -> when the user presses the connect button.

440.103 -> I think it would be good if the dialog appears on the screen at this time.

444.57 -> I'll implement it easily using a dialog library available on all platforms.

450.13 -> Add it to pubspec.yaml and run pub get to be ready for use.

458.15 -> I'll import nDialog first.

460.85 -> Allows a function called _connect to be invoked when the icon button in the text form field is pressed.

467.84 -> Similarly, when the disconnect button is pressed, a function called _disconnect is called.

473.338 -> Need to check that the mqtt client id user entered is empty, and proceed with the connection if not.

480.636 -> After that, let the progress dialog appear.

483.57 -> Let's take an example of the progress dialog from the example page and use it.

488.7 -> Most importantly, the dismiss option is false to prevent users from forcibly removing the pop-up.

495.12 -> This allows the user to wait when a pop-up appears on the screen while connecting.

499.45 -> Let's add the required texts.

502.186 -> You remember that we made a variable called isConnected.

505.587 -> If the MQTT client is connected without any problems, this will be true.

510.182 -> Also, since it works asynchronously, the keyword async must be followed after this function name.

516.916 -> When the connection status is confirmed, dismiss the Progress Dialog.

521.589 -> I'll test the connection later and check if the pop-up comes out properly first.

527.292 -> Enter any text and click the icon to get a pop-up.

531.25 -> There is nothing more we can do because there is no way to dismiss it.

535.49 -> Let's go back and complete the source code.

542.479 -> If the disconnect button is pressed, disconnect the client.

545.87 -> It's very clear that the connection is broken here if the disconnect callback function is invoked.

552.089 -> I will make isConnected false here.

555.139 -> I think I'm almost done.

556.73 -> I'm reviewing it again and all looks good.

564.138 -> Now I'll build it and check it out.

569.222 -> I'm entering the client ID and click the icon.

572.149 -> There's a pop-up, but it's not going on anymore.

575.68 -> What's going on here.

576.949 -> In the console log, There seems to be a problem with

579.915 -> the socket connection permission at the OS level.

583.345 -> This is a problem that occurs because macOS applications work on the sandbox.

588.868 -> To fix this problem, you can add a key to the entitlement

592.188 -> so that you can make an external connection.

595.3 -> Select the macos on the left, go to the runner folder.

599.485 -> Open the DebugProfile.entitlements.

602.768 -> After you add it as above, you can make a connection to the outside.

612.151 -> This is a way to fix it.

613.769 -> Let me build it and try again.

622.67 -> Entering client id.

624.199 -> The pop-up disappeared quickly because the connection was fast.

627.597 -> The status text below shows that the connection is successful.

632.259 -> I checked that it's connected to the MQTT broker.

635.3 -> The last step is that the image appears normally to the right of the body layout.

646.494 -> Go to the body widget.

648.32 -> Let's divide the body widget into two functions: body menu and body stream.

662.213 -> Body Menu is responsible for user input, and Body Stream allows the client to receive the

666.525 -> contents of subscribed topics.

670.621 -> Let's complete the Body Stream.

673.179 -> The client's data comes through the stream.

675.18 -> So, data must be handled using a listener or stream builder.

679.781 -> The Stream builder allows you to update the UI without the setState function.

683.537 -> So if you need to update UI with data from a stream, I recommend you to use the stream builder.

689.209 -> If your data doesn't need to update UI then the listener is good.

692.79 -> Let me show you how to use it.

695.077 -> The stream is the client's updates.

697.54 -> In the stream builder, two parameters are included: context and snapshot.

702.37 -> The snapshot has real data.

704.66 -> If there is no data in the snapshot, return the circle progress indicator.

710.29 -> The reason why UI objects can be returned inside the stream builder is that it has context.

720 -> If it has data, you need to change it to the same format as sending it.

724.253 -> If the sender sends JSON data, you need to change it to JSON format.

728.11 -> I need to change the payload of the received message to an image because the Jpeg images

732.504 -> are incoming.

737.177 -> There is a very useful library called Image.

739.677 -> This library can decode or encode images in a particular format and includes a variety of features.

746.954 -> I will use this to change the data in the payload to an image.

751.637 -> The Image library cannot be used as it is because the class image already exists in dart.

759.172 -> In this case, you can access this library with a new name using the keyword as.

770.488 -> The message in Payload is byte data, so it's necessary to decode it in jpeg first.

775.929 -> Since it's decoded with jpeg, it's image data from now on.

779.519 -> If you need any modification of the image, you can do it here.

783.389 -> Let me print out the resolution of the image.

785.7 -> Because ESP32CAM set to VGA resolution, it should be 640x480.

791.5 -> Finally, use the Image widget to display the jpeg image on the screen.

795.651 -> The gaplessPlayback option must be true so that there is no flickering

799.871 -> between the image and the image.

803.817 -> This completes the body stream.

805.649 -> Don't forget to go to the body and add the body stream instead of the container.

810 -> Let me increase the body's right screen ratio a little bit more.

814.009 -> I will rebuild and test it.

821.65 -> It's connected to the mqtt broker and subscribed to the specific topic.

826.43 -> You can see the image data posted on the topic in the application that you created yourself.

832.17 -> It's working very well, and byte data is quickly being output from the console.

837.157 -> You can see that the resolution of the image is 640x480.

842.194 -> I'll change the color of the body menu on the left to light black to make it easier to distinguish.

847.568 -> Let me check it again.

852.793 -> This is the application layout I wanted.

855.344 -> Looks good.

857.04 -> I'll improve the layout a little more.

860.399 -> I want this application to work on mobile as well as desktop.

865.083 -> All the libraries we've used so far work on mobile, so no doubt they'll work the same on iOS and Android.

873.199 -> But, I think the layout needs to be modified a little bit.

877.54 -> Since the width of the mobile is shorter than the desktop,

880.727 -> it would be better to put the body menu up.

883.69 -> Let me go back to the code and make some corrections.

890.592 -> First, let's set the header text always in the center.

895.314 -> The length of the screen can be determined through the mediaQuery.

899.079 -> If the horizontal length of the screen is less than 600px, I will change the body part

903.219 -> up and down, not left and right.

906.241 -> If you look at the current body, it's divided into Row.

909.615 -> All you have to do is change this to a Column when it has a short length.

921.705 -> In Column, the body menu is drawn to that size,

924.888 -> and the body stream is drawn to the maximum screen, so I use Expanded for this.

929.43 -> The Flex option is not required here.

933.199 -> Don't forget to hand over the variable.

935.72 -> I will rebuild this and check.

940.823 -> If I adjust the horizontal length of the screen to 600px or less,

945.68 -> I can see the menu moves to the top.

947.576 -> It works well.

949.589 -> It has no effect on the function because it's just a layout adjustment.

954.01 -> Now, I'll try to build on iOS.

963.855 -> On the target device, select Open iOS Simulator to open one iOS simulator.

969.296 -> I will build it right away without any code modification.

973.152 -> Oops, I didn't select the target device with the iOS simulator.

976.839 -> I'll try it after selecting it again.

980.38 -> It was built without any problems.

982.932 -> But there's a problem with one layout.

985.319 -> I think the top and bottom parts are being cut off.

988.56 -> This can be solved simply by using a widget called SafeArea.

992.907 -> Let's fix it right away.

995.081 -> Let's start with the client ID.

997.23 -> You can see that it works the same as the mac application.

1006.776 -> In Landscape mode, the horizontal length is longer, so you can see the menu move to the right.

1013.428 -> Lastly, I'll try to show it on Android.

1027.197 -> I'll start the Android emulator and build for it.

1046.997 -> It's very slow on Android emulator.

1050 -> It's not this slow if you put it on the actual device.

1056.671 -> This completes the mqtt client application that works on macOS, iOS, and Android.

1062.537 -> Personally, I think Flutter has potential power because it's an ever-evolving platform

1066.636 -> and it would be good to be interested

1068.317 -> if you are a frontend or mobile developer.

1071.33 -> That's all for today's video.

1073.19 -> Thanks for watching.

1074.47 -> See you on the next project.

Source: https://www.youtube.com/watch?v=aY7i0xnQW54