ESP32/Capacitor BLE Tutorial

(I’ll do my best to keep updating this page for the most relevant and helpful instructions. If you have any problems/feedback, please leave them in the comments.)

---

Prerequisite: Instructions for installing all needed software:

• Install XCode for iOS: https://www.freecodecamp.org/news/how-to-download-and-install-xcode/
• Install Android Studio: https://developer.android.com/studio/install
• Install VSCode: https://code.visualstudio.com/docs/setup/setup-overview
• Install Node and NPM (this is important!): https://positiwise.com/blog/how-to-install-npm-and-node-js-on-mac-and-windows. For Mac Users, it might be easier to install using the Homebrew instructions. We will need Homebrew anyway to install Cocoa Pods.

Tutorial Walk-Through

---

Install Cocoa Pods (for Mac Only)

• Open a Terminal Window in macOS. You can find it under Applications>Utilities>Terminal. If you have Homebrew installed already, skip to next step. If not, then install it first by pasting this into Terminal and hitting enter:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

• Then:

brew install cocoapods

---

Create a Capacitor App and Install Android/iOS and BLE Support

• Open a Terminal in VSCode. Enter the following:

npm init @capacitor/app

• Follow the instructions to name your app, create a folder for it, and to give it an App Id. Then follow the instructions to cd to the folder you created it and then install dependencies.
• Add iOS and Android support with:

npm install @capacitor/android @capacitor/ios

npm run build

npx cap add android

npx cap add ios

npm install @capacitor-community/bluetooth-le

npx cap sync

• Add Permissions for iOS. Go to ios>App>App>info.plist and paste this in as shown in video:

	<key>NSBluetoothAlwaysUsageDescription</key>
	<string>Uses Bluetooth to connect and interact with peripheral BLE devices.</string>
	<key>UIBackgroundModes</key>
	<array>
		<string>bluetooth-central</string>
	</array>

And that’s it. Your Capacitor app is ready to go. You can run ‘npm run start’ to start the live server and see what your app looks like.