Pusher

Build a cryptocurrency alert app using Kotlin and Go: Part 1 - The frontend

Introduction

Cryptocurrency is one of the hot topics today and as a result of this, many people have purchased many cryptocurrencies. However, the market is unpredictable and changes very often, so people tend to keep an eye on the changes in price of their asset.

In this post, we will create an app that watches for changes in the value of cryptocurrencies in realtime and notifies the user when the changes occur. We will focus on two very popular cryptocurrencies - Bitcoin and Ethereum. When we are done, your phone will receive a push notification when the value of Bitcoin and Ethereum either exceeds or goes below a value you specify in the settings of the app.

Here is a screen recording of what we will build:

kotlin-crypto-demo

Prerequisites

To follow along, you need the following installed:

Building our Android app

Creating our Android application

First, launch Android Studio and create a new application. Enter the name of your application, for example, CryptoAlert and then enter the package name. Make sure the Enable Kotlin Support checkbox is selected. Choose the minimum SDK, click Next, choose an Empty Activity template, stick with the MainActivity naming scheme and then click Finish.

kotlin-crypto-create-android

Creating Pusher Beams application

Getting your FCM key and Google services file

Since Pusher Beams relies on Firebase, we need an FCM key and a google-services.json file. Go to your Firebase console and click the Add project card to initialize the app creation wizard.

Add the name of the project, for example, crypto-``alert, read and accept the terms of conditions. After this, you will be directed to the project overview screen. Choose the Add Firebase to your Android app option.

The next screen will require the package name of your app. You can find your app’s package name in your app-module build.gradle file. Look out for the applicationId value. Enter the package name and click Next. You will be prompted to download a google-services.json file. Download the file and skip the rest of the process. Add the downloaded file to the app folder of your project - name-of-project/app.

To get the FCM key, go to your project settings on Firebase, under the Cloud messaging tab you should see the server key.

kotlin-crypto-fcm-key

Next, login to the new Pusher dashboard. You should sign up if you don’t have an account yet.

Create a new Pusher Beams instance

Open your Pusher Beams dashboard and create a new Pusher Beams application.

kotlin-crypto-new-beams

After creating your instance, you will be presented with a quick-start guide. Select the Android quick-start. After you add the FCM key, you can exit the quick-start guide.

Adding functionalities to our app

For our app to work, we need to pull in a couple of dependencies. To do this, add the following to the project build-gradle file:

1// File: ./build.gradle
2    buildscript {
3        // [...]
4    
5        dependencies {
6            // [...]
7            
8            classpath 'com.google.gms:google-services:4.0.0'
9        }
10    }
11    
12    // [...]

Next, add the following to the app module build.gradle file:

1// File: ./app/build.gradle
2    dependencies {
3        implementation 'com.squareup.retrofit2:retrofit:2.4.0'
4        implementation 'com.squareup.retrofit2:converter-scalars:2.4.0'
5        implementation 'com.google.firebase:firebase-messaging:17.1.0'
6        implementation 'com.pusher:push-notifications-android:0.10.0'
7        [...]
8    }
9    
10    // Add this line to the end of the file
11    apply plugin: 'com.google.gms.google-services'

Above we included Retrofit - a package for making network calls, and then the Pusher Beams package for sending push notifications. The additional Google services are dependencies for the Pusher Beams package. Sync your gradle files to make the libraries available for use.

Next, create a new interface named ApiService and paste the code below:

1// File: ./app/src/main/java/{package-name}/ApiService.kt
2    
3    import okhttp3.RequestBody
4    import retrofit2.Call
5    import retrofit2.http.Body
6    import retrofit2.http.GET
7    import retrofit2.http.POST
8    
9    interface ApiService {
10    
11      @POST("/btc-pref")
12      fun saveBTCLimit(@Body body: RequestBody): Call<String>
13    
14      @POST("/eth-pref")
15      fun saveETHLimit(@Body body: RequestBody): Call<String>
16    
17      @GET("/fetch-values")
18      fun getValues():Call<String>
19    
20    }

This file is used to by Retrofit to know the endpoints to be accessed. The first endpoint /btc-pref is used to set the Bitcoin limits. The next endpoint /eth-pref is used to save the Ethereum limits. The last endpoint /fetch-values is used to get the current values of the cryptocurrencies.

To make use of network services in your application, add the internet permission in your AndroidManifest.xml file like so:

1<manifest xmlns:android="http://schemas.android.com/apk/res/android"
2      package="com.example.cryptoalat">
3    
4      <uses-permission android:name="android.permission.INTERNET"/>
5      [...]
6    
7    </manifest>

Next, we will manage notifications in our app. Create a new service named NotificationsMessagingService and paste this:

1// File: ./app/src/main/java/{package-name}/NotificationsMessagingService.kt
2    import android.app.NotificationChannel
3    import android.app.NotificationManager
4    import android.app.PendingIntent
5    import android.content.Intent
6    import android.os.Build
7    import android.support.v4.app.NotificationCompat
8    import android.support.v4.app.NotificationManagerCompat
9    import com.google.firebase.messaging.RemoteMessage
10    import com.pusher.pushnotifications.fcm.MessagingService
11    
12    class NotificationsMessagingService : MessagingService() {
13    
14        override fun onMessageReceived(remoteMessage: RemoteMessage) {
15            val notificationId = 10
16            val channelId  = "crypto_channel"
17            lateinit var channel: NotificationChannel
18            val intent = Intent(this, MainActivity::class.java)
19            intent.flags = Intent.FLAG_ACTIVITY_NEW_TASK or Intent.FLAG_ACTIVITY_CLEAR_TASK
20            val pendingIntent = PendingIntent.getActivity(this, 0, intent, 0)
21    
22            val mBuilder = NotificationCompat.Builder(this, channelId)
23                    .setSmallIcon(R.mipmap.ic_launcher)
24                    .setContentTitle(remoteMessage.notification!!.title!!)
25                    .setContentText(remoteMessage.notification!!.body!!)
26                    .setContentIntent(pendingIntent)
27                    .setPriority(NotificationCompat.PRIORITY_DEFAULT)
28                    .setAutoCancel(true)
29    
30            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
31                val notificationManager = applicationContext.getSystemService(NotificationManager::class.java)
32                val name = getString(R.string.channel_name)
33                val description = getString(R.string.channel_description)
34                val importance = NotificationManager.IMPORTANCE_DEFAULT
35                channel = NotificationChannel("crypto_channel", name, importance)
36                channel.description = description
37                notificationManager!!.createNotificationChannel(channel)
38                notificationManager.notify(notificationId, mBuilder.build())
39            } else {
40                val notificationManager =  NotificationManagerCompat.from(this)
41                notificationManager.notify(notificationId, mBuilder.build())
42            }
43        }
44    }

Because there are major changes to push notifications in Android O, we checked for the Android version before handling the notification. If we are using Android O or newer, we have to create a notification channel that will be used to categorize the type of notification we are sending. This is particularly useful for apps that send different types of notifications.

We also made use of some files stored in the strings.xml file to describe the notifications channel description and channel name. Add these to the strings.xml file:

1<!-- File: /app/src/main/res/values/strings.xml -->
2    <string name="channel_name">Crypto</string>
3    <string name="channel_description">To receive updates about changes in cryptocurrency value</string>

Register the service in the AndroidManifest.xml file:

1<application
2      >
3      [...]
4      <service android:name=".NotificationsMessagingService">
5          <intent-filter android:priority="1">
6              <action android:name="com.google.firebase.MESSAGING_EVENT" />
7          </intent-filter>
8      </service>
9    </application>

Now, let’s prepare our layouts. First, we will design the activity’s layout. When creating your app, the activity_main.xml file should already be present in the layout folder. Open it and replace with this:

1<!-- File: ./app/src/main/res/layout/activity_main.xml -->
2    <?xml version="1.0" encoding="utf-8"?>
3    <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
4      xmlns:app="http://schemas.android.com/apk/res-auto"
5      xmlns:tools="http://schemas.android.com/tools"
6      android:layout_width="match_parent"
7      android:layout_height="match_parent"
8      tools:context=".MainActivity">
9    
10      <TextView
11        android:id="@+id/bitcoinValue"
12        android:padding="20dp"
13        android:layout_width="match_parent"
14        android:layout_height="wrap_content"
15        android:layout_marginStart="8dp"
16        android:layout_marginTop="8dp"
17        android:text="1 BTC"
18        android:textSize="16sp"
19        app:layout_constraintStart_toStartOf="parent"
20        app:layout_constraintTop_toTopOf="parent" />
21    
22      <TextView
23        android:id="@+id/etherumValue"
24        android:padding="20dp"
25        android:layout_width="match_parent"
26        android:layout_height="wrap_content"
27        android:layout_marginTop="16dp"
28        android:layout_marginStart="8dp"
29        android:text="1 ETH"
30        android:textSize="16sp"
31        app:layout_constraintStart_toStartOf="parent"
32        app:layout_constraintTop_toBottomOf="@+id/bitcoinValue"/>
33    
34    </android.support.constraint.ConstraintLayout>

The layout contains two TextViews to show prices for Bitcoin and Ethereum. We also made these TextViews clickable so we can set limits to get notifications when the limits are surpassed.

Next, we will design the layout of our alert dialog. Create a new layout file named alert_layout and paste this:

1<!-- File: ./app/src/main/res/layout/alert_layout.xml -->
2    <?xml version="1.0" encoding="utf-8"?>
3    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
4      android:orientation="vertical" android:layout_width="match_parent"
5      android:padding="20dp"
6      android:layout_height="match_parent">
7    
8      <EditText
9        android:id="@+id/minimumValue"
10        android:background="@drawable/text_background"
11        android:hint="Minimum value"
12        android:paddingStart="10dp"
13        android:paddingEnd="10dp"
14        android:inputType="number"
15        android:layout_width="match_parent"
16        android:layout_height="60dp" />
17    
18      <EditText
19        android:layout_marginTop="10dp"
20        android:background="@drawable/text_background"
21        android:hint="Maximum value"
22        android:inputType="number"
23        android:id="@+id/maximumValue"
24        android:layout_width="match_parent"
25        android:paddingStart="10dp"
26        android:paddingEnd="10dp"
27        android:layout_height="60dp" />
28    
29      <Button
30        android:id="@+id/save"
31        android:layout_marginTop="10dp"
32        android:layout_gravity="center"
33        android:text="SAVE"
34        android:layout_width="wrap_content"
35        android:layout_height="wrap_content" />
36    
37    
38    </LinearLayout>

This will be the layout showed by the dialog. It contains two text fields and a save button and we used a custom designed background for the TextViews. Create a new drawable file named text_background and paste this:

1<!-- File: /app/src/main/res/drawable/text_background.xml -->
2    <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
3      <solid android:color="@android:color/white" />
4      <stroke android:width="1dip" android:color="@android:color/darker_gray"/>
5    </shape>

We will move to the MainActivity to finish up our app’s functionalities. Open your MainActivity and replace the contents with the following:

1// File: ./app/src/main/java/{package-name}/MainActivity.Kt
2    import android.os.Bundle
3    import okhttp3.MediaType
4    import okhttp3.RequestBody
5    import org.json.JSONObject
6    import retrofit2.Call
7    import retrofit2.Callback
8    import retrofit2.Response
9    import android.support.v7.app.AlertDialog
10    import android.support.v7.app.AppCompatActivity
11    import android.util.Log
12    import android.view.LayoutInflater
13    import android.widget.Button
14    import android.widget.EditText
15    import com.pusher.pushnotifications.PushNotifications
16    import kotlinx.android.synthetic.main.activity_main.*
17    import okhttp3.OkHttpClient
18    import retrofit2.Retrofit
19    import retrofit2.converter.scalars.ScalarsConverterFactory
20    
21    class MainActivity : AppCompatActivity() {
22    
23        private var prefs: Prefs? = null
24    
25        private val retrofit: ApiService by lazy {
26            val httpClient = OkHttpClient.Builder()
27            val builder = Retrofit.Builder()
28                    .baseUrl("http://10.0.2.2:9000/")
29                    .addConverterFactory(ScalarsConverterFactory.create())
30    
31            val retrofit = builder
32                    .client(httpClient.build())
33                    .build()
34            retrofit.create(ApiService::class.java)
35        }
36    
37        override fun onCreate(savedInstanceState: Bundle?) {
38            super.onCreate(savedInstanceState)
39            setContentView(R.layout.activity_main)
40            fetchCurrentPrice()
41            setupPushNotifications()
42            setupClickListeners()
43        }
44    }

The URL used above, http://10.0.2.2:9000/, is the URL the Android emulator recognizes as localhost.

Above, we created a retrofit object to be used for network calls. After setting up the retrofit object, we add the layout in the onCreate method and call three other functions:

  • fetchCurrentPrice - This function will get the current price of Bitcoin and Ethereum from our server. Create a new function within the class and set it up like so:
1// File: /app/src/main/java/{package-name}/MainActivity.kt
2    private fun fetchCurrentPrice() {
3        retrofit.getValues().enqueue(object: Callback<String> {
4            override fun onResponse(call: Call<String>?, response: Response<String>?) {
5                val jsonObject = JSONObject(response!!.body())
6                bitcoinValue.text = "1 BTC = $"+ jsonObject.getJSONObject("BTC").getString("USD")
7                etherumValue.text = "1 ETH = $"+ jsonObject.getJSONObject("ETH").getString("USD")
8            }
9    
10            override fun onFailure(call: Call<String>?, t: Throwable?) {
11                Log.e("MainActivity",t!!.localizedMessage)
12            }
13        })
14    }

Above, a network call is made to get the current Bitcoin and Ethereum prices in USD. When the response is received, we parse the JSON data and display it on the screen by setting the texts of the text views in the layout.

  • setupPushNotifications - This function is where we start listening to the interest of our choice to receive notifications. The interest name is in this format {device_uuid}_{currency}_changed. ****We register two interests, one for each currency. Open the MainActivity class and add the following method:
1// File: /app/src/main/java/{package-name}/MainActivity.Kt
2    private fun setupPushNotifications() {
3        PushNotifications.start(applicationContext, "PUSHER_BEAMS_INSTANCE_ID")
4        val fmt = "%s_%s_changed"
5        PushNotifications.subscribe(java.lang.String.format(fmt, deviceUuid(), "BTC"))
6        PushNotifications.subscribe(java.lang.String.format(fmt, deviceUuid(), "ETH"))
7    }

Replace PUSHER_BEAMS_INSTANCE_ID with the instance ID found on your Pusher Beams dashboard.

  • setupClickListeners - In this function, we will set up click listeners to the text views in our layout. In the same MainActivity class, add the following method:
1// File: /app/src/main/java/{package-name}/MainActivity.Kt
2    private fun setupClickListeners() {
3        bitcoinValue.setOnClickListener {
4            createDialog("BTC")
5        }
6        
7        etherumValue.setOnClickListener {
8            createDialog("ETH")
9        }
10    }

When any of the text views is clicked, we call the createDialog method which then opens up a layout for the user to input the limit.

In the MainActivity class, add the method createDialog and as seen below:

1// File: /app/src/main/java/{package-name}/MainActivity.Kt
2    private fun createDialog(source:String){
3      val builder: AlertDialog.Builder = AlertDialog.Builder(this)
4      val view = LayoutInflater.from(this).inflate(R.layout.alert_layout,null)
5      
6      builder.setTitle("Set limits")
7          .setMessage("")
8          .setView(view)
9    
10      val dialog = builder.create()
11      val minEditText: EditText = view.findViewById(R.id.minimumValue)
12      val maxEditText: EditText = view.findViewById(R.id.maximumValue)
13    
14      view.findViewById<Button>(R.id.save).setOnClickListener {
15        if (source == "BTC"){
16          saveBTCPref(minEditText.text.toString(), maxEditText.text.toString())
17        } else {
18          saveETHPref(minEditText.text.toString(), maxEditText.text.toString())
19        }
20        dialog.dismiss()
21      }
22      dialog.show()
23    }

This dialog gets the minimum and maximum values and sends it to the backend server. This is done so that when the cryptocurrency’s price changes, we’ll get a push notification if it is within the limits set.

In the function above, we called two new methods. Add the two methods in the MainActivity class as seen below:

1// File: /app/src/main/java/{package-name}/MainActivity.Kt
2    private fun saveBTCPref(min:String, max:String){
3        val jsonObject = JSONObject()
4        jsonObject.put("minBTC", min)
5        jsonObject.put("maxBTC", max)
6        jsonObject.put("uuid", deviceUuid())
7    
8        val body = RequestBody.create(
9                MediaType.parse("application/json"),
10                jsonObject.toString()
11        )
12    
13        retrofit.saveBTCLimit(body).enqueue(object: Callback<String> {
14            override fun onResponse(call: Call<String>?, response: Response<String>?) {}
15            override fun onFailure(call: Call<String>?, t: Throwable?) {}
16        })
17    }
18    
19    private fun saveETHPref(min:String, max:String){
20        val jsonObject = JSONObject()
21        jsonObject.put("minETH",min)
22        jsonObject.put("maxETH",max)
23        jsonObject.put("uuid", deviceUuid())
24    
25        val body = RequestBody.create(
26                MediaType.parse("application/json"),
27                jsonObject.toString()
28        )
29    
30        retrofit.saveETHLimit(body).enqueue(object: Callback<String> {
31            override fun onResponse(call: Call<String>?, response: Response<String>?) {}
32            override fun onFailure(call: Call<String>?, t: Throwable?) {}
33        })
34    }

In the saveBTCPref and saveETHPref we attempt to send the limits set by the user to the API so it can be saved for that user.

While sending, we also send the uuid which is the devices’ unique identifier. Let’s create the deviceUuid() method that will generate and save this UUID per device. In the MainActivity class, add the following code:

1// File: /app/src/main/java/{package-name}/MainActivity.Kt
2    private fun deviceUuid() : String {
3        prefs = Prefs(this)
4        var uuid: String = prefs!!.deviceUuid
5    
6        if (uuid == "") {
7            uuid = java.util.UUID.randomUUID().toString().replace("-", "_")
8            prefs!!.deviceUuid = uuid
9        }
10    
11        return uuid
12    }

Now in this function, we reference a Prefs class. Create a new Prefs class and paste the following code into it:

1// File: /app/src/main/java/{package-name}/Prefs.Kt
2    import android.content.Context
3    import android.content.SharedPreferences
4    
5    class Prefs (context: Context) {
6        val PREFS_FILENAME = "com.example.coinalert.prefs"
7        val DEVICE_UUID = "device_uuid"
8        val prefs: SharedPreferences = context.getSharedPreferences(PREFS_FILENAME, 0);
9    
10        var deviceUuid: String
11            get() = prefs.getString(DEVICE_UUID, "")
12            set(value) = prefs.edit().putString(DEVICE_UUID, value).apply()
13    
14    }

That’s all for the application. At this point, the application should build successfully, but, not function as intended. In the next part, we will build the backend of the application so it can work as intended.

Conclusion

In this article, we have learned how to use Pusher Beams to notify users of changes to a cryptocurrency. You can find the repository for the application built in this article here.

Logo

Products

Developers

Company

Legal

  • Twitter
  • Youtube
  • LinkedIn
  • Github
  • Twitch
  • Discord

© 2024 Pusher Ltd. All rights reserved.
Pusher Limited is a company registered in England and Wales (No. 07489873) whose registered office is at MessageBird UK Limited, 3 More London Riverside, 4th Floor, London, United Kingdom, SE1 2AQ.