DEV Community: Jc Miñarro

Add Livestream Chat to your Android App

Jc Miñarro — Sun, 17 May 2020 21:10:48 +0000

Live streaming apps have become the most popular type of application in the App Stores. Big companies, like Google, Amazon, Facebook, and Twitter, have, at least, one app offering this kind of service. For example: YouTube, Twitch, Instagram, and Periscope. All of those have a common companion feature: Livestream Chat.

Livestream Chat is a crucial feature to improve the user's engagement on your app. It allows your users to interact with others in real-time. In this article, I am going to show you how easy it could be to have Livestream Chat in your app in less than 20 minutes.

The result will look similar to this:

Sample Overview

The sample project will consist of two screens. The first of them shows a list of items. Each one represents a video. When the user clicks on one of them, they will navigate to another screen where the video starts to play. Below the video, there is a chat where all messages are, and there is a textbox that allows you to write a new one and send it. The app can be opened in multiple devices at the same time, and messages are sent/received in real-time in all devices

Because this is a sample project, you will find some datastores on the Models file. There is a list of videos that simulates the result of an API call. To also simplify the sample, the user on the app is selected randomly. In a real app, there will be a login process, receiving a proper JWT token to use with the Stream Services.

To keep the sample as simple as possible, we have not added any extra layer to the project nor created any complex architecture. Still, you can (and should) use the architecture you are most familiar with.

You can find the complete code sample can in the following GitHub repository:
https://github.com/GetStream/livestream-chat-android-example

Initialize the Stream SDK

Stream provides three complementary SDKs that you can use on your app:

Stream Chat Client -> The low-level client used to communicate with Stream Services
Stream Chat Livedata & Offline -> A wrapper over the Stream Chat Client that provides you some features like Offline Support and subscribe to the events using Jetpack LiveData
Stream Chat UI Components -> A collection of UI Components ready to use Out of the box to build your chat feature.

In this example, we are going to use the low-level client.
The first step we need to take is to initialize the Chat SDK with the API Key. To do that, we will use the ChatClient.Builder class, and we are going to enable logs on it to be able to see what is happening during the debugging process.

Once we have started the ChatClient, we need to specify which user will use it. To set the current user, the ChatClient has a method setUser() that can we can configure with different attributes. It will need a User object that represents the user that will be chatting and store some information such as id, name, profile picture, and the token that identifies this user. If the JWT token used by our server has an expiration time, we can configure it with a function that will refresh the token every time it expires. The last attribute we will need to pass to this method is a callback that will be called when the process finishes with a success or failure message.

That's it! We have our chat client configured and ready to start using it.

Create a New Channel

Once we have the ChatClient initialized, we need to obtain the channel where messages are sent. Stream provides some pre-configured types of channels with custom rules and allows you to create your own types. The most common types needed are already configured, and you can check them here. In our example we are going to use the Channel Type "Livestream". To interact with a channel, we will need to create a ChannelController that will help us query the Stream Services.
To create the ChannelController we need to indicate the ChannelType and the id that will identify it.

Now that we have our ChannelController ready, we can use it to obtain the message history. To do it we use the method query() with a QueryChannelRequest. We can configure QueryChannelRequest to request different information to the Stream server. In the following example, we are giving a name to the channel and asking for the last 100 messages sent.

Subscribe to New Messages

We have the channel and the last 100 messages sent to it. Now we want to receive any new messages. To do that, we can subscribe to new events happening on the channel. The different types of events that can occur on a channel are detailed here, but we only need to get the ones that represent a new message. To do that, we need to add a filter to our subion. The following code shows you how to do it:

Now, every new message sent to the channel will be received on the lambda we pass to the subscribe() method, and we are ready to render the new message.
When the user goes out of the stream, we don’t want to receive messages anymore, so we will need to unsubscribe and stop watching the channel.

Send a New Message

For the last step, we are going to cover sending messages to the channel. To post a new one, we need to use the previous ChannelController we have created and call the method sendMessage() that receives the message as a parameter.

Final Thoughts

And that is all the logic you need to implement a Livestream chat. In the repository example, you can see how I designed the views for it, they are remarkably simple, and you can customize them to fit your app.

I hope you now understand how easy it is to integrate Stream in your app to build a simple live streaming chat. In the sample, we only cover basic integration. Still, Stream provides you a lot of features like: Roles, delete/update messages, reactions, push notifications, and all of them are available in multiple platforms: Android, iOS, React, and Flutter.
You can check the documentation and more tutorials on our blog.

Starting a Third-Party activity for result the clean way

Jc Miñarro — Sun, 17 May 2020 20:11:33 +0000

We all know that Android development has been very coupled to its framework. That is because we need the Context or the Activity to perform several actions. On the last years Android developers have tried to decouple from the framework when using Clean Architecture.

Whenever we use Clean Architecture, we try to wrap every dependency of our project. This way we can replace them easily if we don’t want to depend on them anymore.

For example, when using MVP in our app, we don’t want the navigation between view to be done in the View layer. The problem is navigation can’t be done by the Presenter layer because a presenter should be pure Java/Kotlin and navigation depends on the Android Framework.

On that case, the typical way to do it is creating a collaborator. This is the only component that knows about the Android Framework, and is able to navigate to a new view. By using such collaborator our presenter is decoupled from the Android Framework and no logic is added to our views.

The Android Framework has different ways to invoke actions and obtain a result. One of them is using an Intent to start a new activity by calling startActivityForResult(). With that, when an activity completes the action, it returns the information and the class that started the action can get it on the onActivityResult() method.

There is a problem here: the only classes that are able to get the result are Activity and Fragment and they should be the view in our Clean Architecture when we use MVP.

That is not a real problem to us because we have a lot of ways to avoid using startActivityForResult() and still get the result we wanted. We usually have all the information into our data layer, using a repository to push and pull it. We could start an action that stores some information into our repository and whenever another part of the app needs that information, it would ask the repository for it.

But in some cases, third-party libraries require us to call them through startActivityForResult(). That is a very common case when we use a third-party library for images or camera manipulation.

In this post, we are going to use Card.IO Paypal’s library as an example. This library can be used to scan and get information from a credit card using our device’s camera. The idea here is to have a collaborator into our presenter that gives us the information of a credit card. Our presenters should be pure Java/Kotlin and we want the presenter’s collaborators to look like pure Java/Kotlin too. We know that at runtime they are going to use whatever Android stuff they need, like opening a new screen that uses the camera SDK and scan the credit card, but this is only an implementation detail. Easy, right?

The first thing that we are going to do is to create an interface that defines a method to start the scan with a callback to receive the card information as a parameter.

It is going to be used by our presenter in the following way:

So far so good: we have an abstraction that is going to perform the action of getting the information of the card. Now we need to implement it using the Card.IO library. On the Card.IO documentation they show us how to use it, and it is simple: we have to start a new activity for result with an Intent in which we ask the information that we would like to receive.

Our implementation of CardScanner needs be able to start that activity and gets the result by itself. The only way to do it on Android is from an activity or fragment. We don’t want to have a new screen just to do that. We could do it with a worker fragment without it interacting with our view.

Our Android implementation is going to receive a FragmentManager as a constructor parameter. With it, we are able to create as many fragments as we want. As we need to start an activity belonging to the Card.IO library and receive the information of the card, we are going to create a fragment that does just that.

Cool. We have a fragment that is able to start an activity for result and gets the card information from the library. But how are we going to get that information into our Android implementation of the CardScanner?

The Android SDK has a class that is used to send information through Inter-Process Communication (IPC), called ResultReceiver.

But, on the last API update, they have limited its use, and some methods are now only allowed to be called from the framework. They have added a Lint Warning, and we don’t want to have @SuppressWarnings annotations into our code.

This is why I have created another class ResultReceiver that has the same implementation, allowing us to send information through IPC. It implements Parcelable, so we are able to pass it to our fragment through a bundle, and notify the result whenever we receive the card information.

We need to receive that in our AndroidCardScanner and send the result through the callback that we stored.

At the full implementation that you can check in the KleanActivityForResult Repository, the collaborator can be called multiple times. That is the reason why whenever scan() get called, a new identifier that associates the callback and the fragment is created. Then, when we receive the result, we free the instances.

Perhaps it is not useful on this example, because the user is not going to be able to open it several times. But we could use such approach with an Android service to perform a different action, and in that case, the user is able to call it several times.

And last but not less, this approach allows us to test our app using unit testing. Since we don’t have any Android dependency, we can use jUnit to write black-box tests to check our presentation logic.

First, we mocking our CardScanner collaborator to simulate that returns us the card information. After that, we verify the information is rendered properly into or view. The view is going to be an spy which allows us to know the interactions made by our presenter.

I have used Kluent library on the tests. It is a “Fluent Assertions” library written specifically for Kotlin. On the next post I will show you its syntactic sugar to write tests and where is the magic.

Don’t forget to check out the sample project

Feel free to add me on Twitter @el_joker333 to discuss anything related (or not even related!) to this post.

Montar Servidor Parse en tu propio Servidor alojado en Digital Ocean

Jc Miñarro — Sun, 17 May 2020 09:29:50 +0000

Hace apenas unos días Parse anunciaba que iban a cerrar su plataforma que permitía a los desarrolladores crear servidores sin necesidad de tener un servidor propio. Ésto es una mala noticia para todos los que tenemos alguna aplicación alojada en sus servidores. La buena noticia es que han dado un periodo de 12 meses para que que podamos encontrar una nueva solución y están liberando el liberando el código fuente de sus servidor para que podamos montar nuestro propio servidor compatible con los servicios que nos ofrecía Parse. Han escrito una guía de migración en la que indican cómo exportar los datos de Parse a MongoDB, y ejecutar Parse Server sobre Node.js y Express.

En esta guía vamos a ver cómo instalar todas las dependencias necesarias para montar ParseServer en nuestro propio servidor. Vamos a usar DigitalOcean para alojar nuestro servidor, si no tienes cuenta puedes crearte una aquí y obtendrás 10\$ gratis ;)

Configurar nuestro servidor

Una vez que tenemos nuestra cuenta de DigitalOcean necesitamos crear un Droplet. Droplet es el nombre usado por DigitalOcean para referirse a un Servidor Virtual Privado (VPS). Ésto es muy simple de realizar, pero aquí te dejo una guía por si tienes cualquier problema. Nosotros vamos a utilizar Ubuntu 14.04 cómo Sistema Operativo de nuestro servidor.

Configurar MongoDB

ParseServer usa MongoDB cómo Base de Datos, y es compatible con las versiones 2.6 y 3.0.x. MongoDB está actualmente incluido en el repositorio de paquetes de Ubuntu, pero no está la versión que necesitamos, por lo que vamos a añadir el repositorio oficial de MongoDB para instalar la versión correcta.

$ echo "deb http://repo.mongodb.org/apt/ubuntu trusty/mongodb-org/3.0 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-3.0.list
$ sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv 9ECBEC467F0CEB10
$ sudo aptitude update
$ sudo aptitude install mongodb-org -y

Ok, pues ya tenemos MongoDB instalado en nuestro servidor, pero todavía nos falta configurarlo con algunos parametros y un usuario para poder acceder a MongoDB remotamente.

La primera cosa que vamos a hacer es permitir conexiones remotas a nuestra base de Datos MongoDB. Ésto es porque necesitamos imprtar los datos que ya tenemos guardados en Parse desde sus servidores y, además, Parse usará esta base de datos cada vez que un usuario con la versión antigua de nuestra aplicación mande datos a sus servidores.

$ vi /etc/mongod.conf

Y comentar la siguiente línea, para comentar una línea tienes que poner # al principio de línea.

# bindIp: 127.0.0.1

Ahora sólo nos falta reiniciar el demonio de MongoDB y éste permitirá conexiones remotas.

$ sudo service mongod restart

Ahora vamos a crear una base de datos, un nuevo usuario y a deshabilitar una opción necesaria por Parse. El usuario que vamos a utilizar será parseuser y la contraseña password. Pero tú debes cambiarlas.

$ mongo
> use parse
> db.createUser({ user: "parseuser", pwd: "password", roles: [ { role: "userAdmin", db: "parse" } ] })
>  db.getSiblingDB('admin').runCommand( { setParameter: 1, failIndexKeyTooLong: false } )

Para salir de la mongo shell tenemos que pulsar ctrl+d.
Con ésto ya tendremos nuestra base de datos MongoDB configurada y podremos comenzar con la importación de los datos desde Parse. La url que tendremos que indicar a Parse para comenzar la migración sería la siguiente:

mongodb://parseuser:password@IP_SERVER:27017/parse

Configurar NodeJS

ParseServer funciona sobre NodeJS 4.1, y, cómo nos sucedía con MongoDB, NodeJS está incluido en los repositorios de paquetes de Ubuntu pero no la versión que nosotros necesitamos. Así que vamos a descargar e instalar la versión que necesita ParseServer.

$ curl -sL [https://deb.nodesource.com/setup_4.x](https://deb.nodesource.com/setup_4.x) | sudo -E bash -
$ sudo aptitude install nodejs -y
$ sudo aptitude install build-essential -y

Configurar ParseServer

Parse ha liberado el código fuente del servidor, pero nosotros tendremos que crear un proyecto que instancie este servidor. Yo he creado un proyecto para ayudarte a montar éste servidor. Este proyecto está alojado en Github, así que necesitas tener instalado gity descargar el proyecto. Si ya tienes instalado git en tu servidor no es necesario que hagas el siguiente paso.

$ sudo aptitude install git -y

Ahora vamos a descargar el proyecto y configurarlo.

$ git clone [https://github.com/JcMinarro/ParseServer.git](https://github.com/JcMinarro/ParseServer.git)
$ cd ParseServer
$ npm install

Después de ésto tendremos que configurar unas variables de entorno. Para ésto abrimos el fichero config/default.json y modificamos las variables de entorno que necesitamos para ejecutar nuestra aplicación. Puedes leer más acerca de la configuración de Parse en la guía de migración.

{
 “databaseURI”: “mongodb://parseuser:[password@I](mailto:12345@ds033113.mongolab.com)P_SERVER:27017/parse”,
 “cloud”: “./cloud/main.js”,
 “port”: 8080,
 “appId”: “YOUR_APP_ID”,
 “masterKey”:”YOUR_MASTER_KEY”,
 “fileKey”: “”
}

Y con todo ésto ya podremos ejecutar nuestro ParseServer

$ npm start

Cuándo la migración de los datos se haya completado tendremos que actualizar la URL a la que apunta el SDK de nuestras aplicaciones indicándole la URL de nuestro servidor y ya tendremos nuestro propio servidor de Parse funcionando.

Run Parse Server on your own server using DigitalOcean

Jc Miñarro — Sun, 17 May 2020 09:27:30 +0000

Recently Parse announced they’re shutting down their mobile backend as a service. If you’ve built an app on top of Parse, this is probably bad news. The good news is that they’re giving developers 12 months to find a new solution, and they’re providing a path to running your own Parse-compatible service. There’s a great migration guide that covers exporting Parse data to MongoDB, and running a Parse server built on Node.js and express.

This guide is going to cover how to install all dependencies that we need to run Parse Server on own server. We are going to use DigitalOcean to host our server, if you don’t have an account you can get one here and obtain \$10 for free ;)

Setting Up the server

Once that we have our DigitalOcean account we need to create a new Droplet. Droplet is the name used to refer to virtual private servers (VPS) on DigitalOcean. It is very easy to create a new one, but if you have some problem you can follow this guide to create one. We are going to use Ubuntu 14.04 as our Operating System.

Setting Up MongoDB

Parse Server use MongoDB as a DataBase. They are using MongoDB version 2.6 or 3.0.x. MongoDB is already included in Ubuntu package repositories but it is not the version that we need, then we are going to add the official MongoDB repository to install the correct version.

$ echo "deb http://repo.mongodb.org/apt/ubuntu trusty/mongodb-org/3.0 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-3.0.list
$ sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv 9ECBEC467F0CEB10
$ sudo aptitude update
$ sudo aptitude install mongodb-org -y

Ok, now we have MongoDB installed on our server, but we have to config it with a couple of parameters and need a user to access to MongoDB remotely.

The first thing that we are going to do is allow remotely connections to MongoDB. It is because we need to import Parse Data from theirs servers and Parse will be using this DB every time that an old user send information to their servers.

$ vi /etc/mongod.conf

And comment next line, To comment a line you have to put # at the begin of the line.

# bindIp: 127.0.0.1

Then we only have to restart mongo daemon and it will allow remote connections.

$ sudo service mongod restart

Now we are going to create a new database, new user and disable an option that Parse need. The user is going to be parseuser and password password. You must change it.

$ mongo
> use parse
> db.createUser({ user: "parseuser", pwd: "password", roles: [ { role: "userAdmin", db: "parse" } ] })
>  db.getSiblingDB('admin').runCommand( { setParameter: 1, failIndexKeyTooLong: false } )

To go out from mongo shell we have to press ctrl+d.
We have our MongoDB configured and we can start to import data from Parse. The Uri that Parse ask us is:

mongodb://parseuser:password@IP_SERVER:27017/parse

Setting Up NodeJS

Parse Server works over NodeJS 4.1 and, like MongoDB, NodeJS is already included in Ubuntu package repositories but it is not the version that we need. We are going to download and install the version that we need.

$ curl -sL [https://deb.nodesource.com/setup_4.x](https://deb.nodesource.com/setup_4.x) | sudo -E bash -
$ sudo aptitude install nodejs -y
$ sudo aptitude install build-essential -y

Setting Up ParseServer

Parse has released their server source code, but we have to instanciate it. I have create a project that help you to run the server. It is on Github, then you need to have git installed to download the project. If you have installed git on your server you don’t need to do next step.

$ sudo aptitude install git -y

Now we are going to download the project and configure it

$ git clone [https://github.com/JcMinarro/ParseServer.git](https://github.com/JcMinarro/ParseServer.git)
$ cd ParseServer
$ npm install

After that you need to setup a few environment variables. Open up config/default.json and set up the environment variables you need to run the app. You can learn more about the Parse config in the migration guide:

{
 “databaseURI”: “mongodb://parseuser:[password@I](mailto:12345@ds033113.mongolab.com)P_SERVER:27017/parse”,
 “cloud”: “./cloud/main.js”,
 “port”: 8080,
 “appId”: “YOUR_APP_ID”,
 “masterKey”:”YOUR_MASTER_KEY”,
 “fileKey”: “”
}

And then you can run it:

$ npm start

When data migration is complete you have to upload the SDK EndPoint and with your server url and will have your own Parse Server working.

P.S. Thanks for reading this far! If you found value in this, I’d really appreciate it if you recommend this post (by clicking the ❤ button) so other people can see it!.