DEV Community: Neo

Using Laravel at Scale | Laravel Worldwide Meetup 2020

Neo — Wed, 26 Aug 2020 12:57:23 +0000

The second episode of the Laravel Worldwide Meetup happened on the 25th of August. There, I gave a talk about some of the lessons I learned while working with an API that handles over 300 million records daily. Because of the Coronavirus :/ we had to hold the meetup remotely but it was a success nonetheless.

Thanks to Freek for hosting it.

Video

Here is a video of the talk:

Slides

Here are the slides for the talk:

Create a cryptocurrency tracking app with push notifications using Swift and Laravel - Part 2: The iOS app

Neo — Thu, 22 Nov 2018 10:47:12 +0000

You will need the following installed on your machine: Xcode, the Laravel CLI, SQLite, and Cocoapods. Familiarity with the Xcode IDE will be helpful. You should have completed part one of the series.

In the first part of this article, we started developing our cryptocurrency alert application. We developed the backend of the application that will power the iOS application. As it stands, our backend application can return settings for a device based on its UUID, save the settings for a device based on its UUID and also it can figure out what devices to send push notifications to when the currencies update.

In this part, we will focus on creating the iOS application using Swift and Xcode.

Prerequisites

To follow along you need the following requirements:

Completed the part one of this article.
Xcode installed on your machine.
Knowledge of the Xcode IDE.
Basic knowledge using the Laravel framework.
Basic knowledge of the Swift programming language.
Laravel CLI installed on your machine.
SQLite installed on your machine. Installation guide.
Cocoapods installed on your machine.
Pusher Beams and Channels application.

What we will be building

We already started out by building the backend of the application using Laravel. So next, we will build the iOS application using Swift. If you want to test the push notifications then you will need to run the application on a live device.

How the client application will work

For the client app, the iOS application, we will create a simple list that will display the available currencies and the current prices to the dollar. Whenever the price of the cryptocurrency changes, we will trigger an event using Pusher Channels so the prices are updated.

From the application, you will be able to set a minimum and maximum price change when you want to be alerted. For instance, you can configure the application to send a push notification to the application when the price of one Etherium (ETH) goes below $500. You can also configure the application to receive a notification when the price of Bitcoin goes above $5000.

How the application will look

When we are done with the application, here's how the application will look:

Let’s get started.

Setting up your client application

Launch Xcode and click Create a new Xcode project. Select Single View App and click Next. Enter your Product Name, we will call our project cryptoalat, and select Swift from the Language options. You can also change any other detail you wish to on the screen then click Next.

Installing dependencies

Now you have your Xcode project. Close Xcode and open a terminal window. cd to the iOS project directory in terminal and run the command below to create a Podfile:

    $ pod init

The Podfile is a specification that describes the dependencies of the targets of one or more Xcode projects. The file should simply be named Podfile. All the examples in the guides are based on CocoaPods version 1.0 and onwards. - Cocoapods Guides

This will generate a new file called Podfile in the root of your project. Open this file in any editor and update the file as seen below:

    // File: Podfile
    platform :ios, '11.0'

    target 'cryptoalat' do
      use_frameworks!

      pod 'Alamofire', '~> 4.7.2'
      pod 'PushNotifications', '~> 0.10.8'
      pod 'PusherSwift', '~> 6.1.0'
      pod 'NotificationBannerSwift', '~> 1.6.3'
    end

If you used a project name other than cryptoalat, then change it in the Podfile to match your project’s target name.

Go to terminal and run the command below to install your dependencies:

    $ pod install

When the installation is complete, you will have a *.xcworkspace file in the root of your project. Open this file in Xcode and let’s start developing our cryptocurrency alert application.

Building the iOS application

Creating our storyboard

The first thing we need to do is design our storyboard for the application. This is what we want the storyboard to look like when we are done.

Open the Main.storyboard file and design as seen above.

Above we have three scenes. The first scene, which is the entry point, is the launch scene. We then draw a manual segue with an identifier called Main. Then we set the segue Kind to Present Modally. This will present the next scene which is a navigation view controller. Navigation controllers already have an attached root view controller by default.

We will use this attached view controller, which is a TableViewController, as the main view for our application. It’ll list the available currencies and show us a text field that allows us to change the setting for that currency when it is tapped.

On the third scene, we set the reuse identifier of the cells to coin and we drag two labels to the prototype cell. The first label will be for the coin name and the second label will be for the price.

Now that we have the scenes, let’s create some controllers and view classes and connect them to our storyboard scenes.

Creating your controllers

In Xcode, create a new class LaunchViewController and paste the contents of the file below into it:

    <span class="hljs-keyword">import</span> UIKit

    <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">LaunchViewController</span>: <span class="hljs-title">UIViewController</span> </span>{

        <span class="hljs-keyword">override</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">viewDidAppear</span><span class="hljs-params">(<span class="hljs-number">_</span> animated: Bool)</span></span> {
            <span class="hljs-keyword">super</span>.viewDidAppear(animated)

            <span class="hljs-type">SettingsService</span>.shared.loadSettings {
                <span class="hljs-keyword">self</span>.routeToMainController()
            }
        }

        <span class="hljs-keyword">fileprivate</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">routeToMainController</span><span class="hljs-params">()</span></span> {
            performSegue(withIdentifier: <span class="hljs-string">"Main"</span>, sender: <span class="hljs-keyword">self</span>)
        }
    }

Set the controller as the custom class for the first scene in the Main.storyboard file.

In the code, we load the settings using a SettingsService class we will create later. When the settings are loaded for the device, we then call the routeToMainController method, which routes the application to the main controller using the Main segue we created earlier.

The next controller we will be creating will be the CoinsTableViewController. This will be the controller that will be tied to the third scene which is the main scene.

Create the CoinsTableViewController and replace the contents with the following code;

    <span class="hljs-keyword">import</span> UIKit
    <span class="hljs-keyword">import</span> PusherSwift
    <span class="hljs-keyword">import</span> NotificationBannerSwift

    <span class="hljs-class"><span class="hljs-keyword">struct</span> <span class="hljs-title">Coin</span> </span>{
        <span class="hljs-keyword">let</span> name: <span class="hljs-type">String</span>
        <span class="hljs-keyword">let</span> rate: <span class="hljs-type">Float</span>
    }

    <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">CoinsTableViewController</span>: <span class="hljs-title">UITableViewController</span> </span>{

        <span class="hljs-keyword">var</span> coins: [<span class="hljs-type">Coin</span>] = []

        <span class="hljs-keyword">override</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">viewDidLoad</span><span class="hljs-params">()</span></span> {
            <span class="hljs-keyword">super</span>.viewDidLoad()
        }

        <span class="hljs-keyword">override</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">numberOfSections</span><span class="hljs-params">(<span class="hljs-keyword">in</span> tableView: UITableView)</span></span> -> <span class="hljs-type">Int</span> {
            <span class="hljs-keyword">return</span> <span class="hljs-number">1</span>
        }

        <span class="hljs-keyword">override</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">tableView</span><span class="hljs-params">(<span class="hljs-number">_</span> tableView: UITableView, numberOfRowsInSection section: Int)</span></span> -> <span class="hljs-type">Int</span> {
            <span class="hljs-keyword">return</span> coins.<span class="hljs-built_in">count</span>
        }

        <span class="hljs-keyword">override</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">tableView</span><span class="hljs-params">(<span class="hljs-number">_</span> tableView: UITableView, cellForRowAt indexPath: IndexPath)</span></span> -> <span class="hljs-type">UITableViewCell</span> {
            <span class="hljs-keyword">let</span> coin = coins[indexPath.row]
            <span class="hljs-keyword">let</span> cell = tableView.dequeueReusableCell(withIdentifier: <span class="hljs-string">"coin"</span>, <span class="hljs-keyword">for</span>: indexPath) <span class="hljs-keyword">as</span>! <span class="hljs-type">CoinTableViewCell</span>

            cell.name.text = <span class="hljs-string">"1 \(coin.name) ="</span>
            cell.amount.text = <span class="hljs-string">"$\(String(coin.rate))"</span>

            <span class="hljs-keyword">return</span> cell
        }
    }

Set the controller as the custom class for the first scene in the Main.storyboard file.

Above we have defined the Coin struct and it has a name and rate property. We have the controller which we define the coins property as an array of Coins. We then have some boilerplate code that comes with creating a table view controller.

The numberOfSections method specifies how many sections the table will have. In the first tableView method, we return the number of coins available and in the second tableView method, we define how we want each row to be handled.

Creating other supporting classes

If you noticed in the code above, we referenced a CoinTableViewCell as the class for each row in the last tableView method. Let’s create that.

Create a CoinTableViewCell class and paste the following code into it:

    <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">CoinTableViewCell</span>: <span class="hljs-title">UITableViewCell</span> </span>{
        <span class="hljs-meta">@IBOutlet</span> <span class="hljs-keyword">weak</span> <span class="hljs-keyword">var</span> name: <span class="hljs-type">UILabel</span>!    
        <span class="hljs-meta">@IBOutlet</span> <span class="hljs-keyword">weak</span> <span class="hljs-keyword">var</span> amount: <span class="hljs-type">UILabel</span>!
    }

Open the Main.storyboard file and set the class as the custom class for the prototype cell in the third scene of the Main.storyboard file. When you have set the class, connect the @IBOutlets as specified in the cell class above.

The next class we need to create is the SettingsService. This class will be responsible for updating and fetching the settings for the device.

Create a new SettingsService class and replace the contents with the following code:

    <span class="hljs-keyword">import</span> Foundation
    <span class="hljs-keyword">import</span> Alamofire
    <span class="hljs-keyword">import</span> NotificationBannerSwift

    <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">SettingsService</span> </span>{
        <span class="hljs-keyword">static</span> <span class="hljs-keyword">let</span> key = <span class="hljs-string">"CryptoAlat"</span>
        <span class="hljs-keyword">static</span> <span class="hljs-keyword">let</span> shared = <span class="hljs-type">SettingsService</span>()

        <span class="hljs-keyword">var</span> settings: <span class="hljs-type">Settings</span>? {
            <span class="hljs-keyword">get</span> {
                <span class="hljs-keyword">return</span> <span class="hljs-keyword">self</span>.getCachedSettings()
            }
            <span class="hljs-keyword">set</span>(settings) {
                <span class="hljs-keyword">if</span> <span class="hljs-keyword">let</span> settings = settings {
                    <span class="hljs-keyword">self</span>.updateCachedSettings(settings)
                }
            }
        }

        <span class="hljs-keyword">private</span> <span class="hljs-keyword">init</span>() {}

        <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">loadSettings</span><span class="hljs-params">(completion: @escaping<span class="hljs-params">()</span></span></span> -> <span class="hljs-type">Void</span>) {
            fetchRemoteSettings { settings <span class="hljs-keyword">in</span>
                <span class="hljs-keyword">guard</span> <span class="hljs-keyword">let</span> settings = settings <span class="hljs-keyword">else</span> {
                    <span class="hljs-keyword">return</span> <span class="hljs-keyword">self</span>.saveSettings(<span class="hljs-keyword">self</span>.defaultSettings()) { <span class="hljs-number">_</span> <span class="hljs-keyword">in</span>
                        completion()
                    }
                }

                <span class="hljs-keyword">self</span>.updateCachedSettings(settings)
                completion()
            }
        }

        <span class="hljs-keyword">fileprivate</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">defaultSettings</span><span class="hljs-params">()</span></span> -> <span class="hljs-type">Settings</span> {
            <span class="hljs-keyword">return</span> <span class="hljs-type">Settings</span>(
                btc_min_notify: <span class="hljs-number">0</span>, 
                btc_max_notify: <span class="hljs-number">0</span>, 
                eth_min_notify: <span class="hljs-number">0</span>, 
                eth_max_notify: <span class="hljs-number">0</span>
            )
        }

        <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">saveSettings</span><span class="hljs-params">(<span class="hljs-number">_</span> settings: Settings, completion: @escaping<span class="hljs-params">(Bool)</span></span></span> -> <span class="hljs-type">Void</span>) {
            updateRemoteSettings(settings, completion: { saved <span class="hljs-keyword">in</span>
                <span class="hljs-keyword">if</span> saved {
                    <span class="hljs-keyword">self</span>.updateCachedSettings(settings)
                }

                completion(saved)
            })
        }

        <span class="hljs-keyword">fileprivate</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">fetchRemoteSettings</span><span class="hljs-params">(completion: @escaping <span class="hljs-params">(Settings?)</span></span></span> -> <span class="hljs-type">Void</span>) {
            <span class="hljs-keyword">guard</span> <span class="hljs-keyword">let</span> deviceID = <span class="hljs-type">AppConstants</span>.deviceIDFormatted <span class="hljs-keyword">else</span> {
                <span class="hljs-keyword">return</span> completion(<span class="hljs-literal">nil</span>)
            }

            <span class="hljs-keyword">let</span> url = <span class="hljs-string">"\(AppConstants.API_URL)?u=\(deviceID)"</span>
            <span class="hljs-type">Alamofire</span>.request(url).validate().responseJSON { resp <span class="hljs-keyword">in</span>
                <span class="hljs-keyword">if</span> <span class="hljs-keyword">let</span> data = resp.data, resp.result.isSuccess {
                    <span class="hljs-keyword">let</span> decoder = <span class="hljs-type">JSONDecoder</span>()
                    <span class="hljs-keyword">if</span> <span class="hljs-keyword">let</span> settings = <span class="hljs-keyword">try</span>? decoder.decode(<span class="hljs-type">Settings</span>.<span class="hljs-keyword">self</span>, from: data) {
                        <span class="hljs-keyword">return</span> completion(settings)
                    }
                }

                completion(<span class="hljs-literal">nil</span>)
            }
        }

        <span class="hljs-keyword">fileprivate</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">updateRemoteSettings</span><span class="hljs-params">(<span class="hljs-number">_</span> settings: Settings, completion: @escaping<span class="hljs-params">(Bool)</span></span></span> -> <span class="hljs-type">Void</span>) {
            <span class="hljs-keyword">guard</span> <span class="hljs-keyword">let</span> deviceID = <span class="hljs-type">AppConstants</span>.deviceIDFormatted <span class="hljs-keyword">else</span> {
                <span class="hljs-keyword">return</span> completion(<span class="hljs-literal">false</span>)
            }

            <span class="hljs-keyword">let</span> params = settings.toParams()
            <span class="hljs-keyword">let</span> url = <span class="hljs-string">"\(AppConstants.API_URL)?u=\(deviceID)"</span>
            <span class="hljs-type">Alamofire</span>.request(url, method: .post, parameters: params).validate().responseJSON { resp <span class="hljs-keyword">in</span>
                <span class="hljs-keyword">guard</span> resp.result.isSuccess, <span class="hljs-keyword">let</span> res = resp.result.value <span class="hljs-keyword">as</span>? [<span class="hljs-type">String</span>: <span class="hljs-type">String</span>] <span class="hljs-keyword">else</span> {
                    <span class="hljs-keyword">return</span> <span class="hljs-type">StatusBarNotificationBanner</span>(title: <span class="hljs-string">"Failed to update settings."</span>, style: .danger).show()
                }

                completion((res[<span class="hljs-string">"status"</span>] == <span class="hljs-string">"success"</span>))
            }
        }

        <span class="hljs-keyword">fileprivate</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">updateCachedSettings</span><span class="hljs-params">(<span class="hljs-number">_</span> settings: Settings)</span></span> {
            <span class="hljs-keyword">if</span> <span class="hljs-keyword">let</span> encodedSettings = <span class="hljs-keyword">try</span>? <span class="hljs-type">JSONEncoder</span>().encode(settings) {
                <span class="hljs-type">UserDefaults</span>.standard.<span class="hljs-keyword">set</span>(encodedSettings, forKey: <span class="hljs-type">SettingsService</span>.key)
            }
        }

        <span class="hljs-keyword">fileprivate</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">getCachedSettings</span><span class="hljs-params">()</span></span> -> <span class="hljs-type">Settings</span>? {
            <span class="hljs-keyword">let</span> defaults = <span class="hljs-type">UserDefaults</span>.standard
            <span class="hljs-keyword">if</span> <span class="hljs-keyword">let</span> data = defaults.object(forKey: <span class="hljs-type">SettingsService</span>.key) <span class="hljs-keyword">as</span>? <span class="hljs-type">Data</span> {
                <span class="hljs-keyword">let</span> decoder = <span class="hljs-type">JSONDecoder</span>()
                <span class="hljs-keyword">if</span> <span class="hljs-keyword">let</span> decodedSettings = <span class="hljs-keyword">try</span>? decoder.decode(<span class="hljs-type">Settings</span>.<span class="hljs-keyword">self</span>, from: data) {
                    <span class="hljs-keyword">return</span> decodedSettings
                }
            }

            <span class="hljs-keyword">return</span> <span class="hljs-literal">nil</span>
        }
    }

Above we have the SettingsService. The first method loadSettings loads the settings from the API and then saves it locally. If there is no setting remotely, it calls the defaultSettings method and saves the response to the API.

The saveSettings method saves the Settings remotely using updateRemoteSettings and then locally using updateCachedSettings. The fetchRemoteSettings gets the settings from the API and decodes the response using the Swift decodable API.

Next, let’s define the Settings struct and have it extend Codable. In the same file for the SettingsService, add this above the SettingsService class definition:

    <span class="hljs-class"><span class="hljs-keyword">struct</span> <span class="hljs-title">Settings</span>: <span class="hljs-title">Codable</span> </span>{
        <span class="hljs-keyword">var</span> btc_min_notify: <span class="hljs-type">Int</span>?
        <span class="hljs-keyword">var</span> btc_max_notify: <span class="hljs-type">Int</span>?
        <span class="hljs-keyword">var</span> eth_min_notify: <span class="hljs-type">Int</span>?
        <span class="hljs-keyword">var</span> eth_max_notify: <span class="hljs-type">Int</span>?

        <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">toParams</span><span class="hljs-params">()</span></span> -> <span class="hljs-type">Parameters</span> {
            <span class="hljs-keyword">var</span> params: <span class="hljs-type">Parameters</span> = [:]

            <span class="hljs-keyword">if</span> <span class="hljs-keyword">let</span> btcMin = btc_min_notify { params[<span class="hljs-string">"btc_min_notify"</span>] = btcMin }
            <span class="hljs-keyword">if</span> <span class="hljs-keyword">let</span> btcMax = btc_max_notify { params[<span class="hljs-string">"btc_max_notify"</span>] = btcMax }
            <span class="hljs-keyword">if</span> <span class="hljs-keyword">let</span> ethMin = eth_min_notify { params[<span class="hljs-string">"eth_min_notify"</span>] = ethMin }
            <span class="hljs-keyword">if</span> <span class="hljs-keyword">let</span> ethMax = eth_max_notify { params[<span class="hljs-string">"eth_max_notify"</span>] = ethMax }

            <span class="hljs-keyword">return</span> params
        }
    }

Above we have a simple Settings struct that conforms to Codable. We also have a toParams method that converts the properties to a Parameters type so we can use it with Alamofire when making requests.

One last class we need to create is AppConstants. We will use this class to keep all the data that we expect to remain constant and unchanged throughout the lifetime of the application.

Create a AppConstants file and paste the following code:

    <span class="hljs-keyword">import</span> UIKit

    <span class="hljs-class"><span class="hljs-keyword">struct</span> <span class="hljs-title">AppConstants</span> </span>{
        <span class="hljs-keyword">static</span> <span class="hljs-keyword">let</span> <span class="hljs-type">API_URL</span> = <span class="hljs-string">"http://127.0.0.1:8000/api/settings"</span>
        <span class="hljs-keyword">static</span> <span class="hljs-keyword">let</span> deviceID = <span class="hljs-type">UIDevice</span>.current.identifierForVendor?.uuidString
        <span class="hljs-keyword">static</span> <span class="hljs-keyword">let</span> deviceIDFormatted = <span class="hljs-type">AppConstants</span>.deviceID?.replacingOccurrences(of: <span class="hljs-string">"-"</span>, with: <span class="hljs-string">"_"</span>).lowercased()
        <span class="hljs-keyword">static</span> <span class="hljs-keyword">let</span> <span class="hljs-type">PUSHER_INSTANCE_ID</span> = <span class="hljs-string">"PUSHER_BEAMS_INSTANCE_ID"</span>
        <span class="hljs-keyword">static</span> <span class="hljs-keyword">let</span> <span class="hljs-type">PUSHER_APP_KEY</span> = <span class="hljs-string">"PUSHER_APP_KEY"</span>
        <span class="hljs-keyword">static</span> <span class="hljs-keyword">let</span> <span class="hljs-type">PUSHER_APP_CLUSTER</span> = <span class="hljs-string">"PUSHER_APP_CLUSTER"</span>
    }

Replace the PUSHER_* keys with the values gotten from the Pusher Channels and Beams dashboard.

Updating the settings for the device

Now that we have defined the settings service, let’s update our controller so the user can set the minimum and maximum prices for each currency.

Open the CoinsTableViewController class and add the following method:

    <span class="hljs-keyword">override</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">tableView</span><span class="hljs-params">(<span class="hljs-number">_</span> tableView: UITableView, didSelectRowAt indexPath: IndexPath)</span></span> {
        <span class="hljs-keyword">let</span> coin = coins[indexPath.row]

        <span class="hljs-keyword">var</span> minTextField: <span class="hljs-type">UITextField</span>?
        <span class="hljs-keyword">var</span> maxTextField: <span class="hljs-type">UITextField</span>?

        <span class="hljs-keyword">let</span> title = <span class="hljs-string">"Manage \(coin.name) alerts"</span>
        <span class="hljs-keyword">let</span> message = <span class="hljs-string">"Notification will be sent to you when price exceeds or goes below minimum and maximum price. Set to zero to turn off notification."</span>

        <span class="hljs-keyword">let</span> alert = <span class="hljs-type">UIAlertController</span>(title: title, message: message, preferredStyle: .alert)

        alert.addTextField { textfield <span class="hljs-keyword">in</span>
            minTextField = textfield
            textfield.placeholder = <span class="hljs-string">"Alert when price is below"</span>
        }

        alert.addTextField { textfield <span class="hljs-keyword">in</span>
            maxTextField = textfield
            textfield.placeholder = <span class="hljs-string">"Alert when price is above"</span>
        }

        alert.addAction(<span class="hljs-type">UIAlertAction</span>(title: <span class="hljs-string">"Cancel"</span>, style: .cancel, handler: <span class="hljs-literal">nil</span>))

        alert.addAction(<span class="hljs-type">UIAlertAction</span>(title: <span class="hljs-string">"Save"</span>, style: .<span class="hljs-keyword">default</span>, handler: { action <span class="hljs-keyword">in</span>
            <span class="hljs-keyword">guard</span> <span class="hljs-keyword">let</span> minPrice = minTextField?.text, <span class="hljs-keyword">let</span> maxPrice = maxTextField?.text <span class="hljs-keyword">else</span> {
                <span class="hljs-keyword">return</span> <span class="hljs-type">StatusBarNotificationBanner</span>(title: <span class="hljs-string">"Invalid min or max price"</span>, style: .danger).show()
            }

            <span class="hljs-keyword">var</span> btcMin: <span class="hljs-type">Int</span>?, btcMax: <span class="hljs-type">Int</span>?, ethMin: <span class="hljs-type">Int</span>?, ethMax: <span class="hljs-type">Int</span>?

            <span class="hljs-keyword">switch</span> coin.name {
            <span class="hljs-keyword">case</span> <span class="hljs-string">"BTC"</span>:
                btcMin = <span class="hljs-type">Int</span>(minPrice)
                btcMax = <span class="hljs-type">Int</span>(maxPrice)
            <span class="hljs-keyword">case</span> <span class="hljs-string">"ETH"</span>:
                ethMin = <span class="hljs-type">Int</span>(minPrice)
                ethMax = <span class="hljs-type">Int</span>(maxPrice)
            <span class="hljs-keyword">default</span>:
                <span class="hljs-keyword">return</span>
            }

            <span class="hljs-keyword">let</span> settings = <span class="hljs-type">Settings</span>(
                btc_min_notify: btcMin,
                btc_max_notify: btcMax,
                eth_min_notify: ethMin,
                eth_max_notify: ethMax
            )

            <span class="hljs-type">SettingsService</span>.shared.saveSettings(settings, completion: { saved <span class="hljs-keyword">in</span>
                <span class="hljs-keyword">if</span> saved {
                    <span class="hljs-type">StatusBarNotificationBanner</span>(title: <span class="hljs-string">"Saved successfully"</span>).show()
                }
            })
        }))

        present(alert, animated: <span class="hljs-literal">true</span>, completion: <span class="hljs-literal">nil</span>)
    }

The method above is automatically called when a row is selected. In this method, we display a UIAlertController with two text fields for the minimum price and the maximum price. When the prices are submitted, the SettingsService we created earlier takes care of updating the values both locally and remotely.

Adding realtime cryptocurrency update support

Open the CoinsTableViewController and add the pusher property to the class as seen below:

var pusher: Pusher!Then replace the viewDidLoad method with the following code:

    <span class="hljs-keyword">override</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">viewDidLoad</span><span class="hljs-params">()</span></span> {
        <span class="hljs-keyword">super</span>.viewDidLoad()

        pusher = <span class="hljs-type">Pusher</span>(
            key: <span class="hljs-type">AppConstants</span>.<span class="hljs-type">PUSHER_APP_KEY</span>, 
            options: <span class="hljs-type">PusherClientOptions</span>(host: .cluster(<span class="hljs-type">AppConstants</span>.<span class="hljs-type">PUSHER_APP_CLUSTER</span>))
        )

        <span class="hljs-keyword">let</span> channel = pusher.subscribe(<span class="hljs-string">"currency-update"</span>)

        <span class="hljs-keyword">let</span> <span class="hljs-number">_</span> = channel.bind(eventName: <span class="hljs-string">"currency.updated"</span>) { data <span class="hljs-keyword">in</span>
            <span class="hljs-keyword">if</span> <span class="hljs-keyword">let</span> data = data <span class="hljs-keyword">as</span>? [<span class="hljs-type">String</span>: [<span class="hljs-type">String</span>: [<span class="hljs-type">String</span>: <span class="hljs-type">Float</span>]]] {
                <span class="hljs-keyword">guard</span> <span class="hljs-keyword">let</span> payload = data[<span class="hljs-string">"payload"</span>] <span class="hljs-keyword">else</span> { <span class="hljs-keyword">return</span> }

                <span class="hljs-keyword">self</span>.coins = []

                <span class="hljs-keyword">for</span> (coin, deets) <span class="hljs-keyword">in</span> payload {
                    <span class="hljs-keyword">guard</span> <span class="hljs-keyword">let</span> currentPrice = deets[<span class="hljs-string">"current"</span>] <span class="hljs-keyword">else</span> { <span class="hljs-keyword">return</span> }
                    <span class="hljs-keyword">self</span>.coins.append(<span class="hljs-type">Coin</span>(name: coin, rate: currentPrice))
                }

                <span class="hljs-type">Dispatch</span>.main.async {
                    <span class="hljs-keyword">self</span>.tableView.reloadData()
                }
            }
        }

        pusher.connect()
    }

In the code above, we are using the Pusher Swift SDK to subscribe to our currency-update Pusher Channel. We then subscribe to the currency.updated event on that channel. Whenever that event is triggered, we refresh the price of the cryptocurrency in realtime.

Adding push notifications to our iOS new application

To add push notification support, open the AppDelegate class and replace the contents with the following:

    <span class="hljs-keyword">import</span> UIKit
    <span class="hljs-keyword">import</span> PushNotifications

    <span class="hljs-meta">@UIApplicationMain</span>
    <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">AppDelegate</span>: <span class="hljs-title">UIResponder</span>, <span class="hljs-title">UIApplicationDelegate</span> </span>{

        <span class="hljs-keyword">var</span> window: <span class="hljs-type">UIWindow</span>?

        <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">application</span><span class="hljs-params">(<span class="hljs-number">_</span> application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: <span class="hljs-keyword">Any</span>]?)</span></span> -> <span class="hljs-type">Bool</span> {
            <span class="hljs-type">PushNotifications</span>.shared.start(instanceId: <span class="hljs-type">AppConstants</span>.<span class="hljs-type">PUSHER_INSTANCE_ID</span>)
            <span class="hljs-type">PushNotifications</span>.shared.registerForRemoteNotifications()
            <span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>
        }

        <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">application</span><span class="hljs-params">(<span class="hljs-number">_</span> application: UIApplication, didRegisterForRemoteNotificationsWithDeviceToken deviceToken: Data)</span></span> {
            <span class="hljs-type">PushNotifications</span>.shared.registerDeviceToken(deviceToken) {
                <span class="hljs-keyword">if</span> <span class="hljs-keyword">let</span> deviceID = <span class="hljs-type">AppConstants</span>.deviceIDFormatted {
                    <span class="hljs-keyword">try</span>? <span class="hljs-type">PushNotifications</span>.shared.subscribe(interest: <span class="hljs-string">"\(deviceID)_eth_changed"</span>)
                    <span class="hljs-keyword">try</span>? <span class="hljs-type">PushNotifications</span>.shared.subscribe(interest: <span class="hljs-string">"\(deviceID)_btc_changed"</span>)
                }
            }
        }
    }

In the class above, we use the Pusher Beams Swift SDK to register the device for push notifications. We then subscribe to the *_eth_changed and *_btc_changed interests, where * is the device’s unique UUID.

Now that we have completed the logic for the application, let’s enable push notifications on the application in Xcode.

In the project navigator, select your project, and click on the Capabilities tab. Enable Push Notifications by turning the switch ON.

This will create an entitlements file in the root of your project. With that, you have provisioned your application to fully receive push notifications.

Allowing our application to connect locally

If you are going to be testing the app’s backend using a local server, then there is one last thing we need to do. Open the info.plist file and add an entry to the plist file to allow connection to our local server:

That’s all. We can run our application. However, remember that to demo the push notifications, you will need an actual iOS device as simulators cannot receive push notifications. If you are using a physical device, you’ll need to expose your local API using Ngrok and then change the API_URL InAppConstants.

Anytime you want to update the currency prices, run the command below manually in your Laravel application:

    $ php artisan schedule:run

Here is a screen recording of the application in action:

Conclusion

In this article, we have been able to see how easy it is to create a cryptocurrency alert website using Laravel, Swift, Pusher Channels and Pusher Beams. The source code to the application built in this article is available on GitHub.

This post first appeared on the Pusher blog.

Create a cryptocurrency tracking app with push notifications using Swift and Laravel - Part 1: The backend

Neo — Thu, 22 Nov 2018 10:44:59 +0000

You will need the following installed on your machine: Xcode, the Laravel CLI, SQLite, and Cocoapods. Familiarity with the Xcode IDE will be helpful.

Introduction

Cryptocurrency has been and is still one of the biggest trends this year. With currencies like Bitcoin reaching record highs and new companies creating tokens and offerings, it’s showing just how much potential cryptocurrencies have. However, cryptocurrency prices are erratic and can fall or climb at a moments notice, so it’s always a good idea to keep tabs on the changes.

In this article, we will be building an application that keeps tabs on changes to the crypto market. The application will focus on BTC and ETH and will allow users of the application to set minimum and maximum amounts when they would like to be notified about the coins current price. The application will be built using Swift, Laravel, Pusher Channels, and Pusher Beams.

Prerequisites

To follow along you need the following requirements:

Xcode installed on your machine.
Knowledge of the Xcode IDE.
Basic knowledge using the Laravel framework.
Basic knowledge of the Swift programming language.
Laravel CLI installed on your machine.
SQLite installed on your machine. Installation guide.
Cocoapods installed on your machine.
Pusher Beams and Channels application.

What we will be building

We will start out by building the backend of the application using Laravel. Then we will build the iOS application using Swift. If you want to test the push notifications then you will need to run the application on a live device.

How the client application will work

How the backend application will work

For the backend application, we will be using Laravel and we will create endpoints that allow a user update the settings and load the settings for a device. The API will be responsible for checking the current prices of the cryptocurrency and sending both a Channels update and a Beams notification when the price changes.

However, because the prices don’t change very predictably, we will be simulating the currency changes so we can preview the application in action. We will also be using task scheduling in Laravel to trigger the checks for the current currency prices.

In a production environment we will set the scheduler as a cronjob, but because we are in development, we will manually run the command to trigger price changes.

How the application will look

When we are done with the application, here's how the application will look:

Let’s get started.

Setting up Pusher Beams and Channels

Setting up Pusher Channels

Create a new Channels app. You can easily do this by clicking the big Create new Channels app card at the bottom right. When you create a new app, you are provided with keys. Keep them safe as you will soon need them.

Setting up Pusher Beams

Next, log in to the new Pusher dashboard, in here we will create a Pusher Beams instance. You should sign up if you don’t have an account yet. Click on the Beams button on the sidebar then click Create, this will launch a pop up to Create a new Beams instance. Name it cryptoalat.

As soon as you create the instance, you will be presented with a quickstart guide. Select the IOS quickstart and follow through the wizard.

When you are done creating the Beams application, you will be provided with an instance ID and a secret key, we will need these later.

Setting up your backend application

In your terminal, run the command below to create a new Laravel project:

    $ laravel new cryptoapi

This command will create a new Laravel project and install all the required Laravel dependencies.

Next, let’s install some of the project specific dependencies. Open the composer.json file and in the require property, add the following dependencies:

    // File: composer.json
    "require": {
        [...]

        "neo/pusher-beams": "^1.0",
        "pusher/pusher-php-server": "~3.0"
    },

Now run the command below to install these dependencies.

    $ composer update

When the installation is complete, open the project in a text editor of your choice. Visual Studio Code is pretty nice.

Setting up our Pusher Beams library

The first thing we want to do is set up the Pusher Beams library we just pulled in using composer. To set up, open the .env file and add the following keys:

    PUSHER_BEAMS_SECRET_KEY="PUSHER_BEAMS_SECRET_KEY"
    PUSHER_BEAMS_INSTANCE_ID="PUSHER_BEAMS_INSTANCE_ID"

You should replace the PUSHER_BEAMS_* placeholders with the keys you got when setting up your Beams application.

Next, open the config/broadcasting.php file and scroll until you see the connections key. In there, you’ll have the pusher settings, add the following to the pusher configuration:

    <span class="hljs-string">'pusher'</span> => [
        <span class="hljs-comment">// [...]</span>

        <span class="hljs-string">'beams'</span> => [
            <span class="hljs-string">'secret_key'</span> => env(<span class="hljs-string">'PUSHER_BEAMS_SECRET_KEY'</span>),
            <span class="hljs-string">'instance_id'</span> => env(<span class="hljs-string">'PUSHER_BEAMS_INSTANCE_ID'</span>),
        ],
    ],

Setting up our Pusher Channels library

The next step is to set up Pusher Channels. Laravel comes with native support for Pusher Channels so we do not need to do much to set it up.

Open the .env file and update the following keys below:

    BROADCAST_DRIVER=pusher

    // [...]

    PUSHER_APP_ID="PUSHER_APP_ID"
    PUSHER_APP_KEY="PUSHER_APP_KEY"
    PUSHER_APP_SECRET="PUSHER_APP_SECRET"
    PUSHER_APP_CLUSTER="PUSHER_APP_CLUSTER"

Above you set the BROADCAST_DRIVER to pusher and then for the other PUSHER_APP_* keys, replace the placeholders with the keys gotten from your Pusher dashboard. That’s all we need to do to set up Pusher Channels for this application.

Building the backend application

Now that we have set up all the dependencies, we can start building the application. We will start by creating the routes. However, instead of creating controllers to hook into the routes, we will be adding the logic directly to the routes.

Setting up the database, migration, and model

Since we will be working with a database, we need to set up the database we are going to be working with. To make things easy we will be using SQLite. Create an empty database.sqlite file in the database directory.

Open the .env file and replace:

    DB_CONNECTION=mysql
    DB_HOST=127.0.0.1
    DB_PORT=3306
    DB_DATABASE=homestead
    DB_USERNAME=homestead
    DB_PASSWORD=secret

With

    DB_CONNECTION=sqlite
    DB_DATABASE=/full/path/to/your/database.sqlite

Next, let’s create a migration for the devices table. We will use this table to store devices and their notification settings. This will help us know what devices to send push notifications to.

Run the command below to create the migration and model:

    $ php artisan make:model Device -m

The -m flag will instruct artisan to create a migration alongside the model.

This command will generate two files, the migration file in the database/migrations and the model in the app directory. Let’s edit the migration file first.

Open the *_create_devices_table.php migration file in the database/migrations directory and replace the contents with the following:

    <span class="hljs-meta"><?php</span>

    <span class="hljs-keyword">use</span> <span class="hljs-title">Illuminate</span>\<span class="hljs-title">Support</span>\<span class="hljs-title">Facades</span>\<span class="hljs-title">Schema</span>;
    <span class="hljs-keyword">use</span> <span class="hljs-title">Illuminate</span>\<span class="hljs-title">Database</span>\<span class="hljs-title">Schema</span>\<span class="hljs-title">Blueprint</span>;
    <span class="hljs-keyword">use</span> <span class="hljs-title">Illuminate</span>\<span class="hljs-title">Database</span>\<span class="hljs-title">Migrations</span>\<span class="hljs-title">Migration</span>;

    <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">CreateDevicesTable</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Migration</span>
    </span>{
        <span class="hljs-comment">/**
         * Run the migrations.
         *
         * <span class="hljs-doctag">@return</span> void
         */</span>
        <span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">up</span><span class="hljs-params">()</span>
        </span>{
            Schema::create(<span class="hljs-string">'devices'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(Blueprint $table)</span> </span>{
                $table->increments(<span class="hljs-string">'id'</span>);
                $table->string(<span class="hljs-string">'uuid'</span>)->unique();
                $table->float(<span class="hljs-string">'btc_min_notify'</span>)->default(<span class="hljs-number">0</span>);
                $table->float(<span class="hljs-string">'btc_max_notify'</span>)->default(<span class="hljs-number">0</span>);
                $table->float(<span class="hljs-string">'eth_min_notify'</span>)->default(<span class="hljs-number">0</span>);
                $table->float(<span class="hljs-string">'eth_max_notify'</span>)->default(<span class="hljs-number">0</span>);
            });
        }

        <span class="hljs-comment">/**
         * Reverse the migrations.
         *
         * <span class="hljs-doctag">@return</span> void
         */</span>
        <span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">down</span><span class="hljs-params">()</span>
        </span>{
            Schema::dropIfExists(<span class="hljs-string">'devices'</span>);
        }
    }

In the up method, we have defined the structure of the devices table. We have the uuid field which will be a unique string for each device registered. We have two btc_notify fields which are there to save the minimum and maximum prices of BTC at which point the device should be notified. Same applies to the* eth_*_notify fields.

To run the migration, run the command below:

    $ php artisan migrate

Open the app/Device.php model and replace the contents with the code below:

    <span class="hljs-meta"><?php</span>
    <span class="hljs-keyword">namespace</span> <span class="hljs-title">App</span>;

    <span class="hljs-keyword">use</span> <span class="hljs-title">Illuminate</span>\<span class="hljs-title">Database</span>\<span class="hljs-title">Eloquent</span>\<span class="hljs-title">Model</span>;
    <span class="hljs-keyword">use</span> <span class="hljs-title">Illuminate</span>\<span class="hljs-title">Notifications</span>\<span class="hljs-title">Notifiable</span>;

    <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Device</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Model</span>
    </span>{
        <span class="hljs-keyword">use</span> <span class="hljs-title">Notifiable</span>;

        <span class="hljs-keyword">public</span> $timestamps = <span class="hljs-keyword">false</span>;

        <span class="hljs-keyword">protected</span> $fillable = [
            <span class="hljs-string">'uuid'</span>, 
            <span class="hljs-string">'btc_min_notify'</span>, 
            <span class="hljs-string">'btc_max_notify'</span>, 
            <span class="hljs-string">'eth_min_notify'</span>, 
            <span class="hljs-string">'eth_max_notify'</span>,
        ];

        <span class="hljs-keyword">protected</span> $cast = [
            <span class="hljs-string">'btc_min_notify'</span> => <span class="hljs-string">'float'</span>,
            <span class="hljs-string">'btc_max_notify'</span> => <span class="hljs-string">'float'</span>,
            <span class="hljs-string">'eth_min_notify'</span> => <span class="hljs-string">'float'</span>,
            <span class="hljs-string">'eth_max_notify'</span> => <span class="hljs-string">'float'</span>
        ];

        <span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">scopeAffected</span><span class="hljs-params">($query, string $currency, $currentPrice)</span>
        </span>{
            <span class="hljs-keyword">return</span> $query->where(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">($q)</span> <span class="hljs-title">use</span> <span class="hljs-params">($currency, $currentPrice)</span> </span>{
                $q->where(<span class="hljs-string">"${currency}_min_notify"</span>, <span class="hljs-string">'>'</span>, <span class="hljs-number">0</span>)
                  ->where(<span class="hljs-string">"${currency}_min_notify"</span>, <span class="hljs-string">'>'</span>, $currentPrice);
            })->orWhere(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">($q)</span> <span class="hljs-title">use</span> <span class="hljs-params">($currency, $currentPrice)</span> </span>{
                $q->where(<span class="hljs-string">"${currency}_max_notify"</span>, <span class="hljs-string">'>'</span>, <span class="hljs-number">0</span>)
                  ->where(<span class="hljs-string">"${currency}_max_notify"</span>, <span class="hljs-string">'<'</span>, $currentPrice);
            });
        }
    }

In the model above, we have set the $timestamps property to false to make sure that Eloquent does not try to update the created_at and updated_at fields, which is the normal behavior.

We also have the scopeAffected method which is an example of an Eloquent scope. We use this to get the affected devices after a price change has occurred on a currency. So if, for instance, BTC’s price drops, this method will check the devices and the settings to see the devices that need to be notified of this change.

Local scopes allow you to define common sets of constraints that you may easily re-use throughout your application. For example, you may need to frequently retrieve all users that are considered "popular". To define a scope, prefix an Eloquent model method with scope. - Laravel documentation.

We will use this scope later in our application when we need to know what devices to send push notifications to.

Creating the routes

Open the routes/api.php file and replace the contents of the file with the following code:

    <span class="hljs-comment">// File: routes/api.php</span>
    <span class="hljs-meta"><?php</span>

    <span class="hljs-keyword">use</span> <span class="hljs-title">App</span>\<span class="hljs-title">Device</span>;
    <span class="hljs-keyword">use</span> <span class="hljs-title">Illuminate</span>\<span class="hljs-title">Http</span>\<span class="hljs-title">Request</span>;

Next, let’s add the first route. Append the code below to the routes file:

    <span class="hljs-comment">// File: routes/api.php</span>
    Route::get(<span class="hljs-string">'/settings'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(Request $request)</span> </span>{
        <span class="hljs-keyword">return</span> Device::whereUuid($request->query(<span class="hljs-string">'u'</span>))->firstOrFail()[<span class="hljs-string">'settings'</span>];
    });

In the route above, we are returning the settings for the device supplied in the u query parameter. This means if a registered device hits the /settings endpoint and passes the device UUID through the u parameter, the settings for that device will be returned.

Next, in the same routes file, paste the following at the bottom of the file:

    Route::post(<span class="hljs-string">'/settings'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(Request $request)</span> </span>{
        $settings = $request->validate([
            <span class="hljs-string">'btc_min_notify'</span> => <span class="hljs-string">'int|min:0'</span>,
            <span class="hljs-string">'btc_max_notify'</span> => <span class="hljs-string">'int|min:0'</span>,
            <span class="hljs-string">'eth_min_notify'</span> => <span class="hljs-string">'int|min:0'</span>,
            <span class="hljs-string">'eth_max_notify'</span> => <span class="hljs-string">'int|min:0'</span>,
        ]);

        $settings = array_filter($settings, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">($value)</span> </span>{ <span class="hljs-keyword">return</span> $value > <span class="hljs-number">0</span>; });

        $device = Device::firstOrNew([<span class="hljs-string">'uuid'</span> => $request->query(<span class="hljs-string">'u'</span>)]);
        $device->fill($settings);
        $saved = $device->save();

        <span class="hljs-keyword">return</span> response()->json([
            <span class="hljs-string">'status'</span> => $saved ? <span class="hljs-string">'success'</span> : <span class="hljs-string">'failure'</span>
        ], $saved ? <span class="hljs-number">200</span> : <span class="hljs-number">400</span>);
    });

Above, we have defined the route for the POST /settings route. This route saves settings to the database. It will create a new entry if the setting does not already exist or will update the existing one if it does.

That’s all for the routes.

Creating the jobs, events, and notifiers

Next, we need to create the Laravel job that will run at intervals to check if there is a change in the currency price.

Run the command below to create a new Laravel job:

    $ php artisan make:job CheckPrices

This will create a new CheckPrices class in the app directory. Open that class and replace the contents with the following:

    <span class="hljs-meta"><?php</span>

    <span class="hljs-keyword">namespace</span> <span class="hljs-title">App</span>\<span class="hljs-title">Jobs</span>;

    <span class="hljs-keyword">use</span> <span class="hljs-title">App</span>\<span class="hljs-title">Device</span>;
    <span class="hljs-keyword">use</span> <span class="hljs-title">Illuminate</span>\<span class="hljs-title">Bus</span>\<span class="hljs-title">Queueable</span>;
    <span class="hljs-keyword">use</span> <span class="hljs-title">Illuminate</span>\<span class="hljs-title">Queue</span>\<span class="hljs-title">SerializesModels</span>;
    <span class="hljs-keyword">use</span> <span class="hljs-title">Illuminate</span>\<span class="hljs-title">Queue</span>\<span class="hljs-title">InteractsWithQueue</span>;
    <span class="hljs-keyword">use</span> <span class="hljs-title">Illuminate</span>\<span class="hljs-title">Contracts</span>\<span class="hljs-title">Queue</span>\<span class="hljs-title">ShouldQueue</span>;
    <span class="hljs-keyword">use</span> <span class="hljs-title">Illuminate</span>\<span class="hljs-title">Foundation</span>\<span class="hljs-title">Bus</span>\<span class="hljs-title">Dispatchable</span>;
    <span class="hljs-keyword">use</span> <span class="hljs-title">App</span>\<span class="hljs-title">Events</span>\<span class="hljs-title">CurrencyUpdated</span>;
    <span class="hljs-keyword">use</span> <span class="hljs-title">App</span>\<span class="hljs-title">Notifications</span>\<span class="hljs-title">CoinPriceChanged</span>;

    <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">CheckPrices</span> <span class="hljs-keyword">implements</span> <span class="hljs-title">ShouldQueue</span>
    </span>{
        <span class="hljs-keyword">use</span> <span class="hljs-title">Dispatchable</span>, <span class="hljs-title">InteractsWithQueue</span>, <span class="hljs-title">Queueable</span>, <span class="hljs-title">SerializesModels</span>;

        <span class="hljs-keyword">protected</span> $supportedCurrencies = [<span class="hljs-string">'ETH'</span>, <span class="hljs-string">'BTC'</span>];

        <span class="hljs-comment">/**
         * Execute the job.
         *
         * <span class="hljs-doctag">@return</span> void
         */</span>
        <span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">handle</span><span class="hljs-params">()</span>
        </span>{
            $payload = <span class="hljs-keyword">$this</span>->getPricesForSupportedCurrencies();

            <span class="hljs-keyword">if</span> (!<span class="hljs-keyword">empty</span>($payload)) {
                <span class="hljs-keyword">$this</span>->triggerPusherUpdate($payload);
                <span class="hljs-keyword">$this</span>->triggerPossiblePushNotification($payload);
            }
        }

        <span class="hljs-keyword">private</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">triggerPusherUpdate</span><span class="hljs-params">($payload)</span>
        </span>{
            event(<span class="hljs-keyword">new</span> CurrencyUpdated($payload));
        }

        <span class="hljs-keyword">private</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">triggerPossiblePushNotification</span><span class="hljs-params">($payload)</span>
        </span>{
            <span class="hljs-keyword">foreach</span> (<span class="hljs-keyword">$this</span>->supportedCurrencies <span class="hljs-keyword">as</span> $currency) {
                $currentPrice = $payload[$currency][<span class="hljs-string">'current'</span>];

                $currency = strtolower($currency);

                <span class="hljs-keyword">foreach</span> (Device::affected($currency, $currentPrice)->get() <span class="hljs-keyword">as</span> $device) {
                    $device->notify(<span class="hljs-keyword">new</span> CoinPriceChanged($currency, $device, $payload));
                }
            }
        }

        <span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getPricesForSupportedCurrencies</span><span class="hljs-params">()</span>: <span class="hljs-title">array</span>
        </span>{
            $payload = [];

            <span class="hljs-keyword">foreach</span> (<span class="hljs-keyword">$this</span>->supportedCurrencies <span class="hljs-keyword">as</span> $currency) {
                <span class="hljs-keyword">if</span> (config(<span class="hljs-string">'app.debug'</span>) === <span class="hljs-keyword">true</span>) {
                    $response = [
                        $currency => [
                            <span class="hljs-string">'USD'</span> => (float) rand(<span class="hljs-number">100</span>, <span class="hljs-number">15000</span>)
                        ]
                    ];
                } <span class="hljs-keyword">else</span> {
                    $url = <span class="hljs-string">"https://min-api.cryptocompare.com/data/pricehistorical?fsym={$currency}&tsyms=USD&ts={$timestamp}"</span>;

                    $response = json_decode(file_get_contents($url), <span class="hljs-keyword">true</span>);
                }

                <span class="hljs-keyword">if</span> (json_last_error() === JSON_ERROR_NONE) {
                    $currentPrice = $response[$currency][<span class="hljs-string">'USD'</span>];

                    $previousPrice = cache()->get(<span class="hljs-string">"PRICE_${currency}"</span>, <span class="hljs-keyword">false</span>);

                    <span class="hljs-keyword">if</span> ($previousPrice == <span class="hljs-keyword">false</span> <span class="hljs-keyword">or</span> $previousPrice !== $currentPrice) {
                        $payload[$currency] = [
                            <span class="hljs-string">'current'</span> => $currentPrice,
                            <span class="hljs-string">'previous'</span> => $previousPrice,
                        ];
                    }

                    cache()->put(<span class="hljs-string">"PRICE_${currency}"</span>, $currentPrice, (<span class="hljs-number">24</span> * <span class="hljs-number">60</span> * <span class="hljs-number">60</span>));
                }
            }

            <span class="hljs-keyword">return</span> $payload;
        }
    }

In the class above, we implement the ShouldQueue interface. This makes it so that the job can and will be queued. In a production server, queueing jobs makes your application faster as it queues jobs that might take a while to execute for later execution.

We have four methods in this class. The first one is the handle method. This one is called automatically when the job is executed. In this method, we fetch the prices for the available currencies and then check if the price has changed. If it has, we publish a Pusher Channel event and then check if there are any devices that need to be notified based on the user’s settings. If there are any, we send a push notification to that device.

We have the triggerPusherUpdate method which triggers a CurrencyUpdated event. We will create this event in the next section. We also have a triggerPossiblePushNotification method which gets the list of devices which should be notified of the currency change and then notifies the user using the CoinPriceChanged class, which we will create in the next section.

Lastly, we have the getPricesForSupportedCurrencies method which just fetches the current price of a currency. In this method, we have a debug mode that simulates the current price of a currency.

To make sure this class we just created is scheduled properly, open the app/Console/Kernel.php file and in the schedule method, add the following code to the schedule method:

$schedule->job(new \App\Jobs\CheckPrices)->everyMinute();Now every time we run the command php artisan schedule:run all the jobs in this schedule method will be run. Normally, in a production environment, we will need to add the schedule command as a cronjob, however, we will run this command manually.

The next thing to do will be to create the notifiers and events. In your terminal, run the following commands:

    $ php artisan make:event CurrencyUpdated
    $ php artisan make:notification CoinPriceChanged

This will create a class in the Events and Notifications directories.

In the event class, CurrencyUpdated paste the following code:

    <span class="hljs-meta"><?php</span>

    <span class="hljs-keyword">namespace</span> <span class="hljs-title">App</span>\<span class="hljs-title">Events</span>;

    <span class="hljs-keyword">use</span> <span class="hljs-title">Illuminate</span>\<span class="hljs-title">Broadcasting</span>\<span class="hljs-title">Channel</span>;
    <span class="hljs-keyword">use</span> <span class="hljs-title">Illuminate</span>\<span class="hljs-title">Queue</span>\<span class="hljs-title">SerializesModels</span>;
    <span class="hljs-keyword">use</span> <span class="hljs-title">Illuminate</span>\<span class="hljs-title">Foundation</span>\<span class="hljs-title">Events</span>\<span class="hljs-title">Dispatchable</span>;
    <span class="hljs-keyword">use</span> <span class="hljs-title">Illuminate</span>\<span class="hljs-title">Broadcasting</span>\<span class="hljs-title">InteractsWithSockets</span>;
    <span class="hljs-keyword">use</span> <span class="hljs-title">Illuminate</span>\<span class="hljs-title">Contracts</span>\<span class="hljs-title">Broadcasting</span>\<span class="hljs-title">ShouldBroadcast</span>;

    <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">CurrencyUpdated</span> <span class="hljs-keyword">implements</span> <span class="hljs-title">ShouldBroadcast</span>
    </span>{
        <span class="hljs-keyword">use</span> <span class="hljs-title">Dispatchable</span>, <span class="hljs-title">InteractsWithSockets</span>, <span class="hljs-title">SerializesModels</span>;

        <span class="hljs-keyword">public</span> $payload;

        <span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">__construct</span><span class="hljs-params">($payload)</span>
        </span>{
            <span class="hljs-keyword">$this</span>->payload = $payload;
        }

        <span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">broadcastOn</span><span class="hljs-params">()</span>
        </span>{
            <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> Channel(<span class="hljs-string">'currency-update'</span>);
        }

        <span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">broadcastAs</span><span class="hljs-params">()</span>
        </span>{
            <span class="hljs-keyword">return</span> <span class="hljs-string">'currency.updated'</span>;
        }
    }

In the event class above, we have the broadcastOn method that specifies the Pusher channel we want to broadcast an event on. We also have the broadcastAs method which specifies the name of the event we want to broadcast to the channel.

In the CoinPriceChanged notification class, replace the contents with the following code:

    <span class="hljs-meta"><?php</span>

    <span class="hljs-keyword">namespace</span> <span class="hljs-title">App</span>\<span class="hljs-title">Notifications</span>;

    <span class="hljs-keyword">use</span> <span class="hljs-title">App</span>\<span class="hljs-title">Device</span>;
    <span class="hljs-keyword">use</span> <span class="hljs-title">Illuminate</span>\<span class="hljs-title">Bus</span>\<span class="hljs-title">Queueable</span>;
    <span class="hljs-keyword">use</span> <span class="hljs-title">Neo</span>\<span class="hljs-title">PusherBeams</span>\<span class="hljs-title">PusherBeams</span>;
    <span class="hljs-keyword">use</span> <span class="hljs-title">Neo</span>\<span class="hljs-title">PusherBeams</span>\<span class="hljs-title">PusherMessage</span>;
    <span class="hljs-keyword">use</span> <span class="hljs-title">Illuminate</span>\<span class="hljs-title">Notifications</span>\<span class="hljs-title">Notification</span>;

    <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">CoinPriceChanged</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Notification</span>
    </span>{
        <span class="hljs-keyword">use</span> <span class="hljs-title">Queueable</span>;

        <span class="hljs-keyword">private</span> $currency;
        <span class="hljs-keyword">private</span> $device;
        <span class="hljs-keyword">private</span> $payload;

        <span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">__construct</span><span class="hljs-params">(string $currency, Device $device, array $payload)</span>
        </span>{
            <span class="hljs-keyword">$this</span>->currency = $currency;
            <span class="hljs-keyword">$this</span>->device = $device;
            <span class="hljs-keyword">$this</span>->payload = $payload;
        }

        <span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">via</span><span class="hljs-params">($notifiable)</span>
        </span>{
            <span class="hljs-keyword">return</span> [PusherBeams::class];
        }

        <span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">toPushNotification</span><span class="hljs-params">($notifiable)</span>
        </span>{
            $currentPrice = <span class="hljs-keyword">$this</span>->payload[strtoupper(<span class="hljs-keyword">$this</span>->currency)][<span class="hljs-string">'current'</span>];

            $previousPrice = <span class="hljs-keyword">$this</span>->payload[strtoupper(<span class="hljs-keyword">$this</span>->currency)][<span class="hljs-string">'current'</span>];

            $direction = $currentPrice > $previousPrice ? <span class="hljs-string">'climbed'</span> : <span class="hljs-string">'dropped'</span>;

            $currentPriceFormatted = number_format($currentPrice);

            <span class="hljs-keyword">return</span> PusherMessage::create()
                    ->iOS()
                    ->sound(<span class="hljs-string">'success'</span>)
                    ->title(<span class="hljs-string">"Price of {$this->currency} has {$direction}"</span>)
                    ->body(<span class="hljs-string">"The price of {$this->currency} has {$direction} and is now \${$currentPriceFormatted}"</span>);
        }

        <span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">pushNotificationInterest</span><span class="hljs-params">()</span>
        </span>{
            $uuid = strtolower(str_replace(<span class="hljs-string">'-'</span>, <span class="hljs-string">'_'</span>, <span class="hljs-keyword">$this</span>->device->uuid));

            <span class="hljs-keyword">return</span> <span class="hljs-string">"{$uuid}_{$this->currency}_changed"</span>;
        }
    }

In the class above we have the toPushNotification class which prepares the push notification using the Pusher Beams library. We also have the pushNotificationInterest method which sets the name for the interest of the push notification depending on the currency and device ID.

That’s all for the backend, now just run the command below to start the server:

    $ php artisan serve

This will start a PHP server with our application running. Also if you need to manually trigger a currency change, run the command below:

    $ php artisan schedule:run

Now that we are done with the backend, we can create the application using Swift and Xcode.

Conclusion

In this part of the article, we have created the backend for our cryptocurrency alert application. In the next part, we will be seeing how we can create the application that will consume the API we just created in this part.

The source code to this application is available on GitHub.

This post first appeared on the Pusher blog.

Create a two-player game with Python and Vue

Neo — Tue, 20 Nov 2018 06:53:58 +0000

You will need Python 3+, virtualenv and Flask installed on your machine.

The advent of the PC and the internet has redefined the term “entertainment” and the means by which it can be obtained. While a console or some special hardware would have been required to play games in the past, games are only a click away in today's world of technology.

In this tutorial, we will create a realtime tic-tac-toe game using Python and Pusher channels. Here’s a demo of how the game will look and behave upon creation:

This multiplayer game will allow a player to connect using their preferred username (or generate a random username where a player doesn’t connect with a username) and choose to play with another player from a list of other online players.

The game itself follows the conventional principles of the popular tic-tac-toe game. The “online player(s)” feature is powered by Pusher presence channels and the realtime updates of a player’s move across multiple windows is powered by Pusher private channels. The source code for this tutorial is available here GitHub.

Let’s get started.

Prerequisites

To follow along, a basic knowledge of Python, Flask, JavaScript (ES6 syntax) and Vue is required. You will also need the following installed on your machine:

Virtualenv is great for creating isolated Python environments, so we can install dependencies in an isolated environment without polluting our global packages directory.

Setting up the app environment

We will create the project folder and activate a virtual environment within it:

    $ mkdir python-pusher-mutiplayer-game
    $ cd python-pusher-mutiplayer-game
    $ virtualenv .venv
    $ source .venv/bin/activate # Linux based systems
    $ \path\to\env\Scripts\activate # Windows users

We will install Flask using this command:

    $ pip install flask

Setting up Pusher

To integrate Pusher into the multiplayer game, we need to create a Pusher channels application from the Pusher dashboard. If you don’t already have a Pusher account, head over to the Pusher website and create one.

After creating an account, create a new channels application and enable client events from the application dashboard. To enable client events, click on App settings and scroll to the bottom of the page then select the option that says Enable client events, and update the App settings.

Building the backend server

Back in the project directory, let’s install the Python Pusher library with this command:

    $ pip install pusher

We will create a new file and call it app.py, this is where we will write all the code for the Flask backend server. We will also create a folder and call it templates, this folder will hold the markup files for this application.

Let’s write some code to register the endpoints for the game and serve the view, open the app.py file and paste the following code:

    // File: ./app.py
    <span class="hljs-keyword">from</span> flask <span class="hljs-keyword">import</span> Flask, render_template, request, jsonify, make_response, json
    <span class="hljs-keyword">from</span> pusher <span class="hljs-keyword">import</span> pusher

    app = Flask(__name__)

    pusher = pusher_client = pusher.Pusher(
      app_id=<span class="hljs-string">'PUSHER_APP_ID'</span>,
      key=<span class="hljs-string">'PUSHER_APP_KEY'</span>,
      secret=<span class="hljs-string">'PUSHER_APP_SECRET'</span>,
      cluster=<span class="hljs-string">'PUSHER_APP_CLUSTER'</span>,
      ssl=<span class="hljs-keyword">True</span>
    )

    name = <span class="hljs-string">''</span>

<span class="hljs-meta">    @app.route('/')</span>
    <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">index</span><span class="hljs-params">()</span>:</span>
      <span class="hljs-keyword">return</span> render_template(<span class="hljs-string">'index.html'</span>)

<span class="hljs-meta">    @app.route('/play')</span>
    <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">play</span><span class="hljs-params">()</span>:</span>
      <span class="hljs-keyword">global</span> name
      name = request.args.get(<span class="hljs-string">'username'</span>)
      <span class="hljs-keyword">return</span> render_template(<span class="hljs-string">'play.html'</span>)

<span class="hljs-meta">    @app.route("/pusher/auth", methods=['POST'])</span>
    <span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">pusher_authentication</span><span class="hljs-params">()</span>:</span>
      auth = pusher.authenticate(
        channel=request.form[<span class="hljs-string">'channel_name'</span>],
        socket_id=request.form[<span class="hljs-string">'socket_id'</span>],
        custom_data={
          <span class="hljs-string">u'user_id'</span>: name,
          <span class="hljs-string">u'user_info'</span>: {
            <span class="hljs-string">u'role'</span>: <span class="hljs-string">u'player'</span>
          }
        }
      )
      <span class="hljs-keyword">return</span> json.dumps(auth)

    <span class="hljs-keyword">if</span> __name__ == <span class="hljs-string">'__main__'</span>:
        app.run(host=<span class="hljs-string">'0.0.0.0'</span>, port=<span class="hljs-number">5000</span>, debug=<span class="hljs-keyword">True</span>)

    name = <span class="hljs-string">''</span>

Replace the PUSHER_APP_* keys with the values on your Pusher dashboard.

In the code above, we defined three endpoints, here’s what they do:

/ - renders the front page that asks a player to connect with a username.
/play - renders the game view.
/pusher/auth - authenticates Pusher’s presence and private channels for connected players.

Building the frontend

In the templates folder, we will create two files:

index.html
play.html

The index.html file will render the connection page, so open the templates/index.html file and paste the following code:

<span class="hljs-comment"></span>
<span class="hljs-meta"></span>
<span class="hljs-tag"><<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">head</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"utf-8"</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"viewport"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"width=device-width, initial-scale=1, shrink-to-fit=no"</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"description"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">""</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"author"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"Neo Ighodaro"</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">title</span>></span>TIC-TAC-TOE<span class="hljs-tag"></<span class="hljs-name">title</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">style</span>></span><span class="css">
              <span class="hljs-selector-pseudo">:root</span> {
                <span class="hljs-attribute">--input-padding-x</span>: .<span class="hljs-number">75rem</span>;
                <span class="hljs-attribute">--input-padding-y</span>: .<span class="hljs-number">75rem</span>;
              }
              <span class="hljs-selector-tag">html</span>,
              <span class="hljs-selector-tag">body</span>, <span class="hljs-selector-tag">body</span> > <span class="hljs-selector-tag">div</span> {
                <span class="hljs-attribute">height</span>: <span class="hljs-number">100%</span>;
              }
              <span class="hljs-selector-tag">body</span> > <span class="hljs-selector-tag">div</span> {
                <span class="hljs-attribute">display</span>: -ms-flexbox;
                <span class="hljs-attribute">display</span>: flex;
                <span class="hljs-attribute">-ms-flex-align</span>: center;
                <span class="hljs-attribute">align-items</span>: center;
                <span class="hljs-attribute">padding-top</span>: <span class="hljs-number">40px</span>;
                <span class="hljs-attribute">padding-bottom</span>: <span class="hljs-number">40px</span>;
                <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#f5f5f5</span>;
              }
              <span class="hljs-selector-class">.form-signin</span> {
                <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;
                <span class="hljs-attribute">max-width</span>: <span class="hljs-number">420px</span>;
                <span class="hljs-attribute">padding</span>: <span class="hljs-number">15px</span>;
                <span class="hljs-attribute">margin</span>: auto;
              }
              <span class="hljs-selector-class">.form-label-group</span> {
                <span class="hljs-attribute">position</span>: relative;
                <span class="hljs-attribute">margin-bottom</span>: <span class="hljs-number">1rem</span>;
              }
              <span class="hljs-selector-class">.form-label-group</span> > <span class="hljs-selector-tag">input</span>,
              <span class="hljs-selector-class">.form-label-group</span> > <span class="hljs-selector-tag">label</span> {
                <span class="hljs-attribute">padding</span>: <span class="hljs-built_in">var</span>(--input-padding-y) <span class="hljs-built_in">var</span>(--input-padding-x);
              }
              <span class="hljs-selector-class">.form-label-group</span> > <span class="hljs-selector-tag">label</span> {
                <span class="hljs-attribute">position</span>: absolute;
                <span class="hljs-attribute">top</span>: <span class="hljs-number">0</span>;
                <span class="hljs-attribute">left</span>: <span class="hljs-number">0</span>;
                <span class="hljs-attribute">display</span>: block;
                <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;
                <span class="hljs-attribute">margin-bottom</span>: <span class="hljs-number">0</span>; <span class="hljs-comment">/* Override default `<label>` margin */</span>
                <span class="hljs-attribute">line-height</span>: <span class="hljs-number">1.5</span>;
                <span class="hljs-attribute">color</span>: <span class="hljs-number">#495057</span>;
                <span class="hljs-attribute">cursor</span>: text; <span class="hljs-comment">/* Match the input under the label */</span>
                <span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid transparent;
                <span class="hljs-attribute">border-radius</span>: .<span class="hljs-number">25rem</span>;
                <span class="hljs-attribute">transition</span>: all .<span class="hljs-number">1s</span> ease-in-out;
              }
              <span class="hljs-selector-class">.form-label-group</span> <span class="hljs-selector-tag">input</span><span class="hljs-selector-pseudo">::-webkit-input-placeholder</span> {
                <span class="hljs-attribute">color</span>: transparent;
              }
              <span class="hljs-selector-class">.form-label-group</span> <span class="hljs-selector-tag">input</span><span class="hljs-selector-pseudo">:-ms-input-placeholder</span> {
                <span class="hljs-attribute">color</span>: transparent;
              }
              <span class="hljs-selector-class">.form-label-group</span> <span class="hljs-selector-tag">input</span><span class="hljs-selector-pseudo">::-ms-input-placeholder</span> {
                <span class="hljs-attribute">color</span>: transparent;
              }
              <span class="hljs-selector-class">.form-label-group</span> <span class="hljs-selector-tag">input</span><span class="hljs-selector-pseudo">::-moz-placeholder</span> {
                <span class="hljs-attribute">color</span>: transparent;
              }
              <span class="hljs-selector-class">.form-label-group</span> <span class="hljs-selector-tag">input</span><span class="hljs-selector-pseudo">::placeholder</span> {
                <span class="hljs-attribute">color</span>: transparent;
              }
              <span class="hljs-selector-class">.form-label-group</span> <span class="hljs-selector-tag">input</span><span class="hljs-selector-pseudo">:not(</span><span class="hljs-selector-pseudo">:placeholder-shown)</span> {
                <span class="hljs-attribute">padding-top</span>: <span class="hljs-built_in">calc</span>(var(--input-padding-y) + <span class="hljs-built_in">var</span>(--input-padding-y) * (<span class="hljs-number">2</span> / <span class="hljs-number">3</span>));
                <span class="hljs-attribute">padding-bottom</span>: <span class="hljs-built_in">calc</span>(var(--input-padding-y) / <span class="hljs-number">3</span>);
              }
              <span class="hljs-selector-class">.form-label-group</span> <span class="hljs-selector-tag">input</span><span class="hljs-selector-pseudo">:not(</span><span class="hljs-selector-pseudo">:placeholder-shown)</span> ~ <span class="hljs-selector-tag">label</span> {
                <span class="hljs-attribute">padding-top</span>: <span class="hljs-built_in">calc</span>(var(--input-padding-y) / <span class="hljs-number">3</span>);
                <span class="hljs-attribute">padding-bottom</span>: <span class="hljs-built_in">calc</span>(var(--input-padding-y) / <span class="hljs-number">3</span>);
                <span class="hljs-attribute">font-size</span>: <span class="hljs-number">12px</span>;
                <span class="hljs-attribute">color</span>: <span class="hljs-number">#777</span>;
              }
        </span><span class="hljs-tag"></<span class="hljs-name">style</span>></span>
      <span class="hljs-tag"></<span class="hljs-name">head</span>></span>
      <span class="hljs-tag"><<span class="hljs-name">body</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>></span>
          <span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-signin"</span>></span>
            <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-center mb-4"</span>></span>
              <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mb-4"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://thestore.gameops.com/v/vspfiles/photos/Tic-Tac-Go-14.gif"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">""</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"72"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"72"</span>></span>
              <span class="hljs-tag"><<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"h3 mb-3 font-weight-normal"</span>></span>TIC-TAC-TOE<span class="hljs-tag"></<span class="hljs-name">h1</span>></span>
              <span class="hljs-tag"><<span class="hljs-name">p</span>></span>PUT IN YOUR DETAILS TO PLAY<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
            <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
            <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-label-group"</span>></span>
                <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"name"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"inputUsername"</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">"username"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-control"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Username"</span> <span class="hljs-attr">required</span>=<span class="hljs-string">""</span> <span class="hljs-attr">autofocus</span>=<span class="hljs-string">""</span>></span>
                  <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"inputUsername"</span>></span>Username<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
            <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
            <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-label-group"</span>></span>
              <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"email"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"inputEmail"</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">"email"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-control"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Email address"</span> <span class="hljs-attr">autofocus</span>=<span class="hljs-string">""</span> <span class="hljs-attr">required</span>></span>
                <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">for</span>=<span class="hljs-string">"inputEmail"</span>></span>Email address<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
            <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
            <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-lg btn-primary btn-block"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"submit"</span> @<span class="hljs-attr">click.prevent</span>=<span class="hljs-string">"login"</span>></span>Connect<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
            <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mt-5 mb-3 text-muted text-center"</span>></span>© 2017-2018<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
          <span class="hljs-tag"></<span class="hljs-name">form</span>></span>
        <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/vue/dist/vue.js"</span>></span><span class="undefined"></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="javascript">
        <span class="hljs-keyword">var</span> app = <span class="hljs-keyword">new</span> Vue({
          <span class="hljs-attr">el</span>: <span class="hljs-string">'#app'</span>,
          <span class="hljs-attr">methods</span>: {
            <span class="hljs-attr">login</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
              <span class="hljs-keyword">let</span> username = <span class="hljs-keyword">this</span>.$refs.username.value
              <span class="hljs-keyword">let</span> email = <span class="hljs-keyword">this</span>.$refs.email.value
              <span class="hljs-built_in">window</span>.location.replace(<span class="hljs-string">`/play?username=<span class="hljs-subst">${username}</span>&email=<span class="hljs-subst">${email}</span>`</span>);
            }
          }
        })
        </span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
    <span class="hljs-tag"></<span class="hljs-name">body</span>></span>
<span class="hljs-tag"></<span class="hljs-name">html</span>></span>

When a player visits the connection page and puts in a username and email, the browser window will be redirected to the game view.

Let’s write the markup for the game view. Open the play.html file and paste the following code:

<span class="hljs-comment"></span>
<span class="hljs-meta"></span>
<span class="hljs-tag"><<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">head</span>></span>
  <span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"utf-8"</span>></span>
  <span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"viewport"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"width=device-width, initial-scale=1, shrink-to-fit=no"</span>></span>
  <span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"</span>></span>
  <span class="hljs-tag"><<span class="hljs-name">title</span>></span>TIC-TAC-TOE<span class="hljs-tag"></<span class="hljs-name">title</span>></span>
<span class="hljs-tag"></<span class="hljs-name">head</span>></span>
<span class="hljs-tag"><<span class="hljs-name">body</span>></span>
  <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container-fluid"</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container-fluid clearfix mb-3 shadow"</span>></span>
      <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"float-left my-3"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://thestore.gameops.com/v/vspfiles/photos/Tic-Tac-Go-14.gif"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"62px"</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"62px"</span>
      /></span>
      <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"float-right w-25 py-3"</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"my-3 mx-3 rounded-circle border"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"http://dfsanonymous.club/wp-content/uploads/2017/11/DFSAnonymous-NewLogo.png"</span>
          <span class="hljs-attr">height</span>=<span class="hljs-string">"62px"</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"62px"</span> /></span>
        <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"d-inline"</span>></span>  {{ username }}  <span class="hljs-tag"></<span class="hljs-name">p</span>></span>
      <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
    <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row mx-5"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"height: 50vh"</span>></span>
      <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-8 h-50 align-self-center"</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row border rounded invisible h-50 w-75 m-auto"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"font-size: 3.6rem"</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">"gameboard"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"playerAction"</span>></span>
          <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"h-100 pr-2 col border border-dark"</span> <span class="hljs-attr">data-id</span>=<span class="hljs-string">"1"</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">"1"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
          <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col pr-2 border border-dark"</span> <span class="hljs-attr">data-id</span>=<span class="hljs-string">"2"</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">"2"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
          <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col pr-2 border border-dark"</span> <span class="hljs-attr">data-id</span>=<span class="hljs-string">"3"</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">"3"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
          <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"w-100"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
          <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"h-100 pr-2 col border border-dark"</span> <span class="hljs-attr">data-id</span>=<span class="hljs-string">"4"</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">"4"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
          <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col pr-2 border border-dark"</span> <span class="hljs-attr">data-id</span>=<span class="hljs-string">"5"</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">"5"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
          <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col pr-2 border border-dark"</span> <span class="hljs-attr">data-id</span>=<span class="hljs-string">"6"</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">"6"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
          <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"w-100"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
          <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"h-100 pr-2 col border border-dark"</span> <span class="hljs-attr">data-id</span>=<span class="hljs-string">"7"</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">"7"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
          <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col pr-2 border border-dark"</span> <span class="hljs-attr">data-id</span>=<span class="hljs-string">"8"</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">"8"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
          <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col pr-2 border border-dark"</span> <span class="hljs-attr">data-id</span>=<span class="hljs-string">"9"</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">"9"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
        <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
      <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
      <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-4 pl-3"</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row h-100"</span>></span>
          <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col border h-75 text-center"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"background: rgb(114, 230, 147);"</span>></span>
            <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"my-3"</span>></span>  {{ players }}  online player(s) <span class="hljs-tag"></<span class="hljs-name">p</span>></span>
            <span class="hljs-tag"><<span class="hljs-name">hr</span>/></span>
            <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"m-auto py-3 text-dark"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"cursor: pointer;"</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"member in connectedPlayers"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"choosePlayer"</span>></span>
               {{ member }} 
            <span class="hljs-tag"></<span class="hljs-name">li</span>></span>
          <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
          <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"w-100"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
          <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col text-center py-3 border h-25"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"background: #b6c0ca; font-size: 1em; font-weight: bold"</span>></span>
             {{ status }} 
          <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
        <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
      <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
    <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
  <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
  <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/vue/dist/vue.js"</span>></span><span class="undefined"></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
  <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://js.pusher.com/4.2/pusher.min.js"</span>></span><span class="undefined"></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
  <span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="undefined">

  </span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"></<span class="hljs-name">body</span>></span>
<span class="hljs-tag"></<span class="hljs-name">html</span>></span>

The code above defines the layout of the game view but does not contain any interactivity or realtime features. In the scripts section, before the closing body tag, we included the Vue and Pusher libraries because they are required for the game to work.

Let’s include the JavaScript code that will drive the entire game process and define its logic.

In the same file, add the code below in between the script tag that is just before the closing body tag:

<span class="hljs-keyword">var</span> app = <span class="hljs-keyword">new</span> Vue({
  <span class="hljs-attr">el</span>: <span class="hljs-string">'#app'</span>,

  <span class="hljs-attr">data</span>: {
    <span class="hljs-attr">username</span>: <span class="hljs-string">''</span>,
    <span class="hljs-attr">players</span>: <span class="hljs-number">0</span>,
    <span class="hljs-attr">connectedPlayers</span>: [],
    <span class="hljs-attr">status</span>: <span class="hljs-string">''</span>,
    <span class="hljs-attr">pusher</span>: <span class="hljs-keyword">new</span> Pusher(<span class="hljs-string">'PUSHER_APP_KEY'</span>, {
      <span class="hljs-attr">authEndpoint</span>: <span class="hljs-string">'/pusher/auth'</span>,
      <span class="hljs-attr">cluster</span>: <span class="hljs-string">'PUSHER_APP_CLUSTER'</span>,
      <span class="hljs-attr">encrypted</span>: <span class="hljs-literal">true</span>
    }),
    <span class="hljs-attr">otherPlayerName</span>: <span class="hljs-string">''</span>,
    <span class="hljs-attr">mychannel</span>: {},
    <span class="hljs-attr">otherPlayerChannel</span>: {},
    <span class="hljs-attr">firstPlayer</span>: <span class="hljs-number">0</span>,
    <span class="hljs-attr">turn</span>: <span class="hljs-number">0</span>,
    <span class="hljs-attr">boxes</span>: [<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>]
  },

  created () {
    <span class="hljs-keyword">let</span> url = <span class="hljs-keyword">new</span> URL(<span class="hljs-built_in">window</span>.location.href);
    <span class="hljs-keyword">let</span> name = url.searchParams.get(<span class="hljs-string">"username"</span>);

    <span class="hljs-keyword">if</span> (name) {
      <span class="hljs-keyword">this</span>.username = name
      <span class="hljs-keyword">this</span>.subscribe();
      <span class="hljs-keyword">this</span>.listeners();
    } <span class="hljs-keyword">else</span> {
      <span class="hljs-keyword">this</span>.username = <span class="hljs-keyword">this</span>.generateRandomName();
      location.assign(<span class="hljs-string">"/play?username="</span> + <span class="hljs-keyword">this</span>.username);
    }
  },

  <span class="hljs-attr">methods</span>: {
    <span class="hljs-comment">// We will add methods here</span>
  }
});

Replace the PUSHER_APP_* keys with the keys on your Pusher dashboard.

Above, we create a new instance of Vue and we target the #app selector. We define all the defaults in the data object and then in the create() function which is called automatically when the Vue component is created, we check for a user and assign the user to the username if one was supplied.

We also make calls to the subscribe and listeners methods. Let’s define those inside the methods object. Inside the methods object, paste the following functions:

<span class="hljs-comment">// [...]</span>

subscribe: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
  <span class="hljs-keyword">let</span> channel = <span class="hljs-keyword">this</span>.pusher.subscribe(<span class="hljs-string">'presence-channel'</span>);
  <span class="hljs-keyword">this</span>.myChannel = <span class="hljs-keyword">this</span>.pusher.subscribe(<span class="hljs-string">'private-'</span> + <span class="hljs-keyword">this</span>.username)

  channel.bind(<span class="hljs-string">'pusher:subscription_succeeded'</span>, (player) => {
    <span class="hljs-keyword">this</span>.players = player.count - <span class="hljs-number">1</span>
    player.each(<span class="hljs-function">(<span class="hljs-params">player</span>) =></span> {
      <span class="hljs-keyword">if</span> (player.id != <span class="hljs-keyword">this</span>.username)
        <span class="hljs-keyword">this</span>.connectedPlayers.push(player.id)
    });
  });

  channel.bind(<span class="hljs-string">'pusher:member_added'</span>, (player) => {
    <span class="hljs-keyword">this</span>.players++;
    <span class="hljs-keyword">this</span>.connectedPlayers.push(player.id)
  });

  channel.bind(<span class="hljs-string">'pusher:member_removed'</span>, (player) => {
    <span class="hljs-keyword">this</span>.players--;
    <span class="hljs-keyword">var</span> index = <span class="hljs-keyword">this</span>.connectedPlayers.indexOf(player.id);
    <span class="hljs-keyword">if</span> (index > <span class="hljs-number">-1</span>) {
      <span class="hljs-keyword">this</span>.connectedPlayers.splice(index, <span class="hljs-number">1</span>)
    }
  });
},

<span class="hljs-attr">listeners</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
  <span class="hljs-keyword">this</span>.pusher.bind(<span class="hljs-string">'client-'</span> + <span class="hljs-keyword">this</span>.username, (message) => {
    <span class="hljs-keyword">if</span> (confirm(<span class="hljs-string">'Do you want to start a game of Tic Tac Toe with '</span> + message)) {
      <span class="hljs-keyword">this</span>.otherPlayerName = message
      <span class="hljs-keyword">this</span>.otherPlayerChannel = <span class="hljs-keyword">this</span>.pusher.subscribe(<span class="hljs-string">'private-'</span> + <span class="hljs-keyword">this</span>.otherPlayerName)
      <span class="hljs-keyword">this</span>.otherPlayerChannel.bind(<span class="hljs-string">'pusher:subscription_succeeded'</span>, () => {
        <span class="hljs-keyword">this</span>.otherPlayerChannel.trigger(<span class="hljs-string">'client-game-started'</span>, <span class="hljs-keyword">this</span>.username)
      })
      <span class="hljs-keyword">this</span>.startGame(message)
    } <span class="hljs-keyword">else</span> {
      <span class="hljs-keyword">this</span>.otherPlayerChannel = <span class="hljs-keyword">this</span>.pusher.subscribe(<span class="hljs-string">'private-'</span> + message)
      <span class="hljs-keyword">this</span>.otherPlayerChannel.bind(<span class="hljs-string">'pusher:subscription_succeeded'</span>, () => {
        <span class="hljs-keyword">this</span>.otherPlayerChannel.trigger(<span class="hljs-string">'client-game-declined'</span>, <span class="hljs-string">""</span>)
      })
      <span class="hljs-keyword">this</span>.gameDeclined()
    }
  }),

  <span class="hljs-keyword">this</span>.myChannel.bind(<span class="hljs-string">'client-game-started'</span>, (message) => {
    <span class="hljs-keyword">this</span>.status = <span class="hljs-string">"Game started with "</span> + message
    <span class="hljs-keyword">this</span>.$refs.gameboard.classList.remove(<span class="hljs-string">'invisible'</span>);
    <span class="hljs-keyword">this</span>.firstPlayer = <span class="hljs-number">1</span>;
    <span class="hljs-keyword">this</span>.turn = <span class="hljs-number">1</span>;
  })

  <span class="hljs-keyword">this</span>.myChannel.bind(<span class="hljs-string">'client-game-declined'</span>, () => {
    <span class="hljs-keyword">this</span>.status = <span class="hljs-string">"Game declined"</span>
  })

  <span class="hljs-keyword">this</span>.myChannel.bind(<span class="hljs-string">'client-new-move'</span>, (position) => {
    <span class="hljs-keyword">this</span>.$refs[position].innerText = <span class="hljs-keyword">this</span>.firstPlayer ? <span class="hljs-string">'O'</span> : <span class="hljs-string">'X'</span>
  })

  <span class="hljs-keyword">this</span>.myChannel.bind(<span class="hljs-string">'client-your-turn'</span>, () => {
    <span class="hljs-keyword">this</span>.turn = <span class="hljs-number">1</span>;
  })

  <span class="hljs-keyword">this</span>.myChannel.bind(<span class="hljs-string">'client-box-update'</span>, (update) => {
    <span class="hljs-keyword">this</span>.boxes = update;
  })

  <span class="hljs-keyword">this</span>.myChannel.bind(<span class="hljs-string">'client-you-lost'</span>, () => {
    <span class="hljs-keyword">this</span>.gameLost();
  })
},

<span class="hljs-comment">// [...]</span>

In the subscribe method, we subscribe to our Pusher presence channel, and then subscribe to the private channel for the current user. In the listeners method we register the listeners for all the events we are expecting to be triggered on the private channel we subscribed to.

Next, we will add other helper methods to our methods class. Inside the methods class, add the following functions to the bottom after the listeners method:

<span class="hljs-comment">// Generates a random string we use as a name for a guest user</span>
generateRandomName: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
  <span class="hljs-keyword">let</span> text = <span class="hljs-string">''</span>;
  <span class="hljs-keyword">let</span> possible = <span class="hljs-string">'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'</span>;
  <span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>; i < <span class="hljs-number">6</span>; i++) {
    text += possible.charAt(<span class="hljs-built_in">Math</span>.floor(<span class="hljs-built_in">Math</span>.random() * possible.length));
  }
  <span class="hljs-keyword">return</span> text;
},

<span class="hljs-comment">// Lets you choose a player to play as.</span>
choosePlayer: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">e</span>) </span>{
  <span class="hljs-keyword">this</span>.otherPlayerName = e.target.innerText
  <span class="hljs-keyword">this</span>.otherPlayerChannel = <span class="hljs-keyword">this</span>.pusher.subscribe(<span class="hljs-string">'private-'</span> + <span class="hljs-keyword">this</span>.otherPlayerName)
  <span class="hljs-keyword">this</span>.otherPlayerChannel.bind(<span class="hljs-string">'pusher:subscription_succeeded'</span>, () => {
    <span class="hljs-keyword">this</span>.otherPlayerChannel.trigger(<span class="hljs-string">'client-'</span> + <span class="hljs-keyword">this</span>.otherPlayerName, <span class="hljs-keyword">this</span>.username)
  });
},

<span class="hljs-comment">// Begins the game</span>
startGame: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">name</span>) </span>{
  <span class="hljs-keyword">this</span>.status = <span class="hljs-string">"Game started with "</span> + name
  <span class="hljs-keyword">this</span>.$refs.gameboard.classList.remove(<span class="hljs-string">'invisible'</span>);
},

<span class="hljs-comment">// User declined to play</span>
gameDeclined: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
  <span class="hljs-keyword">this</span>.status = <span class="hljs-string">"Game declined"</span>
},

<span class="hljs-comment">// Game has ended with current user winning</span>
gameWon: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
  <span class="hljs-keyword">this</span>.status = <span class="hljs-string">"You WON!"</span>
  <span class="hljs-keyword">this</span>.$refs.gameboard.classList.add(<span class="hljs-string">'invisible'</span>);
  <span class="hljs-keyword">this</span>.restartGame()
},

<span class="hljs-comment">// Game has ended with current user losing</span>
gameLost: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
  <span class="hljs-keyword">this</span>.turn = <span class="hljs-number">1</span>;
  <span class="hljs-keyword">this</span>.boxes = [<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>]
  <span class="hljs-keyword">this</span>.status = <span class="hljs-string">"You LOST!"</span>
  <span class="hljs-keyword">this</span>.$refs.gameboard.classList.add(<span class="hljs-string">'invisible'</span>);
  <span class="hljs-keyword">this</span>.restartGame()
},

<span class="hljs-comment">// Restarts a game</span>
restartGame: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
  <span class="hljs-keyword">for</span> (i = <span class="hljs-number">1</span>; i < <span class="hljs-number">10</span>; i++) {
    <span class="hljs-keyword">this</span>.$refs[i].innerText = <span class="hljs-string">""</span>
  }
  <span class="hljs-keyword">this</span>.$refs.gameboard.classList.remove(<span class="hljs-string">'invisible'</span>);
},

<span class="hljs-comment">// Checks tiles to see if the tiles passed are a match</span>
compare: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
  <span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> i = <span class="hljs-number">1</span>; i < <span class="hljs-built_in">arguments</span>.length; i++) {
    <span class="hljs-keyword">if</span> (<span class="hljs-built_in">arguments</span>[i] === <span class="hljs-number">0</span> || <span class="hljs-built_in">arguments</span>[i] !== <span class="hljs-built_in">arguments</span>[i - <span class="hljs-number">1</span>]) {
      <span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>
    }
  }

  <span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>;
},

<span class="hljs-comment">// Checks the tiles and returns true if theres a winning play</span>
theresAMatch: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
  <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>.compare(<span class="hljs-keyword">this</span>.boxes[<span class="hljs-number">0</span>], <span class="hljs-keyword">this</span>.boxes[<span class="hljs-number">1</span>], <span class="hljs-keyword">this</span>.boxes[<span class="hljs-number">2</span>]) ||
    <span class="hljs-keyword">this</span>.compare(<span class="hljs-keyword">this</span>.boxes[<span class="hljs-number">3</span>], <span class="hljs-keyword">this</span>.boxes[<span class="hljs-number">4</span>], <span class="hljs-keyword">this</span>.boxes[<span class="hljs-number">5</span>]) ||
    <span class="hljs-keyword">this</span>.compare(<span class="hljs-keyword">this</span>.boxes[<span class="hljs-number">6</span>], <span class="hljs-keyword">this</span>.boxes[<span class="hljs-number">7</span>], <span class="hljs-keyword">this</span>.boxes[<span class="hljs-number">8</span>]) ||
    <span class="hljs-keyword">this</span>.compare(<span class="hljs-keyword">this</span>.boxes[<span class="hljs-number">0</span>], <span class="hljs-keyword">this</span>.boxes[<span class="hljs-number">3</span>], <span class="hljs-keyword">this</span>.boxes[<span class="hljs-number">6</span>]) ||
    <span class="hljs-keyword">this</span>.compare(<span class="hljs-keyword">this</span>.boxes[<span class="hljs-number">1</span>], <span class="hljs-keyword">this</span>.boxes[<span class="hljs-number">4</span>], <span class="hljs-keyword">this</span>.boxes[<span class="hljs-number">7</span>]) ||
    <span class="hljs-keyword">this</span>.compare(<span class="hljs-keyword">this</span>.boxes[<span class="hljs-number">2</span>], <span class="hljs-keyword">this</span>.boxes[<span class="hljs-number">5</span>], <span class="hljs-keyword">this</span>.boxes[<span class="hljs-number">8</span>]) ||
    <span class="hljs-keyword">this</span>.compare(<span class="hljs-keyword">this</span>.boxes[<span class="hljs-number">2</span>], <span class="hljs-keyword">this</span>.boxes[<span class="hljs-number">4</span>], <span class="hljs-keyword">this</span>.boxes[<span class="hljs-number">6</span>]) ||
    <span class="hljs-keyword">this</span>.compare(<span class="hljs-keyword">this</span>.boxes[<span class="hljs-number">0</span>], <span class="hljs-keyword">this</span>.boxes[<span class="hljs-number">4</span>], <span class="hljs-keyword">this</span>.boxes[<span class="hljs-number">8</span>])
},

<span class="hljs-comment">// Checks to see if the play was a winning play</span>
playerAction: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">e</span>) </span>{
  <span class="hljs-keyword">let</span> index = e.target.dataset.id - <span class="hljs-number">1</span>
  <span class="hljs-keyword">let</span> tile = <span class="hljs-keyword">this</span>.firstPlayer ? <span class="hljs-string">'X'</span> : <span class="hljs-string">'O'</span>

  <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.turn && <span class="hljs-keyword">this</span>.boxes[index] == <span class="hljs-number">0</span>) {
    <span class="hljs-keyword">this</span>.turn = <span class="hljs-number">0</span>
    <span class="hljs-keyword">this</span>.boxes[index] = tile
    e.target.innerText = tile

    <span class="hljs-keyword">this</span>.otherPlayerChannel.trigger(<span class="hljs-string">'client-your-turn'</span>, <span class="hljs-string">""</span>)
    <span class="hljs-keyword">this</span>.otherPlayerChannel.trigger(<span class="hljs-string">'client-box-update'</span>, <span class="hljs-keyword">this</span>.boxes)
    <span class="hljs-keyword">this</span>.otherPlayerChannel.trigger(<span class="hljs-string">'client-new-move'</span>, e.target.dataset.id)

    <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.theresAMatch()) {
      <span class="hljs-keyword">this</span>.gameWon()
      <span class="hljs-keyword">this</span>.boxes = [<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>]
      <span class="hljs-keyword">this</span>.otherPlayerChannel.trigger(<span class="hljs-string">'client-you-lost'</span>, <span class="hljs-string">''</span>)
    }
  }
},

Above, we have added several helper methods that the game needs to function properly and before each method, we have added a comment to show what the method does.

Let’s test the game now.

Testing the game

We can test the game by running this command:

$ flask run

Now if we visit localhost:5000, we should see the connection page and test the game:

Conclusion

In this tutorial, we have learned how to leverage the Pusher SDK in creating an online multiplayer game powered by a Python backend server.

The source code for this tutorial is available on GitHub

This post first appeared on the Pusher blog.

Build an Android messenger app with online presence using Kotlin

Neo — Tue, 20 Nov 2018 06:46:57 +0000

You will need Android Studio 3+, Node, npm and MongoDB installed on your machine. Some familiarity with Android development is required.

When building a chat application, it is essential to have an online presence feature. It is essential because your users will like to know when their friends are online and are more likely to respond to their messages.

In this article, we will be building a messenger app with online presence using Pusher Channels, Kotlin and Node.js.

Here is a demo of what we will build:

Prerequisites

To follow along you need the following requirements:

A Pusher Channel app. You can create one here.
Android Studio installed on your machine. You can check here for the latest stable version. A minimum of version 3.0 is recommended.
Basic knowledge of Android development and the Android Studio IDE.
Basic knowledge of Kotlin. Here are the official docs.
Node.js and NPM (Node Package Manager) installed on your machine. Download here.
Mongo DB installed on your machine. You can install it following the instructions here.

Building the backend server

Our server will be built using Node.js. To start, create a new project directory:

    $ mkdir backend-server

Next, create a new index.js file inside the project directory and paste the following code:

    <span class="hljs-comment">// File: ./index.js</span>
    <span class="hljs-keyword">var</span> express = <span class="hljs-built_in">require</span>(<span class="hljs-string">'express'</span>);
    <span class="hljs-keyword">var</span> bodyParser = <span class="hljs-built_in">require</span>(<span class="hljs-string">'body-parser'</span>);
    <span class="hljs-keyword">const</span> mongoose = <span class="hljs-built_in">require</span>(<span class="hljs-string">'mongoose'</span>);
    <span class="hljs-keyword">var</span> Pusher = <span class="hljs-built_in">require</span>(<span class="hljs-string">'pusher'</span>);

    <span class="hljs-keyword">var</span> app = express();

    app.use(bodyParser.json());
    app.use(bodyParser.urlencoded({ <span class="hljs-attr">extended</span>: <span class="hljs-literal">false</span> }));

    <span class="hljs-keyword">var</span> pusher = <span class="hljs-keyword">new</span> Pusher({
      <span class="hljs-attr">appId</span>: <span class="hljs-string">'PUSHER_APP_ID'</span>,
      <span class="hljs-attr">key</span>: <span class="hljs-string">'PUSHER_APP_KEY'</span>,
      <span class="hljs-attr">secret</span>: <span class="hljs-string">'PUSHER_APP_SECRET'</span>,
      <span class="hljs-attr">cluster</span>: <span class="hljs-string">'PUSHER_APP_CLUSTER'</span>
    });

    mongoose.connect(<span class="hljs-string">'mongodb://127.0.0.1/db'</span>);

    <span class="hljs-keyword">const</span> Schema = mongoose.Schema;
    <span class="hljs-keyword">const</span> userSchema = <span class="hljs-keyword">new</span> Schema({
        <span class="hljs-attr">name</span>: { <span class="hljs-attr">type</span>: <span class="hljs-built_in">String</span>, <span class="hljs-attr">required</span>: <span class="hljs-literal">true</span>, },
        <span class="hljs-attr">count</span>: {<span class="hljs-attr">type</span>: <span class="hljs-built_in">Number</span>}
    });

    <span class="hljs-keyword">var</span> User = mongoose.model(<span class="hljs-string">'User'</span>, userSchema);
    userSchema.pre(<span class="hljs-string">'save'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">next</span>) </span>{
        <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.isNew) {
            User.count().then(<span class="hljs-function"><span class="hljs-params">res</span> =></span> {
              <span class="hljs-keyword">this</span>.count = res; <span class="hljs-comment">// Increment count</span>
              next();
            });
          } <span class="hljs-keyword">else</span> {
            next();
          }
    });

    <span class="hljs-built_in">module</span>.exports = User;

    <span class="hljs-keyword">var</span> currentUser;

    <span class="hljs-comment">/* 
    =================================
    We will add our endpoints here!!!
    =================================
    */</span>

    <span class="hljs-keyword">var</span> port = process.env.PORT || <span class="hljs-number">5000</span>;

    app.listen(port);

In the snippet above, we initialized Pusher, Express, and MongoDB. We are using Moongose to connect to our MongoDB instance.

Replace the PUSHER_APP_* keys with the ones on your Pusher dashboard.

Now let’s add our endpoints. The first endpoint we will add will be to log a user in. Paste the code below in your index.js file below the currentUser declaration:

    <span class="hljs-comment">// File: ./index.js</span>

    <span class="hljs-comment">// [...]</span>

    app.post(<span class="hljs-string">'/login'</span>, (req,res) => {
        User.findOne({<span class="hljs-attr">name</span>: req.body.name}, (err, user) => {
            <span class="hljs-keyword">if</span> (err) {
                res.send(<span class="hljs-string">"Error connecting to database"</span>);
            }

            <span class="hljs-comment">// User exists</span>
            <span class="hljs-keyword">if</span> (user) {
                currentUser = user;
                <span class="hljs-keyword">return</span> res.status(<span class="hljs-number">200</span>).send(user)
            }

            <span class="hljs-keyword">let</span> newuser = <span class="hljs-keyword">new</span> User({<span class="hljs-attr">name</span>: req.body.name});

            newuser.save(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">err</span>) </span>{
                <span class="hljs-keyword">if</span> (err) <span class="hljs-keyword">throw</span> err;
            });

            currentUser = newuser;
            res.status(<span class="hljs-number">200</span>).send(newuser)
        });
    })

    <span class="hljs-comment">// [...]</span>

This endpoint receives a username with the request, and either create a new user or returns the data of the existing user.

Let’s add the next endpoint below the one above:

    <span class="hljs-comment">// File: ./index.js</span>

    <span class="hljs-comment">// [...]</span>

    app.get(<span class="hljs-string">'/users'</span>, (req,res) => {
        User.find({}, (err, users) => {
            <span class="hljs-keyword">if</span> (err) <span class="hljs-keyword">throw</span> err;
            res.send(users);
        });
    })

    <span class="hljs-comment">// [...]</span>

This endpoint above fetches all the users from the database and returns them.

Since we will be using a Pusher presence channel, we need an endpoint to authenticate the user. In the same file, paste this code below the endpoint above:

    <span class="hljs-comment">// File: ./index.js</span>

    <span class="hljs-comment">// [...]</span>

    app.post(<span class="hljs-string">'/pusher/auth/presence'</span>, (req, res) => {
        <span class="hljs-keyword">let</span> socketId = req.body.socket_id;
        <span class="hljs-keyword">let</span> channel = req.body.channel_name;

        <span class="hljs-keyword">let</span> presenceData = {
            <span class="hljs-attr">user_id</span>: currentUser._id,
            <span class="hljs-attr">user_info</span>: {<span class="hljs-attr">count</span>: currentUser.count, <span class="hljs-attr">name</span>: currentUser.name}
        };

        <span class="hljs-keyword">let</span> auth = pusher.authenticate(socketId, channel, presenceData);

        res.send(auth);
    });

    <span class="hljs-comment">// [...]</span>

Since we are going to be using private channels, we need an endpoint for authentication. Add the following endpoint below the endpoint above:

    <span class="hljs-comment">// File: ./index.js</span>

    <span class="hljs-comment">// [...]</span>

    app.post(<span class="hljs-string">'/pusher/auth/private'</span>, (req, res) => {
        res.send(pusher.authenticate(req.body.socket_id, req.body.channel_name));
    });

    <span class="hljs-comment">// [...]</span>

Finally, the last endpoint will be to trigger an event <span class="hljs-string">`new-message`</span> to a channel. Add the endpoint below the last one:


    <span class="hljs-comment">// File: ./index.js</span>

    <span class="hljs-comment">// [...]</span>

    app.post(<span class="hljs-string">'/send-message'</span>, (req, res) => {
        <span class="hljs-keyword">let</span> payload = {<span class="hljs-attr">message</span>: req.body.message, <span class="hljs-attr">sender_id</span>: req.body.sender_id}
        pusher.trigger(req.body.channel_name, <span class="hljs-string">'new-message'</span>, payload);
        res.send(<span class="hljs-number">200</span>);
    });

    <span class="hljs-comment">// [...]</span>

After adding all the endpoints, install the necessary NPM packages by running this command:

    $ npm install express body-parser mongoose pusher

Before you run your application, make sure MongoDB is running already using this command:

    $ mongod --dbpath C:\MongoDB\data\db # Windows
    $ mongod --dbpath=/path/to/db/directory # Mac or Linux

Now you can run your application using the command below:

    $ node index.js

Your app will be available here: http://localhost:5000.

Building our Android application

Create your Android project. In the wizard, enter your project name, let’s say MessengerApp. Next, enter your package name. You can use a minimum SDK of 19 then choose an Empty Activity. On the next page, change the Activity Name to LoginActivity. After this, Android Studio will build your project for you.

Now that we have the project, let’s add the required dependencies for our app. Open your app module build.gradle file and add these:

    // File ../app/build.gradle
    dependencies {
      // [...]

      implementation 'com.android.support:design:28+'
      implementation 'com.pusher:pusher-java-client:1.6.0'
      implementation "com.squareup.retrofit2:retrofit:2.4.0"
      implementation "com.squareup.retrofit2:converter-scalars:2.4.0"
      implementation 'com.squareup.retrofit2:converter-gson:2.3.0'
    }

Notably, we added the dependencies for Retrofit and Pusher. Retrofit is an HTTP client library used for network calls. We added the design library dependency too as we want to use some classes from it. Sync your gradle files to pull in the dependencies.

Next, let’s prepare our app to make network calls. Retrofit requires an interface to know the endpoints to be accessed.

Create a new interface named ApiService and paste this:

    <span class="hljs-comment">// File: ./app/src/main/java/com/example/messengerapp/ApiService.kt</span>
    <span class="hljs-keyword">import</span> okhttp3.RequestBody
    <span class="hljs-keyword">import</span> retrofit2.Call
    <span class="hljs-keyword">import</span> retrofit2.http.Body
    <span class="hljs-keyword">import</span> retrofit2.http.GET
    <span class="hljs-keyword">import</span> retrofit2.http.POST

    <span class="hljs-class"><span class="hljs-keyword">interface</span> <span class="hljs-title">ApiService</span> </span>{

      <span class="hljs-meta">@POST(<span class="hljs-meta-string">"/login"</span>)</span>
      <span class="hljs-function"><span class="hljs-keyword">fun</span> <span class="hljs-title">login</span><span class="hljs-params">(<span class="hljs-meta">@Body</span> body:<span class="hljs-type">RequestBody</span>)</span></span>: Call<UserModel>

      <span class="hljs-meta">@POST(<span class="hljs-meta-string">"/send-message"</span>)</span>
      <span class="hljs-function"><span class="hljs-keyword">fun</span> <span class="hljs-title">sendMessage</span><span class="hljs-params">(<span class="hljs-meta">@Body</span> body:<span class="hljs-type">RequestBody</span>)</span></span>: Call<String>

      <span class="hljs-meta">@GET(<span class="hljs-meta-string">"/users"</span>)</span>
      <span class="hljs-function"><span class="hljs-keyword">fun</span> <span class="hljs-title">getUsers</span><span class="hljs-params">()</span></span>: Call<List<UserModel>>
    }

Here, we have declared three endpoints. They are for logging in, sending messages and fetching users. Notice that in some of our responses, we return Call<UserModel>. Let’s create the UserModel. Create a new class called UserModel and paste the following:

    <span class="hljs-comment">// File: ./app/src/main/java/com/example/messengerapp/UserModel.kt</span>
    <span class="hljs-keyword">import</span> com.google.gson.annotations.Expose
    <span class="hljs-keyword">import</span> com.google.gson.annotations.SerializedName

    <span class="hljs-keyword">data</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">UserModel</span></span>(<span class="hljs-meta">@SerializedName(<span class="hljs-meta-string">"_id"</span>)</span> <span class="hljs-meta">@Expose</span> <span class="hljs-keyword">var</span> id: String,
                         <span class="hljs-meta">@SerializedName(<span class="hljs-meta-string">"name"</span>)</span> <span class="hljs-meta">@Expose</span> <span class="hljs-keyword">var</span> name: String,
                         <span class="hljs-meta">@SerializedName(<span class="hljs-meta-string">"count"</span>)</span> <span class="hljs-meta">@Expose</span> <span class="hljs-keyword">var</span> count: <span class="hljs-built_in">Int</span>,
                         <span class="hljs-keyword">var</span> online:<span class="hljs-built_in">Boolean</span> = <span class="hljs-literal">false</span>)

Above, we used a data class so that some other functions required for model classes such as toString, hashCode are added to the class by default.

We are expecting only the values for the id and name from the server. We added the online property so we can update later on.

Next, create a new class named RetrofitInstance and paste the following code:

    <span class="hljs-comment">// File: ./app/src/main/java/com/example/messengerapp/RetrofitInstance.kt</span>
    <span class="hljs-keyword">import</span> okhttp3.OkHttpClient
    <span class="hljs-keyword">import</span> retrofit2.Retrofit
    <span class="hljs-keyword">import</span> retrofit2.converter.gson.GsonConverterFactory
    <span class="hljs-keyword">import</span> retrofit2.converter.scalars.ScalarsConverterFactory

    <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">RetrofitInstance</span> </span>{

      <span class="hljs-keyword">companion</span> <span class="hljs-keyword">object</span> {
        <span class="hljs-keyword">val</span> retrofit: ApiService <span class="hljs-keyword">by</span> lazy {
          <span class="hljs-keyword">val</span> httpClient = OkHttpClient.Builder()
          <span class="hljs-keyword">val</span> builder = Retrofit.Builder()
              .baseUrl(<span class="hljs-string">"http://10.0.2.2:5000/"</span>)
              .addConverterFactory(ScalarsConverterFactory.create())
              .addConverterFactory(GsonConverterFactory.create())

          <span class="hljs-keyword">val</span> retrofit = builder
              .client(httpClient.build())
              .build()
          retrofit.create(ApiService::<span class="hljs-class"><span class="hljs-keyword">class</span>.<span class="hljs-title">java</span>)</span>
        }
      }
    }

This class contains a class variable called retrofit. It provides us with an instance for Retrofit that we will reference in more than one class.

Finally, to request for the internet access permission update the AndroidManifest.xml file like so:

    <span class="hljs-comment">// File: ./app/src/main/ApiService.kt</span>
    <manifest xmlns:android=<span class="hljs-string">"http://schemas.android.com/apk/res/android"</span>
      <span class="hljs-keyword">package</span>=<span class="hljs-string">"com.example.messengerapp"</span>>

      <uses-permission android:name=<span class="hljs-string">"android.permission.INTERNET"</span> />
      [...]

    </manifest>

Now we can make requests using Retrofit.

The next feature we will implement is login. Open the already created LoginActivity layout file activity_login.xml file and paste this:

    // File: ./app/src/main/res/layout/activity_login.xml
    <span class="hljs-meta"><?xml version="1.0" encoding="utf-8"?></span>
    <span class="hljs-tag"><<span class="hljs-name">android.support.constraint.ConstraintLayout</span> <span class="hljs-attr">xmlns:android</span>=<span class="hljs-string">"http://schemas.android.com/apk/res/android"</span>
      <span class="hljs-attr">xmlns:app</span>=<span class="hljs-string">"http://schemas.android.com/apk/res-auto"</span>
      <span class="hljs-attr">xmlns:tools</span>=<span class="hljs-string">"http://schemas.android.com/tools"</span>
      <span class="hljs-attr">android:layout_width</span>=<span class="hljs-string">"match_parent"</span>
      <span class="hljs-attr">android:layout_height</span>=<span class="hljs-string">"match_parent"</span>
      <span class="hljs-attr">android:layout_margin</span>=<span class="hljs-string">"20dp"</span>
      <span class="hljs-attr">tools:context</span>=<span class="hljs-string">".LoginActivity"</span>></span>

      <span class="hljs-tag"><<span class="hljs-name">EditText</span>
        <span class="hljs-attr">android:id</span>=<span class="hljs-string">"@+id/editTextUsername"</span>
        <span class="hljs-attr">android:layout_width</span>=<span class="hljs-string">"match_parent"</span>
        <span class="hljs-attr">android:layout_height</span>=<span class="hljs-string">"wrap_content"</span>
        <span class="hljs-attr">app:layout_constraintBottom_toBottomOf</span>=<span class="hljs-string">"parent"</span>
        <span class="hljs-attr">app:layout_constraintLeft_toLeftOf</span>=<span class="hljs-string">"parent"</span>
        <span class="hljs-attr">app:layout_constraintRight_toRightOf</span>=<span class="hljs-string">"parent"</span>
        <span class="hljs-attr">app:layout_constraintTop_toTopOf</span>=<span class="hljs-string">"parent"</span> /></span>

      <span class="hljs-tag"><<span class="hljs-name">Button</span>
        <span class="hljs-attr">android:id</span>=<span class="hljs-string">"@+id/loginButton"</span>
        <span class="hljs-attr">android:layout_width</span>=<span class="hljs-string">"match_parent"</span>
        <span class="hljs-attr">android:layout_height</span>=<span class="hljs-string">"wrap_content"</span>
        <span class="hljs-attr">android:text</span>=<span class="hljs-string">"Login"</span>
        <span class="hljs-attr">app:layout_constraintTop_toBottomOf</span>=<span class="hljs-string">"@+id/editTextUsername"</span> /></span>

    <span class="hljs-tag"></<span class="hljs-name">android.support.constraint.ConstraintLayout</span>></span>

This layout contains an input field to take the username and a button to make a login request.

Next, open the LoginActivity.Kt file and paste this:

    <span class="hljs-comment">// File: ./app/src/main/java/com/example/messengerapp/LoginActivity.kt</span>
    <span class="hljs-keyword">import</span> android.content.Intent
    <span class="hljs-keyword">import</span> android.os.Bundle
    <span class="hljs-keyword">import</span> android.support.v7.app.AppCompatActivity
    <span class="hljs-keyword">import</span> android.util.Log
    <span class="hljs-keyword">import</span> kotlinx.android.synthetic.main.activity_login.*
    <span class="hljs-keyword">import</span> okhttp3.MediaType
    <span class="hljs-keyword">import</span> okhttp3.RequestBody
    <span class="hljs-keyword">import</span> org.json.JSONObject
    <span class="hljs-keyword">import</span> retrofit2.Call
    <span class="hljs-keyword">import</span> retrofit2.Callback
    <span class="hljs-keyword">import</span> retrofit2.Response

    <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">LoginActivity</span> : <span class="hljs-type">AppCompatActivity</span></span>() {

      <span class="hljs-keyword">override</span> <span class="hljs-function"><span class="hljs-keyword">fun</span> <span class="hljs-title">onCreate</span><span class="hljs-params">(savedInstanceState: <span class="hljs-type">Bundle</span>?)</span></span> {
        <span class="hljs-keyword">super</span>.onCreate(savedInstanceState)
        setContentView(R.layout.activity_login)
        loginButton.setOnClickListener {
          <span class="hljs-keyword">if</span> (editTextUsername.text.isNotEmpty()) {
            loginFunction(editTextUsername.text.toString())
          }
        }
      }

      <span class="hljs-keyword">private</span> <span class="hljs-function"><span class="hljs-keyword">fun</span> <span class="hljs-title">loginFunction</span><span class="hljs-params">(name:<span class="hljs-type">String</span>)</span></span> {
        <span class="hljs-keyword">val</span> jsonObject = JSONObject()
        jsonObject.put(<span class="hljs-string">"name"</span>, name)

        <span class="hljs-keyword">val</span> jsonBody = RequestBody.create(
            MediaType.parse(<span class="hljs-string">"application/json; charset=utf-8"</span>), 
            jsonObject.toString()
        )

        RetrofitInstance.retrofit.login(jsonBody).enqueue(<span class="hljs-keyword">object</span>:Callback<UserModel> {
          <span class="hljs-keyword">override</span> <span class="hljs-function"><span class="hljs-keyword">fun</span> <span class="hljs-title">onFailure</span><span class="hljs-params">(call: <span class="hljs-type">Call</span><<span class="hljs-type">UserModel</span>>?, t: <span class="hljs-type">Throwable</span>?)</span></span> {
            Log.i(<span class="hljs-string">"LoginActivity"</span>,t!!.localizedMessage)
          }

          <span class="hljs-keyword">override</span> <span class="hljs-function"><span class="hljs-keyword">fun</span> <span class="hljs-title">onResponse</span><span class="hljs-params">(call: <span class="hljs-type">Call</span><<span class="hljs-type">UserModel</span>>?, response: <span class="hljs-type">Response</span><<span class="hljs-type">UserModel</span>>?)</span></span> {
            <span class="hljs-keyword">if</span> (response!!.code() == <span class="hljs-number">200</span>) {
              Singleton.getInstance().currentUser = response.body()!!
              startActivity(Intent(<span class="hljs-keyword">this</span><span class="hljs-symbol">@LoginActivity</span>,ContactListActivity::<span class="hljs-class"><span class="hljs-keyword">class</span>.<span class="hljs-title">java</span>))</span>
              finish()
            }
          }
        })
      }
    }

In the file, we set up a listener for our login button so that when it is clicked, we can send the text to the server for authentication. We also stored the logged in user in a singleton class so that we can access the user’s details later.

Create a new class called Singleton and paste this:

    <span class="hljs-comment">// File: ./app/src/main/java/com/example/messengerapp/RetrofitInstance.kt</span>
    <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Singleton</span> </span>{
      <span class="hljs-keyword">companion</span> <span class="hljs-keyword">object</span> {
        <span class="hljs-keyword">private</span> <span class="hljs-keyword">val</span> ourInstance = Singleton()
        <span class="hljs-function"><span class="hljs-keyword">fun</span> <span class="hljs-title">getInstance</span><span class="hljs-params">()</span></span>: Singleton {
          <span class="hljs-keyword">return</span> ourInstance
        }
      }
      <span class="hljs-keyword">lateinit</span> <span class="hljs-keyword">var</span> currentUser: UserModel
    }

With this class, we will have access to the currentUser, which is the logged in user.

Next, let’s create a new activity named ContactListActivity. For now, leave the class empty and open the corresponding layout file named activity_contact_list and paste the following:

    // File: ./app/src/main/res/layout/activity_contact_list.xml
    <span class="hljs-meta"><?xml version="1.0" encoding="utf-8"?></span>
    <span class="hljs-tag"><<span class="hljs-name">android.support.constraint.ConstraintLayout</span> <span class="hljs-attr">xmlns:android</span>=<span class="hljs-string">"http://schemas.android.com/apk/res/android"</span>
      <span class="hljs-attr">xmlns:app</span>=<span class="hljs-string">"http://schemas.android.com/apk/res-auto"</span>
      <span class="hljs-attr">xmlns:tools</span>=<span class="hljs-string">"http://schemas.android.com/tools"</span>
      <span class="hljs-attr">android:layout_width</span>=<span class="hljs-string">"match_parent"</span>
      <span class="hljs-attr">android:layout_height</span>=<span class="hljs-string">"match_parent"</span>
      <span class="hljs-attr">tools:context</span>=<span class="hljs-string">".ContactListActivity"</span>></span>

      <span class="hljs-tag"><<span class="hljs-name">android.support.v7.widget.RecyclerView</span>
        <span class="hljs-attr">android:layout_width</span>=<span class="hljs-string">"match_parent"</span>
        <span class="hljs-attr">android:id</span>=<span class="hljs-string">"@+id/recyclerViewUserList"</span>
        <span class="hljs-attr">android:layout_height</span>=<span class="hljs-string">"match_parent"</span>/></span>

    <span class="hljs-tag"></<span class="hljs-name">android.support.constraint.ConstraintLayout</span>></span>

The layout contains a recycler view, which will give us all the list of our contacts fetched from the database. Since we are displaying items in a list, we will need an adapter class to manage how items are inflated to the layout.

Create a new class named ContactRecyclerAdapter and paste this:

    <span class="hljs-comment">// File: ./app/src/main/java/com/example/messengerapp/ContactRecyclerAdapter.kt</span>
    <span class="hljs-keyword">import</span> android.support.v7.widget.RecyclerView
    <span class="hljs-keyword">import</span> android.view.LayoutInflater
    <span class="hljs-keyword">import</span> android.view.View
    <span class="hljs-keyword">import</span> android.view.ViewGroup
    <span class="hljs-keyword">import</span> android.widget.ImageView
    <span class="hljs-keyword">import</span> android.widget.TextView
    <span class="hljs-keyword">import</span> java.util.*

    <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">ContactRecyclerAdapter</span></span>(<span class="hljs-keyword">private</span> <span class="hljs-keyword">var</span> list: ArrayList<UserModel>, <span class="hljs-keyword">private</span> <span class="hljs-keyword">var</span> listener: UserClickListener)
      : RecyclerView.Adapter<ContactRecyclerAdapter.ViewHolder>() {

      <span class="hljs-keyword">override</span> <span class="hljs-function"><span class="hljs-keyword">fun</span> <span class="hljs-title">onCreateViewHolder</span><span class="hljs-params">(parent: <span class="hljs-type">ViewGroup</span>, viewType: <span class="hljs-type">Int</span>)</span></span>: ViewHolder {
        <span class="hljs-keyword">return</span> ViewHolder(LayoutInflater.from(parent.context)
            .inflate(R.layout.user_list_row, parent, <span class="hljs-literal">false</span>))
      }

      <span class="hljs-keyword">override</span> <span class="hljs-function"><span class="hljs-keyword">fun</span> <span class="hljs-title">onBindViewHolder</span><span class="hljs-params">(holder: <span class="hljs-type">ViewHolder</span>, position: <span class="hljs-type">Int</span>)</span></span> = holder.bind(list[position])

      <span class="hljs-keyword">override</span> <span class="hljs-function"><span class="hljs-keyword">fun</span> <span class="hljs-title">getItemCount</span><span class="hljs-params">()</span></span>: <span class="hljs-built_in">Int</span> = list.size

      <span class="hljs-function"><span class="hljs-keyword">fun</span> <span class="hljs-title">showUserOnline</span><span class="hljs-params">(updatedUser: <span class="hljs-type">UserModel</span>)</span></span> {
        list.forEachIndexed { index, element ->
          <span class="hljs-keyword">if</span> (updatedUser.id == element.id) {
            updatedUser.online = <span class="hljs-literal">true</span>
            list[index] = updatedUser
            notifyItemChanged(index)
          }

        }
      }

      <span class="hljs-function"><span class="hljs-keyword">fun</span> <span class="hljs-title">showUserOffline</span><span class="hljs-params">(updatedUser: <span class="hljs-type">UserModel</span>)</span></span> {
        list.forEachIndexed { index, element ->
          <span class="hljs-keyword">if</span> (updatedUser.id == element.id) {
            updatedUser.online = <span class="hljs-literal">false</span>
            list[index] = updatedUser
            notifyItemChanged(index)
          }
        }
      }

      <span class="hljs-function"><span class="hljs-keyword">fun</span> <span class="hljs-title">add</span><span class="hljs-params">(user: <span class="hljs-type">UserModel</span>)</span></span> {
        list.add(user)
        notifyDataSetChanged()
      }

      <span class="hljs-keyword">inner</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">ViewHolder</span></span>(itemView: View) : RecyclerView.ViewHolder(itemView) {
        <span class="hljs-keyword">private</span> <span class="hljs-keyword">val</span> nameTextView: TextView = itemView.findViewById(R.id.usernameTextView)
        <span class="hljs-keyword">private</span> <span class="hljs-keyword">val</span> presenceImageView: ImageView = itemView.findViewById(R.id.presenceImageView)

        <span class="hljs-function"><span class="hljs-keyword">fun</span> <span class="hljs-title">bind</span><span class="hljs-params">(currentValue: <span class="hljs-type">UserModel</span>)</span></span> = with(itemView) {
          <span class="hljs-keyword">this</span>.setOnClickListener {
            listener.onUserClicked(currentValue)
          }
          nameTextView.text = currentValue.name
          <span class="hljs-keyword">if</span> (currentValue.online){
            presenceImageView.setImageDrawable(<span class="hljs-keyword">this</span>.context.resources.getDrawable(R.drawable.presence_icon_online))
          } <span class="hljs-keyword">else</span> {
            presenceImageView.setImageDrawable(<span class="hljs-keyword">this</span>.context.resources.getDrawable(R.drawable.presence_icon))

          }

        }
      }

      <span class="hljs-class"><span class="hljs-keyword">interface</span> <span class="hljs-title">UserClickListener</span> </span>{
        <span class="hljs-function"><span class="hljs-keyword">fun</span> <span class="hljs-title">onUserClicked</span><span class="hljs-params">(user: <span class="hljs-type">UserModel</span>)</span></span>
      }
    }

This adapter has some overridden methods and some custom methods.

The onCreateViewHolder inflates how each row will look like. onBindViewHolder binds the data to each item by calling the bind method in the inner ViewHolder class. The getItemCount gives the size of the list.

For our custom methods, showUserOffline updates the user and shows when they are offline. While showUserOnline does the opposite. Finally, we have the add method, which adds a new contact to the list and refreshes it.

In the adapter class above, we used a new layout named user_list_row. Create a new layout user_list_row and paste this:

    // File: ./app/src/main/res/layout/user_list_row.xml
    <span class="hljs-meta"><?xml version="1.0" encoding="utf-8"?></span>
    <span class="hljs-tag"><<span class="hljs-name">LinearLayout</span>
      <span class="hljs-attr">android:orientation</span>=<span class="hljs-string">"horizontal"</span>
      <span class="hljs-attr">xmlns:android</span>=<span class="hljs-string">"http://schemas.android.com/apk/res/android"</span>
      <span class="hljs-attr">xmlns:app</span>=<span class="hljs-string">"http://schemas.android.com/apk/res-auto"</span>
      <span class="hljs-attr">xmlns:tools</span>=<span class="hljs-string">"http://schemas.android.com/tools"</span>
      <span class="hljs-attr">android:layout_width</span>=<span class="hljs-string">"match_parent"</span>
      <span class="hljs-attr">android:layout_height</span>=<span class="hljs-string">"wrap_content"</span>
      <span class="hljs-attr">android:layout_margin</span>=<span class="hljs-string">"20dp"</span>
      <span class="hljs-attr">android:gravity</span>=<span class="hljs-string">"center"</span>
      <span class="hljs-attr">tools:context</span>=<span class="hljs-string">".LoginActivity"</span>></span>

      <span class="hljs-tag"><<span class="hljs-name">ImageView</span>
        <span class="hljs-attr">android:id</span>=<span class="hljs-string">"@+id/presenceImageView"</span>
        <span class="hljs-attr">android:layout_width</span>=<span class="hljs-string">"15dp"</span>
        <span class="hljs-attr">android:layout_height</span>=<span class="hljs-string">"15dp"</span>
        <span class="hljs-attr">app:srcCompat</span>=<span class="hljs-string">"@drawable/presence_icon"</span> /></span>

      <span class="hljs-tag"><<span class="hljs-name">TextView</span>
        <span class="hljs-attr">android:layout_width</span>=<span class="hljs-string">"match_parent"</span>
        <span class="hljs-attr">android:layout_height</span>=<span class="hljs-string">"wrap_content"</span>
        <span class="hljs-attr">tools:text</span>=<span class="hljs-string">"Neo"</span>
        <span class="hljs-attr">android:textSize</span>=<span class="hljs-string">"20sp"</span>
        <span class="hljs-attr">android:layout_marginStart</span>=<span class="hljs-string">"10dp"</span>
        <span class="hljs-attr">android:id</span>=<span class="hljs-string">"@+id/usernameTextView"</span>
        <span class="hljs-attr">app:layout_constraintTop_toBottomOf</span>=<span class="hljs-string">"@+id/editTextUsername"</span>
        /></span>

    <span class="hljs-tag"></<span class="hljs-name">LinearLayout</span>></span>

This layout is the visual representation of how each item on the layout will look like. The layout has an image view that shows the users online status. The layout also has a textview that shows the name of the contact beside the icon. The icons are vector drawables. Let’s create the files.

Create a new drawable named presence_icon_online and paste this:

    // File: ./app/src/main/res/drawable/presence_icon_online.xml
    <span class="hljs-tag"><<span class="hljs-name">vector</span> <span class="hljs-attr">android:height</span>=<span class="hljs-string">"24dp"</span> <span class="hljs-attr">android:tint</span>=<span class="hljs-string">"#3FFC3C"</span>
        <span class="hljs-attr">android:viewportHeight</span>=<span class="hljs-string">"24.0"</span> <span class="hljs-attr">android:viewportWidth</span>=<span class="hljs-string">"24.0"</span>
        <span class="hljs-attr">android:width</span>=<span class="hljs-string">"24dp"</span> <span class="hljs-attr">xmlns:android</span>=<span class="hljs-string">"http://schemas.android.com/apk/res/android"</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">path</span> <span class="hljs-attr">android:fillColor</span>=<span class="hljs-string">"#FF000000"</span> <span class="hljs-attr">android:pathData</span>=<span class="hljs-string">"M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2z"</span>/></span>
    <span class="hljs-tag"></<span class="hljs-name">vector</span>></span>

Create another drawable named presence_icon and paste this:

    // File: ./app/src/main/res/drawable/presence_icon.xml
    <span class="hljs-tag"><<span class="hljs-name">vector</span> <span class="hljs-attr">android:height</span>=<span class="hljs-string">"24dp"</span> <span class="hljs-attr">android:tint</span>=<span class="hljs-string">"#C0C0C6"</span>
        <span class="hljs-attr">android:viewportHeight</span>=<span class="hljs-string">"24.0"</span> <span class="hljs-attr">android:viewportWidth</span>=<span class="hljs-string">"24.0"</span>
        <span class="hljs-attr">android:width</span>=<span class="hljs-string">"24dp"</span> <span class="hljs-attr">xmlns:android</span>=<span class="hljs-string">"http://schemas.android.com/apk/res/android"</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">path</span> <span class="hljs-attr">android:fillColor</span>=<span class="hljs-string">"#FF000000"</span> <span class="hljs-attr">android:pathData</span>=<span class="hljs-string">"M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2z"</span>/></span>
    <span class="hljs-tag"></<span class="hljs-name">vector</span>></span>

Next, open the ContactListActivity class and paste this:

    <span class="hljs-comment">// File: ./app/src/main/java/com/example/messengerapp/ContactListActivity.kt</span>
    <span class="hljs-keyword">import</span> android.content.Intent
    <span class="hljs-keyword">import</span> android.os.Bundle
    <span class="hljs-keyword">import</span> android.support.v7.app.AppCompatActivity
    <span class="hljs-keyword">import</span> android.support.v7.widget.LinearLayoutManager
    <span class="hljs-keyword">import</span> android.util.Log
    <span class="hljs-keyword">import</span> com.pusher.client.Pusher
    <span class="hljs-keyword">import</span> com.pusher.client.PusherOptions
    <span class="hljs-keyword">import</span> com.pusher.client.channel.PresenceChannelEventListener
    <span class="hljs-keyword">import</span> com.pusher.client.channel.User
    <span class="hljs-keyword">import</span> com.pusher.client.util.HttpAuthorizer
    <span class="hljs-keyword">import</span> kotlinx.android.synthetic.main.activity_contact_list.*
    <span class="hljs-keyword">import</span> retrofit2.Call
    <span class="hljs-keyword">import</span> retrofit2.Callback
    <span class="hljs-keyword">import</span> retrofit2.Response

    <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">ContactListActivity</span> : <span class="hljs-type">AppCompatActivity</span></span>(),
        ContactRecyclerAdapter.UserClickListener {

      <span class="hljs-keyword">private</span> <span class="hljs-keyword">val</span> mAdapter = ContactRecyclerAdapter(ArrayList(), <span class="hljs-keyword">this</span>)

      <span class="hljs-keyword">override</span> <span class="hljs-function"><span class="hljs-keyword">fun</span> <span class="hljs-title">onCreate</span><span class="hljs-params">(savedInstanceState: <span class="hljs-type">Bundle</span>?)</span></span> {
        <span class="hljs-keyword">super</span>.onCreate(savedInstanceState)
        setContentView(R.layout.activity_contact_list)
        setupRecyclerView()
        fetchUsers()
        subscribeToChannel()
      }

    }

In this class, we initialized the ContactRecyclerAdapter, then called three functions in the onCreate method. Let’s create these new functions.

In the same class, add the following methods:

    <span class="hljs-keyword">private</span> <span class="hljs-function"><span class="hljs-keyword">fun</span> <span class="hljs-title">setupRecyclerView</span><span class="hljs-params">()</span></span> {
      with(recyclerViewUserList) {
        layoutManager = LinearLayoutManager(<span class="hljs-keyword">this</span><span class="hljs-symbol">@ContactListActivity</span>)
        adapter = mAdapter
      }
    }

    <span class="hljs-keyword">private</span> <span class="hljs-function"><span class="hljs-keyword">fun</span> <span class="hljs-title">fetchUsers</span><span class="hljs-params">()</span></span> {
      RetrofitInstance.retrofit.getUsers().enqueue(<span class="hljs-keyword">object</span> : Callback<List<UserModel>> {
        <span class="hljs-keyword">override</span> <span class="hljs-function"><span class="hljs-keyword">fun</span> <span class="hljs-title">onFailure</span><span class="hljs-params">(call: <span class="hljs-type">Call</span><<span class="hljs-type">List</span><<span class="hljs-type">UserModel</span>>>?, t: <span class="hljs-type">Throwable</span>?)</span></span> {}
        <span class="hljs-keyword">override</span> <span class="hljs-function"><span class="hljs-keyword">fun</span> <span class="hljs-title">onResponse</span><span class="hljs-params">(call: <span class="hljs-type">Call</span><<span class="hljs-type">List</span><<span class="hljs-type">UserModel</span>>>?, response: <span class="hljs-type">Response</span><<span class="hljs-type">List</span><<span class="hljs-type">UserModel</span>>>?)</span></span> {
          <span class="hljs-keyword">for</span> (user <span class="hljs-keyword">in</span> response!!.body()!!) {
            <span class="hljs-keyword">if</span> (user.id != Singleton.getInstance().currentUser.id) {
              mAdapter.add(user)
            }
          }
        }
      })
    }

    <span class="hljs-keyword">private</span> <span class="hljs-function"><span class="hljs-keyword">fun</span> <span class="hljs-title">subscribeToChannel</span><span class="hljs-params">()</span></span> {

      <span class="hljs-keyword">val</span> authorizer = HttpAuthorizer(<span class="hljs-string">"http://10.0.2.2:5000/pusher/auth/presence"</span>)
      <span class="hljs-keyword">val</span> options = PusherOptions().setAuthorizer(authorizer)
      options.setCluster(<span class="hljs-string">"PUSHER_APP_CLUSTER"</span>)

      <span class="hljs-keyword">val</span> pusher = Pusher(<span class="hljs-string">"PUSHER_APP_KEY"</span>, options)
      pusher.connect()

      pusher.subscribePresence(<span class="hljs-string">"presence-channel"</span>, <span class="hljs-keyword">object</span> : PresenceChannelEventListener {
        <span class="hljs-keyword">override</span> <span class="hljs-function"><span class="hljs-keyword">fun</span> <span class="hljs-title">onUsersInformationReceived</span><span class="hljs-params">(p0: <span class="hljs-type">String</span>?, users: <span class="hljs-type">MutableSet</span><<span class="hljs-type">User</span>>?)</span></span> {
          <span class="hljs-keyword">for</span> (user <span class="hljs-keyword">in</span> users!!) {
            <span class="hljs-keyword">if</span> (user.id!=Singleton.getInstance().currentUser.id){
              runOnUiThread {
                mAdapter.showUserOnline(user.toUserModel())
              }
            }
          }
        }

        <span class="hljs-keyword">override</span> <span class="hljs-function"><span class="hljs-keyword">fun</span> <span class="hljs-title">onEvent</span><span class="hljs-params">(p0: <span class="hljs-type">String</span>?, p1: <span class="hljs-type">String</span>?, p2: <span class="hljs-type">String</span>?)</span></span> {}
        <span class="hljs-keyword">override</span> <span class="hljs-function"><span class="hljs-keyword">fun</span> <span class="hljs-title">onAuthenticationFailure</span><span class="hljs-params">(p0: <span class="hljs-type">String</span>?, p1: <span class="hljs-type">Exception</span>?)</span></span> {}
        <span class="hljs-keyword">override</span> <span class="hljs-function"><span class="hljs-keyword">fun</span> <span class="hljs-title">onSubscriptionSucceeded</span><span class="hljs-params">(p0: <span class="hljs-type">String</span>?)</span></span> {}

        <span class="hljs-keyword">override</span> <span class="hljs-function"><span class="hljs-keyword">fun</span> <span class="hljs-title">userSubscribed</span><span class="hljs-params">(channelName: <span class="hljs-type">String</span>, user: <span class="hljs-type">User</span>)</span></span> {
          runOnUiThread {
            mAdapter.showUserOnline(user.toUserModel())
          }
        }

        <span class="hljs-keyword">override</span> <span class="hljs-function"><span class="hljs-keyword">fun</span> <span class="hljs-title">userUnsubscribed</span><span class="hljs-params">(channelName: <span class="hljs-type">String</span>, user: <span class="hljs-type">User</span>)</span></span> {
          runOnUiThread {
            mAdapter.showUserOffline(user.toUserModel())
          }
        }
      })
    }

    <span class="hljs-keyword">override</span> <span class="hljs-function"><span class="hljs-keyword">fun</span> <span class="hljs-title">onUserClicked</span><span class="hljs-params">(user: <span class="hljs-type">UserModel</span>)</span></span> {
      <span class="hljs-keyword">val</span> intent = Intent(<span class="hljs-keyword">this</span>, ChatRoom::<span class="hljs-class"><span class="hljs-keyword">class</span>.<span class="hljs-title">java</span>)</span>
      intent.putExtra(ChatRoom.EXTRA_ID,user.id)
      intent.putExtra(ChatRoom.EXTRA_NAME,user.name)
      intent.putExtra(ChatRoom.EXTRA_COUNT,user.count)
      startActivity(intent)
    }

Replace the PUSHER_APP_* keys with the values on your dashboard.

setupRecyclerView assigns a layout manager and an adapter to the recycler view. For a recycler view to work, you need these two things.
fetchUsers fetches all the users from the server and displays on the list. It exempts the current user logged in.
subcribeToChannel subscribes to a presence channel. When you subscribe to one, the onUsersInformationReceived gives you all the users subscribed to the channel including the current user. So, in that callback, we call the showUserOnline method in the adapter class so that the icon beside the user can be changed to signify that the user is online.
onUserClicked is called when a contact is selected. We pass the details of the user to the next activity called ChatRoom.

In the previous snippet, we used an extension function to transform the User object we receive from Pusher to our own UserModel object. Let’s define this extension.

Create a new class called Utils and paste this:

    <span class="hljs-comment">// File: ./app/src/main/java/com/example/messengerapp/Utils.kt</span>
    <span class="hljs-keyword">import</span> com.pusher.client.channel.User
    <span class="hljs-keyword">import</span> org.json.JSONObject

    <span class="hljs-function"><span class="hljs-keyword">fun</span> User.<span class="hljs-title">toUserModel</span><span class="hljs-params">()</span></span>:UserModel{
      <span class="hljs-keyword">val</span> jsonObject = JSONObject(<span class="hljs-keyword">this</span>.info)
      <span class="hljs-keyword">val</span> name = jsonObject.getString(<span class="hljs-string">"name"</span>)
      <span class="hljs-keyword">val</span> numb = jsonObject.getInt(<span class="hljs-string">"count"</span>)
      <span class="hljs-keyword">return</span> UserModel(<span class="hljs-keyword">this</span>.id, name, numb)
    }

Now, since we referenced a ChatRoom activity earlier in the onUserClicked method, let’s create it.

Create a new activity called ChatRoom. The activity comes with a layout file activity_chat_room, paste this in the layout file:

    // File: ./app/src/main/res/layout/activity_chat_room.xml
    <span class="hljs-meta"><?xml version="1.0" encoding="utf-8"?></span>
    <span class="hljs-tag"><<span class="hljs-name">android.support.constraint.ConstraintLayout</span> <span class="hljs-attr">xmlns:android</span>=<span class="hljs-string">"http://schemas.android.com/apk/res/android"</span>
      <span class="hljs-attr">xmlns:app</span>=<span class="hljs-string">"http://schemas.android.com/apk/res-auto"</span>
      <span class="hljs-attr">xmlns:tools</span>=<span class="hljs-string">"http://schemas.android.com/tools"</span>
      <span class="hljs-attr">android:layout_width</span>=<span class="hljs-string">"match_parent"</span>
      <span class="hljs-attr">android:layout_height</span>=<span class="hljs-string">"match_parent"</span>
      <span class="hljs-attr">tools:context</span>=<span class="hljs-string">".ChatRoom"</span>></span>

      <span class="hljs-tag"><<span class="hljs-name">android.support.v7.widget.RecyclerView</span>
        <span class="hljs-attr">android:id</span>=<span class="hljs-string">"@+id/recyclerViewChat"</span>
        <span class="hljs-attr">android:layout_width</span>=<span class="hljs-string">"match_parent"</span>
        <span class="hljs-attr">android:layout_height</span>=<span class="hljs-string">"match_parent"</span> /></span>

      <span class="hljs-tag"><<span class="hljs-name">EditText</span>
        <span class="hljs-attr">android:id</span>=<span class="hljs-string">"@+id/editText"</span>
        <span class="hljs-attr">android:layout_width</span>=<span class="hljs-string">"0dp"</span>
        <span class="hljs-attr">android:layout_height</span>=<span class="hljs-string">"wrap_content"</span>
        <span class="hljs-attr">android:layout_margin</span>=<span class="hljs-string">"16dp"</span>
        <span class="hljs-attr">android:hint</span>=<span class="hljs-string">"Enter a message"</span>
        <span class="hljs-attr">app:layout_constraintBottom_toBottomOf</span>=<span class="hljs-string">"parent"</span>
        <span class="hljs-attr">app:layout_constraintEnd_toStartOf</span>=<span class="hljs-string">"@+id/sendButton"</span>
        <span class="hljs-attr">app:layout_constraintStart_toStartOf</span>=<span class="hljs-string">"parent"</span> /></span>

      <span class="hljs-tag"><<span class="hljs-name">android.support.design.widget.FloatingActionButton</span>
        <span class="hljs-attr">android:id</span>=<span class="hljs-string">"@+id/sendButton"</span>
        <span class="hljs-attr">android:layout_width</span>=<span class="hljs-string">"wrap_content"</span>
        <span class="hljs-attr">android:layout_height</span>=<span class="hljs-string">"wrap_content"</span>
        <span class="hljs-attr">android:layout_gravity</span>=<span class="hljs-string">"end|bottom"</span>
        <span class="hljs-attr">android:layout_margin</span>=<span class="hljs-string">"16dp"</span>
        <span class="hljs-attr">android:src</span>=<span class="hljs-string">"@android:drawable/ic_menu_send"</span>
        <span class="hljs-attr">app:layout_constraintEnd_toEndOf</span>=<span class="hljs-string">"parent"</span>
        <span class="hljs-attr">app:layout_constraintBottom_toBottomOf</span>=<span class="hljs-string">"parent"</span> /></span>

    <span class="hljs-tag"></<span class="hljs-name">android.support.constraint.ConstraintLayout</span>></span>

The layout above contains a recycler view for the chat messages, an edit text to collect new messages, and a floating action button to send the message.

Next, create a new class called ChatRoomAdapter and paste the following:

    <span class="hljs-comment">// File: ./app/src/main/java/com/example/messengerapp/ChatRoomAdapter.kt</span>
    <span class="hljs-keyword">import</span> android.support.v7.widget.CardView
    <span class="hljs-keyword">import</span> android.support.v7.widget.RecyclerView
    <span class="hljs-keyword">import</span> android.view.LayoutInflater
    <span class="hljs-keyword">import</span> android.view.View
    <span class="hljs-keyword">import</span> android.view.ViewGroup
    <span class="hljs-keyword">import</span> android.widget.RelativeLayout
    <span class="hljs-keyword">import</span> android.widget.TextView
    <span class="hljs-keyword">import</span> java.util.*

    <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">ChatRoomAdapter</span> </span>(<span class="hljs-keyword">private</span> <span class="hljs-keyword">var</span> list: ArrayList<MessageModel>)
      : RecyclerView.Adapter<ChatRoomAdapter.ViewHolder>() {

      <span class="hljs-keyword">override</span> <span class="hljs-function"><span class="hljs-keyword">fun</span> <span class="hljs-title">onCreateViewHolder</span><span class="hljs-params">(parent: <span class="hljs-type">ViewGroup</span>, viewType: <span class="hljs-type">Int</span>)</span></span>: ViewHolder {
        <span class="hljs-keyword">return</span> ViewHolder(LayoutInflater.from(parent.context)
            .inflate(R.layout.chat_item, parent, <span class="hljs-literal">false</span>))
      }

      <span class="hljs-keyword">override</span> <span class="hljs-function"><span class="hljs-keyword">fun</span> <span class="hljs-title">onBindViewHolder</span><span class="hljs-params">(holder: <span class="hljs-type">ViewHolder</span>, position: <span class="hljs-type">Int</span>)</span></span> = holder.bind(list[position])

      <span class="hljs-keyword">override</span> <span class="hljs-function"><span class="hljs-keyword">fun</span> <span class="hljs-title">getItemCount</span><span class="hljs-params">()</span></span>: <span class="hljs-built_in">Int</span> = list.size

      <span class="hljs-function"><span class="hljs-keyword">fun</span> <span class="hljs-title">add</span><span class="hljs-params">(message: <span class="hljs-type">MessageModel</span>)</span></span> {
        list.add(message)
        notifyDataSetChanged()
      }

      <span class="hljs-keyword">inner</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">ViewHolder</span></span>(itemView: View) : RecyclerView.ViewHolder(itemView) {
        <span class="hljs-keyword">private</span> <span class="hljs-keyword">val</span> messageTextView: TextView = itemView.findViewById(R.id.text)
        <span class="hljs-keyword">private</span> <span class="hljs-keyword">val</span> cardView: CardView = itemView.findViewById(R.id.cardView)

        <span class="hljs-function"><span class="hljs-keyword">fun</span> <span class="hljs-title">bind</span><span class="hljs-params">(message: <span class="hljs-type">MessageModel</span>)</span></span> = with(itemView) {
          messageTextView.text = message.message
          <span class="hljs-keyword">val</span> params = cardView.layoutParams <span class="hljs-keyword">as</span> RelativeLayout.LayoutParams
          <span class="hljs-keyword">if</span> (message.senderId==Singleton.getInstance().currentUser.id) {
            params.addRule(RelativeLayout.ALIGN_PARENT_RIGHT)
          }
        }
      }
    }

This adapter works in a similar fashion as the one we created earlier. One difference though is that the show online and offline methods are not needed here.

Next, create another class named MessageModel and paste this:

    <span class="hljs-comment">// File: ./app/src/main/java/com/example/messengerapp/MessageModel.kt</span>
    <span class="hljs-keyword">data</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MessageModel</span></span>(<span class="hljs-keyword">val</span> message: String, <span class="hljs-keyword">val</span> senderId: String)

The chat_item layout used in the onCreateViewHolder method of the adapter class represents how each layout will look like. Create a new layout called chat_item and paste this:

    // File: ./app/src/main/res/layout/chat_item.xml
    <span class="hljs-meta"><?xml version="1.0" encoding="utf-8"?></span>
    <span class="hljs-tag"><<span class="hljs-name">RelativeLayout</span> <span class="hljs-attr">xmlns:android</span>=<span class="hljs-string">"http://schemas.android.com/apk/res/android"</span>
      <span class="hljs-attr">xmlns:app</span>=<span class="hljs-string">"http://schemas.android.com/apk/res-auto"</span>
      <span class="hljs-attr">android:layout_width</span>=<span class="hljs-string">"wrap_content"</span>
      <span class="hljs-attr">android:layout_height</span>=<span class="hljs-string">"wrap_content"</span>
      <span class="hljs-attr">android:layout_margin</span>=<span class="hljs-string">"16dp"</span>
      <span class="hljs-attr">android:orientation</span>=<span class="hljs-string">"vertical"</span>></span>

      <span class="hljs-tag"><<span class="hljs-name">android.support.v7.widget.CardView</span>
        <span class="hljs-attr">android:id</span>=<span class="hljs-string">"@+id/cardView"</span>
        <span class="hljs-attr">android:layout_width</span>=<span class="hljs-string">"wrap_content"</span>
        <span class="hljs-attr">android:layout_height</span>=<span class="hljs-string">"wrap_content"</span>
        <span class="hljs-attr">android:layout_gravity</span>=<span class="hljs-string">"start"</span>
        <span class="hljs-attr">app:cardCornerRadius</span>=<span class="hljs-string">"8dp"</span>
        <span class="hljs-attr">app:cardUseCompatPadding</span>=<span class="hljs-string">"true"</span>></span>

        <span class="hljs-tag"><<span class="hljs-name">LinearLayout</span>
          <span class="hljs-attr">android:layout_width</span>=<span class="hljs-string">"wrap_content"</span>
          <span class="hljs-attr">android:layout_height</span>=<span class="hljs-string">"wrap_content"</span>
          <span class="hljs-attr">android:gravity</span>=<span class="hljs-string">"start"</span>
          <span class="hljs-attr">android:orientation</span>=<span class="hljs-string">"vertical"</span>
          <span class="hljs-attr">android:padding</span>=<span class="hljs-string">"8dp"</span>></span>

          <span class="hljs-tag"><<span class="hljs-name">TextView</span>
            <span class="hljs-attr">android:id</span>=<span class="hljs-string">"@+id/text"</span>
            <span class="hljs-attr">android:layout_width</span>=<span class="hljs-string">"wrap_content"</span>
            <span class="hljs-attr">android:layout_height</span>=<span class="hljs-string">"wrap_content"</span>
            <span class="hljs-attr">android:layout_gravity</span>=<span class="hljs-string">"center_vertical|start"</span>
            <span class="hljs-attr">android:layout_marginBottom</span>=<span class="hljs-string">"4dp"</span>
            <span class="hljs-attr">android:textStyle</span>=<span class="hljs-string">"bold"</span> /></span>

        <span class="hljs-tag"></<span class="hljs-name">LinearLayout</span>></span>

      <span class="hljs-tag"></<span class="hljs-name">android.support.v7.widget.CardView</span>></span>

    <span class="hljs-tag"></<span class="hljs-name">RelativeLayout</span>></span>

Finally, open the ChatRoom activity class and paste this:

    <span class="hljs-comment">// File: ./app/src/main/java/com/example/messengerapp/ChatRoom.kt</span>
    <span class="hljs-keyword">import</span> android.app.Activity
    <span class="hljs-keyword">import</span> android.os.Bundle
    <span class="hljs-keyword">import</span> android.support.v7.app.AppCompatActivity
    <span class="hljs-keyword">import</span> android.support.v7.widget.LinearLayoutManager
    <span class="hljs-keyword">import</span> android.util.Log
    <span class="hljs-keyword">import</span> android.view.View
    <span class="hljs-keyword">import</span> android.view.inputmethod.InputMethodManager
    <span class="hljs-keyword">import</span> com.pusher.client.Pusher
    <span class="hljs-keyword">import</span> com.pusher.client.PusherOptions
    <span class="hljs-keyword">import</span> com.pusher.client.channel.PrivateChannelEventListener
    <span class="hljs-keyword">import</span> com.pusher.client.util.HttpAuthorizer
    <span class="hljs-keyword">import</span> kotlinx.android.synthetic.main.activity_chat_room.*
    <span class="hljs-keyword">import</span> okhttp3.MediaType
    <span class="hljs-keyword">import</span> okhttp3.RequestBody
    <span class="hljs-keyword">import</span> org.json.JSONObject
    <span class="hljs-keyword">import</span> retrofit2.Call
    <span class="hljs-keyword">import</span> retrofit2.Callback
    <span class="hljs-keyword">import</span> retrofit2.Response
    <span class="hljs-keyword">import</span> java.lang.Exception
    <span class="hljs-keyword">import</span> java.util.*

    <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">ChatRoom</span> : <span class="hljs-type">AppCompatActivity</span></span>() {

      <span class="hljs-keyword">companion</span> <span class="hljs-keyword">object</span> {
        <span class="hljs-keyword">const</span> <span class="hljs-keyword">val</span> EXTRA_ID = <span class="hljs-string">"id"</span>
        <span class="hljs-keyword">const</span> <span class="hljs-keyword">val</span> EXTRA_NAME = <span class="hljs-string">"name"</span>
        <span class="hljs-keyword">const</span> <span class="hljs-keyword">val</span> EXTRA_COUNT = <span class="hljs-string">"numb"</span>
      }

      <span class="hljs-keyword">private</span> <span class="hljs-keyword">lateinit</span> <span class="hljs-keyword">var</span> contactName: String
      <span class="hljs-keyword">private</span> <span class="hljs-keyword">lateinit</span> <span class="hljs-keyword">var</span> contactId: String
      <span class="hljs-keyword">private</span> <span class="hljs-keyword">var</span> contactNumb: <span class="hljs-built_in">Int</span> = -<span class="hljs-number">1</span>
      <span class="hljs-keyword">lateinit</span> <span class="hljs-keyword">var</span> nameOfChannel: String
      <span class="hljs-keyword">val</span> mAdapter = ChatRoomAdapter(ArrayList())

      <span class="hljs-keyword">override</span> <span class="hljs-function"><span class="hljs-keyword">fun</span> <span class="hljs-title">onCreate</span><span class="hljs-params">(savedInstanceState: <span class="hljs-type">Bundle</span>?)</span></span> {
        <span class="hljs-keyword">super</span>.onCreate(savedInstanceState)
        setContentView(R.layout.activity_chat_room)
        fetchExtras()
        setupRecyclerView()
        subscribeToChannel()
        setupClickListener()
      }
    }

In this file, we declared constants used to send data to the activity through intents. We also initialized variables we will use later like the adapter the contact details. We then called some additional methods in the onCreate method. Let’s add them to the class.

Add the fetchExtras method defined below to the class. The method gets the extras sent from the chatroom activity.

    <span class="hljs-keyword">private</span> <span class="hljs-function"><span class="hljs-keyword">fun</span> <span class="hljs-title">fetchExtras</span><span class="hljs-params">()</span></span> {
      contactName = intent.extras.getString(ChatRoom.EXTRA_NAME)
      contactId = intent.extras.getString(ChatRoom.EXTRA_ID)
      contactNumb = intent.extras.getInt(ChatRoom.EXTRA_COUNT)
    }

The next method is the setupRecyclerView method. This initializes the recycler view with an adapter and a layout manager. Paste the function in the same class as before:

    <span class="hljs-keyword">private</span> <span class="hljs-function"><span class="hljs-keyword">fun</span> <span class="hljs-title">setupRecyclerView</span><span class="hljs-params">()</span></span> {
      with(recyclerViewChat) {
        layoutManager = LinearLayoutManager(<span class="hljs-keyword">this</span><span class="hljs-symbol">@ChatRoom</span>)
        adapter = mAdapter
      }
    }

The next method is the subscribeToChannel method. This method subscribes the user to a private channel with the selected contact. Paste the following code to the same class as before:

    <span class="hljs-keyword">private</span> <span class="hljs-function"><span class="hljs-keyword">fun</span> <span class="hljs-title">subscribeToChannel</span><span class="hljs-params">()</span></span> {
      <span class="hljs-keyword">val</span> authorizer = HttpAuthorizer(<span class="hljs-string">"http://10.0.2.2:5000/pusher/auth/private"</span>)
      <span class="hljs-keyword">val</span> options = PusherOptions().setAuthorizer(authorizer)
      options.setCluster(<span class="hljs-string">"PUSHER_APP_CLUSTER"</span>)

      <span class="hljs-keyword">val</span> pusher = Pusher(<span class="hljs-string">"PUSHER_APP_KEY"</span>, options)
      pusher.connect()

      nameOfChannel = <span class="hljs-keyword">if</span> (Singleton.getInstance().currentUser.count > contactNumb) {
        <span class="hljs-string">"private-"</span> + Singleton.getInstance().currentUser.id + <span class="hljs-string">"-"</span> + contactId
      } <span class="hljs-keyword">else</span> {
        <span class="hljs-string">"private-"</span> + contactId + <span class="hljs-string">"-"</span> + Singleton.getInstance().currentUser.id
      }

      Log.i(<span class="hljs-string">"ChatRoom"</span>, nameOfChannel)

      pusher.subscribePrivate(nameOfChannel, <span class="hljs-keyword">object</span> : PrivateChannelEventListener {
        <span class="hljs-keyword">override</span> <span class="hljs-function"><span class="hljs-keyword">fun</span> <span class="hljs-title">onEvent</span><span class="hljs-params">(channelName: <span class="hljs-type">String</span>?, eventName: <span class="hljs-type">String</span>?, <span class="hljs-keyword">data</span>: <span class="hljs-type">String</span>?)</span></span> {
          <span class="hljs-keyword">val</span> obj = JSONObject(<span class="hljs-keyword">data</span>)
          <span class="hljs-keyword">val</span> messageModel = MessageModel(obj.getString(<span class="hljs-string">"message"</span>), obj.getString(<span class="hljs-string">"sender_id"</span>))

          runOnUiThread {
            mAdapter.add(messageModel)
          }
        }

        <span class="hljs-keyword">override</span> <span class="hljs-function"><span class="hljs-keyword">fun</span> <span class="hljs-title">onAuthenticationFailure</span><span class="hljs-params">(p0: <span class="hljs-type">String</span>?, p1: <span class="hljs-type">Exception</span>?)</span></span> {}
        <span class="hljs-keyword">override</span> <span class="hljs-function"><span class="hljs-keyword">fun</span> <span class="hljs-title">onSubscriptionSucceeded</span><span class="hljs-params">(p0: <span class="hljs-type">String</span>?)</span></span> {}
      }, <span class="hljs-string">"new-message"</span>)
    }

Replace the PUSHER_APP_* keys with the values on your dashboard.

The code above allows a user to subscribe to a private channel. A private channel requires authorization like the presence channel. However, it does not expose a callback that is triggered when other users subscribe.

Next method to be added is the setupClickListener. Paste the method to the same class as before:

    <span class="hljs-keyword">private</span> <span class="hljs-function"><span class="hljs-keyword">fun</span> <span class="hljs-title">setupClickListener</span><span class="hljs-params">()</span></span> {
      sendButton.setOnClickListener{
        <span class="hljs-keyword">if</span> (editText.text.isNotEmpty()) {
          <span class="hljs-keyword">val</span> jsonObject = JSONObject()
          jsonObject.put(<span class="hljs-string">"message"</span>,editText.text.toString())
          jsonObject.put(<span class="hljs-string">"channel_name"</span>,nameOfChannel)
          jsonObject.put(<span class="hljs-string">"sender_id"</span>,Singleton.getInstance().currentUser.id)

          <span class="hljs-keyword">val</span> jsonBody = RequestBody.create(
              MediaType.parse(<span class="hljs-string">"application/json; charset=utf-8"</span>), 
              jsonObject.toString()
          )

          RetrofitInstance.retrofit.sendMessage(jsonBody).enqueue(<span class="hljs-keyword">object</span>: Callback<String>{
            <span class="hljs-keyword">override</span> <span class="hljs-function"><span class="hljs-keyword">fun</span> <span class="hljs-title">onFailure</span><span class="hljs-params">(call: <span class="hljs-type">Call</span><<span class="hljs-type">String</span>>?, t: <span class="hljs-type">Throwable</span>?)</span></span> {}
            <span class="hljs-keyword">override</span> <span class="hljs-function"><span class="hljs-keyword">fun</span> <span class="hljs-title">onResponse</span><span class="hljs-params">(call: <span class="hljs-type">Call</span><<span class="hljs-type">String</span>>?, response: <span class="hljs-type">Response</span><<span class="hljs-type">String</span>>?)</span></span> {}
          })

          editText.text.clear()
          hideKeyBoard()
        }

      }
    }

The method above assigns a click listener to the floating action button to send the message to the server. After the message is sent, we clear the text view and hide the keyboard.

Add a method to the same class for hiding the keyboard like this:

    <span class="hljs-keyword">private</span> <span class="hljs-function"><span class="hljs-keyword">fun</span> <span class="hljs-title">hideKeyBoard</span><span class="hljs-params">()</span></span> {
      <span class="hljs-keyword">val</span> imm = getSystemService(Activity.INPUT_METHOD_SERVICE) <span class="hljs-keyword">as</span> InputMethodManager
      <span class="hljs-keyword">var</span> view = currentFocus

      <span class="hljs-keyword">if</span> (view == <span class="hljs-literal">null</span>) {
        view = View(<span class="hljs-keyword">this</span>)
      }

      imm.hideSoftInputFromWindow(view.windowToken, <span class="hljs-number">0</span>)
    }

That’s all for the application. Now you can run your application in Android Studio and you should see the application in action.

Make sure the Node.js API we built earlier is running before running the Android application.

Conclusion

In this article, you have been introduced yet again to some Pusher’s capabilities such as the private and presence channel. We learned how to authenticate our users for the various channels. We used these channels to implement a private chat between two persons and an online notification for a contact.

The source code to the application built in this article is available on GitHub.

This post first appeared on the Pusher blog.

Send push notifications in a social network iOS app - Part 2: Build the app

Neo — Mon, 19 Nov 2018 17:17:10 +0000

To follow this tutorial you will need a Mac with Xcode installed, knowledge of Xcode and Swift, basic knowledge of PHP (including the Laravel framework), a Pusher account, and CocoaPods installed on your machine.

In the previous part, we were able to set up our Pusher Beams application and also create our API backend with Laravel. We also added push notification support to the backend using the pusher-beams package.

In this part, we will continue where we left off. We will be creating the iOS application using Swift and then integrate push notifications to the application so we can receive notifications when they are sent.

Prerequisites

In order to follow along in this tutorial you need to have the following:

Have completed part one of the article.

Building our iOS application using Swift

Creating our controllers

In Xcode, create a new class LaunchViewController and paste the contents of the file below into it:

    <span class="hljs-keyword">import</span> UIKit

    <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">LaunchViewController</span>: <span class="hljs-title">UIViewController</span> </span>{
        <span class="hljs-meta">@IBOutlet</span> <span class="hljs-keyword">weak</span> <span class="hljs-keyword">var</span> loginButton: <span class="hljs-type">UIButton</span>!
        <span class="hljs-meta">@IBOutlet</span> <span class="hljs-keyword">weak</span> <span class="hljs-keyword">var</span> signupButton: <span class="hljs-type">UIButton</span>!

        <span class="hljs-keyword">override</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">viewDidLoad</span><span class="hljs-params">()</span></span> {
            <span class="hljs-keyword">super</span>.viewDidLoad()

            loginButton.isHidden = <span class="hljs-literal">true</span>
            signupButton.isHidden = <span class="hljs-literal">true</span>

            loginButton.addTarget(<span class="hljs-keyword">self</span>, action: #selector(loginButtonWasPressed), <span class="hljs-keyword">for</span>: .touchUpInside)
            signupButton.addTarget(<span class="hljs-keyword">self</span>, action: #selector(signupButtonWasPressed), <span class="hljs-keyword">for</span>: .touchUpInside)
        }

        <span class="hljs-keyword">override</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">viewDidAppear</span><span class="hljs-params">(<span class="hljs-number">_</span> animated: Bool)</span></span> {
            <span class="hljs-keyword">super</span>.viewDidAppear(animated)

            <span class="hljs-keyword">guard</span> <span class="hljs-type">AuthService</span>.shared.loggedIn() == <span class="hljs-literal">false</span> <span class="hljs-keyword">else</span> {
                <span class="hljs-type">SettingsService</span>.shared.loadFromApi()
                <span class="hljs-keyword">return</span> performSegue(withIdentifier: <span class="hljs-string">"Main"</span>, sender: <span class="hljs-keyword">self</span>)
            }

            loginButton.isHidden = <span class="hljs-literal">false</span>
            signupButton.isHidden = <span class="hljs-literal">false</span>
        }

        <span class="hljs-keyword">private</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">loginButtonWasPressed</span><span class="hljs-params">()</span></span> {
            performSegue(withIdentifier: <span class="hljs-string">"Login"</span>, sender: <span class="hljs-keyword">self</span>)
        }

        <span class="hljs-keyword">private</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">signupButtonWasPressed</span><span class="hljs-params">()</span></span> {
            performSegue(withIdentifier: <span class="hljs-string">"Signup"</span>, sender: <span class="hljs-keyword">self</span>)
        }   
    }

Set the controller as the custom class for the related storyboard scene.

Above we have two @IBOutlet buttons for login and signup. In the viewDidLoad method we hide the buttons and create a target callback for them when they are pressed. In the viewDidAppear method we check if the user is logged in and present the timeline if so. If the user is not logged in we unhide the authentication buttons.

We also have the loginButtonWasPressed and signupButtonWasPressed methods. These methods present the login and signup controllers.

Next, create a SignupViewController class and paste the following code into the file:

    <span class="hljs-keyword">import</span> UIKit
    <span class="hljs-keyword">import</span> NotificationBannerSwift

    <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">SignupViewController</span>: <span class="hljs-title">UIViewController</span> </span>{
        <span class="hljs-meta">@IBOutlet</span> <span class="hljs-keyword">weak</span> <span class="hljs-keyword">var</span> nameTextField: <span class="hljs-type">UITextField</span>!
        <span class="hljs-meta">@IBOutlet</span> <span class="hljs-keyword">weak</span> <span class="hljs-keyword">var</span> emailTextField: <span class="hljs-type">UITextField</span>!
        <span class="hljs-meta">@IBOutlet</span> <span class="hljs-keyword">weak</span> <span class="hljs-keyword">var</span> passwordTextfield: <span class="hljs-type">UITextField</span>!
        <span class="hljs-meta">@IBOutlet</span> <span class="hljs-keyword">weak</span> <span class="hljs-keyword">var</span> signupButton: <span class="hljs-type">UIBarButtonItem</span>!

        <span class="hljs-keyword">override</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">viewDidLoad</span><span class="hljs-params">()</span></span> {
            <span class="hljs-keyword">super</span>.viewDidLoad()

            activateSignupButtonIfNecessary()

            nameTextField.addTarget(<span class="hljs-keyword">self</span>, action: #selector(textFieldChanged(<span class="hljs-number">_</span>:)), <span class="hljs-keyword">for</span>: .editingChanged)
            emailTextField.addTarget(<span class="hljs-keyword">self</span>, action: #selector(textFieldChanged(<span class="hljs-number">_</span>:)), <span class="hljs-keyword">for</span>: .editingChanged)
            passwordTextfield.addTarget(<span class="hljs-keyword">self</span>, action: #selector(textFieldChanged(<span class="hljs-number">_</span>:)), <span class="hljs-keyword">for</span>: .editingChanged)
        }

        <span class="hljs-meta">@IBAction</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">closeButtonWasPressed</span><span class="hljs-params">(<span class="hljs-number">_</span> sender: <span class="hljs-keyword">Any</span>? = <span class="hljs-literal">nil</span>)</span></span> {
            dismiss(animated: <span class="hljs-literal">true</span>, completion: <span class="hljs-literal">nil</span>)
        }

        <span class="hljs-meta">@IBAction</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">signupButtonWasPressed</span><span class="hljs-params">(<span class="hljs-number">_</span> sender: <span class="hljs-keyword">Any</span>)</span></span> {
            <span class="hljs-keyword">guard</span> <span class="hljs-keyword">let</span> credentials = textFields(), signupButton.isEnabled <span class="hljs-keyword">else</span> {
                <span class="hljs-keyword">return</span>
            }

            <span class="hljs-type">ApiService</span>.shared.signup(credentials: credentials) { token, error <span class="hljs-keyword">in</span>
                <span class="hljs-keyword">guard</span> <span class="hljs-keyword">let</span> token = token, error == <span class="hljs-literal">nil</span> <span class="hljs-keyword">else</span> {
                    <span class="hljs-keyword">return</span> <span class="hljs-type">StatusBarNotificationBanner</span>(title: <span class="hljs-string">"Signup failed. Try again."</span>, style: .danger).show()
                }

                <span class="hljs-type">AuthService</span>.shared.saveToken(token).then {
                    <span class="hljs-keyword">self</span>.closeButtonWasPressed()
                }
            }
        }

        <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">textFields</span><span class="hljs-params">()</span></span> -> <span class="hljs-type">AuthService</span>.<span class="hljs-type">SignupCredentials</span>? {
            <span class="hljs-keyword">if</span> <span class="hljs-keyword">let</span> name = nameTextField.text, <span class="hljs-keyword">let</span> email = emailTextField.text, <span class="hljs-keyword">let</span> pass = passwordTextfield.text {
                <span class="hljs-keyword">return</span> (name, email, pass)
            }

            <span class="hljs-keyword">return</span> <span class="hljs-literal">nil</span>
        }

        <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">activateSignupButtonIfNecessary</span><span class="hljs-params">()</span></span> {
            <span class="hljs-keyword">if</span> <span class="hljs-keyword">let</span> field = textFields() {
                signupButton.isEnabled = !field.name.isEmpty && !field.email.isEmpty && !field.password.isEmpty
            }
        }

        <span class="hljs-meta">@objc</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">textFieldChanged</span><span class="hljs-params">(<span class="hljs-number">_</span> sender: UITextField)</span></span> {
            activateSignupButtonIfNecessary()
        }
    }

Set the controller as the custom class for the signup storyboard scene.

Above we have three @IBOutlet's for our signup text fields and one @IBOutlet for our signup button. In the viewDidLoad method we add a callback for our text fields to be triggered when the text is changed. We also call the activateSignupButtonIfNecessary method, which activates the signup button if all the field’s contents are valid.

We have two @IBAction functions. The first for when the close button is pressed and the other for when the signup button is pressed. When the Sign up button is pressed, the signupButtonWasPressed method is called, which uses the ApiService to create an account for the user and log the user in. If the signup fails we use the NotificationBanner package to display an error.

We also have other helper methods. The textFields method returns a tuple of the text fields contents and the textFieldChanged method is fired every time a text field’s content is modified.

Next, create a LoginViewController class and paste the following code into the file:

    <span class="hljs-keyword">import</span> UIKit
    <span class="hljs-keyword">import</span> NotificationBannerSwift

    <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">LoginViewController</span>: <span class="hljs-title">UIViewController</span> </span>{
        <span class="hljs-meta">@IBOutlet</span> <span class="hljs-keyword">weak</span> <span class="hljs-keyword">var</span> emailTextField: <span class="hljs-type">UITextField</span>!
        <span class="hljs-meta">@IBOutlet</span> <span class="hljs-keyword">weak</span> <span class="hljs-keyword">var</span> passwordTextField: <span class="hljs-type">UITextField</span>!
        <span class="hljs-meta">@IBOutlet</span> <span class="hljs-keyword">weak</span> <span class="hljs-keyword">var</span> loginButton: <span class="hljs-type">UIBarButtonItem</span>!

        <span class="hljs-keyword">override</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">viewDidLoad</span><span class="hljs-params">()</span></span> {
            <span class="hljs-keyword">super</span>.viewDidLoad()

            activateLoginButtonIfNecessary()

            emailTextField.addTarget(<span class="hljs-keyword">self</span>, action: #selector(textFieldChanged(<span class="hljs-number">_</span>:)), <span class="hljs-keyword">for</span>: .editingChanged)
            passwordTextField.addTarget(<span class="hljs-keyword">self</span>, action: #selector(textFieldChanged(<span class="hljs-number">_</span>:)), <span class="hljs-keyword">for</span>: .editingChanged)
        }

        <span class="hljs-meta">@IBAction</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">closeButtonWasPressed</span><span class="hljs-params">(<span class="hljs-number">_</span> sender: <span class="hljs-keyword">Any</span>? = <span class="hljs-literal">nil</span>)</span></span> {
            dismiss(animated: <span class="hljs-literal">true</span>, completion: <span class="hljs-literal">nil</span>)
        }

        <span class="hljs-meta">@IBAction</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">loginButtonWasPressed</span><span class="hljs-params">(<span class="hljs-number">_</span> sender: <span class="hljs-keyword">Any</span>)</span></span> {
            <span class="hljs-keyword">guard</span> <span class="hljs-keyword">let</span> credentials = textFields(), loginButton.isEnabled <span class="hljs-keyword">else</span> {
                <span class="hljs-keyword">return</span>
            }

            <span class="hljs-type">ApiService</span>.shared.login(credentials: credentials) { token, error <span class="hljs-keyword">in</span>
                <span class="hljs-keyword">guard</span> <span class="hljs-keyword">let</span> token = token, error == <span class="hljs-literal">nil</span> <span class="hljs-keyword">else</span> {
                    <span class="hljs-keyword">return</span> <span class="hljs-type">StatusBarNotificationBanner</span>(title: <span class="hljs-string">"Login failed, try again."</span>, style: .danger).show()
                }

                <span class="hljs-type">AuthService</span>.shared.saveToken(token).then {
                    <span class="hljs-keyword">self</span>.closeButtonWasPressed()
                }
            }
        }

        <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">textFields</span><span class="hljs-params">()</span></span> -> <span class="hljs-type">AuthService</span>.<span class="hljs-type">LoginCredentials</span>? {
            <span class="hljs-keyword">if</span> <span class="hljs-keyword">let</span> email = emailTextField.text, <span class="hljs-keyword">let</span> password = passwordTextField.text {
                <span class="hljs-keyword">return</span> (email, password)
            }

            <span class="hljs-keyword">return</span> <span class="hljs-literal">nil</span>
        }

        <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">activateLoginButtonIfNecessary</span><span class="hljs-params">()</span></span> {
            <span class="hljs-keyword">if</span> <span class="hljs-keyword">let</span> field = textFields() {
                loginButton.isEnabled = !field.email.isEmpty && !field.password.isEmpty
            }
        }

        <span class="hljs-meta">@objc</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">textFieldChanged</span><span class="hljs-params">(<span class="hljs-number">_</span> sender: UITextField)</span></span> {
            activateLoginButtonIfNecessary()
        }
    }

Set the controller as the custom class for the login storyboard scene.

The controller above functions very similarly to the SignupViewController. When the loginButtonWasPressed method is called it uses the ApiService to log the user in and save the token.

Next, we need to create the settings controller. This will be where the settings can be managed. Create a SettingsTableViewController and paste the following code into the file:

    <span class="hljs-keyword">import</span> UIKit

    <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">SettingsTableViewController</span>: <span class="hljs-title">UITableViewController</span> </span>{
        <span class="hljs-keyword">let</span> settings = {
            <span class="hljs-keyword">return</span> <span class="hljs-type">SettingsService</span>.shared.settings
        }()

        <span class="hljs-keyword">private</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">shouldCheckCell</span><span class="hljs-params">(at index: IndexPath, with setting: String)</span></span> -> <span class="hljs-type">Bool</span> {
            <span class="hljs-keyword">let</span> status = <span class="hljs-type">Setting</span>.<span class="hljs-type">Notification</span>.<span class="hljs-type">Comments</span>(rawValue: setting)

            <span class="hljs-keyword">return</span> (status == .off && index.row == <span class="hljs-number">0</span>) ||
                   (status == .following && index.row == <span class="hljs-number">1</span>) ||
                   (status == .everyone && index.row == <span class="hljs-number">2</span>)
        }

        <span class="hljs-keyword">override</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">tableView</span><span class="hljs-params">(<span class="hljs-number">_</span> tableView: UITableView, cellForRowAt indexPath: IndexPath)</span></span> -> <span class="hljs-type">UITableViewCell</span> {
            <span class="hljs-keyword">let</span> cell = <span class="hljs-keyword">super</span>.tableView(tableView, cellForRowAt: indexPath)
            cell.accessoryType = .<span class="hljs-keyword">none</span>

            <span class="hljs-keyword">if</span> <span class="hljs-keyword">let</span> setting = settings[<span class="hljs-string">"notification_comments"</span>], shouldCheckCell(at: indexPath, with: setting) {
                cell.accessoryType = .checkmark
            }

            <span class="hljs-keyword">return</span> cell
        }

        <span class="hljs-keyword">override</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">tableView</span><span class="hljs-params">(<span class="hljs-number">_</span> tableView: UITableView, didSelectRowAt indexPath: IndexPath)</span></span> {
            <span class="hljs-keyword">let</span> rowsCount = <span class="hljs-keyword">self</span>.tableView.numberOfRows(inSection: indexPath.section)

            <span class="hljs-keyword">for</span> i <span class="hljs-keyword">in</span> <span class="hljs-number">0</span>..<rowsCount  {
                <span class="hljs-keyword">let</span>  rowIndexPath = <span class="hljs-type">IndexPath</span>(row: i, section: indexPath.section)

                <span class="hljs-keyword">if</span> <span class="hljs-keyword">let</span> cell = <span class="hljs-keyword">self</span>.tableView.cellForRow(at: rowIndexPath) {
                    cell.accessoryType = indexPath.row == i ? .checkmark : .<span class="hljs-keyword">none</span>
                }
            }

            <span class="hljs-keyword">let</span> setting = indexPath.row == <span class="hljs-number">0</span> ? <span class="hljs-string">"Off"</span> : (indexPath.row == <span class="hljs-number">1</span> ? <span class="hljs-string">"Following"</span> : <span class="hljs-string">"Everyone"</span>)

            <span class="hljs-keyword">if</span> <span class="hljs-keyword">let</span> status = <span class="hljs-type">Setting</span>.<span class="hljs-type">Notification</span>.<span class="hljs-type">Comments</span>(rawValue: setting) {
                <span class="hljs-type">SettingsService</span>.shared.updateCommentsNotificationSetting(status)
            }
        }
    }

Set the controller as the custom class for the settings storyboard scene.

In the SettingsTableViewController, we load the settings from the SettingsService class, which we will create later. We then define a shouldCheckCell method, which will determine if the cell row should be checked by checking the users setting.

As seen from the storyboard scene, there are three possible settings for the comments notification section: ‘Off’, ‘From people I follow’ and ‘From everyone’. The settings controller attempts to update the setting locally and remotely using the SettingsService when the setting is changed.

Next, create the SearchTableViewController and paste the following code into it:

    <span class="hljs-keyword">import</span> UIKit
    <span class="hljs-keyword">import</span> NotificationBannerSwift

    <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">SearchTableViewController</span>: <span class="hljs-title">UITableViewController</span> </span>{

        <span class="hljs-keyword">var</span> users: <span class="hljs-type">Users</span> = []

        <span class="hljs-keyword">override</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">viewDidLoad</span><span class="hljs-params">()</span></span> {
            <span class="hljs-keyword">super</span>.viewDidLoad()

            <span class="hljs-type">ApiService</span>.shared.fetchUsers { users <span class="hljs-keyword">in</span>
                <span class="hljs-keyword">guard</span> <span class="hljs-keyword">let</span> users = users <span class="hljs-keyword">else</span> {
                    <span class="hljs-keyword">return</span> <span class="hljs-type">StatusBarNotificationBanner</span>(title: <span class="hljs-string">"Unable to fetch users."</span>, style: .danger).show()
                }

                <span class="hljs-keyword">self</span>.users = users
                <span class="hljs-keyword">self</span>.tableView.reloadData()
            }
        }

        <span class="hljs-keyword">override</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">tableView</span><span class="hljs-params">(<span class="hljs-number">_</span> tableView: UITableView, numberOfRowsInSection section: Int)</span></span> -> <span class="hljs-type">Int</span> {
            <span class="hljs-keyword">return</span> <span class="hljs-keyword">self</span>.users.<span class="hljs-built_in">count</span>
        }

        <span class="hljs-keyword">override</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">tableView</span><span class="hljs-params">(<span class="hljs-number">_</span> tableView: UITableView, cellForRowAt indexPath: IndexPath)</span></span> -> <span class="hljs-type">UITableViewCell</span> {
            <span class="hljs-keyword">let</span> user = <span class="hljs-keyword">self</span>.users[indexPath.row]
            <span class="hljs-keyword">let</span> cell = tableView.dequeueReusableCell(withIdentifier: <span class="hljs-string">"User"</span>, <span class="hljs-keyword">for</span>: indexPath) <span class="hljs-keyword">as</span>! <span class="hljs-type">UserListTableViewCell</span>

            cell.delegate = <span class="hljs-keyword">self</span>
            cell.indexPath = indexPath
            cell.textLabel?.text = user.name

            <span class="hljs-keyword">if</span> <span class="hljs-keyword">let</span> following = user.follows {
                cell.setFollowStatus(following)
            }

            <span class="hljs-keyword">return</span> cell
        }

    }

    <span class="hljs-class"><span class="hljs-keyword">extension</span> <span class="hljs-title">SearchTableViewController</span>: <span class="hljs-title">UserListCellFollowButtonDelegate</span> </span>{

        <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">followButtonTapped</span><span class="hljs-params">(at indexPath: IndexPath)</span></span> {
            <span class="hljs-keyword">let</span> user = <span class="hljs-keyword">self</span>.users[indexPath.row]
            <span class="hljs-keyword">let</span> userFollows = user.follows ?? <span class="hljs-literal">false</span>

            <span class="hljs-type">ApiService</span>.shared.toggleFollowStatus(forUserId: user.id, following: userFollows) { successful <span class="hljs-keyword">in</span>
                <span class="hljs-keyword">guard</span> <span class="hljs-keyword">let</span> successful = successful, successful <span class="hljs-keyword">else</span> { <span class="hljs-keyword">return</span> }

                <span class="hljs-keyword">self</span>.users[indexPath.row].follows = !userFollows
                <span class="hljs-keyword">self</span>.tableView.reloadData()
            }
        }

    }

Set the controller as the custom class for the search storyboard scene.

Though we have named the class SearchTableViewController we are actually not going to be doing any searches. We are going to have a make-believe search result, which will display the list of users on the service with a Follow/Unfollow button to make it easy to follow or unfollow a user.

In the viewDidLoad method we call the fetchUsers method on the ApiService class and then we load the users to the users property, which is then used as the table’s data. In the class extension, we implement the UserListCellFollowButtonDelegate protocol, which makes it easy for us to know when the Follow/Unfollow button is tapped. We use the delegation pattern to make this possible.

Next, create the TimelineTableViewController class and paste the following code into it:

    <span class="hljs-keyword">import</span> UIKit
    <span class="hljs-keyword">import</span> Alamofire
    <span class="hljs-keyword">import</span> NotificationBannerSwift
    <span class="hljs-keyword">import</span> PushNotifications

    <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">TimelineTableViewController</span>: <span class="hljs-title">UITableViewController</span> </span>{
        <span class="hljs-keyword">var</span> photos: <span class="hljs-type">Photos</span> = []
        <span class="hljs-keyword">var</span> selectedPhoto: <span class="hljs-type">Photo</span>?
        <span class="hljs-keyword">let</span> picker = <span class="hljs-type">UIImagePickerController</span>()

        <span class="hljs-keyword">override</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">viewDidLoad</span><span class="hljs-params">()</span></span> {
            <span class="hljs-keyword">super</span>.viewDidLoad()
            <span class="hljs-keyword">self</span>.reloadButtonWasPressed()
            <span class="hljs-keyword">self</span>.picker.delegate = <span class="hljs-keyword">self</span>
        }

        <span class="hljs-meta">@IBAction</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">userButtonWasPressed</span><span class="hljs-params">(<span class="hljs-number">_</span> sender: <span class="hljs-keyword">Any</span>)</span></span> {
            <span class="hljs-type">AuthService</span>.shared.logout()
            dismiss(animated: <span class="hljs-literal">true</span>, completion: <span class="hljs-literal">nil</span>)
        }

        <span class="hljs-meta">@IBAction</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">reloadButtonWasPressed</span><span class="hljs-params">(<span class="hljs-number">_</span> sender: <span class="hljs-keyword">Any</span>? = <span class="hljs-literal">nil</span>)</span></span> {
            <span class="hljs-type">ApiService</span>.shared.fetchPosts { photos <span class="hljs-keyword">in</span>
                <span class="hljs-keyword">if</span> <span class="hljs-keyword">let</span> photos = photos {
                    <span class="hljs-keyword">self</span>.photos = photos
                    <span class="hljs-keyword">self</span>.tableView.reloadData()
                }
            }
        }

        <span class="hljs-meta">@IBAction</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">addButtonWasPressed</span><span class="hljs-params">(<span class="hljs-number">_</span> sender: <span class="hljs-keyword">Any</span>)</span></span> {
            picker.sourceType = .photoLibrary
            picker.mediaTypes = <span class="hljs-type">UIImagePickerController</span>.availableMediaTypes(<span class="hljs-keyword">for</span>: .photoLibrary)!
            picker.modalPresentationStyle = .popover
            picker.popoverPresentationController?.barButtonItem = <span class="hljs-literal">nil</span>
            present(picker, animated: <span class="hljs-literal">true</span>, completion: <span class="hljs-literal">nil</span>)
        }

        <span class="hljs-keyword">override</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">prepare</span><span class="hljs-params">(<span class="hljs-keyword">for</span> segue: UIStoryboardSegue, sender: <span class="hljs-keyword">Any</span>?)</span></span> {
            <span class="hljs-keyword">if</span> <span class="hljs-keyword">let</span> vc = segue.destination <span class="hljs-keyword">as</span>? <span class="hljs-type">CommentsTableViewController</span>, <span class="hljs-keyword">let</span> photo = selectedPhoto {
                selectedPhoto = <span class="hljs-literal">nil</span>
                vc.photoId = photo.id
                vc.comments = photo.comments
            }
        } 
    }

Set the controller as the custom class for the timeline storyboard scene.

In the controller above we have the photos property, which is an array of all the photos on the service, the selectedPhoto, which will temporarily hold the selected photo object, and the picker property, which we will use for the image picker when trying to upload images to the service.

In the viewDidLoad method, we load the posts by calling the reloadButtonWasPressed method, then we set the class as the picker.delegate. We have the @IBAction method addButtonWasPressed, which launches the iOS image picker.

The prepare method is called automatically when the controller is navigating to the comments controller. So in here, we set the comments to the comments controller so we have something to display immediately. We also set the photoId to the comments controller.

Next, in the same class, paste the following at the bottom:

    <span class="hljs-class"><span class="hljs-keyword">extension</span> <span class="hljs-title">TimelineTableViewController</span> </span>{

        <span class="hljs-keyword">override</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">tableView</span><span class="hljs-params">(<span class="hljs-number">_</span> tableView: UITableView, numberOfRowsInSection section: Int)</span></span> -> <span class="hljs-type">Int</span> {
            <span class="hljs-keyword">return</span> photos.<span class="hljs-built_in">count</span>
        }

        <span class="hljs-keyword">override</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">tableView</span><span class="hljs-params">(<span class="hljs-number">_</span> tableView: UITableView, cellForRowAt indexPath: IndexPath)</span></span> -> <span class="hljs-type">UITableViewCell</span> {
            <span class="hljs-keyword">let</span> photo = photos[indexPath.row]
            <span class="hljs-keyword">let</span> cell = tableView.dequeueReusableCell(withIdentifier: <span class="hljs-string">"PhotoCell"</span>, <span class="hljs-keyword">for</span>: indexPath) <span class="hljs-keyword">as</span>! <span class="hljs-type">PhotoListTableViewCell</span>

            cell.delegate = <span class="hljs-keyword">self</span>
            cell.indexPath = indexPath
            cell.nameLabel.text = photo.user.name
            cell.photo.image = <span class="hljs-type">UIImage</span>(named: <span class="hljs-string">"loading"</span>)

            <span class="hljs-type">Alamofire</span>.request(photo.image).responseData { response <span class="hljs-keyword">in</span>
                <span class="hljs-keyword">if</span> response.error == <span class="hljs-literal">nil</span>, <span class="hljs-keyword">let</span> data = response.data {
                    cell.photo.image = <span class="hljs-type">UIImage</span>(data: data)
                }
            }

            <span class="hljs-keyword">return</span> cell
        } 

    }

    <span class="hljs-class"><span class="hljs-keyword">extension</span> <span class="hljs-title">TimelineTableViewController</span>: <span class="hljs-title">PhotoListCellDelegate</span> </span>{

        <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">commentButtonWasTapped</span><span class="hljs-params">(at indexPath: IndexPath)</span></span> {
            <span class="hljs-keyword">self</span>.selectedPhoto = photos[indexPath.row]
            <span class="hljs-keyword">self</span>.performSegue(withIdentifier: <span class="hljs-string">"Comments"</span>, sender: <span class="hljs-keyword">self</span>)
        }

    }

In the code above, we have two extensions for the TimelineTableViewController. The first extension defines how we want to present the photos to the table view. The second extension is an implementation of the PhotoListCellDelegate, which is another implementation of the delegation pattern. The method defined here, commentButtonWasTapped, will be triggered when the Comment button is pressed on a photo cell.

In the same file add the last class extension at the bottom of the file:

    <span class="hljs-class"><span class="hljs-keyword">extension</span> <span class="hljs-title">TimelineTableViewController</span>: <span class="hljs-title">UIImagePickerControllerDelegate</span>, <span class="hljs-title">UINavigationControllerDelegate</span> </span>{

        <span class="hljs-meta">@objc</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">imagePickerController</span><span class="hljs-params">(<span class="hljs-number">_</span> picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [String : <span class="hljs-keyword">Any</span>])</span></span> {
            <span class="hljs-keyword">if</span> <span class="hljs-keyword">let</span> selected = info[<span class="hljs-string">"UIImagePickerControllerOriginalImage"</span>] <span class="hljs-keyword">as</span>? <span class="hljs-type">UIImage</span> {
                <span class="hljs-keyword">guard</span> <span class="hljs-keyword">let</span> image = <span class="hljs-type">UIImageJPEGRepresentation</span>(selected, <span class="hljs-number">0</span>) <span class="hljs-keyword">else</span> { 
                    <span class="hljs-keyword">return</span> 
                }

                <span class="hljs-keyword">let</span> uploadPhotoHandler: (() -> <span class="hljs-type">Void</span>)? = {
                    <span class="hljs-keyword">var</span> caption: <span class="hljs-type">UITextField</span>?

                    <span class="hljs-keyword">let</span> alert = <span class="hljs-type">UIAlertController</span>(title: <span class="hljs-string">"Add Caption"</span>, message: <span class="hljs-literal">nil</span>, preferredStyle: .alert)
                    alert.addTextField(configurationHandler: { textfield <span class="hljs-keyword">in</span> caption = textfield })
                    alert.addAction(<span class="hljs-type">UIAlertAction</span>(title: <span class="hljs-string">"Cancel"</span>, style: .cancel, handler: <span class="hljs-literal">nil</span>))
                    alert.addAction(<span class="hljs-type">UIAlertAction</span>(title: <span class="hljs-string">"Save"</span>, style: .<span class="hljs-keyword">default</span>, handler: { action <span class="hljs-keyword">in</span>
                        <span class="hljs-keyword">var</span> filename = <span class="hljs-string">"upload.jpg"</span>
                        <span class="hljs-keyword">let</span> caption = caption?.text ?? <span class="hljs-string">"No caption"</span>

                        <span class="hljs-keyword">if</span> <span class="hljs-keyword">let</span> url = info[<span class="hljs-type">UIImagePickerControllerImageURL</span>] <span class="hljs-keyword">as</span>? <span class="hljs-type">NSURL</span>, <span class="hljs-keyword">let</span> name = url.lastPathComponent {
                            filename = name
                        }

                        <span class="hljs-type">ApiService</span>.shared.uploadImage(image, caption: caption, name: filename) { photo, error <span class="hljs-keyword">in</span>
                            <span class="hljs-keyword">guard</span> <span class="hljs-keyword">let</span> photo = photo, error == <span class="hljs-literal">nil</span> <span class="hljs-keyword">else</span> {
                                <span class="hljs-keyword">return</span> <span class="hljs-type">StatusBarNotificationBanner</span>(title: <span class="hljs-string">"Failed to upload image"</span>, style: .danger).show()
                            }

                            <span class="hljs-keyword">try</span>? <span class="hljs-type">PushNotifications</span>.shared.subscribe(interest: <span class="hljs-string">"photo_\(photo.id)-comment_following"</span>)
                            <span class="hljs-keyword">try</span>? <span class="hljs-type">PushNotifications</span>.shared.subscribe(interest: <span class="hljs-string">"photo_\(photo.id)-comment_everyone"</span>)

                            <span class="hljs-keyword">self</span>.photos.insert(photo, at: <span class="hljs-number">0</span>)
                            <span class="hljs-keyword">self</span>.tableView.reloadData()

                            <span class="hljs-type">StatusBarNotificationBanner</span>(title: <span class="hljs-string">"Uploaded successfully"</span>, style: .success).show()
                        }
                    }))

                    <span class="hljs-keyword">self</span>.present(alert, animated: <span class="hljs-literal">true</span>, completion: <span class="hljs-literal">nil</span>)
                }

                <span class="hljs-keyword">self</span>.dismiss(animated: <span class="hljs-literal">true</span>, completion: uploadPhotoHandler)
            }
        }

    }

In the extension above, we implement the UIImagePickerControllerDelegate, which let’s us handle image selection from the UIImagePickerController. When an image is selected, the method above will be called.

We handle it by getting the selected image, displaying an alert controller with a text field so we can get a caption for the image and then we send the image and the caption to the API using the ApiService.

When the upload is complete, we add the newly added photo to the table and then we subscribe the user to the Pusher Beam Interest so they can receive push notifications when comments are made to the photo.

Also above we subscribed to two interests. The first is photo_\(id)-comment_following and the second one is photo_\(id)-comment_everyone. We do this so that we can segment notifications depending on the users setting. On the server, when a comment is added, if the photo owner sets the comment notification setting to following then the push notification will be published to the photo_\(id)-comment_following interest.

Next, create the CommentsTableViewController class and paste the following code into it:

    <span class="hljs-keyword">import</span> UIKit
    <span class="hljs-keyword">import</span> NotificationBannerSwift

    <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">CommentsTableViewController</span>: <span class="hljs-title">UITableViewController</span> </span>{
        <span class="hljs-keyword">var</span> photoId: <span class="hljs-type">Int</span> = <span class="hljs-number">0</span>
        <span class="hljs-keyword">var</span> commentField: <span class="hljs-type">UITextField</span>?
        <span class="hljs-keyword">var</span> comments: <span class="hljs-type">PhotoComments</span> = []

        <span class="hljs-keyword">override</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">viewDidLoad</span><span class="hljs-params">()</span></span> {
            <span class="hljs-keyword">super</span>.viewDidLoad()

            navigationItem.title = <span class="hljs-string">"Comments"</span>
            navigationController?.navigationBar.prefersLargeTitles = <span class="hljs-literal">false</span>
            navigationItem.rightBarButtonItem = <span class="hljs-type">UIBarButtonItem</span>(title: <span class="hljs-string">"Add"</span>, style: .plain, target: <span class="hljs-keyword">self</span>, action: #selector(addCommentButtonWasTapped))

            <span class="hljs-keyword">if</span> photoId != <span class="hljs-number">0</span> {
                <span class="hljs-type">ApiService</span>.shared.fetchComments(forPhoto: photoId) { comments <span class="hljs-keyword">in</span>
                    <span class="hljs-keyword">guard</span> <span class="hljs-keyword">let</span> comments = comments <span class="hljs-keyword">else</span> { <span class="hljs-keyword">return</span> }

                    <span class="hljs-keyword">self</span>.comments = comments
                    <span class="hljs-keyword">self</span>.tableView.reloadData()
                }
            }
        }

        <span class="hljs-keyword">override</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">tableView</span><span class="hljs-params">(<span class="hljs-number">_</span> tableView: UITableView, numberOfRowsInSection section: Int)</span></span> -> <span class="hljs-type">Int</span> {
            <span class="hljs-keyword">return</span> comments.<span class="hljs-built_in">count</span>
        }

        <span class="hljs-keyword">override</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">tableView</span><span class="hljs-params">(<span class="hljs-number">_</span> tableView: UITableView, cellForRowAt indexPath: IndexPath)</span></span> -> <span class="hljs-type">UITableViewCell</span> {
            <span class="hljs-keyword">let</span> cell = tableView.dequeueReusableCell(withIdentifier: <span class="hljs-string">"Comment"</span>, <span class="hljs-keyword">for</span>: indexPath) <span class="hljs-keyword">as</span>! <span class="hljs-type">CommentsListTableViewCell</span>
            <span class="hljs-keyword">let</span> comment = comments[indexPath.row]

            cell.username?.text = comment.user.name
            cell.comment?.text = comment.comment

            <span class="hljs-keyword">return</span> cell
        }

        <span class="hljs-meta">@objc</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">addCommentButtonWasTapped</span><span class="hljs-params">()</span></span> {
            <span class="hljs-keyword">let</span> alertCtrl = <span class="hljs-type">UIAlertController</span>(title: <span class="hljs-string">"Add Comment"</span>, message: <span class="hljs-literal">nil</span>, preferredStyle: .alert)
            alertCtrl.addAction(<span class="hljs-type">UIAlertAction</span>(title: <span class="hljs-string">"Cancel"</span>, style: .cancel, handler: <span class="hljs-literal">nil</span>))
            alertCtrl.addTextField { textField <span class="hljs-keyword">in</span> <span class="hljs-keyword">self</span>.commentField = textField }
            alertCtrl.addAction(<span class="hljs-type">UIAlertAction</span>(title: <span class="hljs-string">"Add Comment"</span>, style: .<span class="hljs-keyword">default</span>) { <span class="hljs-number">_</span> <span class="hljs-keyword">in</span>
                <span class="hljs-keyword">guard</span> <span class="hljs-keyword">let</span> comment = <span class="hljs-keyword">self</span>.commentField?.text <span class="hljs-keyword">else</span> { <span class="hljs-keyword">return</span> }

                <span class="hljs-type">ApiService</span>.shared.leaveComment(forId: <span class="hljs-keyword">self</span>.photoId, comment: comment) { newComment <span class="hljs-keyword">in</span>
                    <span class="hljs-keyword">guard</span> <span class="hljs-keyword">let</span> comment = newComment <span class="hljs-keyword">else</span> {
                        <span class="hljs-keyword">return</span> <span class="hljs-type">StatusBarNotificationBanner</span>(title: <span class="hljs-string">"Failed to post comment"</span>, style: .danger).show()
                    }

                    <span class="hljs-keyword">self</span>.comments.insert(comment, at: <span class="hljs-number">0</span>)
                    <span class="hljs-keyword">self</span>.tableView.reloadData()
                }
            })

            <span class="hljs-keyword">self</span>.present(alertCtrl, animated: <span class="hljs-literal">true</span>, completion: <span class="hljs-literal">nil</span>)
        }
    }

Set the controller as the custom class for the timeline storyboard scene.

In the CommentsTableViewController above we have the comments property, which holds all the comments for the photo, the photoId property, which holds the ID of the photo whose comments are being loaded and the commentField property, which is the text field that holds new comments.

In the viewDidLoad method we set up the controller title and add an ‘Add’ button to the right of the navigation bar. Next, we call the fetchComments method in the ApiService to load comments for the photo.

We have the addCommentButtonWasTapped method in the controller, which is activated when the ‘Add’ button on the navigation bar is pressed. This brings up an alert controller with a text field where we can get the comment text and then send the comment to the API using the ApiService.

Creating our custom view classes

Since we have created the controllers, let’s create some custom view classes that we need for the cells we used in the controllers earlier.

The first custom cell we will create will be the PhotoListTableViewCell class. Create the class and paste the following code into the file:

    <span class="hljs-keyword">import</span> UIKit

    <span class="hljs-class"><span class="hljs-keyword">protocol</span> <span class="hljs-title">PhotoListCellDelegate</span> </span>{
        <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">commentButtonWasTapped</span><span class="hljs-params">(at indexPath: IndexPath)</span></span>
    }

    <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">PhotoListTableViewCell</span>: <span class="hljs-title">UITableViewCell</span> </span>{
        <span class="hljs-meta">@IBOutlet</span> <span class="hljs-keyword">weak</span> <span class="hljs-keyword">var</span> nameLabel: <span class="hljs-type">UILabel</span>!
        <span class="hljs-meta">@IBOutlet</span> <span class="hljs-keyword">weak</span> <span class="hljs-keyword">var</span> photo: <span class="hljs-type">UIImageView</span>!
        <span class="hljs-meta">@IBOutlet</span> <span class="hljs-keyword">weak</span> <span class="hljs-keyword">var</span> commentButton: <span class="hljs-type">UIButton</span>!

        <span class="hljs-keyword">var</span> indexPath: <span class="hljs-type">IndexPath</span>?    
        <span class="hljs-keyword">var</span> delegate: <span class="hljs-type">PhotoListCellDelegate</span>?

        <span class="hljs-keyword">override</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">awakeFromNib</span><span class="hljs-params">()</span></span> {
            <span class="hljs-keyword">super</span>.awakeFromNib()
            <span class="hljs-keyword">self</span>.selectionStyle = .<span class="hljs-keyword">none</span>

            commentButton.addTarget(<span class="hljs-keyword">self</span>, action: #selector(commentButtonWasTapped), <span class="hljs-keyword">for</span>: .touchUpInside)
        }

        <span class="hljs-meta">@objc</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">commentButtonWasTapped</span><span class="hljs-params">()</span></span> {
            <span class="hljs-keyword">if</span> <span class="hljs-keyword">let</span> indexPath = indexPath, <span class="hljs-keyword">let</span> delegate = delegate {
                delegate.commentButtonWasTapped(at: indexPath)
            }
        }
    }

Set this class as the custom class for the cell in the timeline scene of the storyboard.

In the class above we have a few @IBOutlet's for the name, photo and comment button. We have a commentButtonWasTapped method that fires the commentWasTapped method on a delegate of the cell.

The next cell we want to create is the CommentsListTableViewCell. Create the class and paste the following code into the file:

    <span class="hljs-keyword">import</span> UIKit

    <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">CommentsListTableViewCell</span>: <span class="hljs-title">UITableViewCell</span> </span>{
        <span class="hljs-meta">@IBOutlet</span> <span class="hljs-keyword">weak</span> <span class="hljs-keyword">var</span> username: <span class="hljs-type">UILabel</span>!
        <span class="hljs-meta">@IBOutlet</span> <span class="hljs-keyword">weak</span> <span class="hljs-keyword">var</span> comment: <span class="hljs-type">UILabel</span>!
    }

Set this class as the custom class for the cell in the comments scene of the storyboard.

The next cell we want to create is the UsersListTableViewCell. Create the class and paste the following code into the file:

    <span class="hljs-keyword">import</span> UIKit

    <span class="hljs-class"><span class="hljs-keyword">protocol</span> <span class="hljs-title">UserListCellFollowButtonDelegate</span> </span>{
        <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">followButtonTapped</span><span class="hljs-params">(at index:IndexPath)</span></span>
    }

    <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">UserListTableViewCell</span>: <span class="hljs-title">UITableViewCell</span> </span>{
        <span class="hljs-keyword">var</span> indexPath: <span class="hljs-type">IndexPath</span>?    
        <span class="hljs-keyword">var</span> delegate: <span class="hljs-type">UserListCellFollowButtonDelegate</span>?

        <span class="hljs-meta">@IBOutlet</span> <span class="hljs-keyword">weak</span> <span class="hljs-keyword">var</span> followButton: <span class="hljs-type">UIButton</span>!

        <span class="hljs-keyword">override</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">awakeFromNib</span><span class="hljs-params">()</span></span> {
            <span class="hljs-keyword">super</span>.awakeFromNib()
            <span class="hljs-keyword">self</span>.selectionStyle = .<span class="hljs-keyword">none</span>

            <span class="hljs-keyword">self</span>.setFollowStatus(<span class="hljs-literal">false</span>)
            <span class="hljs-keyword">self</span>.followButton.layer.cornerRadius = <span class="hljs-number">5</span>
            <span class="hljs-keyword">self</span>.followButton.setTitleColor(<span class="hljs-type">UIColor</span>.white, <span class="hljs-keyword">for</span>: .normal)
            <span class="hljs-keyword">self</span>.followButton.addTarget(<span class="hljs-keyword">self</span>, action: #selector(followButtonTapped(<span class="hljs-number">_</span>:)), <span class="hljs-keyword">for</span>: .touchUpInside)
        }

        <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">setFollowStatus</span><span class="hljs-params">(<span class="hljs-number">_</span> following: Bool)</span></span> {
            <span class="hljs-keyword">self</span>.followButton.backgroundColor = following ? <span class="hljs-type">UIColor</span>.red : <span class="hljs-type">UIColor</span>.blue
            <span class="hljs-keyword">self</span>.followButton.setTitle(following ? <span class="hljs-string">"Unfollow"</span> : <span class="hljs-string">"Follow"</span>, <span class="hljs-keyword">for</span>: .normal)
        }

        <span class="hljs-meta">@objc</span> <span class="hljs-keyword">private</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">followButtonTapped</span><span class="hljs-params">(<span class="hljs-number">_</span> sender: UIButton)</span></span> {
            <span class="hljs-keyword">if</span> <span class="hljs-keyword">let</span> delegate = delegate, <span class="hljs-keyword">let</span> indexPath = indexPath {
                delegate.followButtonTapped(at: indexPath)
            }
        }
    }

Set this class as the custom class for the cell in the search scene in the storyboard.

In the class above we have a custom cell to display a user’s name and a follow button. We have a setFollowStatus method that toggles the state of the follow button and we have a followButtonTapped method that calls the followButtonTapped method on a delegate of the cell.

That’s all for custom cell classes. Let’s move on to creating other classes and setting up push notification.

Adding other classes and setting up push notifications

We still need to create one last file. Create an AppConstants file and paste the following code into the file:

    <span class="hljs-keyword">import</span> Foundation

    <span class="hljs-class"><span class="hljs-keyword">struct</span> <span class="hljs-title">AppConstants</span> </span>{
        <span class="hljs-keyword">static</span> <span class="hljs-keyword">let</span> <span class="hljs-type">API_URL</span> = <span class="hljs-string">"http://127.0.0.1:8000"</span>
        <span class="hljs-keyword">static</span> <span class="hljs-keyword">let</span> <span class="hljs-type">API_CLIENT_ID</span> = <span class="hljs-string">"API_CLIENT_ID"</span>
        <span class="hljs-keyword">static</span> <span class="hljs-keyword">let</span> <span class="hljs-type">API_CLIENT_SECRET</span> = <span class="hljs-string">"API_CLIENT_SECRET"</span>
        <span class="hljs-keyword">static</span> <span class="hljs-keyword">let</span> <span class="hljs-type">PUSHER_INSTANCE_ID</span> = <span class="hljs-string">"PUSHER_INSTANCE_ID
    }</span>

In the struct above we have some constants that we will be using throughout the application. These will be used to store application credentials and will be unchanged throughout the lifetime of the application.

💡 Replace the key values with the actual values gotten from your Passport installation and from your Pusher dashboard.

Next, open the AppDelegate class and replace the contents with the following:

    <span class="hljs-keyword">import</span> UIKit
    <span class="hljs-keyword">import</span> PushNotifications

    <span class="hljs-meta">@UIApplicationMain</span>
    <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">AppDelegate</span>: <span class="hljs-title">UIResponder</span>, <span class="hljs-title">UIApplicationDelegate</span> </span>{

        <span class="hljs-keyword">var</span> window: <span class="hljs-type">UIWindow</span>?

        <span class="hljs-keyword">let</span> pushNotifications = <span class="hljs-type">PushNotifications</span>.shared

        <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">application</span><span class="hljs-params">(<span class="hljs-number">_</span> application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: <span class="hljs-keyword">Any</span>]?)</span></span> -> <span class="hljs-type">Bool</span> {
            <span class="hljs-keyword">self</span>.pushNotifications.start(instanceId: <span class="hljs-type">AppConstants</span>.<span class="hljs-type">PUSHER_INSTANCE_ID</span>)
            <span class="hljs-keyword">self</span>.pushNotifications.registerForRemoteNotifications()

            <span class="hljs-keyword">return</span> <span class="hljs-literal">true</span>
        }

        <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">application</span><span class="hljs-params">(<span class="hljs-number">_</span> application: UIApplication, didRegisterForRemoteNotificationsWithDeviceToken deviceToken: Data)</span></span> {
            <span class="hljs-keyword">self</span>.pushNotifications.registerDeviceToken(deviceToken)
        }
    }

In the class above, we use the Pusher Beams Swift SDK to register the device for push notifications.

That’s all for our application’s code.

Adding push notifications to our iOS new application

Now that we have completed the logic for the application, let’s enable push notifications on the application in Xcode.

In the project navigator, select your project, and click on the Capabilities tab. Enable Push Notifications by turning the switch ON.

This will create an entitlements file in the root of your project. With that, you have provisioned your application to fully receive push notifications.

Adding rich push notifications

Let’s take it one step further and add rich notifications. We will want to be able to see the photo commented on in the notification received as this can increase engagement.

In Xcode go to ‘File’ > ‘New’ > ‘Target’ and select ‘Notification Service Extension’. Enter the name of the extension and then click proceed. Make sure the extension is added and embedded to the Gram project. We will call our extension Notification.

When the target has been created you will see a new Notification group (it may be different depending on what you chose to call your extension) with two files in them. Open the NotificationService class and replace the didReceive method with the method below:

    <span class="hljs-keyword">override</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">didReceive</span><span class="hljs-params">(<span class="hljs-number">_</span> request: UNNotificationRequest, withContentHandler contentHandler: @escaping <span class="hljs-params">(UNNotificationContent)</span></span></span> -> <span class="hljs-type">Void</span>) {
        <span class="hljs-keyword">self</span>.contentHandler = contentHandler
        bestAttemptContent = (request.content.mutableCopy() <span class="hljs-keyword">as</span>? <span class="hljs-type">UNMutableNotificationContent</span>)

        <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">failEarly</span><span class="hljs-params">()</span></span> {
            contentHandler(request.content)
        }

        <span class="hljs-keyword">guard</span>
            <span class="hljs-keyword">let</span> content = (request.content.mutableCopy() <span class="hljs-keyword">as</span>? <span class="hljs-type">UNMutableNotificationContent</span>),
            <span class="hljs-keyword">let</span> apnsData = content.userInfo[<span class="hljs-string">"data"</span>] <span class="hljs-keyword">as</span>? [<span class="hljs-type">String</span>: <span class="hljs-type">Any</span>],
            <span class="hljs-keyword">let</span> photoURL = apnsData[<span class="hljs-string">"attachment-url"</span>] <span class="hljs-keyword">as</span>? <span class="hljs-type">String</span>,
            <span class="hljs-keyword">let</span> attachmentURL = <span class="hljs-type">URL</span>(string: photoURL.addingPercentEncoding(withAllowedCharacters: .urlQueryAllowed)!),
            <span class="hljs-keyword">let</span> imageData = <span class="hljs-keyword">try</span>? <span class="hljs-type">NSData</span>(contentsOf: attachmentURL, options: <span class="hljs-type">NSData</span>.<span class="hljs-type">ReadingOptions</span>()),
            <span class="hljs-keyword">let</span> attachment = <span class="hljs-type">UNNotificationAttachment</span>.create(imageFileIdentifier: <span class="hljs-string">"image.png"</span>, data: imageData, options: <span class="hljs-literal">nil</span>)
            <span class="hljs-keyword">else</span> {
                <span class="hljs-keyword">return</span> failEarly()
        }

        content.attachments = [attachment]
        contentHandler(content.copy() <span class="hljs-keyword">as</span>! <span class="hljs-type">UNNotificationContent</span>)
    }

Above we are simply getting the notifications payload and then extracting the data including the attachment-url, which is the photo URL. We then create an attachment for the notification and add it to the notification’s content. That’s all we need to do to add the image as an attachment.

⚠️ Your image URL has to be a secure URL with HTTPS or iOS will not load the image. You can override this setting in your info.plist file but it is strongly recommended that you don’t.

Next, create a new file in the Notification extension called UNNotificationAttachment.swift and paste the following into the file:

    <span class="hljs-keyword">import</span> Foundation
    <span class="hljs-keyword">import</span> UserNotifications

    <span class="hljs-class"><span class="hljs-keyword">extension</span> <span class="hljs-title">UNNotificationAttachment</span> </span>{

        <span class="hljs-keyword">static</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">create</span><span class="hljs-params">(imageFileIdentifier: String, data: NSData, options: [NSObject : AnyObject]?)</span></span> -> <span class="hljs-type">UNNotificationAttachment</span>? {
            <span class="hljs-keyword">let</span> fileManager = <span class="hljs-type">FileManager</span>.<span class="hljs-keyword">default</span>
            <span class="hljs-keyword">let</span> tmpSubFolderName = <span class="hljs-type">ProcessInfo</span>.processInfo.globallyUniqueString
            <span class="hljs-keyword">let</span> tmpSubFolderURL = <span class="hljs-type">NSURL</span>(fileURLWithPath: <span class="hljs-type">NSTemporaryDirectory</span>()).appendingPathComponent(tmpSubFolderName, isDirectory: <span class="hljs-literal">true</span>)

            <span class="hljs-keyword">do</span> {
                <span class="hljs-keyword">try</span> fileManager.createDirectory(at: tmpSubFolderURL!, withIntermediateDirectories: <span class="hljs-literal">true</span>, attributes: <span class="hljs-literal">nil</span>)
                <span class="hljs-keyword">let</span> fileURL = tmpSubFolderURL?.appendingPathComponent(imageFileIdentifier)
                <span class="hljs-keyword">try</span> data.write(to: fileURL!, options: [])
                <span class="hljs-keyword">let</span> imageAttachment = <span class="hljs-keyword">try</span> <span class="hljs-type">UNNotificationAttachment</span>(identifier: imageFileIdentifier, url: fileURL!, options: options)
                <span class="hljs-keyword">return</span> imageAttachment
            } <span class="hljs-keyword">catch</span> <span class="hljs-keyword">let</span> error {
                <span class="hljs-built_in">print</span>(<span class="hljs-string">"error \(error)"</span>)
            }

            <span class="hljs-keyword">return</span> <span class="hljs-literal">nil</span>
        }
    }

The code above is a class extension for the UNNotificationAttachment class. The extension contains the create method that allows us to create a temporary image to store the image attachment that was sent as a push notification.

Now you can build your application using Xcode. Make sure the Laravel application is running or the app won’t be able to fetch the data.

Allowing our application to connect locally

That’s it now. We can run our application. However, remember that to demo the push notifications, you will need an actual iOS device as simulators cannot receive push notifications.

Here is a screen recording of the application in action:

Conclusion

In this article, we have seen how you can use Pusher Beams to send push notifications from a Laravel backend and a Swift iOS client application. When creating social networks it is essential that the push notifications we send are relevant and not spammy and Pusher Beams can help with this.

The source code to the application is on GitHub.

This post first appeared on the Pusher blog.

Send push notifications in a social network iOS app - Part 1: Build the backend

Neo — Mon, 19 Nov 2018 17:14:21 +0000

To follow this tutorial you will need a Mac with Xcode installed, and knowledge of Xcode and Swift. You'll also need basic knowledge of PHP (including the Laravel framework), a Pusher account, and Cocoapods installed on your machine.

Push notifications are a great way to engage users of your application. It lets you send notifications when certain events happen on your service. This can lead to re-engagement.

While building a social network app, you'll need to send push notifications to your users. These notifications will help users know when certain events happen in your application. For instance, you can send push notifications to a user when someone comments on their photo.

As powerful as push notifications are, they are a double-edged sword. Most users will uninstall your application if they feel like they are being spammed.

Over the course of two articles, we will see how we can build a social networking iOS application. We will add push notifications to the user when someone comments on a photo they uploaded. Then we'll add settings so users can specify when they want to receive notifications.

Prerequisites

To follow along in this tutorial you need to have the following:

A Mac with Xcode installed.
Knowledge of using Xcode.
Knowledge of the Swift programming language.
Knowledge of PHP and Laravel.
Laravel CLI installed on your machine.
SQLite installed on your machine. See installation guide.
A Pusher beams API Key. Create one here.
Cocoapods installed on your machine. See installation guide.

Creating our Pusher application

⚠️ To use push notifications, you have to be a part of the Apple Developer program. Also, push notifications do not work on simulators so you will need an actual iOS device to test.

Pusher Beams has first-class support for native iOS applications. Your iOS app instances subscribe to Interests; then your servers send push notifications to those interests. Every app instance subscribed to that interest will receive the notification, even if the app is not open on the device at the time.

This section describes how you can set up an iOS app to receive transactional push notifications about news updates through Pusher.

Configure APNs

Pusher relies on the Apple Push Notification service (APNs) to deliver push notifications to iOS application users on your behalf. When we deliver push notifications, we use your key that has APNs service enabled. This page guides you through the process of getting the key and how to provide it to Pusher.

Head over to the Apple Developer dashboard by clicking here and then create a new key as seen below:

When you have created the key, download it. Keep it safe as we will need it in the next section.

⚠️ You have to keep the generated key safe as you cannot get it back if you lose it.

Creating your Pusher application

The next thing you need to do is create a new Pusher Beams application from the Pusher dashboard.

When you have created the application, you should be presented with a quick start that will help you set up the application.

In order to configure your Beams instance, you will need to get the key with APNs service enabled by Apple. This is the same key as the one we downloaded in the previous section. Once you’ve got the key, upload it.

Enter your Apple Team ID. You can get the Team ID from here. You can then continue with the setup wizard and copy the instance ID and secret key for your Pusher application.

Building the backend

Before we start building the iOS application, let’s build the backend API using Laravel. To get started we need to set up our Laravel application. Run the command below using your terminal:

    $ Laravel new gram

This will create a new Laravel application in the gram directory.

Configuring our database

Our application will need to connect to a database and we will be using SQLite as our database of choice as it's the easiest to set up.

To get started, create a new database.sqlite file in the database directory. Next open the .env file that comes with the Laravel project and replace the following lines:

    DB_CONNECTION=mysql
    DB_HOST=127.0.0.1
    DB_PORT=3306
    DB_DATABASE=homestead
    DB_USERNAME=homestead
    DB_PASSWORD=secret

With:

    DB_CONNECTION=sqlite
    DB_DATABASE=/full/path/to/database.sqlite

Now we have a connection to the database.

Creating our migrations, models, and controllers

When you want to create a migration, model, and controller, you should use the command below:

    $ php artisan make:model ModelName -mc

Using the above command as a template, create the following models, migrations, and controllers:

Photo
PhotoComment
UserFollow
UserSetting

In that order.

After running the commands, we should have migrations in the database/migrations directory, models in the app directory, and controllers in the app/Http/Controllers directory.

Let’s update the migrations. Open the *_create_photos_table.php migration and replace the up method with the following:

    <span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">up</span><span class="hljs-params">()</span>
    </span>{
        Schema::create(<span class="hljs-string">'photos'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(Blueprint $table)</span> </span>{
            $table->increments(<span class="hljs-string">'id'</span>);
            $table->unsignedInteger(<span class="hljs-string">'user_id'</span>);
            $table->foreign(<span class="hljs-string">'user_id'</span>)->references(<span class="hljs-string">'id'</span>)->on(<span class="hljs-string">'users'</span>);
            $table->string(<span class="hljs-string">'image'</span>);
            $table->string(<span class="hljs-string">'image_path'</span>);
            $table->string(<span class="hljs-string">'caption'</span>)->nullable();
            $table->timestamps();
        });
    }

Open the *_create_photo_comments_table.php migration and replace the up method with the following:

    <span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">up</span><span class="hljs-params">()</span>
    </span>{
        Schema::create(<span class="hljs-string">'photo_comments'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(Blueprint $table)</span> </span>{
            $table->increments(<span class="hljs-string">'id'</span>);
            $table->unsignedInteger(<span class="hljs-string">'photo_id'</span>);
            $table->foreign(<span class="hljs-string">'photo_id'</span>)->references(<span class="hljs-string">'id'</span>)->on(<span class="hljs-string">'photos'</span>);
            $table->unsignedInteger(<span class="hljs-string">'user_id'</span>);
            $table->foreign(<span class="hljs-string">'user_id'</span>)->references(<span class="hljs-string">'id'</span>)->on(<span class="hljs-string">'users'</span>);
            $table->text(<span class="hljs-string">'comment'</span>);
            $table->timestamps();
        });
    }

Open the *_create_user_follows_table.php migration and replace the up method with the following:

    <span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">up</span><span class="hljs-params">()</span>
    </span>{
        Schema::create(<span class="hljs-string">'user_follows'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(Blueprint $table)</span> </span>{
            $table->increments(<span class="hljs-string">'id'</span>);
            $table->unsignedInteger(<span class="hljs-string">'follower_id'</span>);
            $table->foreign(<span class="hljs-string">'follower_id'</span>)->references(<span class="hljs-string">'id'</span>)->on(<span class="hljs-string">'users'</span>);
            $table->unsignedInteger(<span class="hljs-string">'following_id'</span>);
            $table->foreign(<span class="hljs-string">'following_id'</span>)->references(<span class="hljs-string">'id'</span>)->on(<span class="hljs-string">'users'</span>);
            $table->timestamps();
        });
    }

Open the *_create_user_settings_table.php migration and replace the up method with the following:

    <span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">up</span><span class="hljs-params">()</span>
    </span>{
        Schema::create(<span class="hljs-string">'user_settings'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(Blueprint $table)</span> </span>{
            $table->increments(<span class="hljs-string">'id'</span>);
            $table->unsignedInteger(<span class="hljs-string">'user_id'</span>);
            $table->foreign(<span class="hljs-string">'user_id'</span>)->references(<span class="hljs-string">'id'</span>)->on(<span class="hljs-string">'users'</span>);
            $table->enum(<span class="hljs-string">'notification_comments'</span>, [<span class="hljs-string">'Off'</span>, <span class="hljs-string">'Following'</span>, <span class="hljs-string">'Everyone'</span>])
                  ->default(<span class="hljs-string">'Following'</span>);
        });
    }

That’s all for the migrations. Execute the migrations by running the command below:

    $ php artisan migrate

When that’s done, we can update our models. Open the Photo model in the app directory and replace the contents with the following:

    <span class="hljs-meta"><?php</span>

    <span class="hljs-keyword">namespace</span> <span class="hljs-title">App</span>;

    <span class="hljs-keyword">use</span> <span class="hljs-title">Illuminate</span>\<span class="hljs-title">Database</span>\<span class="hljs-title">Eloquent</span>\<span class="hljs-title">Model</span>;

    <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Photo</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Model</span>
    </span>{
        <span class="hljs-keyword">protected</span> $hidden = [<span class="hljs-string">'image_path'</span>];

        <span class="hljs-keyword">protected</span> $with = [<span class="hljs-string">'user'</span>, <span class="hljs-string">'comments'</span>];

        <span class="hljs-keyword">protected</span> $fillable = [<span class="hljs-string">'user_id'</span>, <span class="hljs-string">'caption'</span>, <span class="hljs-string">'image'</span>, <span class="hljs-string">'image_path'</span>];

        <span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">user</span><span class="hljs-params">()</span>
        </span>{
            <span class="hljs-keyword">return</span> <span class="hljs-keyword">$this</span>->belongsTo(User::class);
        }

        <span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">comments</span><span class="hljs-params">()</span>
        </span>{
            <span class="hljs-keyword">return</span> <span class="hljs-keyword">$this</span>->hasMany(PhotoComment::class)->orderBy(<span class="hljs-string">'id'</span>, <span class="hljs-string">'desc'</span>);
        }
    }

In the model above we have the user and comments methods, which are relationships to the User model and the PhotoComment model.

Open the PhotoComment class in the app directory and replace the content with the following:

    <span class="hljs-meta"><?php</span>

    <span class="hljs-keyword">namespace</span> <span class="hljs-title">App</span>;

    <span class="hljs-keyword">use</span> <span class="hljs-title">Illuminate</span>\<span class="hljs-title">Database</span>\<span class="hljs-title">Eloquent</span>\<span class="hljs-title">Model</span>;
    <span class="hljs-keyword">use</span> <span class="hljs-title">Illuminate</span>\<span class="hljs-title">Notifications</span>\<span class="hljs-title">Notifiable</span>;

    <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">PhotoComment</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Model</span>
    </span>{
        <span class="hljs-keyword">use</span> <span class="hljs-title">Notifiable</span>;

        <span class="hljs-keyword">protected</span> $with = [<span class="hljs-string">'user'</span>];

        <span class="hljs-keyword">protected</span> $fillable = [<span class="hljs-string">'photo_id'</span>, <span class="hljs-string">'user_id'</span>, <span class="hljs-string">'comment'</span>];

        <span class="hljs-keyword">protected</span> $casts = [<span class="hljs-string">'photo_id'</span> => <span class="hljs-string">'int'</span>, <span class="hljs-string">'user_id'</span> => <span class="hljs-string">'int'</span>];

        <span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">scopeForPhoto</span><span class="hljs-params">($query, int $id)</span>
        </span>{
            <span class="hljs-keyword">return</span> $query->where(<span class="hljs-string">'photo_id'</span>, $id);
        }

        <span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">user</span><span class="hljs-params">()</span>
        </span>{
            <span class="hljs-keyword">return</span> <span class="hljs-keyword">$this</span>->belongsTo(User::class);
        }
    }

In the model above we are using the Notifiable trait because we want to be able to send push notifications when new comments are made on photos later in the article. We also have a scopeForPhoto method, which is an Eloquent query scope. We also have a user method, which is a relationship to the User model.

Open the User model in the app directory and replace the content with the following:

    <span class="hljs-meta"><?php</span>

    <span class="hljs-keyword">namespace</span> <span class="hljs-title">App</span>;

    <span class="hljs-keyword">use</span> <span class="hljs-title">Illuminate</span>\<span class="hljs-title">Notifications</span>\<span class="hljs-title">Notifiable</span>;
    <span class="hljs-keyword">use</span> <span class="hljs-title">Illuminate</span>\<span class="hljs-title">Foundation</span>\<span class="hljs-title">Auth</span>\<span class="hljs-title">User</span> <span class="hljs-title">as</span> <span class="hljs-title">Authenticatable</span>;

    <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">User</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Authenticatable</span>
    </span>{
        <span class="hljs-keyword">use</span> <span class="hljs-title">Notifiable</span>;

        <span class="hljs-keyword">protected</span> $fillable = [<span class="hljs-string">'name'</span>, <span class="hljs-string">'email'</span>, <span class="hljs-string">'password'</span>];

        <span class="hljs-keyword">protected</span> $hidden = [<span class="hljs-string">'password'</span>, <span class="hljs-string">'remember_token'</span>];

        <span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">allowsCommentsNotifications</span><span class="hljs-params">(User $actor)</span>
        </span>{
            $status = strtolower(<span class="hljs-keyword">$this</span>->settings->notification_comments);

            <span class="hljs-keyword">switch</span> ($status) {
                <span class="hljs-keyword">case</span> <span class="hljs-string">'everyone'</span>: <span class="hljs-keyword">return</span> <span class="hljs-keyword">true</span>;
                <span class="hljs-keyword">case</span> <span class="hljs-string">'following'</span>: <span class="hljs-keyword">return</span> <span class="hljs-keyword">$this</span>->isFollowing($actor);
                <span class="hljs-keyword">default</span>: <span class="hljs-keyword">return</span> <span class="hljs-keyword">false</span>;
            }
        }

        <span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">isFollowing</span><span class="hljs-params">(User $user)</span>: <span class="hljs-title">bool</span>
        </span>{
            <span class="hljs-keyword">return</span> <span class="hljs-keyword">$this</span>->following->where(<span class="hljs-string">'following_id'</span>, $user->id)->count() > <span class="hljs-number">0</span>;
        }

        <span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">scopeOtherUsers</span><span class="hljs-params">($query)</span>
        </span>{
            <span class="hljs-keyword">return</span> $query->where(<span class="hljs-string">'id'</span>, <span class="hljs-string">'!='</span>, auth()->user()->id);
        }

        <span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">following</span><span class="hljs-params">()</span>
        </span>{
            <span class="hljs-keyword">return</span> <span class="hljs-keyword">$this</span>->hasMany(UserFollow::class, <span class="hljs-string">'follower_id'</span>);
        }

        <span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">followers</span><span class="hljs-params">()</span>
        </span>{
            <span class="hljs-keyword">return</span> <span class="hljs-keyword">$this</span>->hasMany(UserFollow::class, <span class="hljs-string">'following_id'</span>);
        }

        <span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">settings</span><span class="hljs-params">()</span>
        </span>{
            <span class="hljs-keyword">return</span> <span class="hljs-keyword">$this</span>->hasOne(UserSetting::class);
        }
    }

In the model above we have six methods:

allowsCommentsNotifications checks to see if the owner of the photo has settings that permit notifications to be sent to them when there is a new comment.
isFollowing checks if a user is following another user.
scopeOtherUsers is an Eloquent query scope.
following, followers and settings are methods that define relationships with other models.

Open the UserFollow model in the app directory and replace the content with the following:

    <span class="hljs-meta"><?php</span>

    <span class="hljs-keyword">namespace</span> <span class="hljs-title">App</span>;

    <span class="hljs-keyword">use</span> <span class="hljs-title">Illuminate</span>\<span class="hljs-title">Database</span>\<span class="hljs-title">Eloquent</span>\<span class="hljs-title">Model</span>;

    <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">UserFollow</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Model</span>
    </span>{
        <span class="hljs-keyword">protected</span> $fillable = [<span class="hljs-string">'follower_id'</span>, <span class="hljs-string">'following_id'</span>];
    }

Finally, open the UserSetting model in the app directory and replace the content with the following:

    <span class="hljs-meta"><?php</span>

    <span class="hljs-keyword">namespace</span> <span class="hljs-title">App</span>;

    <span class="hljs-keyword">use</span> <span class="hljs-title">Illuminate</span>\<span class="hljs-title">Database</span>\<span class="hljs-title">Eloquent</span>\<span class="hljs-title">Model</span>;

    <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">UserSetting</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Model</span>
    </span>{
        <span class="hljs-keyword">protected</span> $fillable = [<span class="hljs-string">'notification_comments'</span>];

        <span class="hljs-keyword">protected</span> $hidden = [<span class="hljs-string">'id'</span>, <span class="hljs-string">'user_id'</span>];

        <span class="hljs-keyword">public</span> $timestamps = <span class="hljs-keyword">false</span>;

        <span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">scopeForCurrentUser</span><span class="hljs-params">($query)</span>
        </span>{
            <span class="hljs-keyword">return</span> $query->where(<span class="hljs-string">'user_id'</span>, auth()->user()->id);
        }
    }

Above we have the scopeForCurrentUser method, which is an Eloquent query scope.

We set the $timestamps property to false to instruct Eloquent not to attempt to automatically manage the created_at and updated_at fields as we do not have them in the user settings table.

One last thing we want to do is, create a new setting automatically when a user is created. For this, we will use an Eloquent event. Open the AppServiceProvider class in the app/Providers directory and replace the boot method with the following:

    public function boot()
    {
        \App\User::created(function ($user) {
            $user->settings()->save(new \App\UserSetting);
        });
    }

As seen above, when a new user is created, a new user setting is saved to the user.

Next, let’s update the logic for the controllers. Open the PhotoController.php in the app/Http/Controllers directory and replace the contents with the following:

    <span class="hljs-meta"><?php</span>

    <span class="hljs-keyword">namespace</span> <span class="hljs-title">App</span>\<span class="hljs-title">Http</span>\<span class="hljs-title">Controllers</span>;

    <span class="hljs-keyword">use</span> <span class="hljs-title">App</span>\<span class="hljs-title">Photo</span>;
    <span class="hljs-keyword">use</span> <span class="hljs-title">Illuminate</span>\<span class="hljs-title">Http</span>\<span class="hljs-title">Request</span>;
    <span class="hljs-keyword">use</span> <span class="hljs-title">Illuminate</span>\<span class="hljs-title">Support</span>\<span class="hljs-title">Facades</span>\<span class="hljs-title">Storage</span>;

    <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">PhotoController</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Controller</span>
    </span>{
        <span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">index</span><span class="hljs-params">()</span>
        </span>{
            $photos = Photo::orderBy(<span class="hljs-string">'id'</span>, <span class="hljs-string">'desc'</span>)->paginate(<span class="hljs-number">20</span>);

            <span class="hljs-keyword">return</span> response()->json($photos->toArray());
        }

        <span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">store</span><span class="hljs-params">(Request $request)</span>
        </span>{
            $data = $request->validate([
                <span class="hljs-string">'caption'</span> => <span class="hljs-string">'required|between:1,1000'</span>,
                <span class="hljs-string">'image'</span> => <span class="hljs-string">'required|image|mimes:jpeg,gif,png'</span>,
            ]);

            $path = Storage::disk(<span class="hljs-string">'public'</span>)->putFile(<span class="hljs-string">'photos'</span>, $request->file(<span class="hljs-string">'image'</span>));

            $data = array_merge($data, [
                <span class="hljs-string">'user_id'</span> => $request->user()->id,
                <span class="hljs-string">'image'</span> => asset(<span class="hljs-string">"storage/{$path}"</span>),
                <span class="hljs-string">'image_path'</span> => storage_path(<span class="hljs-string">'app/public'</span>) . <span class="hljs-string">"/{$path}"</span>,
            ]);

            $photo = Photo::create($data);

            <span class="hljs-keyword">return</span> response()->json([
                <span class="hljs-string">'status'</span> => <span class="hljs-string">'success'</span>,
                <span class="hljs-string">'data'</span> => $photo->load([<span class="hljs-string">'user'</span>, <span class="hljs-string">'comments'</span>])
            ]);
        }
    }

In the PhotoController above we have two methods. The index displays all the available photos, and the store saves a new photo to disk and database.

For the photos saved to be available to the public, we need to link the storage directory to the public directory. To do so run the command below:

    $ php artisan storage:link

The command above will create a symlink from the public/storage directory to the storage/app/public directory that our photos will be uploaded to.

Open the PhotoCommentController.php in the app/Http/Controllers directory and replace the contents with the following:

    <span class="hljs-meta"><?php</span>

    <span class="hljs-keyword">namespace</span> <span class="hljs-title">App</span>\<span class="hljs-title">Http</span>\<span class="hljs-title">Controllers</span>;

    <span class="hljs-keyword">use</span> <span class="hljs-title">App</span>\<span class="hljs-title">Photo</span>;
    <span class="hljs-keyword">use</span> <span class="hljs-title">App</span>\<span class="hljs-title">PhotoComment</span>;
    <span class="hljs-keyword">use</span> <span class="hljs-title">Illuminate</span>\<span class="hljs-title">Http</span>\<span class="hljs-title">Request</span>;
    <span class="hljs-keyword">use</span> <span class="hljs-title">App</span>\<span class="hljs-title">Notifications</span>\<span class="hljs-title">UserCommented</span>;

    <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">PhotoCommentController</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Controller</span>
    </span>{
        <span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">index</span><span class="hljs-params">(Request $request)</span>
        </span>{
            $photo = Photo::with(<span class="hljs-string">'comments'</span>)->findOrFail($request->route(<span class="hljs-string">'photo'</span>));

            <span class="hljs-keyword">return</span> response()->json([<span class="hljs-string">'data'</span> => $photo->comments]);
        }

        <span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">store</span><span class="hljs-params">(Request $request, Photo $photo)</span>
        </span>{
            $data = $request->validate([<span class="hljs-string">'comment'</span> => <span class="hljs-string">'required|string|between:2,500'</span>]);

            $comment = PhotoComment::create([
                <span class="hljs-string">'photo_id'</span> => $photo->id,
                <span class="hljs-string">'comment'</span> => $data[<span class="hljs-string">'comment'</span>],
                <span class="hljs-string">'user_id'</span> => $request->user()->id,
            ]);

            <span class="hljs-keyword">if</span> ($photo->user->allowsCommentsNotifications($request->user())) {
                $comment->notify(<span class="hljs-keyword">new</span> UserCommented($request->user(), $photo, $comment));
            }

            <span class="hljs-keyword">return</span> response()->json([
                <span class="hljs-string">'status'</span> => <span class="hljs-string">'success'</span>, 
                <span class="hljs-string">'data'</span> => $comment->load(<span class="hljs-string">'user'</span>)
            ]);
        }
    }

In the PhotoCommentController we have two methods. The index method displays all the comments for a single photo and the store creates a new comment.

In the store method on line 30, we have a call to a notify method and passes a nonexistent UserCommented class. This class is a Laravel notification class. We will create this class later in the article. It’s needed to send notifications to the user when comments are made.

Create a UserController by running the command below:

    $ php artisan make:controller UserController

Next open the UserController.php in the app/Http/Controllers directory and replace the contents with the following:

    <span class="hljs-meta"><?php</span>

    <span class="hljs-keyword">namespace</span> <span class="hljs-title">App</span>\<span class="hljs-title">Http</span>\<span class="hljs-title">Controllers</span>;

    <span class="hljs-keyword">use</span> <span class="hljs-title">App</span>\<span class="hljs-title">User</span>;
    <span class="hljs-keyword">use</span> <span class="hljs-title">Illuminate</span>\<span class="hljs-title">Support</span>\<span class="hljs-title">Facades</span>\<span class="hljs-title">Hash</span>;

    <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">UserController</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Controller</span>
    </span>{
        <span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">index</span><span class="hljs-params">()</span>
        </span>{
            $users = [];

            User::with(<span class="hljs-string">'followers'</span>)->otherUsers()->get()->each(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">($user, $index)</span> <span class="hljs-title">use</span> <span class="hljs-params">(&$users)</span> </span>{
                $users[$index] = $user;
                $users[$index][<span class="hljs-string">'follows'</span>] = auth()->user()->isFollowing($user);
            });

            <span class="hljs-keyword">return</span> response()->json([<span class="hljs-string">'data'</span> => $users]);
        }

        <span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">create</span><span class="hljs-params">(Request $request)</span>
        </span>{
            $credentials = $request->validate([
                <span class="hljs-string">'name'</span> => <span class="hljs-string">'required|string|max:255'</span>,
                <span class="hljs-string">'email'</span> => <span class="hljs-string">'required|string|email|max:255|unique:users'</span>,
                <span class="hljs-string">'password'</span> => <span class="hljs-string">'required|string|min:6'</span>,
            ]);

            $credentials[<span class="hljs-string">'password'</span>] = Hash::make($credentials[<span class="hljs-string">'password'</span>]);

            $user = User::create($credentials);

            $token = $user->createToken(config(<span class="hljs-string">'app.name'</span>));

            $data = [<span class="hljs-string">'user'</span> => $user, <span class="hljs-string">'access_token'</span> => $token->accessToken];

            <span class="hljs-keyword">return</span> response()->json([<span class="hljs-string">'data'</span> => $data, <span class="hljs-string">'status'</span> => <span class="hljs-string">'success'</span>]);
        }
    }

The UserController has two methods, one is the index method that returns all the users on the service, and the second is the create method that registers a new user and returns an access token that will be used for making authorized requests on behalf of the user.

Open the UserFollowController.php in the app/Http/Controllers directory and replace the contents with the following:

    <span class="hljs-meta"><?php</span>

    <span class="hljs-keyword">namespace</span> <span class="hljs-title">App</span>\<span class="hljs-title">Http</span>\<span class="hljs-title">Controllers</span>;

    <span class="hljs-keyword">use</span> <span class="hljs-title">App</span>\<span class="hljs-title">User</span>;
    <span class="hljs-keyword">use</span> <span class="hljs-title">App</span>\<span class="hljs-title">UserFollow</span>;
    <span class="hljs-keyword">use</span> <span class="hljs-title">Illuminate</span>\<span class="hljs-title">Http</span>\<span class="hljs-title">Request</span>;

    <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">UserFollowController</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Controller</span>
    </span>{
        <span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">follow</span><span class="hljs-params">(Request $request)</span>
        </span>{
            $user = User::findOrFail($request->get(<span class="hljs-string">'following_id'</span>));


            <span class="hljs-keyword">if</span> ($request->user()->isFollowing($user) == <span class="hljs-keyword">false</span>) {
                $request->user()->following()->save(
                    <span class="hljs-keyword">new</span> UserFollow($request->only(<span class="hljs-string">'following_id'</span>)
                ));
            }

            <span class="hljs-keyword">return</span> response()->json([<span class="hljs-string">'status'</span> => <span class="hljs-string">'success'</span>]);
        }

        <span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">unfollow</span><span class="hljs-params">(Request $request)</span>
        </span>{
            $user = User::findOrFail($request->get(<span class="hljs-string">'following_id'</span>));

            $request->user()->following()->whereFollowingId($user->id)->delete();

            <span class="hljs-keyword">return</span> response()->json([<span class="hljs-string">'status'</span> => <span class="hljs-string">'success'</span>]);
        }
    }

The controller above simply follows or unfollows a user.

Open the UserSettingController.php in the app/Http/Controllers directory and replace the contents with the following:

    <span class="hljs-meta"><?php</span>

    <span class="hljs-keyword">namespace</span> <span class="hljs-title">App</span>\<span class="hljs-title">Http</span>\<span class="hljs-title">Controllers</span>;

    <span class="hljs-keyword">use</span> <span class="hljs-title">App</span>\<span class="hljs-title">UserSetting</span>;
    <span class="hljs-keyword">use</span> <span class="hljs-title">Illuminate</span>\<span class="hljs-title">Http</span>\<span class="hljs-title">Request</span>;

    <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">UserSettingController</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Controller</span>
    </span>{
        <span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">index</span><span class="hljs-params">()</span>
        </span>{
            <span class="hljs-keyword">return</span> response()->json(UserSetting::forCurrentUser()->first());
        }

        <span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">update</span><span class="hljs-params">(Request $request)</span>
        </span>{
            $settings = $request->validate([
                <span class="hljs-string">'notification_comments'</span> => <span class="hljs-string">'in:Off,Following,Everyone'</span>,
            ]);

            $updated = $request->user()->settings()->update($settings);

            <span class="hljs-keyword">return</span> response()->json([<span class="hljs-string">'status'</span> => $updated ? <span class="hljs-string">'success'</span> : <span class="hljs-string">'error'</span>]);
        }
    }

In the controller above we return all the settings available for a user in the index method and then we update the settings for the user in the update method.

Creating our application’s routes

Since we have created our controllers, let’s create our routes that link the URL to controllers. Open the routes/api.php file and replace the contents with the following:

    <span class="hljs-meta"><?php</span>

    Route::post(<span class="hljs-string">'/register'</span>, <span class="hljs-string">'UserController@create'</span>);

    Route::group([<span class="hljs-string">'middleware'</span> => <span class="hljs-string">'auth:api'</span>], <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
        Route::get(<span class="hljs-string">'/users/settings'</span>, <span class="hljs-string">'UserSettingController@index'</span>);
        Route::put(<span class="hljs-string">'/users/settings'</span>, <span class="hljs-string">'UserSettingController@update'</span>);
        Route::post(<span class="hljs-string">'/users/follow'</span>, <span class="hljs-string">'UserFollowController@follow'</span>);
        Route::post(<span class="hljs-string">'/users/unfollow'</span>, <span class="hljs-string">'UserFollowController@unfollow'</span>);
        Route::get(<span class="hljs-string">'/users'</span>, <span class="hljs-string">'UserController@index'</span>);
        Route::get(<span class="hljs-string">'/photos/{photo}/comments'</span>, <span class="hljs-string">'PhotoCommentController@index'</span>);
        Route::post(<span class="hljs-string">'/photos/{photo}/comments'</span>, <span class="hljs-string">'PhotoCommentController@store'</span>);
        Route::resource(<span class="hljs-string">'/photos'</span>, <span class="hljs-string">'PhotoController'</span>)->only([<span class="hljs-string">'store'</span>, <span class="hljs-string">'index'</span>]);
    });

Above we have defined routes for our application. Each route points to a controller and a method in that controller that will handle the route. The route group above has a middleware applied, auth:api, this will make sure that every request to a route inside the group has to be authorized.

To manage authorization, let’s install Laravel passport.

Installing Laravel Passport

Since we have many requests that require authorization, let’s install Laravel Passport. In the root directory of your project and run the following command:

    $ composer require laravel/passport

This will install Laravel Passport to the project. Open the User model in the app directory and use the HasApiTokens trait:

    <span class="hljs-meta"><?php</span>

    <span class="hljs-comment">// [...]</span>

    <span class="hljs-keyword">use</span> <span class="hljs-title">Laravel</span>\<span class="hljs-title">Passport</span>\<span class="hljs-title">HasApiTokens</span>;

    <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">User</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Authenticatable</span>
    </span>{
        <span class="hljs-keyword">use</span> <span class="hljs-title">HasApiTokens</span>, <span class="hljs-title">Notifiable</span>;

        <span class="hljs-comment">// [...]</span>
    }

Next open the AuthServiceProvider class in the app/Providers directory and update it to the following:

    <span class="hljs-meta"><?php</span>

    <span class="hljs-comment">// [...]</span>

    <span class="hljs-keyword">use</span> <span class="hljs-title">Laravel</span>\<span class="hljs-title">Passport</span>\<span class="hljs-title">Passport</span>;

    <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">AuthServiceProvider</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">ServiceProvider</span>
    </span>{
        <span class="hljs-comment">// [...]</span>

        <span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">boot</span><span class="hljs-params">()</span>
        </span>{
            <span class="hljs-comment">// [...]</span>

            Passport::routes();
        }
    }

Open the config/auth.php configuration file and set the driver option of the api authentication guard to passport. This will instruct your application to use Passport's TokenGuard when authenticating incoming API requests:

    <span class="hljs-string">'guards'</span> => [
        <span class="hljs-comment">// [...]</span>

        <span class="hljs-string">'api'</span> => [
            <span class="hljs-string">'driver'</span> => <span class="hljs-string">'passport'</span>,
            <span class="hljs-string">'provider'</span> => <span class="hljs-string">'users'</span>,
        ],
    ],

To complete the installation, run the commands below, which will perform a migration and install Laravel Passport to your application:

    $ php artisan migrate
    $ php artisan passport:install

Passport is successfully installed after the commands finish execution. The passport:install command will create two files in the storage directory: oauth-public.key and oauth-private.key. These keys will be used to sign and validate access tokens.

⚠️ Copy and save the client ID and secret for the second client as you will need it later in the article.

Adding push notification support

The next thing we want to do is add push notification support. For this, we will be using Pusher Beams. For convenience, we will be using a PHP library that is a Laravel supported wrapper for the Pusher Beams PHP library.

In your terminal run the following command:

    $ composer require neo/pusher-beams

When the installation is completed, open the .env file and add the following keys to the file:

    PUSHER_BEAMS_SECRET_KEY="PUSHER_BEAMS_SECRET_KEY"
    PUSHER_BEAMS_INSTANCE_ID="PUSHER_BEAMS_INSTANCE_ID"

💡 You need to replace the PUSHER_BEAMS_SECRET_KEY and PUSHER_BEAMS_INSTANCE_ID keys with the keys gotten from your Pusher dashboard.

Open the broadcasting.php file in the config directory and add the following keys to the pusher connection array:

    <span class="hljs-string">'connections'</span> => [
        <span class="hljs-string">'pusher'</span> => [
            <span class="hljs-comment">// [...]</span>

            <span class="hljs-string">'beams'</span> => [
                <span class="hljs-string">'secret_key'</span> => env(<span class="hljs-string">'PUSHER_BEAMS_SECRET_KEY'</span>),
                <span class="hljs-string">'instance_id'</span> => env(<span class="hljs-string">'PUSHER_BEAMS_INSTANCE_ID'</span>),
            ],

            <span class="hljs-comment">// [...]</span>
        ],
    ],

Next, create a new notification class where we will add our push notification. In your terminal run the command below to create the class:

    $ php artisan make:notification UserCommented

This will create a new UserCommented class in the app/Notifications directory. Open the file and replace the contents with the following:

    <span class="hljs-meta"><?php</span>

    <span class="hljs-keyword">namespace</span> <span class="hljs-title">App</span>\<span class="hljs-title">Notifications</span>;

    <span class="hljs-keyword">use</span> <span class="hljs-title">Illuminate</span>\<span class="hljs-title">Bus</span>\<span class="hljs-title">Queueable</span>;
    <span class="hljs-keyword">use</span> <span class="hljs-title">Illuminate</span>\<span class="hljs-title">Notifications</span>\<span class="hljs-title">Notification</span>;
    <span class="hljs-keyword">use</span> <span class="hljs-title">Neo</span>\<span class="hljs-title">PusherBeams</span>\<span class="hljs-title">PusherBeams</span>;
    <span class="hljs-keyword">use</span> <span class="hljs-title">Neo</span>\<span class="hljs-title">PusherBeams</span>\<span class="hljs-title">PusherMessage</span>;
    <span class="hljs-keyword">use</span> <span class="hljs-title">App</span>\<span class="hljs-title">User</span>;
    <span class="hljs-keyword">use</span> <span class="hljs-title">App</span>\<span class="hljs-title">PhotoComment</span>;
    <span class="hljs-keyword">use</span> <span class="hljs-title">App</span>\<span class="hljs-title">Photo</span>;

    <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">UserCommented</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Notification</span>
    </span>{
        <span class="hljs-keyword">use</span> <span class="hljs-title">Queueable</span>;

        <span class="hljs-keyword">public</span> $user;

        <span class="hljs-keyword">public</span> $comment;

        <span class="hljs-keyword">public</span> $photo;

        <span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">__construct</span><span class="hljs-params">(User $user, Photo $photo, PhotoComment $comment)</span>
        </span>{
            <span class="hljs-keyword">$this</span>->user = $user;
            <span class="hljs-keyword">$this</span>->photo = $photo;
            <span class="hljs-keyword">$this</span>->comment = $comment;
        }

        <span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">via</span><span class="hljs-params">($notifiable)</span>
        </span>{
            <span class="hljs-keyword">return</span> [PusherBeams::class];
        }

        <span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">toPushNotification</span><span class="hljs-params">($notifiable)</span>
        </span>{
            <span class="hljs-keyword">return</span> PusherMessage::create()
                ->iOS()
                ->sound(<span class="hljs-string">'success'</span>)
                ->title(<span class="hljs-string">'New Comment'</span>)
                ->body(<span class="hljs-string">"{$this->user->name} commented on your photo: {$this->comment->comment}"</span>)
                ->setOption(<span class="hljs-string">'apns.aps.mutable-content'</span>, <span class="hljs-number">1</span>)
                ->setOption(<span class="hljs-string">'apns.data.attachment-url'</span>, <span class="hljs-keyword">$this</span>->photo->image);
        }

        <span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">pushNotificationInterest</span><span class="hljs-params">()</span>
        </span>{
            $id = <span class="hljs-keyword">$this</span>->photo->id;

            $audience = strtolower(<span class="hljs-keyword">$this</span>->user->settings->notification_comments);

            <span class="hljs-keyword">return</span> <span class="hljs-string">"photo_{$id}-comment_{$audience}"</span>;
        }
    }

In the class above we are extending a Notification class and we have implemented the toPushNotification method, which will be used to send the push notification when required. In the via method, we specify what channels we want to send the notification through and in the pushNotificationInterest we specify the interest we want to publish the push notification to.

If you remember earlier, we invoked the notification on line 30 of the PhotoCommentController.

💡 Read more about Laravel Notifications and how it works.

That’s it. The backend application is complete. To start serving the application, run the following command:

    $ php artisan serve

This will start a PHP server running on port 8000.

Building our iOS application using Swift

Now that we have a backend server that can serve us all the information we want and also send push notifications, let us create our iOS application, which will be the client application.

Launch Xcode and create a new ‘Single Page App’ project. Let's call it Gram. When the project is created, exit Xcode and cd to the root of the project using a terminal. In the root of the project create a Podfile and paste the following into the file:

    platform :ios, '11.0'

    target 'Gram' do
      use_frameworks!

      pod 'Alamofire', '~> 4.7.1'
      pod 'PushNotifications', '~> 0.10.6'
      pod 'NotificationBannerSwift'
    end

Then run the command below to start installing the dependencies we defined above:

    $ pod install

When the installation is complete, we will have a new .xcworkspace file in the root of the project. Double-click the workspace file to relaunch Xcode.

Creating our storyboard

Next, let’s create our storyboard. Open your Main.storyboard file. We want to design it to look similar to this:

How the storyboard scenes are connected

The first scene we have a launch view controller. This controller connects to the login scene, register scene or the main navigation controller depending on the login status of the user. The login and register scenes are basic and they simply authenticate the user.

The main navigation controller connects to the main controller that displays the timeline. From that scene, there are connections to the settings scene, the search scene, and the view comments scene. Each segue connection is given an identifier so we can present them from the controller code.

When you are done creating the storyboard, let’s create the custom classes for each storyboard scene.

Creating our models

To help us with managing our API’s JSON responses we will be using Codable in Swift 4. This will make it extremely easy for us to manage the responses from the API.

Create a new file named Models.swift and paste this in the file:

    <span class="hljs-keyword">import</span> Foundation

    <span class="hljs-keyword">typealias</span> <span class="hljs-type">Users</span> = [<span class="hljs-type">User</span>]
    <span class="hljs-keyword">typealias</span> <span class="hljs-type">Photos</span> = [<span class="hljs-type">Photo</span>]
    <span class="hljs-keyword">typealias</span> <span class="hljs-type">PhotoComments</span> = [<span class="hljs-type">PhotoComment</span>]

    <span class="hljs-class"><span class="hljs-keyword">struct</span> <span class="hljs-title">User</span>: <span class="hljs-title">Codable</span> </span>{
        <span class="hljs-keyword">var</span> id: <span class="hljs-type">Int</span>
        <span class="hljs-keyword">var</span> name: <span class="hljs-type">String</span>
        <span class="hljs-keyword">var</span> email: <span class="hljs-type">String</span>
        <span class="hljs-keyword">var</span> follows: <span class="hljs-type">Bool</span>?
    }

    <span class="hljs-class"><span class="hljs-keyword">struct</span> <span class="hljs-title">Photo</span>: <span class="hljs-title">Codable</span> </span>{
        <span class="hljs-keyword">var</span> id: <span class="hljs-type">Int</span>
        <span class="hljs-keyword">var</span> user: <span class="hljs-type">User</span>
        <span class="hljs-keyword">var</span> image: <span class="hljs-type">String</span>
        <span class="hljs-keyword">var</span> caption: <span class="hljs-type">String</span>
        <span class="hljs-keyword">var</span> comments: <span class="hljs-type">PhotoComments</span>    
    }

    <span class="hljs-class"><span class="hljs-keyword">struct</span> <span class="hljs-title">PhotoComment</span>: <span class="hljs-title">Codable</span> </span>{
        <span class="hljs-keyword">var</span> id: <span class="hljs-type">Int</span>
        <span class="hljs-keyword">var</span> user: <span class="hljs-type">User</span>
        <span class="hljs-keyword">var</span> photo_id: <span class="hljs-type">Int</span>
        <span class="hljs-keyword">var</span> user_id: <span class="hljs-type">Int</span>
        <span class="hljs-keyword">var</span> comment: <span class="hljs-type">String</span>
    }

Creating our services

Our services will contain code that we will need to make calls to the API and also other functionality that interacts with the application view.

Create a new class SettingsService and paste the following code into the file:

    <span class="hljs-keyword">import</span> Foundation

    <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">SettingsService</span>: <span class="hljs-title">NSObject</span> </span>{

        <span class="hljs-keyword">static</span> <span class="hljs-keyword">let</span> shared = <span class="hljs-type">SettingsService</span>()    
        <span class="hljs-keyword">static</span> <span class="hljs-keyword">let</span> key = <span class="hljs-string">"gram.settings.notifications"</span>
        <span class="hljs-keyword">var</span> settings: [<span class="hljs-type">String</span>: <span class="hljs-type">String</span>] = [:];

        <span class="hljs-keyword">private</span> <span class="hljs-keyword">var</span> allSettings: [<span class="hljs-type">String</span>: <span class="hljs-type">String</span>] {
            <span class="hljs-keyword">set</span> {
                <span class="hljs-keyword">self</span>.settings = newValue
            }
            <span class="hljs-keyword">get</span> {
                <span class="hljs-keyword">if</span> <span class="hljs-keyword">let</span> settings = loadFromDefaults(), settings[<span class="hljs-string">"notification_comments"</span>] != <span class="hljs-literal">nil</span> {
                    <span class="hljs-keyword">return</span> settings
                }

                <span class="hljs-keyword">return</span> [
                    <span class="hljs-string">"notification_comments"</span>: <span class="hljs-type">Setting</span>.<span class="hljs-type">Notification</span>.<span class="hljs-type">Comments</span>.following.<span class="hljs-built_in">toString</span>()
                ];
            }
        }

        <span class="hljs-keyword">override</span> <span class="hljs-keyword">private</span> <span class="hljs-keyword">init</span>() {
            <span class="hljs-keyword">super</span>.<span class="hljs-keyword">init</span>()
            <span class="hljs-keyword">self</span>.settings = <span class="hljs-keyword">self</span>.allSettings
        }

        <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">loadFromDefaults</span><span class="hljs-params">()</span></span> -> [<span class="hljs-type">String</span>: <span class="hljs-type">String</span>]? {
            <span class="hljs-keyword">return</span> <span class="hljs-type">UserDefaults</span>.standard.dictionary(forKey: <span class="hljs-type">SettingsService</span>.key) <span class="hljs-keyword">as</span>? [<span class="hljs-type">String</span>: <span class="hljs-type">String</span>]
        }

        <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">loadFromApi</span><span class="hljs-params">()</span></span> {
            <span class="hljs-type">ApiService</span>.shared.loadSettings { settings <span class="hljs-keyword">in</span>
                <span class="hljs-keyword">if</span> <span class="hljs-keyword">let</span> settings = settings {
                    <span class="hljs-keyword">self</span>.allSettings = settings
                    <span class="hljs-keyword">self</span>.saveSettings(saveRemotely: <span class="hljs-literal">false</span>)
                }
            }
        }

        <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">updateCommentsNotificationSetting</span><span class="hljs-params">(<span class="hljs-number">_</span> status: Setting.Notification.Comments)</span></span> {
            <span class="hljs-keyword">self</span>.allSettings[<span class="hljs-string">"notification_comments"</span>] = status.<span class="hljs-built_in">toString</span>()
            saveSettings()
        }

        <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">saveSettings</span><span class="hljs-params">(saveRemotely: Bool = <span class="hljs-literal">true</span>)</span></span> {
            <span class="hljs-type">UserDefaults</span>.standard.<span class="hljs-keyword">set</span>(settings, forKey: <span class="hljs-type">SettingsService</span>.key)

            <span class="hljs-keyword">if</span> saveRemotely == <span class="hljs-literal">true</span> {
                <span class="hljs-type">ApiService</span>.shared.saveSettings(settings: settings) { <span class="hljs-number">_</span> <span class="hljs-keyword">in</span> }
            }
        }
    }

In the class above we have defined the settings service. The class is how we manage settings for our application. In the allSettings setter, we attempt to fetch the settings from the local store and if we cant, we return some sensible defaults.

We have the loadFromDefaults method that loads the settings locally from the UserDefaults, the loadFromApi class that loads settings from the API using the ApiService, the updateCommentsNotificationSetting, which updates the comment notification settings. Finally, we have the saveSettings method that saves the comment locally and remotely.

In the same file, add the following enum to the bottom:

    <span class="hljs-class"><span class="hljs-keyword">enum</span> <span class="hljs-title">Setting</span> </span>{ 
        <span class="hljs-class"><span class="hljs-keyword">enum</span> <span class="hljs-title">Notification</span> </span>{            
            <span class="hljs-class"><span class="hljs-keyword">enum</span> <span class="hljs-title">Comments</span>: <span class="hljs-title">String</span> </span>{
                <span class="hljs-keyword">case</span> off = <span class="hljs-string">"Off"</span>
                <span class="hljs-keyword">case</span> everyone = <span class="hljs-string">"Everyone"</span>
                <span class="hljs-keyword">case</span> following = <span class="hljs-string">"Following"</span>

                <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">toString</span><span class="hljs-params">()</span></span> -> <span class="hljs-type">String</span> {
                    <span class="hljs-keyword">return</span> <span class="hljs-keyword">self</span>.rawValue
                }
            }
        }    
    }

The enum is basically a representation of the available settings for our comment notifications.

The next service we want to define is the AuthService. This service is used to authenticate users of our service. Create a new AuthService class and paste the following code into it:

    <span class="hljs-keyword">import</span> Foundation

    <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">AuthService</span>: <span class="hljs-title">NSObject</span> </span>{
        <span class="hljs-keyword">static</span> <span class="hljs-keyword">let</span> key = <span class="hljs-string">"gram-token"</span>
        <span class="hljs-keyword">static</span> <span class="hljs-keyword">let</span> shared = <span class="hljs-type">AuthService</span>()

        <span class="hljs-keyword">typealias</span> <span class="hljs-type">AccessToken</span> = <span class="hljs-type">String</span>    
        <span class="hljs-keyword">typealias</span> <span class="hljs-type">LoginCredentials</span> = (email: <span class="hljs-type">String</span>, password: <span class="hljs-type">String</span>)
        <span class="hljs-keyword">typealias</span> <span class="hljs-type">SignupCredentials</span> = (name: <span class="hljs-type">String</span>, email: <span class="hljs-type">String</span>, password: <span class="hljs-type">String</span>)

        <span class="hljs-keyword">override</span> <span class="hljs-keyword">private</span> <span class="hljs-keyword">init</span>() {
            <span class="hljs-keyword">super</span>.<span class="hljs-keyword">init</span>()
        }

        <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">loggedIn</span><span class="hljs-params">()</span></span> -> <span class="hljs-type">Bool</span> {
            <span class="hljs-keyword">return</span> getToken() != <span class="hljs-literal">nil</span>
        }

        <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">logout</span><span class="hljs-params">()</span></span> {
            <span class="hljs-type">UserDefaults</span>.standard.removeObject(forKey: <span class="hljs-type">AuthService</span>.key)
        }

        <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">getToken</span><span class="hljs-params">()</span></span> -> <span class="hljs-type">AccessToken</span>? {
            <span class="hljs-keyword">return</span> <span class="hljs-type">UserDefaults</span>.standard.string(forKey: <span class="hljs-type">AuthService</span>.key)
        }

        <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">saveToken</span><span class="hljs-params">(<span class="hljs-number">_</span> token: AccessToken)</span></span> -> <span class="hljs-type">AuthService</span> {
            <span class="hljs-type">UserDefaults</span>.standard.<span class="hljs-keyword">set</span>(token, forKey: <span class="hljs-type">AuthService</span>.key)
            <span class="hljs-keyword">return</span> <span class="hljs-keyword">self</span>
        }

        <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">deleteToken</span><span class="hljs-params">()</span></span> -> <span class="hljs-type">AuthService</span> {
            <span class="hljs-type">UserDefaults</span>.standard.removeObject(forKey: <span class="hljs-type">AuthService</span>.key)
            <span class="hljs-keyword">return</span> <span class="hljs-keyword">self</span>
        }

        <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">then</span><span class="hljs-params">(completion: @escaping<span class="hljs-params">()</span></span></span> -> <span class="hljs-type">Void</span>) {
            completion()
        }
    }

The class above is fairly straightforward and it provides methods for authentication. It has the getToken and saveToken, which essentially retrieves and saves the access token gotten after authenticating the user.

Next, let’s create our final service, the ApiService. Create a new class ApiService and paste the following into the file:

    <span class="hljs-keyword">import</span> Foundation
    <span class="hljs-keyword">import</span> Alamofire

    <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">ApiService</span>: <span class="hljs-title">NSObject</span> </span>{

        <span class="hljs-keyword">static</span> <span class="hljs-keyword">let</span> shared = <span class="hljs-type">ApiService</span>()

        <span class="hljs-keyword">override</span> <span class="hljs-keyword">private</span> <span class="hljs-keyword">init</span>() {
            <span class="hljs-keyword">super</span>.<span class="hljs-keyword">init</span>()
        }
    }

Now that we have the base of the class, let’s start adding methods to the class. Since it is a large class, we will split adding the methods over a few paragraphs.

In the class, let’s add our first set of methods, which will handle authentication:

    <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">login</span><span class="hljs-params">(credentials: AuthService.LoginCredentials, completion: @escaping<span class="hljs-params">(AuthService.AccessToken?, ApiError?)</span></span></span> -> <span class="hljs-type">Void</span>) {
        <span class="hljs-keyword">let</span> params = [
            <span class="hljs-string">"username"</span>: credentials.email,
            <span class="hljs-string">"password"</span>: credentials.password,
            <span class="hljs-string">"grant_type"</span>: <span class="hljs-string">"password"</span>,
            <span class="hljs-string">"client_id"</span>: <span class="hljs-type">AppConstants</span>.<span class="hljs-type">API_CLIENT_ID</span>,
            <span class="hljs-string">"client_secret"</span>: <span class="hljs-type">AppConstants</span>.<span class="hljs-type">API_CLIENT_SECRET</span>
        ]

        request(.post, url: <span class="hljs-string">"/oauth/token"</span>, params: params, auth: <span class="hljs-literal">false</span>) { data <span class="hljs-keyword">in</span>
            <span class="hljs-keyword">guard</span> <span class="hljs-keyword">let</span> data = data <span class="hljs-keyword">else</span> { <span class="hljs-keyword">return</span> completion(<span class="hljs-literal">nil</span>, .badCredentials) }
            <span class="hljs-keyword">guard</span> <span class="hljs-keyword">let</span> token = data[<span class="hljs-string">"access_token"</span>] <span class="hljs-keyword">as</span>? <span class="hljs-type">String</span> <span class="hljs-keyword">else</span> { <span class="hljs-keyword">return</span> completion(<span class="hljs-literal">nil</span>, .badResponse) }

            completion(token, <span class="hljs-literal">nil</span>)
        }
    }

    <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">signup</span><span class="hljs-params">(credentials: AuthService.SignupCredentials, completion: @escaping<span class="hljs-params">(AuthService.AccessToken?, ApiError?)</span></span></span> -> <span class="hljs-type">Void</span>) {
        <span class="hljs-keyword">let</span> params = [
            <span class="hljs-string">"name"</span>: credentials.name,
            <span class="hljs-string">"email"</span>: credentials.email,
            <span class="hljs-string">"password"</span>: credentials.password
        ]

        request(.post, url: <span class="hljs-string">"/api/register"</span>, params: params, auth: <span class="hljs-literal">false</span>) { data <span class="hljs-keyword">in</span>
            <span class="hljs-keyword">guard</span> <span class="hljs-keyword">let</span> res = data, <span class="hljs-keyword">let</span> data = res[<span class="hljs-string">"data"</span>] <span class="hljs-keyword">as</span>? [<span class="hljs-type">String</span>:<span class="hljs-type">AnyObject</span>] <span class="hljs-keyword">else</span> {
                <span class="hljs-keyword">return</span> completion(<span class="hljs-literal">nil</span>, .badCredentials)
            }

            <span class="hljs-keyword">guard</span> <span class="hljs-keyword">let</span> token = data[<span class="hljs-string">"access_token"</span>] <span class="hljs-keyword">as</span>? <span class="hljs-type">String</span> <span class="hljs-keyword">else</span> {
                <span class="hljs-keyword">return</span> completion(<span class="hljs-literal">nil</span>, .badResponse)
            }

            completion(token, <span class="hljs-literal">nil</span>)
        }
    }

Next let’s add the methods for loading users, loading posts, loading comments and adding comments to the ApiService class:

    <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">fetchUsers</span><span class="hljs-params">(completion: @escaping<span class="hljs-params">(Users?)</span></span></span> -> <span class="hljs-type">Void</span>) {
        request(.<span class="hljs-keyword">get</span>, url: <span class="hljs-string">"/api/users"</span>) { data <span class="hljs-keyword">in</span>
            <span class="hljs-keyword">if</span> <span class="hljs-keyword">let</span> data = <span class="hljs-keyword">self</span>.responseToJsonStringData(response: data) {
                <span class="hljs-keyword">if</span> <span class="hljs-keyword">let</span> obj = <span class="hljs-keyword">try</span>? <span class="hljs-type">JSONDecoder</span>().decode(<span class="hljs-type">Users</span>.<span class="hljs-keyword">self</span>, from: data) {
                    <span class="hljs-keyword">return</span> completion(obj)
                }
            }

            completion(<span class="hljs-literal">nil</span>)
        }
    }

    <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">fetchPosts</span><span class="hljs-params">(completion: @escaping<span class="hljs-params">(Photos?)</span></span></span> -> <span class="hljs-type">Void</span>) {
        request(.<span class="hljs-keyword">get</span>, url: <span class="hljs-string">"/api/photos"</span>) { data <span class="hljs-keyword">in</span>
            <span class="hljs-keyword">if</span> <span class="hljs-keyword">let</span> data = <span class="hljs-keyword">self</span>.responseToJsonStringData(response: data) {
                <span class="hljs-keyword">if</span> <span class="hljs-keyword">let</span> obj = <span class="hljs-keyword">try</span>? <span class="hljs-type">JSONDecoder</span>().decode(<span class="hljs-type">Photos</span>.<span class="hljs-keyword">self</span>, from: data) {
                    <span class="hljs-keyword">return</span> completion(obj)
                }
            }

            completion(<span class="hljs-literal">nil</span>)
        }
    }

    <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">fetchComments</span><span class="hljs-params">(forPhoto id: Int, completion: @escaping<span class="hljs-params">(PhotoComments?)</span></span></span> -> <span class="hljs-type">Void</span>) {
        request(.<span class="hljs-keyword">get</span>, url: <span class="hljs-string">"/api/photos/\(id)/comments"</span>) { data <span class="hljs-keyword">in</span>
            <span class="hljs-keyword">if</span> <span class="hljs-keyword">let</span> data = <span class="hljs-keyword">self</span>.responseToJsonStringData(response: data) {
                <span class="hljs-keyword">if</span> <span class="hljs-keyword">let</span> obj = <span class="hljs-keyword">try</span>? <span class="hljs-type">JSONDecoder</span>().decode(<span class="hljs-type">PhotoComments</span>.<span class="hljs-keyword">self</span>, from: data) {
                    <span class="hljs-keyword">return</span> completion(obj)
                }
            }

            completion(<span class="hljs-literal">nil</span>)
        }
    }

    <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">leaveComment</span><span class="hljs-params">(forId id: Int, comment: String, completion: @escaping<span class="hljs-params">(PhotoComment?)</span></span></span> -> <span class="hljs-type">Void</span>) {
        request(.post, url: <span class="hljs-string">"/api/photos/\(id)/comments"</span>, params: [<span class="hljs-string">"comment"</span>: comment]) { data <span class="hljs-keyword">in</span>
            <span class="hljs-keyword">if</span> <span class="hljs-keyword">let</span> res = data, <span class="hljs-keyword">let</span> data = res[<span class="hljs-string">"data"</span>] <span class="hljs-keyword">as</span>? [<span class="hljs-type">String</span>: <span class="hljs-type">AnyObject</span>],
                <span class="hljs-keyword">let</span> json = <span class="hljs-keyword">try</span>? <span class="hljs-type">JSONSerialization</span>.data(withJSONObject: data, options: []),
                <span class="hljs-keyword">let</span> jsonString = <span class="hljs-type">String</span>(data: json, encoding: .utf8),
                <span class="hljs-keyword">let</span> jsonData = jsonString.data(using: .utf8),
                <span class="hljs-keyword">let</span> obj = <span class="hljs-keyword">try</span>? <span class="hljs-type">JSONDecoder</span>().decode(<span class="hljs-type">PhotoComment</span>.<span class="hljs-keyword">self</span>, from: jsonData) {
                    <span class="hljs-keyword">return</span> completion(obj)
            }

            completion(<span class="hljs-literal">nil</span>)
        }
    }

In the methods above, you’ll notice we decode the JSON response from the API into the appropriate model object. This makes it easier to work with in our controllers.

The next methods we will add will be to follow or unfollow a user, load settings for a user and update settings for a user. Add the methods below to the ApiService:

    <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">toggleFollowStatus</span><span class="hljs-params">(forUserId id: Int, following: Bool, completion: @escaping<span class="hljs-params">(Bool?)</span></span></span> -> <span class="hljs-type">Void</span>) {
        <span class="hljs-keyword">let</span> status = following ? <span class="hljs-string">"unfollow"</span> : <span class="hljs-string">"follow"</span>

        request(.post, url: <span class="hljs-string">"/api/users/\((status))"</span>, params: [<span class="hljs-string">"following_id"</span>: id]) { data <span class="hljs-keyword">in</span>
            <span class="hljs-keyword">guard</span> <span class="hljs-keyword">let</span> res = data <span class="hljs-keyword">as</span>? [<span class="hljs-type">String</span>: <span class="hljs-type">String</span>], res[<span class="hljs-string">"status"</span>] == <span class="hljs-string">"success"</span> <span class="hljs-keyword">else</span> {
                <span class="hljs-keyword">return</span> completion(<span class="hljs-literal">false</span>)
            }

            completion(<span class="hljs-literal">true</span>)
        }
    }

    <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">loadSettings</span><span class="hljs-params">(completion: @escaping<span class="hljs-params">([String: String]?)</span></span></span> -> <span class="hljs-type">Void</span>) {
        request(.<span class="hljs-keyword">get</span>, url: <span class="hljs-string">"/api/users/settings"</span>) { data <span class="hljs-keyword">in</span>
            <span class="hljs-keyword">guard</span> <span class="hljs-keyword">let</span> settings = data <span class="hljs-keyword">as</span>? [<span class="hljs-type">String</span>: <span class="hljs-type">String</span>] <span class="hljs-keyword">else</span> {
                <span class="hljs-keyword">return</span> completion(<span class="hljs-literal">nil</span>)
            }

            completion(settings)
        }
    }

    <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">saveSettings</span><span class="hljs-params">(settings: [String: String], completion: @escaping<span class="hljs-params">(Bool)</span></span></span> -> <span class="hljs-type">Void</span>) {
        request(.put, url: <span class="hljs-string">"/api/users/settings"</span>, params: settings) { data <span class="hljs-keyword">in</span>
            <span class="hljs-keyword">guard</span> <span class="hljs-keyword">let</span> res = data <span class="hljs-keyword">as</span>? [<span class="hljs-type">String</span>: <span class="hljs-type">String</span>], res[<span class="hljs-string">"status"</span>] == <span class="hljs-string">"success"</span> <span class="hljs-keyword">else</span> {
                <span class="hljs-keyword">return</span> completion(<span class="hljs-literal">false</span>)
            }

            completion(<span class="hljs-literal">true</span>)
        }
    }

The next method we want to add is the uploadImage method. This method is responsible for taking the selected image and caption and sending it to the API for uploading. Add the method below to the ApiService class:

    <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">uploadImage</span><span class="hljs-params">(<span class="hljs-number">_</span> image: Data, caption: String, name: String, completion: @escaping<span class="hljs-params">(Photo?, ApiError?)</span></span></span> -> <span class="hljs-type">Void</span>) {
        <span class="hljs-keyword">let</span> url = <span class="hljs-keyword">self</span>.url(appending: <span class="hljs-string">"/api/photos"</span>)

        <span class="hljs-comment">// Handles multipart data</span>
        <span class="hljs-keyword">let</span> multipartHandler: (<span class="hljs-type">MultipartFormData</span>) -> <span class="hljs-type">Void</span> = { multipartFormData <span class="hljs-keyword">in</span>
            multipartFormData.append(caption.data(using: .utf8)!, withName: <span class="hljs-string">"caption"</span>)
            multipartFormData.append(image, withName: <span class="hljs-string">"image"</span>, fileName: name, mimeType: <span class="hljs-string">"image/jpeg"</span>)
        }

        <span class="hljs-type">Alamofire</span>.upload(
            multipartFormData: multipartHandler,
            usingThreshold: <span class="hljs-type">UInt64</span>.<span class="hljs-keyword">init</span>(),
            to: url,
            method: .post,
            headers: requestHeaders(),
            encodingCompletion: { encodingResult <span class="hljs-keyword">in</span>
                <span class="hljs-keyword">let</span> uploadedHandler: (<span class="hljs-type">DataResponse</span><<span class="hljs-type">Any</span>>) -> <span class="hljs-type">Void</span> = { response <span class="hljs-keyword">in</span>
                    <span class="hljs-keyword">if</span> response.result.isSuccess,
                        <span class="hljs-keyword">let</span> resp = response.result.value <span class="hljs-keyword">as</span>? [<span class="hljs-type">String</span>: <span class="hljs-type">AnyObject</span>],
                        <span class="hljs-keyword">let</span> data = resp[<span class="hljs-string">"data"</span>] <span class="hljs-keyword">as</span>? [<span class="hljs-type">String</span>: <span class="hljs-type">AnyObject</span>],
                        <span class="hljs-keyword">let</span> json = <span class="hljs-keyword">try</span>? <span class="hljs-type">JSONSerialization</span>.data(withJSONObject: data, options: []),
                        <span class="hljs-keyword">let</span> jsonString = <span class="hljs-type">String</span>(data: json, encoding: .utf8),
                        <span class="hljs-keyword">let</span> jsonData = jsonString.data(using: .utf8),
                        <span class="hljs-keyword">let</span> obj = <span class="hljs-keyword">try</span>? <span class="hljs-type">JSONDecoder</span>().decode(<span class="hljs-type">Photo</span>.<span class="hljs-keyword">self</span>, from: jsonData) {
                            <span class="hljs-keyword">return</span> completion(obj, <span class="hljs-literal">nil</span>)
                    }

                    completion(<span class="hljs-literal">nil</span>, .uploadError(<span class="hljs-literal">nil</span>))
                }

                <span class="hljs-keyword">switch</span> encodingResult {
                <span class="hljs-keyword">case</span> .failure(<span class="hljs-number">_</span>): completion(<span class="hljs-literal">nil</span>, .uploadError(<span class="hljs-literal">nil</span>))
                <span class="hljs-keyword">case</span> .success(<span class="hljs-keyword">let</span> upload, <span class="hljs-number">_</span>, <span class="hljs-number">_</span>): upload.responseJSON(completionHandler: uploadedHandler)
                }
            }
        )
    }

Next let’s add the class’ helper methods.

    <span class="hljs-keyword">private</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">url</span><span class="hljs-params">(appending: URLConvertible)</span></span> -> <span class="hljs-type">URLConvertible</span> {
        <span class="hljs-keyword">return</span> <span class="hljs-string">"\(AppConstants.API_URL)\(appending)"</span>
    }

    <span class="hljs-keyword">private</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">requestHeaders</span><span class="hljs-params">(auth: Bool = <span class="hljs-literal">true</span>)</span></span> -> <span class="hljs-type">HTTPHeaders</span> {
        <span class="hljs-keyword">var</span> headers: <span class="hljs-type">HTTPHeaders</span> = [<span class="hljs-string">"Accept"</span>: <span class="hljs-string">"application/json"</span>]

        <span class="hljs-keyword">if</span> auth && <span class="hljs-type">AuthService</span>.shared.loggedIn() {
            headers[<span class="hljs-string">"Authorization"</span>] = <span class="hljs-string">"Bearer \(AuthService.shared.getToken()!)"</span>
        }

        <span class="hljs-keyword">return</span> headers
    }

    <span class="hljs-keyword">private</span> <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">request</span><span class="hljs-params">(<span class="hljs-number">_</span> method: HTTPMethod, url: URLConvertible, params: Parameters? = <span class="hljs-literal">nil</span>, auth: Bool = <span class="hljs-literal">true</span>, handler: @escaping <span class="hljs-params">([String: AnyObject]?)</span></span></span> -> <span class="hljs-type">Void</span>) {
        <span class="hljs-keyword">let</span> url = <span class="hljs-keyword">self</span>.url(appending: url)

        <span class="hljs-type">Alamofire</span>
            .request(url, method: method, parameters: params, encoding: <span class="hljs-type">JSONEncoding</span>.<span class="hljs-keyword">default</span>, headers: requestHeaders(auth: auth))
            .validate()
            .responseJSON { resp <span class="hljs-keyword">in</span>
                <span class="hljs-keyword">guard</span> resp.result.isSuccess, <span class="hljs-keyword">let</span> data = resp.result.value <span class="hljs-keyword">as</span>? [<span class="hljs-type">String</span>: <span class="hljs-type">AnyObject</span>] <span class="hljs-keyword">else</span> {
                    <span class="hljs-keyword">return</span> handler(<span class="hljs-literal">nil</span>)
                }

                handler(data)
            }
    } 

    <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">responseToJsonStringData</span><span class="hljs-params">(response data: [String: AnyObject]?)</span></span> -> <span class="hljs-type">Data</span>? {
        <span class="hljs-keyword">if</span> <span class="hljs-keyword">let</span> res = data, <span class="hljs-keyword">let</span> data = res[<span class="hljs-string">"data"</span>] <span class="hljs-keyword">as</span>? [[<span class="hljs-type">String</span>: <span class="hljs-type">AnyObject</span>]] {
            <span class="hljs-keyword">if</span> <span class="hljs-keyword">let</span> json = <span class="hljs-keyword">try</span>? <span class="hljs-type">JSONSerialization</span>.data(withJSONObject: data, options: []) {
                <span class="hljs-keyword">if</span> <span class="hljs-keyword">let</span> jsonString = <span class="hljs-type">String</span>(data: json, encoding: .utf8), <span class="hljs-keyword">let</span> data = jsonString.data(using: .utf8) {
                    <span class="hljs-keyword">return</span> data
                }
            }
        }

        <span class="hljs-keyword">return</span> <span class="hljs-literal">nil</span>
    }

The url method takes a URL path and appends the base API URL to it. The requestHeaders method attaches the appropriate headers to the request sent by Alamofire. The request method is a wrapper around Alamofire that sends requests to the API for us. The responseToJsonStringData converts the data from our JSON file into a JSON string which can then be decoded into one of our Codable models.

One final thing we want to add to the bottom of the ApiService class is the enum for ApiErrors. In the same file at the bottom, add the following code:

    <span class="hljs-class"><span class="hljs-keyword">enum</span> <span class="hljs-title">ApiError</span>: <span class="hljs-title">Error</span> </span>{
        <span class="hljs-keyword">case</span> badResponse
        <span class="hljs-keyword">case</span> badCredentials
        <span class="hljs-keyword">case</span> uploadError([<span class="hljs-type">String</span>: [<span class="hljs-type">String</span>]]?)
    }

That’s all for the ApiService and indeed all the applications services. In the next part we will continue building our iOS application.

Conclusion

In this first part of the article, we have seen how we can create an API for our social network application using Laravel. We also integrated push notifications on the server side using Pusher Beams.

In the next part, we will build the client IOS application using Swift. We will also integrate push notifications to our social network application using Pusher Beams.

The source code to the application is on GitHub.

This post first appeared on the Pusher blog.

Build a live comments feed with Go and Vue.js

Neo — Mon, 19 Nov 2018 17:10:45 +0000

You will need Go, and SQLite installed on your machine. Basic knowledge of Go and JavaScript will be helpful.

The internet is a breeding ground for all kinds of social activities because it expands the possibilities of communication. In order to keep web applications social and enjoyable, it is important for them to have one or more interfaces for the users to interact through. One such interface is the comment section.

The comment section is where users can discuss a subject (post, video, picture) that they have access to. In the past, for a user to see a comment from another user, the user would have to refresh the browser window. However, with realtime comments now we can automatically pull in comments live. This article will cover how we can build realtime commenting using Pusher.

By the end of this article, we will have built an application that looks like this:

Requirements

To follow along with this article, you will need the following:

Go (version >= 0.10.x) installed on your computer. Heres how you can install Go.
SQLite (v3.x) installed on your machine. Installation guide.
Basic knowledge of the Go programming language.
Basic knowledge of JavaScript (ES6).
Basic knowledge of Vue.js.

Getting a Pusher Channels application

The first step will be to get a Pusher Channels application. We will need the application credentials for our realtime features to work.

Go to the Pusher website and create an account. After creating an account, you should create a new application. Follow the application creation wizard and then you should be given your application credentials, we will use this later in the article.

Now that we have our application, let’s move on to the next step.

Setting up the codebase

Let’s start by navigating into the src directory located in the $GOPATH. Then we’ll create a new directory for our app there.

    $ cd $GOPATH/src
    $ mkdir go-realtime-comments
    $ cd go-realtime-comments

Create a comments.go file in this directory.

Before we write code, we need to import a few Go packages that will help run our projects. We will install the Echo framework and the SQLite packages. Run the following commands to pull in the packages:

    $ go get github.com/labstack/echo
    $ go get github.com/labstack/echo/middleware
    $ go get github.com/mattn/go-sqlite3

⚠️ If you use Windows and you encounter the error ‘cc.exe: sorry, unimplemented: 64-bit mode not compiled in ‘, then you need a Windows gcc port, such as https://sourceforge.net/projects/mingw-w64/. Also see this GitHub issue.

With your favorite editor, open the comments.go file and paste in the following lines of code:

    <span class="hljs-keyword">package</span> main

    <span class="hljs-keyword">import</span> (
        <span class="hljs-comment">// "database/sql"</span>

        <span class="hljs-string">"github.com/labstack/echo"</span>
        <span class="hljs-string">"github.com/labstack/echo/middleware"</span>
        <span class="hljs-comment">// _ "github.com/mattn/go-sqlite3"</span>
    )

Configuring the database and routes

Every Go application must have a main function. This is where the execution of the application will start from, so let’s create our main function:

In the comments.go file, add the following below the imports:

    <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">main</span><span class="hljs-params">()</span></span> {

        <span class="hljs-comment">// Echo instance</span>
        e := echo.New()

        <span class="hljs-comment">// Middleware</span>
        e.Use(middleware.Logger())
        e.Use(middleware.Recover())

        <span class="hljs-comment">// Define the HTTP routes</span>
        e.GET(<span class="hljs-string">"/comments"</span>, <span class="hljs-function"><span class="hljs-keyword">func</span><span class="hljs-params">(c echo.Context)</span> <span class="hljs-title">error</span></span> {
            <span class="hljs-keyword">return</span> c.JSON(<span class="hljs-number">200</span>, <span class="hljs-string">"GET Comments"</span>)
        })

        e.POST(<span class="hljs-string">"/comment"</span>, <span class="hljs-function"><span class="hljs-keyword">func</span><span class="hljs-params">(c echo.Context)</span> <span class="hljs-title">error</span></span> {
            <span class="hljs-keyword">return</span> c.JSON(<span class="hljs-number">200</span>, <span class="hljs-string">"POST a new Comment"</span>)
        })

        <span class="hljs-comment">// Start server</span>
        e.Logger.Fatal(e.Start(<span class="hljs-string">":9000"</span>))
    }

In the main function, we have defined some basic route handler functions, these functions basically return hard coded text to browser on request. The last line will start Go’s standard HTTP server using Echo’s start method and listen for requests port 9000.

We can test that the application works at this stage by running it and making some requests using Postman.

Here is how you can run the application:

    $ go run ./comments.go

We can send HTTP requests using Postman. Here’s a sample GET request using Postman:

POST request with Postman:

We will create a function that will initialize a database and for that we need the SQL and SQLite3 drivers. We already added them to the import statement so uncomment them. We will also create a function that will migrate the database using a database schema defined inside the function.

Open the comments.go file and paste the following code before the main function:

    <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">initDB</span><span class="hljs-params">(filepath <span class="hljs-keyword">string</span>)</span> *<span class="hljs-title">sql</span>.<span class="hljs-title">DB</span></span> {
        db, err := sql.Open(<span class="hljs-string">"sqlite3"</span>, filepath)
        <span class="hljs-keyword">if</span> err != <span class="hljs-literal">nil</span> {
            <span class="hljs-built_in">panic</span>(err)
        }

        <span class="hljs-keyword">if</span> db == <span class="hljs-literal">nil</span> {
            <span class="hljs-built_in">panic</span>(<span class="hljs-string">"db nil"</span>)
        }
        <span class="hljs-keyword">return</span> db
    }

    <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">migrate</span><span class="hljs-params">(db *sql.DB)</span></span> {
        sql := <span class="hljs-string">`
        CREATE TABLE IF NOT EXISTS comments(
                id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
                name VARCHAR NOT NULL,
                email VARCHAR NOT NULL,
                comment VARCHAR NOT NULL
        );
       `</span>
        _, err := db.Exec(sql)
        <span class="hljs-keyword">if</span> err != <span class="hljs-literal">nil</span> {
            <span class="hljs-built_in">panic</span>(err)
        }
    }

Next add the following code to the top of the main function:

    <span class="hljs-comment">// [...]</span>

    <span class="hljs-comment">// Initialize the database</span>
    db := initDB(<span class="hljs-string">"storage.db"</span>)
    migrate(db)

    <span class="hljs-comment">// [...]</span>

We can now check that these functions are being called and the database is created during execution by running the application:

    go run comments.go

⚠️ If you were already running the Go application you would need to kill the process using ctrl+c on your keyboard and then restart it to see changes.

When the application is run for the first time, a storage.db file will be created in the working directory if it did not previously exist.

Setting up the handlers

We have tested that our application listens on the specified port 9000 and handles the HTTP requests as we configured it to. However, the current handler functions simply return hard-coded text to the browser so let’s create new handler functions to handle responses to the routes.

Create a new folder in the root directory named handlers:

    $ mkdir handlers
    $ cd handlers

Next create a handlers.go file and paste the following:

    <span class="hljs-keyword">package</span> handlers

    <span class="hljs-keyword">import</span> (
        <span class="hljs-string">"database/sql"</span>
        <span class="hljs-string">"go-realtime-comments/models"</span>
        <span class="hljs-string">"net/http"</span>
        <span class="hljs-string">"github.com/labstack/echo"</span>
    )

Now we need to go back to the comments.go file and import the handlers package:

    import (
        "go-realtime-comments/handlers"

        // [...]
    )

In the same file, replace the route definitions from earlier with the ones below:

    <span class="hljs-comment">// [...]</span>

    <span class="hljs-comment">// Define the HTTP routes</span>
    e.File(<span class="hljs-string">"/"</span>, <span class="hljs-string">"public/index.html"</span>)
    e.GET(<span class="hljs-string">"/comments"</span>, handlers.GetComments(db))
    e.POST(<span class="hljs-string">"/comment"</span>, handlers.PushComment(db))

    <span class="hljs-comment">// [...]</span>

Next paste the following code in the handlers.go file below the import statement:

    <span class="hljs-keyword">type</span> H <span class="hljs-keyword">map</span>[<span class="hljs-keyword">string</span>]<span class="hljs-keyword">interface</span>{}

    <span class="hljs-comment">//GetComments handles the HTTP request that hits the /comments endpoint</span>
    <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">GetComments</span><span class="hljs-params">(db *sql.DB)</span> <span class="hljs-title">echo</span>.<span class="hljs-title">HandlerFunc</span></span> {
        <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">func</span><span class="hljs-params">(c echo.Context)</span> <span class="hljs-title">error</span></span> {
            <span class="hljs-keyword">return</span> c.JSON(http.StatusOK, models.GetComments(db))
        }
    }

    <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">PushComment</span><span class="hljs-params">(db *sql.DB)</span> <span class="hljs-title">echo</span>.<span class="hljs-title">HandlerFunc</span></span> {
        <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">func</span><span class="hljs-params">(c echo.Context)</span> <span class="hljs-title">error</span></span> {
            <span class="hljs-keyword">var</span> comment models.Comment

            c.Bind(&comment)

            id, err := models.PushComment(db, comment.Name, comment.Email, comment.Comment)
            <span class="hljs-keyword">if</span> err == <span class="hljs-literal">nil</span> {
                <span class="hljs-keyword">return</span> c.JSON(http.StatusCreated, H{
                    <span class="hljs-string">"created"</span>: id,
                })
            }

            <span class="hljs-keyword">return</span> err
        }
    }

The GetComments function fetches and returns comments from the database while the PushComment saves comments to the database and returns a response.

Setting up the models

To create the model package, we need to create a new folder in the root directory of our application:

    $ mkdir models
    $ cd models

Next create a models.go file and paste the following code:

    <span class="hljs-keyword">package</span> models

    <span class="hljs-keyword">import</span> (
        <span class="hljs-string">"database/sql"</span>
        _ <span class="hljs-string">"github.com/mattn/go-sqlite3"</span>
    )

Let’s create a Comment type, which is a struct with four fields:

ID - the ID of the comment.
Name - the username of the user who made the comment.
Email - the email of the user who made the comment.
Comment - the comment.

In Go, we can add metadata to variables by putting them within backticks. We can use this to define what each field should look like when converted to JSON. This will also help the c.Bind function know how to map JSON data when registering a new comment.

Let’s define the structs for Comment and CommentCollection. In the models.go file paste in the following below the imports:

    <span class="hljs-keyword">type</span> Comment <span class="hljs-keyword">struct</span> {
        ID      <span class="hljs-keyword">int</span>    <span class="hljs-string">`json:"id"`</span>
        Name    <span class="hljs-keyword">string</span> <span class="hljs-string">`json:"name"`</span>
        Email   <span class="hljs-keyword">string</span> <span class="hljs-string">`json:"email"`</span>
        Comment <span class="hljs-keyword">string</span> <span class="hljs-string">`json:"comment"`</span>
    }

    <span class="hljs-keyword">type</span> CommentCollection <span class="hljs-keyword">struct</span> {
        Comments []Comment <span class="hljs-string">`json:"items"`</span>
    }

Next, paste in the following code after the structs:

    <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">GetComments</span><span class="hljs-params">(db *sql.DB)</span> <span class="hljs-title">CommentCollection</span></span> {
        sql := <span class="hljs-string">"SELECT * FROM comments"</span>
        rows, err := db.Query(sql)

        <span class="hljs-keyword">if</span> err != <span class="hljs-literal">nil</span> {
            <span class="hljs-built_in">panic</span>(err)
        }

        <span class="hljs-keyword">defer</span> rows.Close()

        result := CommentCollection{}

        <span class="hljs-keyword">for</span> rows.Next() {

            comment := Comment{}
            err2 := rows.Scan(&comment.ID, &comment.Name, &comment.Email, &comment.Comment)
            <span class="hljs-keyword">if</span> err2 != <span class="hljs-literal">nil</span> {
                <span class="hljs-built_in">panic</span>(err2)
            }

            result.Comments = <span class="hljs-built_in">append</span>(result.Comments, comment)
        }

        <span class="hljs-keyword">return</span> result
    }

The GetComments function is responsible for retrieving all the available comments from the database and returning them as an instance of the CommentCollection that we defined.

Next, paste in the following code below the one above:

    <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">PushComment</span><span class="hljs-params">(db *sql.DB, name <span class="hljs-keyword">string</span>, email <span class="hljs-keyword">string</span>, comment <span class="hljs-keyword">string</span>)</span> <span class="hljs-params">(<span class="hljs-keyword">int64</span>, error)</span></span> {
        sql := <span class="hljs-string">"INSERT INTO comments(name, email, comment) VALUES(?, ?, ?)"</span>
        stmt, err := db.Prepare(sql)
        <span class="hljs-keyword">if</span> err != <span class="hljs-literal">nil</span> {
            <span class="hljs-built_in">panic</span>(err)
        }

        <span class="hljs-keyword">defer</span> stmt.Close()

        result, err2 := stmt.Exec(name, email, comment)
        <span class="hljs-keyword">if</span> err2 != <span class="hljs-literal">nil</span> {
            <span class="hljs-built_in">panic</span>(err2)
        }

        <span class="hljs-keyword">return</span> result.LastInsertId()
    }

The PushComments function adds a new comment to the database.

Building the frontend

Next, create a public folder in our application’s root directory and create an index.html file inside it.

Open the index.html file and paste in this code:

    <span class="hljs-meta"></span>
    <span class="hljs-tag"><<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">head</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"viewport"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"width=device-width, initial-scale=1.0"</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">"X-UA-Compatible"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"ie=edge"</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"</span> <span class="hljs-attr">integrity</span>=<span class="hljs-string">"sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb"</span> <span class="hljs-attr">crossorigin</span>=<span class="hljs-string">"anonymous"</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">title</span>></span>Realtime comments<span class="hljs-tag"></<span class="hljs-name">title</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://unpkg.com/axios/dist/axios.min.js"</span>></span><span class="undefined"></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"</span>></span><span class="undefined"></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">style</span>></span><span class="css">
          @<span class="hljs-keyword">media</span> (min-width: <span class="hljs-number">48em</span>) {
            <span class="hljs-selector-tag">html</span> {
              <span class="hljs-attribute">font-size</span>: <span class="hljs-number">18px</span>;
            }
          }
          <span class="hljs-selector-tag">body</span> {
            <span class="hljs-attribute">font-family</span>: Georgia, <span class="hljs-string">"Times New Roman"</span>, Times, serif;
            <span class="hljs-attribute">color</span>: <span class="hljs-number">#555</span>;
          }
          <span class="hljs-selector-tag">h1</span>, <span class="hljs-selector-class">.h1</span>, <span class="hljs-selector-tag">h2</span>, <span class="hljs-selector-class">.h2</span>, <span class="hljs-selector-tag">h3</span>, <span class="hljs-selector-class">.h3</span>, <span class="hljs-selector-tag">h4</span>, <span class="hljs-selector-class">.h4</span>, <span class="hljs-selector-tag">h5</span>, <span class="hljs-selector-class">.h5</span>, <span class="hljs-selector-tag">h6</span>, <span class="hljs-selector-class">.h6</span> {
            <span class="hljs-attribute">font-family</span>: <span class="hljs-string">"Helvetica Neue"</span>, Helvetica, Arial, sans-serif;
            <span class="hljs-attribute">font-weight</span>: <span class="hljs-number">400</span>;
            <span class="hljs-attribute">color</span>: <span class="hljs-number">#333</span>;
          }
          <span class="hljs-selector-class">.blog-masthead</span> {
            <span class="hljs-attribute">margin-bottom</span>: <span class="hljs-number">3rem</span>;
            <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#428bca</span>;
            <span class="hljs-attribute">box-shadow</span>: inset <span class="hljs-number">0</span> -.<span class="hljs-number">1rem</span> .<span class="hljs-number">25rem</span> <span class="hljs-built_in">rgba</span>(0,0,0,.1);
          }
          <span class="hljs-selector-class">.nav-link</span> {
            <span class="hljs-attribute">position</span>: relative;
            <span class="hljs-attribute">padding</span>: <span class="hljs-number">1rem</span>;
            <span class="hljs-attribute">font-weight</span>: <span class="hljs-number">500</span>;
            <span class="hljs-attribute">color</span>: <span class="hljs-number">#cdddeb</span>;
          }
          <span class="hljs-selector-class">.nav-link</span><span class="hljs-selector-pseudo">:hover</span>, <span class="hljs-selector-class">.nav-link</span><span class="hljs-selector-pseudo">:focus</span> {
            <span class="hljs-attribute">color</span>: <span class="hljs-number">#fff</span>;
            <span class="hljs-attribute">background-color</span>: transparent;
          }
          <span class="hljs-selector-class">.nav-link</span><span class="hljs-selector-class">.active</span> {
            <span class="hljs-attribute">color</span>: <span class="hljs-number">#fff</span>;
          }
          <span class="hljs-selector-class">.nav-link</span><span class="hljs-selector-class">.active</span><span class="hljs-selector-pseudo">::after</span> {
            <span class="hljs-attribute">position</span>: absolute;
            <span class="hljs-attribute">bottom</span>: <span class="hljs-number">0</span>;
            <span class="hljs-attribute">left</span>: <span class="hljs-number">50%</span>;
            <span class="hljs-attribute">width</span>: <span class="hljs-number">0</span>;
            <span class="hljs-attribute">height</span>: <span class="hljs-number">0</span>;
            <span class="hljs-attribute">margin-left</span>: -.<span class="hljs-number">3rem</span>;
            <span class="hljs-attribute">vertical-align</span>: middle;
            <span class="hljs-attribute">content</span>: <span class="hljs-string">""</span>;
            <span class="hljs-attribute">border-right</span>: .<span class="hljs-number">3rem</span> solid transparent;
            <span class="hljs-attribute">border-bottom</span>: .<span class="hljs-number">3rem</span> solid;
            <span class="hljs-attribute">border-left</span>: .<span class="hljs-number">3rem</span> solid transparent;
          }
          @<span class="hljs-keyword">media</span> (min-width: <span class="hljs-number">40em</span>) {
            <span class="hljs-selector-class">.blog-title</span> {
              <span class="hljs-attribute">font-size</span>: <span class="hljs-number">3.5rem</span>;
            }
          }
          <span class="hljs-selector-class">.sidebar-module</span> {
            <span class="hljs-attribute">padding</span>: <span class="hljs-number">1rem</span>;
          }
          <span class="hljs-selector-class">.sidebar-module-inset</span> {
            <span class="hljs-attribute">padding</span>: <span class="hljs-number">1rem</span>;
            <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#f5f5f5</span>;
            <span class="hljs-attribute">border-radius</span>: .<span class="hljs-number">25rem</span>;
          }
          <span class="hljs-selector-class">.sidebar-module-inset</span> <span class="hljs-selector-tag">p</span><span class="hljs-selector-pseudo">:last-child</span>,
          <span class="hljs-selector-class">.sidebar-module-inset</span> <span class="hljs-selector-tag">ul</span><span class="hljs-selector-pseudo">:last-child</span>,
          <span class="hljs-selector-class">.sidebar-module-inset</span> <span class="hljs-selector-tag">ol</span><span class="hljs-selector-pseudo">:last-child</span> {
            <span class="hljs-attribute">margin-bottom</span>: <span class="hljs-number">0</span>;
          }
          <span class="hljs-selector-class">.blog-post</span> {
            <span class="hljs-attribute">margin-bottom</span>: <span class="hljs-number">4rem</span>;
          }
          <span class="hljs-selector-class">.blog-post-title</span> {
            <span class="hljs-attribute">margin-bottom</span>: .<span class="hljs-number">25rem</span>;
            <span class="hljs-attribute">font-size</span>: <span class="hljs-number">2.5rem</span>;
            <span class="hljs-attribute">text-align</span>: center;
          }
          <span class="hljs-selector-class">.blog-post-meta</span> {
            <span class="hljs-attribute">margin-bottom</span>: <span class="hljs-number">1.25rem</span>;
            <span class="hljs-attribute">color</span>: <span class="hljs-number">#999</span>;
            <span class="hljs-attribute">text-align</span>: center;
          }
          <span class="hljs-selector-class">.blog-footer</span> {
            <span class="hljs-attribute">padding</span>: <span class="hljs-number">2.5rem</span> <span class="hljs-number">0</span>;
            <span class="hljs-attribute">color</span>: <span class="hljs-number">#999</span>;
            <span class="hljs-attribute">text-align</span>: center;
            <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#f9f9f9</span>;
            <span class="hljs-attribute">border-top</span>: .<span class="hljs-number">05rem</span> solid <span class="hljs-number">#e5e5e5</span>;
          }
          <span class="hljs-selector-class">.blog-footer</span> <span class="hljs-selector-tag">p</span><span class="hljs-selector-pseudo">:last-child</span> {
            <span class="hljs-attribute">margin-bottom</span>: <span class="hljs-number">0</span>;
          }
          <span class="hljs-selector-tag">input</span>{
              <span class="hljs-attribute">width</span>: <span class="hljs-number">45%</span> <span class="hljs-meta">!important</span>;
              <span class="hljs-attribute">display</span>: inline-block <span class="hljs-meta">!important</span>;
          }
          <span class="hljs-selector-tag">textarea</span> {
              <span class="hljs-attribute">width</span>: <span class="hljs-number">90%</span>;
              <span class="hljs-attribute">height</span>: <span class="hljs-number">150px</span>;
              <span class="hljs-attribute">padding</span>: <span class="hljs-number">12px</span> <span class="hljs-number">20px</span>;
              <span class="hljs-attribute">box-sizing</span>: border-box;
              <span class="hljs-attribute">border</span>: <span class="hljs-number">2px</span> solid <span class="hljs-number">#ccc</span>;
              <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">4px</span>;
              <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#f8f8f8</span>;
              <span class="hljs-attribute">resize</span>: none;
          }
          <span class="hljs-selector-tag">textarea</span><span class="hljs-selector-pseudo">:focus</span>, <span class="hljs-selector-tag">input</span><span class="hljs-selector-pseudo">:focus</span>{
              <span class="hljs-attribute">outline</span>: none <span class="hljs-meta">!important</span>;
          }
          <span class="hljs-selector-id">#comment-section</span>{
            <span class="hljs-attribute">background</span>: <span class="hljs-built_in">rgb</span>(178, 191, 214); 
            <span class="hljs-attribute">padding</span>: <span class="hljs-number">0.5em</span> <span class="hljs-number">2em</span>; <span class="hljs-attribute">width</span>: <span class="hljs-number">90%</span>;
            <span class="hljs-attribute">margin</span>: <span class="hljs-number">10px</span> <span class="hljs-number">0</span>;
            <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">15px</span>;
          }
          <span class="hljs-selector-id">#comment-section</span> > <span class="hljs-selector-tag">div</span> > <span class="hljs-selector-tag">p</span> {
            <span class="hljs-attribute">color</span>: black;
            <span class="hljs-attribute">display</span>:inline;
          }
          <span class="hljs-selector-tag">img</span>{
          <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">50%</span>;
          <span class="hljs-attribute">float</span>: left;
          }
        </span><span class="hljs-tag"></<span class="hljs-name">style</span>></span>
    <span class="hljs-tag"></<span class="hljs-name">head</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">body</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">header</span>></span>
            <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"blog-masthead"</span>></span>
              <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>></span>
                <span class="hljs-tag"><<span class="hljs-name">nav</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav"</span>></span>
                  <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-link active"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Home<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
                <span class="hljs-tag"></<span class="hljs-name">nav</span>></span>
              <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
            <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
          <span class="hljs-tag"></<span class="hljs-name">header</span>></span>

          <span class="hljs-tag"><<span class="hljs-name">main</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"main"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>></span>

            <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>></span>

              <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-sm-12 blog-main"</span>></span>

                <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"blog-post"</span>></span>
                  <span class="hljs-tag"><<span class="hljs-name">h2</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"blog-post-title"</span>></span>Realtime Comments With Pusher<span class="hljs-tag"></<span class="hljs-name">h2</span>></span>
                  <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"blog-post-meta"</span>></span>January 1, 2018 by <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Jordan<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">p</span>></span>
                  <span class="hljs-tag"><<span class="hljs-name">p</span>></span>This blog post shows a few different types of content that's supported and styled with Bootstrap. Basic typography, images, and code are all supported.This blog post shows a few different types of content that's supported and styled with Bootstrap. Basic typography, images, and code are all supported
                  <span class="hljs-tag"></<span class="hljs-name">p</span>></span>
                  <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"comment-section"</span>></span>
            <span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-signin"</span>></span>
            <span class="hljs-tag"><<span class="hljs-name">h5</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"comment"</span>></span>Comment<span class="hljs-tag"></<span class="hljs-name">h5</span>></span>
            <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"username"</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">"username"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-control"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"John Doe"</span> <span class="hljs-attr">required</span> <span class="hljs-attr">autofocus</span>></span>
            <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"email"</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">"email"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"form-control"</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Johndoe@gmail.com"</span> <span class="hljs-attr">required</span>></span>
            <span class="hljs-tag"><<span class="hljs-name">textarea</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">"comment"</span>></span><span class="hljs-tag"></<span class="hljs-name">textarea</span>></span>
            <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-lg btn-primary"</span> @<span class="hljs-attr">click.prevent</span>=<span class="hljs-string">"sendComment"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"submit"</span>></span>Comment<span class="hljs-tag"></<span class="hljs-name">button</span>></span>
          <span class="hljs-tag"></<span class="hljs-name">form</span>></span>
          <span class="hljs-tag"><<span class="hljs-name">br</span>></span>
          <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"comment-section"</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"comment in comments"</span>></span>
            <span class="hljs-tag"><<span class="hljs-name">div</span>></span>
              <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"http://merritos.com/img/team/maleTeam.jpg"</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"65px"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"65px"</span>></span>
               <span class="hljs-tag"><<span class="hljs-name">p</span>></span>&nbsp;&nbsp;{{comment.name}} &nbsp;<span class="hljs-tag">< {{<span class="hljs-attr">comment.email</span>}} ></span><span class="hljs-tag"></<span class="hljs-name">p</span>></span>
               <span class="hljs-tag"><<span class="hljs-name">hr</span>></span>
            <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
            <span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"color:black"</span>></span>{{comment.comment}}<span class="hljs-tag"></<span class="hljs-name">p</span>></span>
          <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
                  <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
                <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
              <span class="hljs-tag"></<span class="hljs-name">div</span>></span>

            <span class="hljs-tag"></<span class="hljs-name">div</span>></span>

          <span class="hljs-tag"></<span class="hljs-name">main</span>></span>

          <span class="hljs-tag"><<span class="hljs-name">footer</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"blog-footer"</span>></span>
            <span class="hljs-tag"><<span class="hljs-name">p</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Back to top<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">p</span>></span>
          <span class="hljs-tag"></<span class="hljs-name">footer</span>></span>

        <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
    <span class="hljs-tag"></<span class="hljs-name">body</span>></span>
    <span class="hljs-tag"></<span class="hljs-name">html</span>></span>

Now in the same file, paste the following code before the closing body tag of the HTML:

    <script>
      <span class="hljs-keyword">var</span> app = <span class="hljs-keyword">new</span> Vue({
        <span class="hljs-attr">el</span>: <span class="hljs-string">'#app'</span>,
        <span class="hljs-attr">data</span>: {
          <span class="hljs-attr">comments</span> : []
        },
        <span class="hljs-attr">created</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
          axios.get(<span class="hljs-string">'/comments'</span>).then(<span class="hljs-function"><span class="hljs-params">response</span> =></span> { 
            <span class="hljs-keyword">this</span>.comments = response.data.items ? response.data.items : [] 
          })
        },
        <span class="hljs-attr">methods</span>: {
            <span class="hljs-attr">sendComment</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">index</span>) </span>{
              <span class="hljs-keyword">let</span> comment = {
                <span class="hljs-attr">name</span>: <span class="hljs-keyword">this</span>.$refs.username.value,
                <span class="hljs-attr">email</span>: <span class="hljs-keyword">this</span>.$refs.email.value,
                <span class="hljs-attr">comment</span>: <span class="hljs-keyword">this</span>.$refs.comment.value
              }

              axios.post(<span class="hljs-string">'/comment'</span>, comment).then(<span class="hljs-function"><span class="hljs-params">response</span> =></span> { 
                <span class="hljs-keyword">this</span>.$refs.username.value = <span class="hljs-string">''</span>,
                <span class="hljs-keyword">this</span>.$refs.email.value = <span class="hljs-string">''</span>,
                <span class="hljs-keyword">this</span>.$refs.comment.value = <span class="hljs-string">''</span>
              })
            }
        }
      })
    <<span class="hljs-regexp">/script></span>

Above we have the Vue.js code for our application and this is a summary of what it does:

We instantiate a comments array that will hold all the available comments.
In the created() method, we use Axios to pull in all the comments available from the API and store it in the comments array.
In the sendComment method, we send a request to the API to create a new comment.

We can build our application at this stage and visit http://localhost:9000, we should see this:

    $ go run comments.go

Our application should display like this:

Making comments display in realtime

The next thing we need to do is make sure the comments are displayed in realtime. To do this, we need to trigger an event every time a new comment is added. We will do this in the backend using the Pusher Go library.

To pull in the Pusher Go library run the following command:

    $ go get github.com/pusher/pusher-http-go

Next let’s import the library. In our models.go file do the following in the imports statement:

    <span class="hljs-keyword">package</span> models

    <span class="hljs-keyword">import</span> (
        <span class="hljs-comment">// [...]</span>

        pusher <span class="hljs-string">"github.com/pusher/pusher-http-go"</span>
    )

In the same file, before the type definition, paste in the following code:

    <span class="hljs-comment">// [...]</span>

    <span class="hljs-keyword">var</span> client = pusher.Client{
        AppId:   <span class="hljs-string">"PUSHER_APP_ID"</span>,
        Key:     <span class="hljs-string">"PUSHER_APP_KEY"</span>,
        Secret:  <span class="hljs-string">"PUSHER_APP_SECRET"</span>,
        Cluster: <span class="hljs-string">"PUSHER_APP_CLUSTER"</span>,
        Secure:  <span class="hljs-literal">true</span>,
    }

    <span class="hljs-comment">// [...]</span>

Here, we have initialized the Pusher client using the credentials from our earlier created app.

⚠️ Replace PUSHER_APP_* keys with your Pusher app credentials.

Next, let’s trigger an event every time a comment is saved to the database. Replace the PushComment function with the following code:

    <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">PushComment</span><span class="hljs-params">(db *sql.DB, name <span class="hljs-keyword">string</span>, email <span class="hljs-keyword">string</span>, comment <span class="hljs-keyword">string</span>)</span> <span class="hljs-params">(<span class="hljs-keyword">int64</span>, error)</span></span> {
        sql := <span class="hljs-string">"INSERT INTO comments(name, email, comment) VALUES(?, ?, ?)"</span>
        stmt, err := db.Prepare(sql)
        <span class="hljs-keyword">if</span> err != <span class="hljs-literal">nil</span> {
            <span class="hljs-built_in">panic</span>(err)
        }

        <span class="hljs-keyword">defer</span> stmt.Close()

        result, err2 := stmt.Exec(name, email, comment)
        <span class="hljs-keyword">if</span> err2 != <span class="hljs-literal">nil</span> {
            <span class="hljs-built_in">panic</span>(err2)
        }

        newComment := Comment{
            Name:    name,
            Email:   email,
            Comment: comment,
        }

        client.Trigger(<span class="hljs-string">"comment-channel"</span>, <span class="hljs-string">"new-comment"</span>, newComment)
        <span class="hljs-keyword">return</span> result.LastInsertId()
    }

In this newer version of the function we create a newComment object that holds information for the last comment that was saved to the database. Whenever a new comment is created, we will send it to the Pusher channel comment-channel to be triggered on the event new-comment.

Displaying data in realtime on the clientTo receive comments we have to register the Pusher JavaScript Client in our frontend code. Add this line of code inside the head tag of our HTML in the index.html file:

    <script src="https://js.pusher.com/4.1/pusher.min.js"></script>

Next we will register a Pusher instance in the created() life cycle hook:

    created: function() {

        <span class="hljs-keyword">const</span> pusher = <span class="hljs-built_in">new</span> Pusher(<span class="hljs-string">'PUSHER_APP_KEY'</span>, {
            cluster: <span class="hljs-string">'PUSHER_APP_CLUSTER'</span>,
            encrypted: <span class="hljs-literal">true</span>
        });

        <span class="hljs-keyword">const</span> channel = pusher.subscribe(<span class="hljs-string">'comment-channel'</span>);

        channel.bind(<span class="hljs-string">'new-comment'</span>, data => {
          this.comments.push(data)
        });

        <span class="hljs-comment">// [...]    </span>
    }

⚠️ Replace the PUSHER_APP_* keys with the credentials for your Pusher application.

In the code above, we are creating a Pusher instance and then subscribing to a channel. In that channel we are listening for the new-comment event.

Now we can run our application:

    $ go run comments.go

We can point a web browser to this address http://localhost:9000 and we should see the application in action:

Conclusion

In this article, we looked at how to build a realtime comment system using Go, Vue.js, and Pusher Channels. The source code to the application is available on GitHub.

This post first appeared on the Pusher blog.

Build a photo feed with Go and Vue.js

Neo — Mon, 19 Nov 2018 17:04:25 +0000

You will need Go and SQLite installed on your machine, as well as basic knowledge of Go and JavaScript.

Many social media based applications allow users to upload photos and these photos are usually displayed in a timeline for their followers and others to see. In the past, you would have had to refresh your feed manually to see new photos uploaded to the timeline. However, with modern web technologies, you can see the updates in realtime without having to refresh the page manually.

In this article, we will consider how you can build a realtime photo feed using Pusher Channels, GO and a little Vue.js. Pusher Channels helps you “easily build scalable in-app notifications, chat, realtime graphs, geotracking and more in your web & mobile apps with our hosted pub/sub messaging API.”

This is a preview of what we will be building:

Prerequisites

Before we start building our application, make sure you have:

Basic knowledge of the Go programming language.
Basic JavaScript (Vue.js) knowledge.
Go (version >= 0.10.x) installed on your machine. Check out the installation guide.
SQLite (version >= 3.x) installed on your machine. Check out an installation guide.

Let’s get started.

Getting a Pusher Channels application

The first step will be to get a Pusher Channels application. We will need the application credentials for our realtime features to work.

Now that we have our application, let’s move on to the next step

Creating our Go application

The next thing we want to do is create the Go application. In your terminal, cd to your $GOPATH and create a new directory there.

    $ cd $GOPATH/src
    $ mkdir gofoto
    $ cd gofoto

💡 It is recommended that you place the source code for your project in the src subdirectory (e.g., $GOPATH/src/your_project or $GOPATH/src/github.com/your_github_username/your_project.

Next, we will create some directories to organize our application a little:

    $ mkdir database
    $ mkdir public
    $ mkdir public/uploads

This will create a database and public directory, and also an uploads directory inside the public directory. We will store our database file inside the database directory, we will keep our public files: HTML and images, inside the public and uploads directory. Create a new index.html file in the public directory that was created.

Now let’s create our first (and only) Go file for this article. We will try to keep everything simple by placing all our source code in a single file. Create a main.go file in the project root.

In the file paste the following:

    <span class="hljs-keyword">package</span> main

    <span class="hljs-keyword">import</span> (
        <span class="hljs-string">"database/sql"</span>
        <span class="hljs-string">"io"</span>
        <span class="hljs-string">"net/http"</span>
        <span class="hljs-string">"os"</span>

        <span class="hljs-string">"github.com/labstack/echo"</span>
        <span class="hljs-string">"github.com/labstack/echo/middleware"</span>
        _ <span class="hljs-string">"github.com/mattn/go-sqlite3"</span>
        pusher <span class="hljs-string">"github.com/pusher/pusher-http-go"</span>
    )

Above we have imported some packages we will be needing to work on our photo feed. We need the database/sql to run SQL queries, the io and os package for our file uploading process, and the net/http for our HTTP status codes.

We have some other external packages we imported. The labstack/echo package is the Echo framework that we will be using. We also have the mattn/go-sqlite3 package which is for SQLite. Finally, we imported the pusher/pusher-http-go package which we will use to trigger events to Pusher Channels.

Importing external Go packages

Before we continue, let’s pull in these packages using our terminal. Run the following commands below to pull the packages in:

    $ go get github.com/labstack/echo
    $ go get github.com/labstack/echo/middleware
    $ go get github.com/mattn/go-sqlite3
    $ go get github.com/pusher/pusher-http-go

Note that the commands above will not return any confirmation output when it finishes installing the packages. If you want to confirm the packages were indeed installed you can just check the $GOPATH/src/github.com directory.

Now that we have pulled in our packages, let’s create the main function. This is the function that will be the entry point of our application. In this function, we will set up our applications database, middleware, and routes.

Open the main,go file and paste the following code:

    <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">main</span><span class="hljs-params">()</span></span> {
        db := initialiseDatabase(<span class="hljs-string">"database/database.sqlite"</span>)
        migrateDatabase(db)

        e := echo.New()

        e.Use(middleware.Logger())
        e.Use(middleware.Recover())

        e.File(<span class="hljs-string">"/"</span>, <span class="hljs-string">"public/index.html"</span>)
        e.GET(<span class="hljs-string">"/photos"</span>, getPhotos(db))
        e.POST(<span class="hljs-string">"/photos"</span>, uploadPhoto(db))
        e.Static(<span class="hljs-string">"/uploads"</span>, <span class="hljs-string">"public/uploads"</span>)

        e.Logger.Fatal(e.Start(<span class="hljs-string">":9000"</span>))
    }

In the code above, we instantiated our database using the file path to the database file. This will create the SQLite file if it did not already exist. We then run the migrateDatabase function which migrates the database.

Next, we instantiate Echo and then register some middlewares. The logger middleware is helpful for logging information about the HTTP request while the recover middleware “recovers from panics anywhere in the chain, prints stack trace and handles the control to the centralized HTTPErrorHandler.”

We then set up some routes to handle our requests. The first handler is the File handler. We use this to serve the index.html file. This will be the entry point to the application from the frontend. We also have the /photos route which accepts a POST and GET request. We need these routes to act like API endpoints that are used for uploading and displaying the photos. The final handler is Static. We use this to return static files that are stored in the /uploads directory.

We finally use e.Start to start our Go web server running on port 9000. The port is not set in stone and you can choose any available and unused port you feel like.

At this point, we have not created most of the functions we referenced in the main function so let’s do so now.

Creating our database management functions

In the main function we referenced an initialiseDatabase and migrateDatabase function. Let’s create them now. In the main.go file, paste the following functions above the main function:

    <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">initialiseDatabase</span><span class="hljs-params">(filepath <span class="hljs-keyword">string</span>)</span> *<span class="hljs-title">sql</span>.<span class="hljs-title">DB</span></span> {
        db, err := sql.Open(<span class="hljs-string">"sqlite3"</span>, filepath)
        <span class="hljs-keyword">if</span> err != <span class="hljs-literal">nil</span> || db == <span class="hljs-literal">nil</span> {
            <span class="hljs-built_in">panic</span>(<span class="hljs-string">"Error connecting to database"</span>)
        }

        <span class="hljs-keyword">return</span> db
    }

    <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">migrateDatabase</span><span class="hljs-params">(db *sql.DB)</span></span> {
        sql := <span class="hljs-string">`
            CREATE TABLE IF NOT EXISTS photos(
                    id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
                    src VARCHAR NOT NULL
            );
       `</span>

        _, err := db.Exec(sql)
        <span class="hljs-keyword">if</span> err != <span class="hljs-literal">nil</span> {
            <span class="hljs-built_in">panic</span>(err)
        }
    }

In the initialiseDatabase function, we create an instance of the SQLite database using the database file and return that instance. In the migrateDatabase function, we use the instance of the database returned in the previous function to execute the migration SQL.

Let’s create the data structure for our photo and photo collection.

Creating our data structures

The next thing we will do is create the data structure for our object types. We will create a Photo structure and a PhotoCollection structure. The Photo struct will define how a typical photo will be represented while the PhotoCollection will define how a collection of photos will be represented.

Open the main.go file and paste the following code above the initialiseDatabase function:

    <span class="hljs-keyword">type</span> Photo <span class="hljs-keyword">struct</span> {
        ID  <span class="hljs-keyword">int64</span>  <span class="hljs-string">`json:"id"`</span>
        Src <span class="hljs-keyword">string</span> <span class="hljs-string">`json:"src"`</span>
    }

    <span class="hljs-keyword">type</span> PhotoCollection <span class="hljs-keyword">struct</span> {
        Photos []Photo <span class="hljs-string">`json:"items"`</span>
    }

Creating our route handler functions

Next let’s create the functions for our routes. Open the main.go file and paste the following file inside it:

    <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">getPhotos</span><span class="hljs-params">(db *sql.DB)</span> <span class="hljs-title">echo</span>.<span class="hljs-title">HandlerFunc</span></span> {
        <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">func</span><span class="hljs-params">(c echo.Context)</span> <span class="hljs-title">error</span></span> {
            rows, err := db.Query(<span class="hljs-string">"SELECT * FROM photos"</span>)
            <span class="hljs-keyword">if</span> err != <span class="hljs-literal">nil</span> {
                <span class="hljs-built_in">panic</span>(err)
            }

            <span class="hljs-keyword">defer</span> rows.Close()

            result := PhotoCollection{}

            <span class="hljs-keyword">for</span> rows.Next() {
                photo := Photo{}

                err2 := rows.Scan(&photo.ID, &photo.Src)
                <span class="hljs-keyword">if</span> err2 != <span class="hljs-literal">nil</span> {
                    <span class="hljs-built_in">panic</span>(err2)
                }

                result.Photos = <span class="hljs-built_in">append</span>(result.Photos, photo)
            }

            <span class="hljs-keyword">return</span> c.JSON(http.StatusOK, result)
        }
    }

    <span class="hljs-function"><span class="hljs-keyword">func</span> <span class="hljs-title">uploadPhoto</span><span class="hljs-params">(db *sql.DB)</span> <span class="hljs-title">echo</span>.<span class="hljs-title">HandlerFunc</span></span> {
        <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">func</span><span class="hljs-params">(c echo.Context)</span> <span class="hljs-title">error</span></span> {
            file, err := c.FormFile(<span class="hljs-string">"file"</span>)
            <span class="hljs-keyword">if</span> err != <span class="hljs-literal">nil</span> {
                <span class="hljs-keyword">return</span> err
            }

            src, err := file.Open()
            <span class="hljs-keyword">if</span> err != <span class="hljs-literal">nil</span> {
                <span class="hljs-keyword">return</span> err
            }

            <span class="hljs-keyword">defer</span> src.Close()

            filePath := <span class="hljs-string">"./public/uploads/"</span> + file.Filename
            fileSrc := <span class="hljs-string">"http://127.0.0.1:9000/uploads/"</span> + file.Filename

            dst, err := os.Create(filePath)
            <span class="hljs-keyword">if</span> err != <span class="hljs-literal">nil</span> {
                <span class="hljs-built_in">panic</span>(err)
            }

            <span class="hljs-keyword">defer</span> dst.Close()

            <span class="hljs-keyword">if</span> _, err = io.Copy(dst, src); err != <span class="hljs-literal">nil</span> {
                <span class="hljs-built_in">panic</span>(err)
            }

            stmt, err := db.Prepare(<span class="hljs-string">"INSERT INTO photos (src) VALUES(?)"</span>)
            <span class="hljs-keyword">if</span> err != <span class="hljs-literal">nil</span> {
                <span class="hljs-built_in">panic</span>(err)
            }

            <span class="hljs-keyword">defer</span> stmt.Close()

            result, err := stmt.Exec(fileSrc)
            <span class="hljs-keyword">if</span> err != <span class="hljs-literal">nil</span> {
                <span class="hljs-built_in">panic</span>(err)
            }

            insertedId, err := result.LastInsertId()
            <span class="hljs-keyword">if</span> err != <span class="hljs-literal">nil</span> {
                <span class="hljs-built_in">panic</span>(err)
            }

            photo := Photo{
                Src: fileSrc,
                ID:  insertedId,
            }

            <span class="hljs-keyword">return</span> c.JSON(http.StatusOK, photo)
        }
    }

In the getPhotos method, we are simply running the query to fetch all the photos from the database and returning them as a JSON response to the client. In the uploadPhoto method we first get the file to be uploaded then upload them to the server and then we run the query to insert a new record in the photos table with the newly uploaded photo. We also return a JSON response from that function.

Adding realtime support to our Go application

The next thing we want to do is trigger an event when a new photo is uploaded to the server. For this, we will be using the Pusher Go HTTP library.

In the main.go file paste the following above the type definitions for the Photo and PhotoCollection:

    <span class="hljs-keyword">var</span> client = pusher.Client{
        AppId:   <span class="hljs-string">"PUSHER_APP_ID"</span>,
        Key:     <span class="hljs-string">"PUSHER_APP_KEY"</span>,
        Secret:  <span class="hljs-string">"PUSHER_APP_SECRET"</span>,
        Cluster: <span class="hljs-string">"PUSHER_APP_CLUSTER"</span>,
        Secure:  <span class="hljs-literal">true</span>,
    }

This will create a new Pusher client instance. We can then use this instance to trigger notifications to different channels we want. Remember to replace the PUSHER_APP_* keys with the keys provided when you created your Pusher application earlier.

Next, go to the uploadPhoto function in the main.go file and right before the return statement at the bottom of the function, paste the following code:

client.Trigger("photo-stream", "new-photo", photo)This is the code that triggers a new event when a new photo is uploaded to our application.

That will be all for our Go application. At this point, you can build your application and compile it into a binary using the go build command. However, for this tutorial we will just run the binary temporarily:

    $ go run main.go

Building our frontend

The next thing we want to do is build out our frontend. We will be using the Vue.js framework and the Axios library to send requests.

Open the index.html file and in there paste the following code:

    <span class="hljs-meta"><!doctype html></span>
    <span class="hljs-tag"><<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">head</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"utf-8"</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"viewport"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"width=device-width, initial-scale=1, shrink-to-fit=no"</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">title</span>></span>Photo Feed<span class="hljs-tag"></<span class="hljs-name">title</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">style</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"text/css"</span>></span><span class="css">
            <span class="hljs-selector-id">#photoFile</span> { <span class="hljs-attribute">display</span>: none; }
            <span class="hljs-selector-id">#app</span> <span class="hljs-selector-tag">img</span> { <span class="hljs-attribute">max-width</span>: <span class="hljs-number">100%</span>; }
            <span class="hljs-selector-class">.image-row</span> { <span class="hljs-attribute">margin</span>: <span class="hljs-number">20px</span> <span class="hljs-number">0</span>; }
            <span class="hljs-selector-class">.image-row</span> <span class="hljs-selector-class">.thumbnail</span> { <span class="hljs-attribute">padding</span>: <span class="hljs-number">2px</span>; <span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid <span class="hljs-number">#d9d9d9</span>; }
        </span><span class="hljs-tag"></<span class="hljs-name">style</span>></span>
    <span class="hljs-tag"></<span class="hljs-name">head</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">body</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>></span>

            <span class="hljs-tag"><<span class="hljs-name">nav</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"navbar navbar-expand-lg navbar-light bg-light"</span>></span>
                <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"navbar-brand"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>GoFoto<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
                <span class="hljs-tag"><<span class="hljs-name">div</span>></span>
                    <span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"navbar-nav mr-auto"</span>></span>
                        <span class="hljs-tag"><<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-item active"</span>></span>
                            <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-link"</span> <span class="hljs-attr">v-on:click</span>=<span class="hljs-string">"filePicker"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Upload<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
                            <span class="hljs-tag"><<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"file"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"photoFile"</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">"myFiles"</span> @<span class="hljs-attr">change</span>=<span class="hljs-string">"upload"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"file"</span> /></span>
                        <span class="hljs-tag"></<span class="hljs-name">li</span>></span>
                    <span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
                <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
            <span class="hljs-tag"></<span class="hljs-name">nav</span>></span>

            <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>></span>
                <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row justify-content-md-center"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"loading"</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">"loading"</span>></span>
                    <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-xs-12"</span>></span>
                        Loading photos...
                    <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
                <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
                <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row justify-content-md-center image-row"</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"photo in photos"</span>></span>
                    <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col col-lg-4 col-md-6 col-xs-12"</span>></span>
                        <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"thumbnail"</span> <span class="hljs-attr">:src</span>=<span class="hljs-string">"photo.src"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">""</span> /></span>
                    <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
                <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
            <span class="hljs-tag"></<span class="hljs-name">div</span>></span>

        <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"//js.pusher.com/4.0/pusher.min.js"</span>></span><span class="undefined"></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://unpkg.com/axios/dist/axios.min.js"</span>></span><span class="undefined"></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"</span>></span><span class="undefined"></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
    <span class="hljs-tag"></<span class="hljs-name">body</span>></span>
    <span class="hljs-tag"></<span class="hljs-name">html</span>></span>

In the HTML file above we have defined the design for our photostream. We are using Bootstrap 4 and we included the CSS in the HTML above. We are also using the Axios library, Pusher library, and Vue framework. We included the links to the scripts at the bottom of the HTML document.

Next let’s add the Vue.js code. In the HTML file, add the following code right before the closing body tag:

    <script type=<span class="hljs-string">"text/javascript"</span>>
        <span class="hljs-keyword">new</span> Vue({
            <span class="hljs-attr">el</span>: <span class="hljs-string">'#app'</span>,
            <span class="hljs-attr">data</span>: {
                <span class="hljs-attr">photos</span>: [],
                <span class="hljs-attr">loading</span>: <span class="hljs-literal">true</span>,
            },
            mounted() {
                <span class="hljs-keyword">const</span> pusher = <span class="hljs-keyword">new</span> Pusher(<span class="hljs-string">'PUSHER_APP_KEY'</span>, {
                    <span class="hljs-attr">cluster</span>: <span class="hljs-string">'PUSHER_APP_CLUSTER'</span>,
                    <span class="hljs-attr">encrypted</span>: <span class="hljs-literal">true</span>
                });

                <span class="hljs-keyword">let</span> channel = pusher.subscribe(<span class="hljs-string">'photo-stream'</span>)

                channel.bind(<span class="hljs-string">'new-photo'</span>, data => <span class="hljs-keyword">this</span>.photos.unshift(data));

                axios.get(<span class="hljs-string">'/photos'</span>).then(<span class="hljs-function"><span class="hljs-params">res</span> =></span> {
                    <span class="hljs-keyword">this</span>.loading = <span class="hljs-literal">false</span>
                    <span class="hljs-keyword">this</span>.photos = res.data.items ? res.data.items : []
                })
            },
            <span class="hljs-attr">methods</span>: {
                <span class="hljs-attr">filePicker</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
                    <span class="hljs-keyword">let</span> elem = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'photoFile'</span>);

                    <span class="hljs-keyword">if</span> (elem && <span class="hljs-built_in">document</span>.createEvent) {
                        <span class="hljs-keyword">let</span> evt = <span class="hljs-built_in">document</span>.createEvent(<span class="hljs-string">"MouseEvents"</span>);
                        evt.initEvent(<span class="hljs-string">"click"</span>, <span class="hljs-literal">true</span>, <span class="hljs-literal">false</span>);
                        elem.dispatchEvent(evt);
                    }
                },
                <span class="hljs-attr">upload</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
                    <span class="hljs-keyword">let</span> data = <span class="hljs-keyword">new</span> FormData();
                    data.append(<span class="hljs-string">'file'</span>, <span class="hljs-keyword">this</span>.$refs.myFiles.files[<span class="hljs-number">0</span>]);

                    axios.post(<span class="hljs-string">'/photos'</span>, data).then(<span class="hljs-function"><span class="hljs-params">res</span> =></span> <span class="hljs-built_in">console</span>.log(res))
                }
            }
        });
    <span class="xml"><span class="hljs-tag"></<span class="hljs-name">script</span>></span></span>

Above we created a Vue instance and stored the properties photos and loading. The photos property stores the photo list and the loading just holds a boolean that indicates if the photos are loading or not.

In the mounted method we create an instance of our Pusher library. We then listen on the photo-stream channel for the new-photo event. When the event is triggered we append the new photo from the event to the photos list. We also send a GET request to /photos to fetch all the photos from the API. Replace the PUSHER_APP_* keys with the one from your Pusher dashboard.

In the methods property, we added a few methods. The filePicker is triggered when the ‘Upload’ button is pressed on the UI. It triggers a file picker that allows the user to upload photos. The upload method takes the uploaded file and sends a POST request with the file to the API for processing.

That’s all for the frontend, you can save the file and head over to your web browser. Visit http://127.0.0.1:9000 to see your application in action.

Here’s how it will look again:

Conclusion

In this article, we have been able to demonstrate how you can use Pusher Channels in your Go application to provide realtime features for your application. As seen from the code samples above, it is very easy to get started with Pusher Channels. Check the documentation to see other ways you can use Pusher Channels to provide realtime features to your users.

The source code for this application is available on GitHub.

This post first appeared on the Pusher blog.

CREATE A GO APPLICATION WITH ONLINE PRESENCE

Neo — Tue, 18 Sep 2018 13:16:36 +0000

You will need Go 0.10+ installed on your machine.

When building applications that allow multiple users to interact with one another, it is essential to display their online presence so that each user gets an idea of how many other users are online.

In this article, we will build a live streaming application that displays the online presence of the users currently streaming a video. We will use Go, JavaScript (Vue) and Pusher for the development.

Here’s a demo of the final application:

The source code for this tutorial is available on GitHub.

PREREQUISITES

To follow along with this article, you will need the following:

A code editor like Visual Studio Code.
Basic knowledge of the Go programming language.
Go (version >= 0.10.x) installed on your computer. Installation guide.
Basic knowledge of JavaScript (Vue).
A Pusher application. Create one here. Once you have all the above requirements, we can proceed.

BUILDING THE BACKEND SERVER

We will build the backend server in Go. Create a new project directory in the src directory that is located in the $GOPATH, let’s call this directory go-pusher-presence-app.

    $ cd $GOPATH/src
    $ mkdir go-pusher-presence-app
    $ cd go-pusher-presence-app

Next, create a new Go file and call it presence.go, this file will be where our entire backend server logic will be. Now, let’s pull in the official Go Pusher package with this command:

   $ go get github.com/pusher/pusher-http-go

Open the presence.go file and paste the following code:

    // File: ./presence.go
    package main

    import (
        "encoding/json"
        "fmt"
        "io/ioutil"
        "log"
        "net/http"
        pusher "github.com/pusher/pusher-http-go"
    )

    var client = pusher.Client{
        AppId:   "PUSHER_APP_ID",
        Key:     "PUSHER_APP_KEY",
        Secret:  "PUSHER_APP_SECRET",
        Cluster: "PUSHER_APP_CLUSTER",
        Secure:  true,
    }

    type user struct {
        Username  string `json:"username" xml:"username" form:"username" query:"username"`
        Email string `json:"email" xml:"email" form:"email" query:"email"`
    }

    var loggedInUser user

    func main() {
        // Define our routes
        http.Handle("/", http.FileServer(http.Dir("./static")))
        http.HandleFunc("/isLoggedIn", isUserLoggedIn)
        http.HandleFunc("/new/user", NewUser)
        http.HandleFunc("/pusher/auth", pusherAuth)

        // Start executing the application on port 8090
        log.Fatal(http.ListenAndServe(":8090", nil))
    }

Replace the PUSHER_APP_* keys with the keys on your Pusher dashboard.

Here’s a breakdown of what we’ve done in the code above:

We imported all the packages that are required for the application to work, including Pusher.
We instantiated the Pusher client that we will use to authenticate users from the client-side.
We defined a user struct and gave it two the properties — username and email — so that Go knows how to handle incoming payloads and correctly bind it to a user instance.
We created a global instance of the user struct so that we can use it to store a user’s name and email. This instance is going to somewhat serve the purpose of a session on a server, we will check that it is set before allowing a user to access the dashboard of this application. In the main function, we registered four endpoints:

/ - loads all the static files from the static directory.
/isLoggedIn - checks if a user is logged in or not and returns a fitting message.
/new/user - allows a new user to connect and initializes the global user instance.
/pusher/auth — authorizes users from the client-side. In the same file, above the main function, add the code for the handler function of the /isLoggedIn endpoint:

  // File: ./presence.go

    // [...]

    func isUserLoggedIn(rw http.ResponseWriter, req *http.Request){
        if loggedInUser.Username != "" && loggedInUser.Email != "" {
            json.NewEncoder(rw).Encode(loggedInUser)
        } else {
            json.NewEncoder(rw).Encode("false")
        }
    }

    // [...]

After the function above, let’s add the handler function for the /new/user endpoint:

    // File: ./presence.go

    // [...]

    func NewUser(rw http.ResponseWriter, req *http.Request) {
        body, err := ioutil.ReadAll(req.Body)
        if err != nil {
            panic(err)
        }
        err = json.Unmarshal(body, &loggedInUser)
        if err != nil {
            panic(err)
        }
        json.NewEncoder(rw).Encode(loggedInUser)
    }

    // [...]

Above, we receive a new user's details in a POST request and bind it to an instance of the user struct. We further use this user instance to check if a user is logged in or not

Lastly, after the function above, let’s add the code for the /pusher/auth endpoint:

  // File: ./presence.go

    // [...]

    // -------------------------------------------------------
    // Here, we authorize users so that they can subscribe to 
    // the presence channel
    // -------------------------------------------------------

    func pusherAuth(res http.ResponseWriter, req *http.Request) {
        params, _ := ioutil.ReadAll(req.Body)

        data := pusher.MemberData{
            UserId: loggedInUser.Username,
            UserInfo: map[string]string{
                "email": loggedInUser.Email,
            },
        }

        response, err := client.AuthenticatePresenceChannel(params, data)
        if err != nil {
            panic(err)
        }

        fmt.Fprintf(res, string(response))
    }

    // [...]

To ensure that every connected user has a unique presence, we used the properties of the global loggedInUser variable in setting the pusher.MemberData instance.

The syntax for authenticating a Pusher presence channel is:

    client.AuthenticatePresenceChannel(params, presenceData)

BUILDING THE FRONTEND

Next, in the root of the project, create a static folder. Create two files the directory named index.html and dashboard.html. In the index.html file, we will write the HTML code that allows users to connect to the live streaming application using their name and email.

SETTING UP THE CONNECTION PAGE

Open the index.html file and update it with the following code:

 <!-- File: ./static/index.html -->
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
            <title>Live streamer</title>
            <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
            <style>
                  :root {
                    --input-padding-x: .75rem;
                    --input-padding-y: .75rem;
                  }
                  html,
                  body, body > div {
                    height: 100%;
                  }
                  body > div {
                    display: -ms-flexbox;
                    display: flex;
                    -ms-flex-align: center;
                    align-items: center;
                    padding-top: 40px;
                    padding-bottom: 40px;
                    background-color: #f5f5f5;
                  }
                  .form-signin {
                    width: 100%;
                    max-width: 420px;
                    padding: 15px;
                    margin: auto;
                  }
                  .form-label-group {
                    position: relative;
                    margin-bottom: 1rem;
                  }
                  .form-label-group > input,
                  .form-label-group > label {
                    padding: var(--input-padding-y) var(--input-padding-x);
                  }
                  .form-label-group > label {
                    position: absolute;
                    top: 0;
                    left: 0;
                    display: block;
                    width: 100%;
                    margin-bottom: 0; /* Override default `<label>` margin */
                    line-height: 1.5;
                    color: #495057;
                    cursor: text; /* Match the input under the label */
                    border: 1px solid transparent;
                    border-radius: .25rem;
                    transition: all .1s ease-in-out;
                  }
                  .form-label-group input::-webkit-input-placeholder {
                    color: transparent;
                  }
                  .form-label-group input:-ms-input-placeholder {
                    color: transparent;
                  }
                  .form-label-group input::-ms-input-placeholder {
                    color: transparent;
                  }
                  .form-label-group input::-moz-placeholder {
                    color: transparent;
                  }
                  .form-label-group input::placeholder {
                    color: transparent;
                  }
                  .form-label-group input:not(:placeholder-shown) {
                    padding-top: calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3));
                    padding-bottom: calc(var(--input-padding-y) / 3);
                  }
                  .form-label-group input:not(:placeholder-shown) ~ label {
                    padding-top: calc(var(--input-padding-y) / 3);
                    padding-bottom: calc(var(--input-padding-y) / 3);
                    font-size: 12px;
                    color: #777;
                  }
            </style>
          </head>

          <body>
            <div id="app">
              <form class="form-signin">
                <div class="text-center mb-4">
                  <img class="mb-4" src="https://www.onlinelogomaker.com/blog/wp-content/uploads/2017/07/Fotolia_117855281_Subscription_Monthly_M.jpg" alt="" width="72" height="72">
                  <h1 class="h3 mb-3 font-weight-normal">Live streamer</h1>
                  <p>STREAM YOUR FAVOURITE VIDEOS FOR FREE</p>
                </div>
                <div class="form-label-group">
                    <input type="name" id="inputUsername" ref="username" class="form-control" placeholder="Username" required="" autofocus="">
                      <label for="inputUsername">Username</label>
                  </div>

                <div class="form-label-group">
                  <input type="email" id="inputEmail" ref="email" class="form-control" placeholder="Email address" autofocus="" required>
                    <label for="inputEmail">Email address</label>
                </div>

                <button class="btn btn-lg btn-primary btn-block" type="submit" @click.prevent="login">Connect</button>
                <p class="mt-5 mb-3 text-muted text-center">© 2017-2018</p>
              </form>
              </div>

              <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        </body>
    </html>

On line 106, we added Vue using a CDN. Let’s add the Vue script for the page.

Before the closing body tag add the following code:

<script>
      var app = new Vue({
        el: '#app',
        methods: {
          login: function () {
            let username = this.$refs.username.value
            let email = this.$refs.email.value

            fetch('new/user', {
              method: 'POST',
              headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
              },
              body: JSON.stringify({username, email})
            })
            .then(res => res.json())
            .then(data => window.location.replace('/dashboard.html'))
          }
        }
      })
    </script>

This script above submits user data to the backend Go server and navigates the browser’s location to the dashboard’s URL.

Next, let’s build the dashboard.

SETTING UP THE DASHBOARD

Open the dashboard.html file and update it with the following code:

    <!-- File: ./static/dashboard.html -->
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
        <title>Live streamer | Dashboard</title>
      </head>
      <body>
        <div id="app">
          <div class="container-fluid row shadow p-1 mb-3">
            <div class="col-3">
              <img class="ml-3" src="https://www.onlinelogomaker.com/blog/wp-content/uploads/2017/07/Fotolia_117855281_Subscription_Monthly_M.jpg" height="72px" width="72px"/>
            </div>
            <div class="col-6 ml-auto mt-3">
              <div class="input-group">
                <input type="text" class="form-control" aria-label="Text input with dropdown button">
                <div class="input-group-append">
                  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Search</button>
                </div>
              </div>
            </div>
            <div class="col-3 float-right">
              <img src="https://www.seoclerk.com/pics/319222-1IvI0s1421931178.png"  height="72px" width="72px" class="rounded-circle border"/>
              <p class="mr-auto mt-3 d-inline"> {{ username }} </p>
            </div>
          </div>
          <div class="container-fluid">
            <div class="row">
              <div class="col-8">
                <div class="embed-responsive embed-responsive-16by9">
                  <iframe width="854" height="480" class="embed-responsive-item" src="https://www.youtube.com/embed/VYOjWnS4cMY" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
                </div>
                <div class="text-center mt-3 p-3 text-muted font-weight-bold border">
                  {{ member }} person(s) is/are currently viewing this video 
                  <hr>
                  <li class="m-auto text-success" v-for="member in connectedMembers">
                    {{ member }}
                  </li>
                </div>
              </div>
              <div class="col-4 border text-justify" style="background: #e0e0e0; height: 30em; overflow-y: scroll; position: relative;">
                <div class="border invisible h-50 w-75 text-center" ref="added" style="font-size: 2rem; position: absolute; right: 0; background: #48cbe0">{{ addedMember }} just started watching.</div>
                <div class="border invisible h-50 w-75 text-center" ref="removed" style="font-size: 2rem; position: absolute; right: 0; background: #ff8325">{{ removedMember }} just stopped watching.</div>
                <div class="h-75 text-center">
                  <h2 class="text-center my-3"> Lyrics </h2>
                  <p class="w-75 m-auto" style="font-size: 1.5rem">
                    We just wanna party<br>
                    Party just for you<br>
                    We just want the money<br>
                    Money just for you<br>
                    I know you wanna party<br>
                    Party just for me<br>
                    Girl, you got me dancin' (yeah, girl, you got me dancin')<br>
                    Dance and shake the frame<br>
                    We just wanna party (yeah)<br>
                    Party just for you (yeah)<br>
                    We just want the money (yeah)<br>
                    Money just for you (you)<br>
                    I know you wanna party (yeah)<br>
                    Party just for me (yeah)<br>
                    Girl, you got me dancin' (yeah, girl, you got me dancin')<br>
                    Dance and shake the frame (you)<br>
                    This is America<br>
                    Don't catch you slippin' up<br>
                    Don't catch you slippin' up<br>
                    Look what I'm whippin' up<br>
                    This is America (woo)<br>
                    Don't catch you slippin' up<br>
                    Don't catch you slippin' up<br>
                    Look what I'm whippin' up<br>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://js.pusher.com/4.2/pusher.min.js"></script>
      </body>
    </html>

⚠️ Video is an embed from YouTube and may not play depending on your region.

On line 80 we imported the JavaScript Pusher library so let’s add some code to utilize it. Before the closing body tag, add the following code:

    <script>
    var app = new Vue({
        el: '#app',
        data: {
            username: '',
            member: 0,
            addedMember: '',
            removedMember: '',
            connectedMembers: []
        },

        created() {
            fetch('/isLoggedIn', {
                method: 'GET',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                }
            })
            .then(res => res.json())
            .then(data => {
                if (data != 'false') {
                    this.username = data.username
                } else {
                    window.location.replace('/')
                }
            })

            this.subscribe()
        },

        methods: {
            subscribe: function () {
                const pusher = new Pusher('PUSHER_APP_KEY', {
                    authEndpoint: '/pusher/auth',
                    cluster: 'PUSHER_APP_CLUSTER',
                    encrypted: true
                });

                let channel = pusher.subscribe('presence-channel')

                channel.bind('pusher:subscription_succeeded', data => {
                    this.member = data.count
                    data.each(member => this.connectedMembers.push(member.id))
                })

                // Display a notification when a member comes online
                channel.bind('pusher:member_added', data => {
                    this.member++
                    this.connectedMembers.push(data.id)
                    this.addedMember = data.id

                    this.$refs.added.classList.add('visible')
                    this.$refs.added.classList.remove('invisible')

                    window.setTimeout(() => {
                        this.$refs.added.classList.remove('visible');
                        this.$refs.added.classList.add('invisible');
                    }, 3000)
                });

                // Display a notification when a member goes offline
                channel.bind('pusher:member_removed', data => {
                    this.member--
                    let index = this.connectedMembers.indexOf(data.id)

                    if (index > -1) {
                        this.connectedMembers.splice(index, 1)
                    }

                    this.removedMember = data.id
                    this.$refs.removed.classList.add('visible')
                    this.$refs.removed.classList.remove('invisible')

                    window.setTimeout(() => {
                        this.$refs.removed.classList.remove('visible')
                        this.$refs.removed.classList.add('invisible')
                    }, 3000)
                })
            }
        }
    })
    </script>

You will need Go 0.10+ installed on your machine.
When building applications that allow multiple users to interact with one another, it is essential to display their online presence so that each user gets an idea of how many other users are online.

Here’s a demo of the final application:

go-online-presence-demo

The source code for this tutorial is available on GitHub.

PREREQUISITES

To follow along with this article, you will need the following:

A code editor like Visual Studio Code.
Basic knowledge of the Go programming language.
Go (version >= 0.10.x) installed on your computer. Installation guide.
Basic knowledge of JavaScript (Vue).
A Pusher application. Create one here.
Once you have all the above requirements, we can proceed.

BUILDING THE BACKEND SERVER

We will build the backend server in Go. Create a new project directory in the src directory that is located in the $GOPATH, let’s call this directory go-pusher-presence-app.

$ cd $GOPATH/src
$ mkdir go-pusher-presence-app
$ cd go-pusher-presence-app

Next, create a new Go file and call it presence.go, this file will be where our entire backend server logic will be. Now, let’s pull in the official Go Pusher package with this command:

$ go get github.com/pusher/pusher-http-go

Open the presence.go file and paste the following code:
// File: ./presence.go
package main

import (
    "encoding/json"
    "fmt"
    "io/ioutil"
    "log"
    "net/http"
    pusher "github.com/pusher/pusher-http-go"
)

var client = pusher.Client{
    AppId:   "PUSHER_APP_ID",
    Key:     "PUSHER_APP_KEY",
    Secret:  "PUSHER_APP_SECRET",
    Cluster: "PUSHER_APP_CLUSTER",
    Secure:  true,
}

type user struct {
    Username  string `json:"username" xml:"username" form:"username" query:"username"`
    Email string `json:"email" xml:"email" form:"email" query:"email"`
}

var loggedInUser user

func main() {
    // Define our routes
    http.Handle("/", http.FileServer(http.Dir("./static")))
    http.HandleFunc("/isLoggedIn", isUserLoggedIn)
    http.HandleFunc("/new/user", NewUser)
    http.HandleFunc("/pusher/auth", pusherAuth)

    // Start executing the application on port 8090
    log.Fatal(http.ListenAndServe(":8090", nil))
}

Replace the PUSHER_APP_* keys with the keys on your Pusher dashboard.

Here’s a breakdown of what we’ve done in the code above:

We imported all the packages that are required for the application to work, including Pusher.
We instantiated the Pusher client that we will use to authenticate users from the client-side.
We defined a user struct and gave it two the properties — username and email — so that Go knows how to handle incoming payloads and correctly bind it to a user instance.
We created a global instance of the user struct so that we can use it to store a user’s name and email. This instance is going to somewhat serve the purpose of a session on a server, we will check that it is set before allowing a user to access the dashboard of this application.
In the main function, we registered four endpoints:

/ - loads all the static files from the static directory.
/isLoggedIn - checks if a user is logged in or not and returns a fitting message.
/new/user - allows a new user to connect and initializes the global user instance.
/pusher/auth — authorizes users from the client-side.
In the same file, above the main function, add the code for the handler function of the /isLoggedIn endpoint:

// File: ./presence.go

// [...]

func isUserLoggedIn(rw http.ResponseWriter, req *http.Request){
    if loggedInUser.Username != "" && loggedInUser.Email != "" {
        json.NewEncoder(rw).Encode(loggedInUser)
    } else {
        json.NewEncoder(rw).Encode("false")
    }
}

// [...]

After the function above, let’s add the handler function for the /new/user endpoint:

// File: ./presence.go

// [...]

func NewUser(rw http.ResponseWriter, req *http.Request) {
    body, err := ioutil.ReadAll(req.Body)
    if err != nil {
        panic(err)
    }
    err = json.Unmarshal(body, &loggedInUser)
    if err != nil {
        panic(err)
    }
    json.NewEncoder(rw).Encode(loggedInUser)
}

// [...]

Above, we receive a new user's details in a POST request and bind it to an instance of the user struct. We further use this user instance to check if a user is logged in or not

Lastly, after the function above, let’s add the code for the /pusher/auth endpoint:

// File: ./presence.go

// [...]

// -------------------------------------------------------
// Here, we authorize users so that they can subscribe to 
// the presence channel
// -------------------------------------------------------

func pusherAuth(res http.ResponseWriter, req *http.Request) {
    params, _ := ioutil.ReadAll(req.Body)

    data := pusher.MemberData{
        UserId: loggedInUser.Username,
        UserInfo: map[string]string{
            "email": loggedInUser.Email,
        },
    }

    response, err := client.AuthenticatePresenceChannel(params, data)
    if err != nil {
        panic(err)
    }

    fmt.Fprintf(res, string(response))
}

// [...]

To ensure that every connected user has a unique presence, we used the properties of the global loggedInUser variable in setting the pusher.MemberData instance.

The syntax for authenticating a Pusher presence channel is:
client.AuthenticatePresenceChannel(params, presenceData)

BUILDING THE FRONTEND

Next, in the root of the project, create a static folder. Create two files the directory named index.html and dashboard.html. In the index.html file, we will write the HTML code that allows users to connect to the live streaming application using their name and email.

SETTING UP THE CONNECTION PAGE

Open the index.html file and update it with the following code:

<!-- File: ./static/index.html -->
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
            <title>Live streamer</title>
            <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
            <style>
                  :root {
                    --input-padding-x: .75rem;
                    --input-padding-y: .75rem;
                  }
                  html,
                  body, body > div {
                    height: 100%;
                  }
                  body > div {
                    display: -ms-flexbox;
                    display: flex;
                    -ms-flex-align: center;
                    align-items: center;
                    padding-top: 40px;
                    padding-bottom: 40px;
                    background-color: #f5f5f5;
                  }
                  .form-signin {
                    width: 100%;
                    max-width: 420px;
                    padding: 15px;
                    margin: auto;
                  }
                  .form-label-group {
                    position: relative;
                    margin-bottom: 1rem;
                  }
                  .form-label-group > input,
                  .form-label-group > label {
                    padding: var(--input-padding-y) var(--input-padding-x);
                  }
                  .form-label-group > label {
                    position: absolute;
                    top: 0;
                    left: 0;
                    display: block;
                    width: 100%;
                    margin-bottom: 0; /* Override default `<label>` margin */
                    line-height: 1.5;
                    color: #495057;
                    cursor: text; /* Match the input under the label */
                    border: 1px solid transparent;
                    border-radius: .25rem;
                    transition: all .1s ease-in-out;
                  }
                  .form-label-group input::-webkit-input-placeholder {
                    color: transparent;
                  }
                  .form-label-group input:-ms-input-placeholder {
                    color: transparent;
                  }
                  .form-label-group input::-ms-input-placeholder {
                    color: transparent;
                  }
                  .form-label-group input::-moz-placeholder {
                    color: transparent;
                  }
                  .form-label-group input::placeholder {
                    color: transparent;
                  }
                  .form-label-group input:not(:placeholder-shown) {
                    padding-top: calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3));
                    padding-bottom: calc(var(--input-padding-y) / 3);
                  }
                  .form-label-group input:not(:placeholder-shown) ~ label {
                    padding-top: calc(var(--input-padding-y) / 3);
                    padding-bottom: calc(var(--input-padding-y) / 3);
                    font-size: 12px;
                    color: #777;
                  }
            </style>
          </head>

          <body>
            <div id="app">
              <form class="form-signin">
                <div class="text-center mb-4">
                  <img class="mb-4" src="https://www.onlinelogomaker.com/blog/wp-content/uploads/2017/07/Fotolia_117855281_Subscription_Monthly_M.jpg" alt="" width="72" height="72">
                  <h1 class="h3 mb-3 font-weight-normal">Live streamer</h1>
                  <p>STREAM YOUR FAVOURITE VIDEOS FOR FREE</p>
                </div>
                <div class="form-label-group">
                    <input type="name" id="inputUsername" ref="username" class="form-control" placeholder="Username" required="" autofocus="">
                      <label for="inputUsername">Username</label>
                  </div>

                <div class="form-label-group">
                  <input type="email" id="inputEmail" ref="email" class="form-control" placeholder="Email address" autofocus="" required>
                    <label for="inputEmail">Email address</label>
                </div>

                <button class="btn btn-lg btn-primary btn-block" type="submit" @click.prevent="login">Connect</button>
                <p class="mt-5 mb-3 text-muted text-center">© 2017-2018</p>
              </form>
              </div>

              <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        </body>
    </html>

On line 106, we added Vue using a CDN. Let’s add the Vue script for the page.

Before the closing body tag add the following code:

<script>
  var app = new Vue({
    el: '#app',
    methods: {
      login: function () {
        let username = this.$refs.username.value
        let email = this.$refs.email.value

        fetch('new/user', {
          method: 'POST',
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({username, email})
        })
        .then(res => res.json())
        .then(data => window.location.replace('/dashboard.html'))
      }
    }
  })
</script>

This script above submits user data to the backend Go server and navigates the browser’s location to the dashboard’s URL.

Next, let’s build the dashboard.

SETTING UP THE DASHBOARD

Open the dashboard.html file and update it with the following code:

    <!-- File: ./static/dashboard.html -->
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
        <title>Live streamer | Dashboard</title>
      </head>
      <body>
        <div id="app">
          <div class="container-fluid row shadow p-1 mb-3">
            <div class="col-3">
              <img class="ml-3" src="https://www.onlinelogomaker.com/blog/wp-content/uploads/2017/07/Fotolia_117855281_Subscription_Monthly_M.jpg" height="72px" width="72px"/>
            </div>
            <div class="col-6 ml-auto mt-3">
              <div class="input-group">
                <input type="text" class="form-control" aria-label="Text input with dropdown button">
                <div class="input-group-append">
                  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Search</button>
                </div>
              </div>
            </div>
            <div class="col-3 float-right">
              <img src="https://www.seoclerk.com/pics/319222-1IvI0s1421931178.png"  height="72px" width="72px" class="rounded-circle border"/>
              <p class="mr-auto mt-3 d-inline"> {{ username }} </p>
            </div>
          </div>
          <div class="container-fluid">
            <div class="row">
              <div class="col-8">
                <div class="embed-responsive embed-responsive-16by9">
                  <iframe width="854" height="480" class="embed-responsive-item" src="https://www.youtube.com/embed/VYOjWnS4cMY" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
                </div>
                <div class="text-center mt-3 p-3 text-muted font-weight-bold border">
                  {{ member }} person(s) is/are currently viewing this video 
                  <hr>
                  <li class="m-auto text-success" v-for="member in connectedMembers">
                    {{ member }}
                  </li>
                </div>
              </div>
              <div class="col-4 border text-justify" style="background: #e0e0e0; height: 30em; overflow-y: scroll; position: relative;">
                <div class="border invisible h-50 w-75 text-center" ref="added" style="font-size: 2rem; position: absolute; right: 0; background: #48cbe0">{{ addedMember }} just started watching.</div>
                <div class="border invisible h-50 w-75 text-center" ref="removed" style="font-size: 2rem; position: absolute; right: 0; background: #ff8325">{{ removedMember }} just stopped watching.</div>
                <div class="h-75 text-center">
                  <h2 class="text-center my-3"> Lyrics </h2>
                  <p class="w-75 m-auto" style="font-size: 1.5rem">
                    We just wanna party<br>
                    Party just for you<br>
                    We just want the money<br>
                    Money just for you<br>
                    I know you wanna party<br>
                    Party just for me<br>
                    Girl, you got me dancin' (yeah, girl, you got me dancin')<br>
                    Dance and shake the frame<br>
                    We just wanna party (yeah)<br>
                    Party just for you (yeah)<br>
                    We just want the money (yeah)<br>
                    Money just for you (you)<br>
                    I know you wanna party (yeah)<br>
                    Party just for me (yeah)<br>
                    Girl, you got me dancin' (yeah, girl, you got me dancin')<br>
                    Dance and shake the frame (you)<br>
                    This is America<br>
                    Don't catch you slippin' up<br>
                    Don't catch you slippin' up<br>
                    Look what I'm whippin' up<br>
                    This is America (woo)<br>
                    Don't catch you slippin' up<br>
                    Don't catch you slippin' up<br>
                    Look what I'm whippin' up<br>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://js.pusher.com/4.2/pusher.min.js"></script>
      </body>
    </html>

⚠️ Video is an embed from YouTube and may not play depending on your region.

On line 80 we imported the JavaScript Pusher library so let’s add some code to utilize it. Before the closing body tag, add the following code:

    <script>
    var app = new Vue({
        el: '#app',
        data: {
            username: '',
            member: 0,
            addedMember: '',
            removedMember: '',
            connectedMembers: []
        },

        created() {
            fetch('/isLoggedIn', {
                method: 'GET',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                }
            })
            .then(res => res.json())
            .then(data => {
                if (data != 'false') {
                    this.username = data.username
                } else {
                    window.location.replace('/')
                }
            })

            this.subscribe()
        },

        methods: {
            subscribe: function () {
                const pusher = new Pusher('PUSHER_APP_KEY', {
                    authEndpoint: '/pusher/auth',
                    cluster: 'PUSHER_APP_CLUSTER',
                    encrypted: true
                });

                let channel = pusher.subscribe('presence-channel')

                channel.bind('pusher:subscription_succeeded', data => {
                    this.member = data.count
                    data.each(member => this.connectedMembers.push(member.id))
                })

                // Display a notification when a member comes online
                channel.bind('pusher:member_added', data => {
                    this.member++
                    this.connectedMembers.push(data.id)
                    this.addedMember = data.id

                    this.$refs.added.classList.add('visible')
                    this.$refs.added.classList.remove('invisible')

                    window.setTimeout(() => {
                        this.$refs.added.classList.remove('visible');
                        this.$refs.added.classList.add('invisible');
                    }, 3000)
                });

                // Display a notification when a member goes offline
                channel.bind('pusher:member_removed', data => {
                    this.member--
                    let index = this.connectedMembers.indexOf(data.id)

                    if (index > -1) {
                        this.connectedMembers.splice(index, 1)
                    }

                    this.removedMember = data.id
                    this.$refs.removed.classList.add('visible')
                    this.$refs.removed.classList.remove('invisible')

                    window.setTimeout(() => {
                        this.$refs.removed.classList.remove('visible')
                        this.$refs.removed.classList.add('invisible')
                    }, 3000)
                })
            }
        }
    })
    </script>

In the snippet above, we created some Vue data variables to display reactive updates on different parts of the DOM. We also registered a created() lifecycle hook that checks if a user is connected on the backend server and eligible to view the dashboard before calling the subscribe() method.

The subscribe() method first configures a Pusher instance using the keys provided on the dashboard then subscribes to a presence channel. Next, it binds to several events that are available on the returned object of a presence channel subscription.

In the callback function of these bindings, we are able to update the state of the data variables, this is how we display the visual updates on user presence in this application.

TESTING THE APPLICATION

We can test the application by compiling down the Go source code and running it with this command:

$ go run presence.go

The application will be available for testing on this address http://127.0.0.1:8090, here’s a display of how the application should look:

CONCLUSION

In this tutorial, we have learned how to leverage the Pusher SDK in creating a live streaming application powered by a Go backend server.

The source code for this tutorial is available on [GitHub(https://github.com/neoighodaro/go-pusher-presence-app).

This was first published on pusher site.

Build a cryptocurrency alert app using Kotlin and Go: Part 2 — The backend

Neo — Wed, 05 Sep 2018 06:46:00 +0000

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.

In the first part of this article, we started building our service by creating our Android application. The application, however, requires a backend to work properly. So in this part, we will be creating the backend of the application.

We will be using Go to build the backend of the application. The framework in Go we will be using is Echo.

As a recap, here is a screen recording of what we will have built when we are done:

Prerequisites

To follow along, you need:

To have completed part one of the article.
Android Studio installed on your machine (v3.x or later). Download here.
Go version 1.10.2 or later installed.
SQLite installed on your machine.
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 Go API

Setting up

To get started, create a new project directory for your application. We will create one called backend. It is recommended that you create this in your $GOPATH however, it is not a requirement.

In the project directory, create three new directories:

database
notification
routes

In the database directory, create a new directory called model. In this database directory, we will store all things related to the database including the SQLite database file, the model, and database package.

In the notification directory, we will have a package that will contain everything needed to send push notifications to the devices.

Finally, in the routes directory, we will have the routes package where we have the logic for each HTTP request.

Now let’s start building the application.

Create a new main.go file in the root of the project. In this file, we will be adding the core of the project. We will be setting up the routing, middleware, and database.

In the main.go file, paste the following code:

// File: ./main.go
package main

import (
    "./database"
    "./routes"
    "github.com/labstack/echo"
    "github.com/labstack/echo/middleware"
)

func main() {
    db := database.Initialize("./database/db.sqlite")
    database.Migrate(db)
    e := echo.New()
    e.Use(middleware.Logger())
    e.Use(middleware.Recover())
    e.GET("/fetch-values", routes.GetPrices())
    e.POST("/btc-pref", routes.SaveDeviceSettings(db))
    e.POST("/eth-pref", routes.SaveDeviceSettings(db))
    e.GET("/simulate", routes.SimulatePriceChanges(db))
    e.Start(":9000")
}

In the code above, we first imported some packages that the Go script will need to work. Then we instantiate the database using the database subpackage that we imported. Next, we run the migration on the db instance. This will create the database table the application needs to run if it does not already exist.

Next, we create a new Echo instance e. We then use the instance to register the Logger middleware and the Recover middleware.

Logger middleware logs the information about each HTTP request.
Recover middleware recovers from panics anywhere in the chain, prints stack trace and handles the control to the centralize *HTTPErrorHandler.*

We then register our routes and map a handler to them using the routes package we imported. The routes are:

GET /fetch-values - fetches the current prices of all the supported currencies and returns a JSON response.
POST /btc-pref - stores the minimum and maximum price BTC has to exceed for a device before receiving a notification and returns a JSON response.
POST /eth-pref - stores the minimum and maximum price ETH has to exceed for a device before receiving a notification and returns a JSON response.
GET /simulate - simulates prices changes in the supported currencies.

After the routes, we start the server on port 9000.

You can choose a different port if 9000 is in use, just remember to also change it in your *MainActivity.kt*file.

Now that we have the main.go file, let’s pull in all the imports the script needs. Open your terminal and run the following commands:

$ go get github.com/labstack/echo
$ go get github.com/labstack/echo/middleware

This will pull in Echo package and the Echo Middleware package. For the other two packages, database and routes, we will create those manually. Let’s do that now.

Creating internal Go packages

As mentioned earlier, we are going to create some internal packages to make the application a lot more modular so let’s start with the database package.

In the database directory, create a new init.go file and paste the following code:

// File: ./database/init.go
package database

import (
    "database/sql"
    _ "github.com/mattn/go-sqlite3"
)

// Initialize initialises the database
func Initialize(filepath string) *sql.DB {
    db, err := sql.Open("sqlite3", filepath)
    if err != nil || db == nil {
        panic("Error connecting to database")
    }
    return db
}

// Migrate migrates the database
func Migrate(db *sql.DB) {
    sql := `
        CREATE TABLE IF NOT EXISTS devices(
                id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
                uuid VARCHAR NOT NULL,
                btc_min INTEGER,
                btc_max INTEGER,
                eth_min INTEGER,
                eth_max INTEGER
        );
    `
    _, err := db.Exec(sql)
    if err != nil {
        panic(err)
    }
}

In the file above, we first import two packages, the database/sql, which is inbuilt, and the mattn/go-sqlite3package, which is an sqlite3 driver for Go using database/sql. To pull that in open the terminal and run the command below:

$ go get github.com/mattn/go-sqlite3

Next, we created a function called Initialize and in this function, we initialize our SQLite database. This will create a new database file if it does not exist, or use an existing one.

We also have a Migrate function where we specify the SQL query to be run when the application is initialized. As seen from the query, we create the table devices only if it does not already exist.

That’s all for the init.go file.

Create a new routes.go file in the routes directory and paste the following code:

// File: ./routes/routes.go
package routes

import (
    "database/sql"
    "errors"
    "net/http"
    "strconv"
    "../database/model"
    "github.com/labstack/echo"
)

Now let’s start defining the route handlers as used in the main.go file.

First, we will add the GetPrices function. In the same file paste the following code at the bottom:

// GetPrices returns the coin prices
func GetPrices() echo.HandlerFunc {
    return func(c echo.Context) error {
        prices, err := model.GetCoinPrices(true)
        if err != nil {
            return c.JSON(http.StatusBadGateway, err)
        }
        return c.JSON(http.StatusOK, prices)
    }
}

The function above is straightforward. We just get the prices from the model.GetCoinPrices function and return them as a JSON response.

Note that we passed a boolean to the GetCoinPrices function. This boolean is to mark whether to simulate the prices or fetch from the API directly. Since we are testing, we want to simulate the prices so it changes often.

The next function to add to the routes.go file is the SaveDeviceSettings function. In the same file, paste the following code to the bottom of the file:

var postedSettings map[string]string

func formValue(c echo.Context, key string) (string, error) {
    if postedSettings == nil {
        if err := c.Bind(&postedSettings); err != nil {
            return "", err
        }
    }

    return postedSettings[key], nil
}

func getCoinValueFromRequest(key string, c echo.Context) (int64, error) {
    value, _ := formValue(c, key)

    if value != "" {
        setting, err := strconv.ParseInt(value, 10, 64)
        if err == nil {
            return setting, nil
        }
    }

    return 0, errors.New("Invalid or empty key for: " + key)
}

// SaveDeviceSettings saves the device settings
func SaveDeviceSettings(db *sql.DB) echo.HandlerFunc {
    return func(c echo.Context) error {
        uuid, _ := formValue(c, "uuid")        
        field := make(map[string]int64)

        if btcmin, err := getCoinValueFromRequest("minBTC", c); err == nil {
            field["btc_min"] = btcmin
        }

        if btcmax, err := getCoinValueFromRequest("maxBTC", c); err == nil {
            field["btc_max"] = btcmax
        }

        if ethmin, err := getCoinValueFromRequest("minETH", c); err == nil {
            field["eth_min"] = ethmin
        }

        if ethmax, err := getCoinValueFromRequest("maxETH", c); err == nil {
            field["eth_max"] = ethmax
        }

        defer func() { postedSettings = nil }()

        device, err := model.SaveSettings(db, uuid, field)
        if err != nil {
            return c.JSON(http.StatusBadRequest, err)
        }

        return c.JSON(http.StatusOK, device)
    }
}

In the code above, we have three functions. The first two are helper functions. We need them to get the posted form values from the request.

In the SaveDeviceSettings function, we get the uuid for the device, and conditionally get the minimum and maximum values for the coin. We save the values to the database using the model.SaveSettings function and return a JSON response.

The final function to add will be the Simulate function. Add the following code to the bottom of the file:

// SimulatePriceChanges simulates the prices changes
func SimulatePriceChanges(db *sql.DB) echo.HandlerFunc {
    return func(c echo.Context) error {
        prices, err := model.GetCoinPrices(true)
        if err != nil {
            panic(err)
        }

        devices, err := model.NotifyDevicesOfPriceChange(db, prices)
        if err != nil {
            panic(err)
        }

        resp := map[string]interface{}{
            "prices":  prices,
            "devices": devices,
            "status":  "success",
        }

        return c.JSON(http.StatusOK, resp)
    }
}

In the function above, we fetch the prices for the coins, we then send that to the model.NotifyDevicesOfPriceChange function, which finds devices with matching criteria and sends them a push notification. We then return a JSON response of the prices, devices and status.

That’s all for the routes.

Lastly, let’s define the model. Create a new models.go file in the database/model directory and paste the following code:

// File: ./database/model/models.go
package model

import (
    "database/sql"
    "encoding/json"
    "fmt"
    "io/ioutil"
    "math/big"
    "math/rand"
    "net/http"
    "time"
    "errors"
    "../../notification"
)

Next, let’s define the structs for our object resources. In the same file, paste the following to the bottom:

// CoinPrice represents a single coin resource
type CoinPrice map[string]interface{}

// Device represents a single device resource
type Device struct {
    ID     int64  `json:"id"`
    UUID   string `json:"uuid"`
    BTCMin int64  `json:"btc_min"`
    BTCMax int64  `json:"btc_max"`
    ETHMin int64  `json:"eth_min"`
    ETHMax int64  `json:"eth_max"`
}

// Devices represents a collection of Devices
type Devices struct {
    Devices []Device `json:"items"`
}

Above, we have the CoinPrice map. This will be used to handle the response from the API we will be using for our application. When a response from the API is gotten, we bind it to the CoinPrice map.

The next one is the Device struct. This represents the device resource. It matches the SQL schema of the table we created earlier in the article. When we want to create a new device resource to store in the database or retrieve one, we will use the Device struct.

Finally, we have the Devices struct which is simply a collection of multiple Device structs. We use this if we want to return a collection of Devices.

Go does not allow underscores in the struct names, so we will use the *json:`"key_name"` format to automatically convert to and from properties with the keys specified.*

Let’s start defining our model functions.

In the same file, paste the following code to the bottom of the page:

// CreateSettings creates a new device and saves it to the db
func CreateSettings(db *sql.DB, uuid string) (Device, error) {
    device := Device{UUID: uuid, BTCMin: 0, BTCMax: 0, ETHMin: 0, ETHMax: 0}
    stmt, err := db.Prepare("INSERT INTO devices (uuid, btc_min, btc_max, eth_min, eth_max) VALUES (?, ?, ?, ?, ?)")
    if err != nil {
        return device, err
    }

    res, err := stmt.Exec(device.UUID, device.BTCMin, device.BTCMax, device.ETHMin, device.ETHMax)
    if err != nil {
        return device, err
    }

    lastID, err := res.LastInsertId()
    if err != nil {
        return device, err
    }

    device.ID = lastID
    return device, nil
}

The function above is used to create settings for a new device. In the function, a new device is created using the Device struct. We then write the SQL query we want to use to create a new device.

We run Exec on the SQL query to execute the query. If there’s no error, we get the last inserted ID from the query and assign that to the Device struct we created earlier. We then return the created Device.

Let’s add the next function. In the same file, paste the following code to the bottom:

// GetSettings fetches the settings for a single user from the db
func GetSettings(db *sql.DB, uuid string) (Device, error) {
    device := Device{}
    if len(uuid) <= 0 {
        return device, errors.New("Invalid device UUID")
    }

    err := db.QueryRow("SELECT * FROM devices WHERE uuid=?", uuid).Scan(
        &device.ID,
        &device.UUID,
        &device.BTCMin,
        &device.BTCMax,
        &device.ETHMin,
        &device.ETHMax)
    if err != nil {
        return CreateSettings(db, uuid)
    }

    return device, nil
}

In the GetSettings function above, we create an empty Device struct. We run the query to fetch a device from the devices table that matches the uuid. We then use the Scan method of the database package to save the row values to the Device Instance.

If no device is found, a new one is created using the CreateSettings function we created earlier, else the device found is returned.

Let’s add the next function. In the same file, paste the following code to the bottom:

// SaveSettings saves the devices settings
func SaveSettings(db *sql.DB, uuid string, field map[string]int64) (Device, error) {
    device, err := GetSettings(db, uuid)
    if err != nil {
        return Device{}, err
    }

    if btcmin, isset := field["btc_min"]; isset {
        device.BTCMin = btcmin
    }

    if btcmax, isset := field["btc_max"]; isset {
        device.BTCMax = btcmax
    }

    if ethmin, isset := field["eth_min"]; isset {
        device.ETHMin = ethmin
    }

    if ethmax, isset := field["eth_max"]; isset {
        device.ETHMax = ethmax
    }

    stmt, err := db.Prepare("UPDATE devices SET btc_min = ?, btc_max = ?, eth_min = ?, eth_max = ? WHERE uuid = ?")
    if err != nil {
        return Device{}, err
    }

    _, err = stmt.Exec(device.BTCMin, device.BTCMax, device.ETHMin, device.ETHMax, device.UUID)
    if err != nil {
        return Device{}, err
    }
    return device, nil
}

In the SaveSettings function above, we get the existing settings using the GetSettings function and then we conditionally update the existing value. We then write an SQL query to update the database with the new values. After this, we return the Device struct.

Let’s add the next function. In the same file, paste the following code to the bottom:

// GetCoinPrices gets the current coin prices
func GetCoinPrices(simulate bool) (CoinPrice, error) {
    coinPrice := make(CoinPrice)
    currencies := [2]string{"ETH", "BTC"}

    for _, curr := range currencies {
        if simulate == true {
            min := 1000.0
            max := 15000.0
            price, _ := big.NewFloat(min + rand.Float64()*(max-min)).SetPrec(8).Float64()
            coinPrice[curr] = map[string]interface{}{"USD": price}
            continue
        }

        url := fmt.Sprintf("https://min-api.cryptocompare.com/data/pricehistorical?fsym=%s&tsyms=USD&ts=%d", curr, time.Now().Unix())
        res, err := http.Get(url)
        if err != nil {
            return coinPrice, err
        }

        defer res.Body.Close()

        body, err := ioutil.ReadAll(res.Body)
        if err != nil {
            return coinPrice, err
        }

        var f interface{}

        err = json.Unmarshal([]byte(body), &f)
        if err != nil {
            return coinPrice, err
        }

        priceMap := f.(map[string]interface{})[curr]

        for _, price := range priceMap.(map[string]interface{}) {
            coinPrice[curr] = map[string]interface{}{"USD": price.(float64)}
        }
    }
    return coinPrice, nil
}

In the function above, we create a new instance of coinPrice and then we create an array of the two currencies we want to fetch, ETH and BTC. We then loop through the currencies and if simulate is true, we just return the simulated prices for the coins. If it’s false, then for each of the currencies we do the following:

Fetch the price for the currency from the API.
Add the price of the currency to the coinPrice map.

After we are done, we return the prices.

The next and final function we want to add is the NotifyDevicesOfPriceChange function. This is responsible for getting devices that match the minimum and maximum threshold and sending push notifications to them.

In the same file, paste the following code:

func minMaxQuery(curr string) string {
    return `(` + curr + `_min > 0 AND ` + curr + `_min > ?) OR (` + curr + `_max > 0 AND ` + curr + `_max < ?)`
}

// NotifyDevicesOfPriceChange returns the devices that are within the range
func NotifyDevicesOfPriceChange(db *sql.DB, prices CoinPrice) (Devices, error) {
    devices := Devices{}
    for currency, price := range prices {
        pricing := price.(map[string]interface{})
        rows, err := db.Query("SELECT * FROM devices WHERE "+minMaxQuery(currency), pricing["USD"], pricing["USD"])
        if err != nil {
            return devices, err
        }

        defer rows.Close()

        for rows.Next() {
            device := Device{}
            err = rows.Scan(&device.ID, &device.UUID, &device.BTCMin, &device.BTCMax, &device.ETHMin, &device.ETHMax)
            if err != nil {
                return devices, err
            }
            devices.Devices = append(devices.Devices, device)
            notification.SendNotification(currency, pricing["USD"].(float64), device.UUID)
        }
    }

    return devices, nil
}

In the code above we have two functions, the first is minMaxQuery which is a helper function that helps us generate the SQL query for the min and max of a currency.

The second function is the NotifyDevicesOfPriceChange function. In here we loop through the currency prices and for each of the price we check the database for devices that match the minimum and maximum prices.

When we have the devices, we loop through them and send a push notification using the notification.SendNotification method. We then return the devices we sent the notification to.

That’s all for the model package. We have one last package to add and that’s the notification package. We used it in the code above to send push notification so let’s define it.

In the notifications directory, create a push.go file and paste the following code:

// File: ./notification/push.go
package notification

import (
    "fmt"
    "strconv"
    "github.com/pusher/push-notifications-go"
)

const (
    instanceID = "PUSHER_BEAMS_INSTANCE_ID"
    secretKey  = "PUSHER_BEAMS_SECRET_KEY"
)

// SendNotification sends push notification to devices
func SendNotification(currency string, price float64, uuid string) error {
    notifications, err := pushnotifications.New(instanceID, secretKey)
    if err != nil {
        return err
    }

    publishRequest := map[string]interface{}{
        "fcm": map[string]interface{}{
            "notification": map[string]interface{}{
                "title": currency + " Price Change",
                "body":  fmt.Sprintf("The price of %s has changed to $%s", currency, strconv.FormatFloat(price, 'f', 2, 64)),
            },
        },
    }

    interest := fmt.Sprintf("%s_%s_changed", uuid, currency)

    _, err = notifications.Publish([]string{interest}, publishRequest)
    if err != nil {
        return err
    }

    return nil
}

Replace the PUSHER_BEAMS_* key with the credentials in your Pusher dashboard.

In the code above, we have the SendNotification function. In there we instantiate a new Pusher Beams instance using the InstanceID and secretKey defined above the function.

We then create a publishRequest variable which contains the Android notification payload. This payload is what we will send to the Pusher Beams backend and will contain everything needed to send the notification to the Android device.

Next, we create an interest variable which will be the interest we want to push the notification to. The format of the interest will match the one we subscribed to in part one of this tutorial. Next, we call the Publish function of the Pusher Beams package to send the notification to the device.

One final thing we need to do is pull the Pusher Beams package into our $GOPATH. Open your terminal and run the following command:

$ go get github.com/pusher/push-notifications-go

When the command has executed successfully, we can now run the application.

Running the application

Now that we have finished building the application, we need to run both the backend and the Android application.

Open your terminal and execute the following command from the root of the project to run the Go application:

$ go run main.go

This should start the server on port 9000.

Next, go to Android Studio and launch your Android project. At this point, you can now see the application. You can go ahead to set the minimum and maximum limits for both the BTC and ETH currency.

Now minimize the application in your simulator and open the notification center. Visit the URL http://localhost:9000/simulate to simulate the currency changes. You should see the notifications come into the device as shown below:

Conclusion

In this article, we have been able to see how you can create a cryptocurrency watcher application for Android using Pusher Beams and Go. This tutorial is available for iOS also here.

The source code to the application built in this article is available on GitHub.

This post first appeared on the Pusher Blog.

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

Neo — Wed, 05 Sep 2018 06:25:21 +0000

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 the 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.
SQLite installed on your machine.
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, 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.

Creating a Pusher Beams application

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.

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

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 Android quick-start. After you add the FCM key, you can exit the quick-start guide.

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 build-gradle file:

// File: ./build.gradle
buildscript {
    // [...]
    dependencies {
        // [...]
        classpath 'com.google.gms:google-services:4.0.0'
    }
}
// [...]

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

// 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 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:

// 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<String>

    @POST("/eth-pref")
    fun saveETHLimit(@Body body: RequestBody): Call<String>

    @GET("/fetch-values")
    fun getValues():Call<String>
}

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.xmlfile like so:

<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.cryptoalat">
    <uses-permission android:name="android.permission.INTERNET"/>

    [...]

</manifest>

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

// 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 strings.xml file to describe the notifications channel description and channel name. Add these to the strings.xml file:

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

<application
    >
    [...]
    <service android:name=".NotificationsMessagingService">
        <intent-filter android:priority="1">
            <action android:name="com.google.firebase.MESSAGING_EVENT" />
        </intent-filter>
    </service>
</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:

<!-- File: ./app/src/main/res/layout/activity_main.xml -->
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <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"/>
</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:

<!-- File: ./app/src/main/res/layout/alert_layout.xml -->
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:padding="20dp"
    android:layout_height="match_parent">
    <EditText
        android:id="@+id/minimumValue"
        android:background="@drawable/text_background"
        android:hint="Minimum value"
        android:paddingStart="10dp"
        android:paddingEnd="10dp"
        android:inputType="number"
        android:layout_width="match_parent"
        android:layout_height="60dp" />
    <EditText
        android:layout_marginTop="10dp"
        android:background="@drawable/text_background"
        android:hint="Maximum value"
        android:inputType="number"
        android:id="@+id/maximumValue"
        android:layout_width="match_parent"
        android:paddingStart="10dp"
        android:paddingEnd="10dp"
        android:layout_height="60dp" />
    <Button
        android:id="@+id/save"
        android:layout_marginTop="10dp"
        android:layout_gravity="center"
        android:text="SAVE"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</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:

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

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

// 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 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:

// 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<String>?, 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.

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:

// 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.

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:

// 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 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:

// 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<Button>(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 MainActivity class as seen below:

// 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<String> {
        override fun onResponse(call: Call<String>?, response: Response<String>?) {}
        override fun onFailure(call: Call<String>?, 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<String> {
        override fun onResponse(call: Call<String>?, response: Response<String>?) {}
        override fun onFailure(call: Call<String>?, t: Throwable?) {}
    })
}

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:

// 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 Prefs class. Create a new Prefs class and paste the following code into it:

// 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 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.

This post first appeared on the Pusher Blog.