How to connect custom mobile app to esp32?

Question

I’d like to build a robot car based on esp32 board that would operate in two modes:

• basic remote control with buttons
• voice control

Ideally, I want to do that through a mobile application (mobile app framework, whether it’s via Bluetooth/WiFi don’t really matter). I’m still new to the topic and all I’ve found are projects connected via already existing solutions like Blynk, Thunkable. Can someone please suggest me the way how can I do that with a custom app? I’m familiar with .NET stack so I was thinking that maybe in Xamarin Forms there’s already existing library to connect to esp32? I’m open to any solution and any suggestion will be appreciated.

Many thanks in advance

Answer 1

You can do this with websockets over the esp wifi. Basically, you build an html page that connects to the esp with a websocket (via javascript), and the esp listens for commands and they can talk back and forth. There are a lot of tutorials out there that can explain better like these:

https://iotdesignpro.com/projects/websocket-server-with-esp32-and-arduino-ide

https://randomnerdtutorials.com/esp32-web-server-websocket-sliders/

You can host the html page either directly in the esp and go to the IP address in a web browser, or, create the html page in a Xamarin app like you said to build a mobile application. I wish I had some code examples to give you but the ways I have done this are in much larger projects and I am not able to write any simple, usable tests at the moment.

Answer 2

I had used kotlin to connect with wifi to an ESP32. The ESP32 is a web-server with a local IP, mobile app is connected to the same local network. So on the mobile app we create a json message to post it to the ESP32 IPS, something like this:

   ui.button.setOnClickListener {
        ui.visorTexto.setText("")
        //val url = "http://192.168.100.235"
        val url = ui.urlTexto.text.toString()
        val jsonBody = JSONObject()
        //val valorPin = ui.pinTexto.text.toString().toIntOrNull()
        //val valorEstado = ui.estadoTexto.text.toString().toIntOrNull()
        val valorPin = 1
        val valorEstado = 1000

        if (valorPin != null) {
            if(valorPin in 0..13){
                if (valorEstado != null) {
                    if(valorEstado >= 0 && valorEstado <= 2000){
                        jsonBody.put("opcion", valorPin.toString())
                        jsonBody.put("tiempo", valorEstado.toString())

                        val jsonObjectRequest = JsonObjectRequest(Request.Method.POST, url, jsonBody,
                            { response -> ui.visorTexto.setText(response.toString())}
                        ) { error -> ui.visorTexto.setText(error.printStackTrace().toString()) }


                        jsonObjectRequest.retryPolicy = DefaultRetryPolicy(
                            10000,
                            DefaultRetryPolicy.DEFAULT_MAX_RETRIES,
                            DefaultRetryPolicy.DEFAULT_BACKOFF_MULT
                        )


                        val cache = DiskBasedCache(cacheDir, 1024 * 1024) // 1MB cap
                        val network = BasicNetwork(HurlStack())
                        var requestQueue = RequestQueue(cache, network).apply {
                            start()

                        }
                        requestQueue.add(jsonObjectRequest)

                    } else{
                        ui.visorTexto.setText("Error el estado es incorrecto: ${valorEstado}")
                    }
                }
                else{
                    ui.visorTexto.setText("Error2")

                }
            } else{
                ui.visorTexto.setText("Error el rango de pin es incorrecto")

            }
        }
        else{
            ui.visorTexto.setText("Error1 ${valorPin}")
        }






    }

So every time I press the button, the listener will make a json message with the contents of two lineEdits, it will then packed the message and post it to a html conection to the esp32's IPs.