This demo application will recieve incoming SMS messages, translate them into a language of your choice, and display them on the screen in real time.
The project uses Node, React, Google Translate and Nexmo to create a real-time SMS translation demo application. Using a websocket, incoming text messages are sent to Google Translate API and then forwarded to the front-end application for display.
If you're new to Nexmo, you can sign up for a Nexmo account and get some free credit to get you started.
Enable the Google Cloud Translation API and create a service user with the
Project > Owner role. Download the
google_creds.json file for the service user. More information can be found here -> https://cloud.google.com/translate/docs/quickstart-client-libraries
For this demo app, a Nexmo number and SMS webhook are required. This can be setup with the Nexmo CLI. Install the CLI by following these instructions. Once installed, you can purchase a new virtual number from the terminal.
nexmo number:buy --country_code US
Copy the phone number down for the next step.
You can install the demo application on Heroku using this Heroku Button, your Nexmo number, and
You will need a small
.env file to handle a couple configuration items.
Copy and paste the following:
GOOGLE_APPLICATION_CREDENTIALS=./google_creds.json REACT_APP_PHONE_NUMBER=12018974206 REACT_APP_COUNTRY_CODE=US
Add your Nexmo number
Run the following command in a terminal to start your application:
npm install && npm run prod
This will build the React application and start the Express server on port 8000.
If using Docker is preferred, you can start the application buy building the image and then starting a container:
docker build -t nexmo-demo-app ./ docker run -p 8000:8000 nexmo-demo-app
ngrok http 8000
Using the Nexmo CLI, link the previously created phone number with the ngrok forwarding address or the Heroku application URL:
nexmo link:sms phone_number https://********.ngrok.io/inboundSMS // or // nexmo link:sms phone_number https://********.herokuapp.com/inboundSMS
With the application running, enter
http://localhost:8000 in your browser. Select a language in the upper right drop down menu, and send an SMS message to the phone number you purchased. The screen will respond with a translation of your text message in real-time.
We love to hear from you so if you have questions, comments or find a bug in the project, let us know! You can either: