Skip to content

Week14

Interface and Application Programming

Group assignment:

  • Compare as many tool options as possible.
  • Document your work on the group work page and reflect on your individual page what you learned.

Individual assignment:

  • Write an application for the embedded board that you made. that interfaces a user with an input and/or output device(s)

What I made

When nRF51822 came to market, I played with it a lot. At that time, I wrote phone app with techBASIC. On the other hand, I start using Claude Code these days to port FabLab Nagoya web site from proprietary CMS to Docusaurus on GitHub Pages.

So I thought about to make a phone app with Flutter and Dart by using Claude Code. Actually it works great.

The phone app

Preparation

  1. Install XCode from Mac App Store.
  2. brew install cocoapods
  3. brew install --cask flutter
  4. flutter doctor to confirm toolchain works
  5. sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer by the flutter doctors suggestion
  6. sudo xcodebuild -runFirstLaunch by the flutter doctors suggestion
  7. flutter create ble_uart_app
  8. cd ble_uart_app
  9. flutter run

How to code (iOS App)

And then, I opened ble_uart_app directory with VSCode, and opened Claude Code on VSCode. My prompt was “Create an iPhone app that communicates via BLE UART and displays temperature and humidity.”.

So that Claude Code generate a code and built it. The code Claude Code geranerad is hosted on https://github.com/ytsuboi/BLE_UART_App.

Here are generated code and Claude Code record. It only took about 30 min from step. 7 to make it running. Additionally, most of the part it took was make it running on actual iPhone. I don’t need any debug things. I just needed a single prompt.

The original design file is: W14_BLE_UART_App-main.zip

The protocol

I use the protol Claude Code suggested. According to the output from Claude Code, this iOS app supports following formats.

  • T:25.5,H:60.2 or Temp:25.5,Hum:60.2
  • 25.5,60.2 (CSV: temperature,humidity)
  • TEMP=25.5 HUM=60.2

So, I decided to use T:25.5,H:60.2 as the protocol for this project.

How to code (XIAO firmware)

I have Seeed Studio XIAO ESP32-S3 and Grove - Temperature&Humidity Sensor (High-Accuracy&Mini) v1.0, so I built temp and hum sensor node with the board I made at week 8.

When I googled about BLE UART with XIAO ESP32S3, I found a page that a teached of a technical junior college wrote. It was written in Japanese. So I wrote a sketch by refering his example code and used his helper class.

BLE_UART_TH2.ino
// BLE UART sample program
// works with XIAO-ESP32S3 and Grove Temperature&Humidity Sensor
// Reference: https://coskxlabsite.stars.ne.jp/html/for_students/iot/XIAOESP32S3/ESP32S3BLEServer_iOS.html

#include <Handy_BLE_Uart.h>
#include <TH02_dev.h>
#include "THSensor_base.h"

#define DEVICENAME "UART-B0"
#define INTERVAL 1000 //milli sec

Handy_BLE_Uart bleuart;
TH02_dev TH02; // Grove Temp&Hum Sensor

void setup() {
  Serial.begin(115200);
  delay(300);

  TH02.begin();
  delay(100);

  bleuart.setCallbackFunc(StringReceptionReport); // registering callback
  bleuart.begin(DEVICENAME, true); //
  delay(1000);
}

void loop() {
  bleuart.RegularWorkInLoop();
  if (bleuart.isConnected()) {
    float tempreture = TH02.ReadTemperature();
    float humidity = TH02.ReadHumidity();
    char string0[256];
    sprintf(string0, "T:%.1f,H:%.1f", tempreture, humidity); // sending data as Claude code expected format
    bleuart.transferString(String(string0));
  }
  delay(1000);
}

// This callback will be called when receive something
void StringReceptionReport(String str) {
  // do nothing
}

The original design file is: W14_BLE_UART_TH2.zip

Checklist

  • Linked to the group assignment page.
  • Documented your process.
  • Explained the UI that you made and how you did it.
  • Explained how your application communicates with your embedded microcontroller board.
  • Explained any problems you encountered and how you fixed them.
  • Included original source code (or a screenshot of the app code if that’s not possible).
  • Included a ‘hero shot’ of your application running & communicating with your board.