How does the Block code tie to the code created in Arduino

MIT App Inventor Help
#1

Having some problems learning how this software works.
Do I create the sketch in Arduino and then create the MIT App?
How do the two marry?
How does the MAI see the code on my computer and combine it to form a connection between buttons and my code?
From what I am seeing MAI does not create code on the Arduino IDE side?
There are not enough instructions for how all this works or how to carry out the steps.
Sure I found how to drag a button over change the look and feel of the button.
Just figured out how to hit the build function but not sure how it sees the code created in Arduino.

I followed the example at this link but even this example had many steps missing. Maybe someone could walk through the steps using this example and possibly explain why it fails.

https://iotdesignpro.com/projects/esp8266-iot-home-automation-using-mit-app-inventor

It was the only existing example I could find and all I did was change the code to control the onboard LED for the ESP8266 Dev Board instead of a relay.
Anyone care to walk through this example and explain where I went wrong?
Or point me to other examples detailing the use of MIT App Inventor and the code created in Arduino IDE.

#2

Did you see the comments in your article pointing out how lines were missing from the bottom of the sketch?

Here is another more complete ESP example ...

Correct.
It is entirely up to you to make sure that the two sides of the http conversation agree on message formats and meanings, but otherwise you are using web traffic to connect tools on different platforms that know nothing about each other.

Some AI2 tutorials might help you ...

#3

First off thank you for your response. I corrected the missing code when I downloaded it after I did check using the verify button in Arduino IDE.
I have purchased books from him and contacted the creator of that site Random Nerd Tutorials concerning this exact topic. He was unable to help.
I just learned by trial and error how to upload someone else's code loading a .aia file. But it leaves one wondering do I need the code on my desktop and opened it in Arduino IDE before I open MAI and attempt to build using the QR code? This not clear. My first attempt at getting this right was an accident.
I will review the link you posted but I am afraid I have already seen that example because I did an extensive search on every website I visit and that is one of them. I follow him and his updated book releases.
BTW I can program the code used to turn the onboard LEDs to turn on and off using just code but having a tough time figuring out how to marry the code to GUI created in MAI.
Again thank you for your time and help.

EDIT: I staying away from the example on Random Nerd Tutorials only because they use a different IDE that I did not understand and used different board I use the ESP8266 Dev Board and I don't know what would be different in the code as it relates the the differing versions hardware.

#4

It might help you in your search for App Inventor II (AI2) samples if you were to use the search term AI2. No one else calls it MAI.

Here is a list of ways AI2 can use the web component to talk to a variety of web services, none of which know anything about AI2 ...

#5

Thank you I bookmark any suggestions under MAI and only use that label for my own sanity. You have thankfully added more reading and I invite it. Would really like to be able to use this software the way I use sketches on my ESP series hardware but I can see it is going to take some time. SO much for finding something to fill the needs of my hobby. This part of the project first create the sketch, create the app for a cell phone then create the 3D printed container. This step has thrown a wrench in the project as I am having difficulty learning how to use it. But that life. Thank you.