•6 months ago
Make sure you have the following installed on your machine:
Additionally, it would help to have a basic familiarity with building React and Node.js applications.
Installing Android Studio
Android Studio is the IDE for creating native Android apps; it includes the Android SDK, which is needed to build our Cordova app for the Android platform. Android Studio can also be used to create virtual devices, which is required if you want to use the Android emulator to test your app. Otherwise, you can deploy your app directly to a test device, as we will be doing in this tutorial.
Once you have Android Studio installed, launch it, and follow the setup instructions to install the Android SDK; make sure to also take note of the SDK location:
Once the SDK has been installed, set the
ANDROID_SDK_ROOT environmental variables to the location of your Android SDK (which we just grabbed) in your
.bash_profile file (or the relevant startup file for your preferred shell):
Finally, modify your
PATH variable so that it includes the various command-line tools bundled with the Android SDK:
The Cordova CLI runs on Node.js, so it can be installed using
$ yarn global add cordova
$ npm install -g cordova
Signing Up for Stream
Follow this link to create a new Stream account, or sign in to your existing Stream account. If you've just signed up, you can use the credentials from the app that's already created for you. If you've logged into an existing accaount, once you’re redirected to the dashboard, create a new app or click in an existing one and take note of the application access key and secret, which will be presented at the bottom of the page:
Creating a New Cordova Project
To begin creating your application, let's set up our Cordova project; instantiate a directory for your Cordova project and
cd into it:
$ mkdir cordova-project $ cd cordova-project
Next, create a new Cordova project with the command below. The first argument to the
create command is the directory where your project files will be placed, while the second represents your application package identifier, and the third is the "human-readable" name of your project:
$ cordova create stream-chat com.example.stream "Stream Chat"
Once the command finished running, you will have a new
stream-chat directory in your project root. This directory will contain a few directories that you should be aware of, even though we won’t be using most of them in this tutorial:
hooksdirectory is where you’ll place scripts to be executed at different stages in the application lifecycle, such as before or after building the app.
platformsdirectory will have, within it, a directory for each platform (Android, iOS, etc.) for which you decide to build your app.
pluginsdirectory is where the Cordova plugins are kept.
The workflow for creating our Android chat app with React will be exactly the same as building it for the browser. We’ll make use of Create React App to bootstrap our React app and develop it as if for the browser. After we test the app in the browser and confirm that it’s working as expected, we'll copy the application files over to the
www directory and build them for the Android platform, using the Cordova CLI.
Let's dive in!
Creating a New React Application
cordova-project directory root, run the command below to create a new React application:
$ npx create-react-app react-app
Once the command is done,
cd into the new
$ yarn add stream-chat stream-chat-react axios
yarn start to launch the application development server on
Setting Up an Authentication Server
Before we construct the application UI, let’s set up an authentication server so that users who attempt to connect to the room will be authenticated before entering.
react-app directory, run the following command to install all the dependencies we’ll be needing to build an Express server:
$ yarn add express dotenv cors body-parser
Next, create a new
.env file and add your Stream application key and secret, as shown below:
Following that, create a
server.js file in the root of your
react-app directory, and populate it with the following code:
That’s all the code we need to authenticate users when they attempt to connect to our chat app! You can start the server on port
5500 by running
node server.js in the terminal.
Exposing Your Server to the Web
It’s necessary to expose your local Express server to the web so that it will be possible for your Android app to access it. Once the Express API is available via the web, your Android app will access its endpoints for various actions such as user creation, auth, and more!
Assuming you have Ngrok installed, start an HTTP tunnel on port
5500 by running the following command in a new terminal session (tab/window):
$ ./ngrok http 5500
A successful connection will look something like this:
Building the Application Interface
We’ll be making use of Stream’s React components to set up our application UI; doing so helps us build out a feature-rich chat interface in a matter of minutes, not days. As a bonus, it’s fully mobile responsive, so it works well for our use case!
react-app directory, open up your
src/App.js file in your text editor, and replace its contents with the following code:
This is all the code we need to build out our application UI! Try it out in your browser; you should see an interface similar to that in the screenshot below:
Building Your React App for Production
Open up the
package.json file in your
react-app directory, and update the
build script as follows:
"build": "react-scripts build && rm -r ../stream-chat/www/* && cp -r ./build/* ../stream-chat/www/"
The above script builds your React app and copies the files to the
www directory within the
You'll also want to set a new
homepage property in the
package.json file; you can place it before the
dependencies property and set the value to "
The above definition preemptively fixes an issue where the Android app fails to load and, thus, displays a blank white screen.
package.json file has been updated and saved, run
yarn build to build your React app for production.
Building Your Cordova Application for Android
We'll start preparing to deploy our app to Android by setting up and building the Android environment in Cordova. To do this,
cd into your
stream-chat directory and running the commands below:
$ cordova platform add android $ cordova build android
This will create an
app-debug.apk file, which you can find in your
Deploying Your App to Android
This is where the magic happens! Connect your Android device to your computer, and make sure USB debugging is enabled in the Developer options. Next, run the command below to install the application on your device:
$ adb install platforms/android/app/build/outputs/apk/debug/app-debug.apk
Now that you've installed the application on your device, find it in your app drawer and launch it; you should see an interface that looks a lot like this:
In this tutorial, we walked through how to get a cross-platform chat application up and running with the help of Cordova, React and Stream. Although we deployed this app to an Android device, it’s also possible to deploy the same codebase to iOS or Electron with minimal effort!
Please refer to the Stream Chat documentation to discover the many additional features that are available on the Stream platform; you can utilize more features from these docs in order to convert this basic app to a production-ready one!
Additionally, if you became lost at any point, or just want to grab the full codebase to use as a starter for a new app, without having to follow along above, you can find the source code used for this tutorial in the GitHub repo.
Thanks for reading, and happy coding!