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

You will need Android Studio 3+ and Go 1.10.2+ installed on your machine. You should have some familiarity with Android development and the Kotlin language. 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: Prerequisites To follow along, you need the following installed: Android Studio installed on your machine (v3.x or later). . Download here Go version 1.10.2 or later . installed on your machine. SQLite installed Basic knowledge on using the Android Studio IDE. Basic knowledge of Kotlin programming language. See the . official docs Basic knowledge of Go and the . Echo framework Building our Android application First, launch Android Studio and create a new application. Enter the name of your application, for example, and then enter the package name. Make sure the checkbox is selected. Choose the minimum SDK, click choose an template, stick with the MainActivity naming scheme and then click . CryptoAlert Enable Kotlin Support Next, Empty Activity Finish Creating a Pusher Beams application Since Pusher Beams relies on Firebase, we need an FCM key and a file. Go to your and click the card to initialize the app creation wizard. google-services.json Firebase console Add project Add the name of the project, for example, alert`, read and accept the terms of conditions. After this, you will be directed to the project overview screen. Choose the option. crypto-` Add Firebase to your Android app The next screen will require the package name of your app. You can find your app’s package name in your app-module file. Look out for the value. Enter the package name and click . You will be prompted to download a file. Download the file and skip the rest of the process. Add the downloaded file to the app folder of your project - . build.gradle applicationId Next google-services.json 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. Next, login to the new . You should sign up if you don’t have an account yet. Pusher dashboard Open your Pusher Beams dashboard and create a new Pusher Beams application. After creating your instance, you will be presented with a quick-start guide. Select the . After you add the FCM key, you can exit the quick-start guide. Android quick-start Adding functionalities to our application For our app to work, we need to pull in a couple of dependencies. To do this, add the following to the project file: build-gradle // File: ./build.gradle buildscript { // [...] dependencies { // [...] classpath 'com.google.gms:google-services:4.0.0' } } // [...] Next, add the following to the app module file: build.gradle // File: ./app/build.gradle dependencies { implementation 'com.squareup.retrofit2:retrofit:2.4.0' implementation 'com.squareup.retrofit2:converter-scalars:2.4.0' implementation 'com.google.firebase:firebase-messaging:17.1.0' implementation 'com.pusher:push-notifications-android:0.10.0' [...] } // Add this line to the end of the file apply plugin: 'com.google.gms.google-services' Above we included — 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. Retrofit Next, create a new interface named and paste the code below: ApiService // File: ./app/src/main/java/{package-name}/ApiService.kt import okhttp3.RequestBody import retrofit2.Call import retrofit2.http.Body import retrofit2.http.GET import retrofit2.http.POST interface ApiService { @POST("/btc-pref") fun saveBTCLimit(@Body body: RequestBody): Call @POST("/eth-pref") fun saveETHLimit(@Body body: RequestBody): Call @GET("/fetch-values") fun getValues():Call } This file is used to by Retrofit to know the endpoints to be accessed. The first endpoint is used to set the Bitcoin limits. The next endpoint is used to save the Ethereum limits. The last endpoint is used to get the current values of the cryptocurrencies. /btc-pref /eth-pref /fetch-values To make use of network services in your application, add the internet permission in your file like so: AndroidManifest.xml [...] Next, we will manage notifications in our app. Create a new service named and paste this: NotificationsMessagingService // File: ./app/src/main/java/{package-name}/NotificationsMessagingService.kt import android.app.NotificationChannel import android.app.NotificationManager import android.app.PendingIntent import android.content.Intent import android.os.Build import android.support.v4.app.NotificationCompat import android.support.v4.app.NotificationManagerCompat import com.google.firebase.messaging.RemoteMessage import com.pusher.pushnotifications.fcm.MessagingService class NotificationsMessagingService : MessagingService() { override fun onMessageReceived(remoteMessage: RemoteMessage) { val notificationId = 10 val channelId = "crypto_channel" lateinit var channel: NotificationChannel val intent = Intent(this, MainActivity::class.java) intent.flags = Intent.FLAG_ACTIVITY_NEW_TASK or Intent.FLAG_ACTIVITY_CLEAR_TASK val pendingIntent = PendingIntent.getActivity(this, 0, intent, 0) val mBuilder = NotificationCompat.Builder(this, channelId) .setSmallIcon(R.mipmap.ic_launcher) .setContentTitle(remoteMessage.notification!!.title!!) .setContentText(remoteMessage.notification!!.body!!) .setContentIntent(pendingIntent) .setPriority(NotificationCompat.PRIORITY_DEFAULT) .setAutoCancel(true) if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) { val notificationManager = applicationContext.getSystemService(NotificationManager::class.java) val name = getString(R.string.channel_name) val description = getString(R.string.channel_description) val importance = NotificationManager.IMPORTANCE_DEFAULT channel = NotificationChannel("crypto_channel", name, importance) channel.description = description notificationManager!!.createNotificationChannel(channel) notificationManager.notify(notificationId, mBuilder.build()) } else { val notificationManager = NotificationManagerCompat.from(this) notificationManager.notify(notificationId, mBuilder.build()) } } } 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 file to describe the notifications channel description and channel name. Add these to the file: strings.xml strings.xml Crypto To receive updates about changes in cryptocurrency value Register the service in the file: AndroidManifest.xml [...] Now, let’s prepare our layouts. First, we will design the activity’s layout. When creating your app, the file should already be present in the layout folder. Open it and replace with this: activity_main.xml <TextView android:id="@+id/bitcoinValue" android:padding="20dp" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginStart="8dp" android:layout_marginTop="8dp" android:text="1 BTC" android:textSize="16sp" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <TextView android:id="@+id/etherumValue" android:padding="20dp" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="16dp" android:layout_marginStart="8dp" android:text="1 ETH" android:textSize="16sp" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/bitcoinValue"/> The layout contains two s to show prices for Bitcoin and Ethereum. We also made these s clickable so we can set limits to get notifications when the limits are surpassed. TextView TextView Next, we will design the layout of our alert dialog. Create a new layout file named and paste this: alert_layout This will be the layout showed by the dialog. It contains two text fields and a button and we used a custom designed background for the s. Create a new drawable file named and paste this: save TextView text_background We will move to the to finish up our app’s functionalities. Open your and replace the contents with the following: MainActivity MainActivity // File: ./app/src/main/java/{package-name}/MainActivity.Kt import android.os.Bundle import okhttp3.MediaType import okhttp3.RequestBody import org.json.JSONObject import retrofit2.Call import retrofit2.Callback import retrofit2.Response import android.support.v7.app.AlertDialog import android.support.v7.app.AppCompatActivity import android.util.Log import android.view.LayoutInflater import android.widget.Button import android.widget.EditText import com.pusher.pushnotifications.PushNotifications import kotlinx.android.synthetic.main.activity_main.* import okhttp3.OkHttpClient import retrofit2.Retrofit import retrofit2.converter.scalars.ScalarsConverterFactory class MainActivity : AppCompatActivity() { private var prefs: Prefs? = null private val retrofit: ApiService by lazy { val httpClient = OkHttpClient.Builder() val builder = Retrofit.Builder() .baseUrl("http://10.0.2.2:9000/") .addConverterFactory(ScalarsConverterFactory.create()) val retrofit = builder .client(httpClient.build()) .build() retrofit.create(ApiService::class.java) } override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) fetchCurrentPrice() setupPushNotifications() setupClickListeners() } } The _URL_ used above, _http://10.0.2.2:9000/_ , is the URL the Android emulator recognizes as localhost. Above, we created a object to be used for network calls. After setting up the object, we add the layout in the method and call three other functions: retrofit retrofit onCreate - 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: fetchCurrentPrice // File: /app/src/main/java/{package-name}/MainActivity.kt private fun fetchCurrentPrice() { retrofit.getValues().enqueue(object: Callback { override fun onResponse(call: Call ?, response: Response ?) { val jsonObject = JSONObject(response!!.body()) bitcoinValue.text = "1 BTC = $"+ jsonObject.getJSONObject("BTC").getString("USD") etherumValue.text = "1 ETH = $"+ jsonObject.getJSONObject("ETH").getString("USD") } override fun onFailure(call: Call ?, t: Throwable?) { Log.e("MainActivity",t!!.localizedMessage) } }) } 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. - This function is where we start listening to the interest of our choice to receive notifications. The interest name is in this format . _**_We register two interests, one for each currency. Open the class and add the following method: setupPushNotifications {device_uuid}_{currency}_changed MainActivity // File: /app/src/main/java/{package-name}/MainActivity.Kt private fun setupPushNotifications() { PushNotifications.start(applicationContext, "PUSHER_BEAMS_INSTANCE_ID") val fmt = "%s_%s_changed" PushNotifications.subscribe(java.lang.String.format(fmt, deviceUuid(), "BTC")) PushNotifications.subscribe(java.lang.String.format(fmt, deviceUuid(), "ETH")) } Replace _PUSHER_BEAMS_INSTANCE_ID_ with the instance ID found on your Pusher Beams dashboard. - In this function, we will set up click listeners to the text views in our layout. In the same class, add the following method: setupClickListeners MainActivity // File: /app/src/main/java/{package-name}/MainActivity.Kt private fun setupClickListeners() { bitcoinValue.setOnClickListener { createDialog("BTC") } etherumValue.setOnClickListener { createDialog("ETH") } } When any of the text views is clicked, we call the method which then opens up a layout for the user to input the limit. createDialog In the class, add the method and as seen below: MainActivity createDialog // File: /app/src/main/java/{package-name}/MainActivity.Kt private fun createDialog(source:String){ val builder: AlertDialog.Builder = AlertDialog.Builder(this) val view = LayoutInflater.from(this).inflate(R.layout.alert_layout,null) builder.setTitle("Set limits") .setMessage("") .setView(view) val dialog = builder.create() val minEditText: EditText = view.findViewById(R.id.minimumValue) val maxEditText: EditText = view.findViewById(R.id.maximumValue) view.findViewById (R.id.save).setOnClickListener { if (source == "BTC"){ saveBTCPref(minEditText.text.toString(), maxEditText.text.toString()) } else { saveETHPref(minEditText.text.toString(), maxEditText.text.toString()) } dialog.dismiss() } dialog.show() } 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 class as seen below: MainActivity // File: /app/src/main/java/{package-name}/MainActivity.Kt private fun saveBTCPref(min:String, max:String){ val jsonObject = JSONObject() jsonObject.put("minBTC", min) jsonObject.put("maxBTC", max) jsonObject.put("uuid", deviceUuid()) val body = RequestBody.create( MediaType.parse("application/json"), jsonObject.toString() ) retrofit.saveBTCLimit(body).enqueue(object: Callback { override fun onResponse(call: Call ?, response: Response ?) {} override fun onFailure(call: Call ?, t: Throwable?) {} }) } private fun saveETHPref(min:String, max:String){ val jsonObject = JSONObject() jsonObject.put("minETH",min) jsonObject.put("maxETH",max) jsonObject.put("uuid", deviceUuid()) val body = RequestBody.create( MediaType.parse("application/json"), jsonObject.toString() ) retrofit.saveETHLimit(body).enqueue(object: Callback { override fun onResponse(call: Call ?, response: Response ?) {} override fun onFailure(call: Call ?, t: Throwable?) {} }) } In the and we attempt to send the limits set by the user to the API so it can be saved for that user. saveBTCPref saveETHPref While sending, we also send the which is the devices’ unique identifier. Let’s create the method that will generate and save this UUID per device. In the class, add the following code: uuid deviceUuid() MainActivity // File: /app/src/main/java/{package-name}/MainActivity.Kt private fun deviceUuid() : String { prefs = Prefs(this) var uuid: String = prefs!!.deviceUuid if (uuid == "") { uuid = java.util.UUID.randomUUID().toString().replace("-", "_") prefs!!.deviceUuid = uuid } return uuid } Now in this function, we reference a class. Create a new class and paste the following code into it: Prefs Prefs // File: /app/src/main/java/{package-name}/Prefs.Kt import android.content.Context import android.content.SharedPreferences class Prefs (context: Context) { val PREFS_FILENAME = "com.example.coinalert.prefs" val DEVICE_UUID = "device_uuid" val prefs: SharedPreferences = context.getSharedPreferences(PREFS_FILENAME, 0); var deviceUuid: String get() = prefs.getString(DEVICE_UUID, "") set(value) = prefs.edit().putString(DEVICE_UUID, value).apply() } That’s all for the application. At this point, the application should build successfully, but, not function as intended. In , we will build the backend of the application so it can work as intended. the next part 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 This post first appeared on the . Pusher Blog

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

Too Long; Didn't Read

Neo Ighodaro

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

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

Too Long; Didn't Read

Neo Ighodaro

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES