How to Debug an Ionic 3 application with Slack

Published in

Appseed IO

7 min readMay 9, 2017

In this post you will learn how to use Slack as your debugging tool just like you would use your browser’s Console to log messages. Briefly, we will follow the steps below:

We will use Supermodular 2 starter app and set it all up and running.
We will create a Slack service to take care of the communication with the Slack API .
We will implement a Logger service to replace the log(), warn(), info() and error() methods of Console with our own ones.
We will make use of the newly created methods to track the lifecycle of a view.

Note: The complete source code of this tutorial is available in the ionic-slack-logger Github repository.

Download code

Prerequisites

To follow along with this tutorial, you will need:

Supermodular 2: This is a free starter template that allows you to start a new Ionic 3 project quickly offering some basic features commonly used in recent mobile applications. We are going to use it in order to build a basic Ionic 3 app with an extremely modular architecture and best software development practices applied. In the next section, we will go through all the steps needed for downloading and running the app.
Slack webhook: You will need to set up an incoming webhook integration in your Slack team. For more information, read the “Setup an Incoming Slack WebHook” section at the bottom of this article.

Step 1: Clone GitHub Repo

Visit http://github.com/appseed-io/supermodular2 and download or clone the Supermodular 2 app:

$git clone https://github.com/appseed-io/supermodular2.git

Alternatively, it is recommended that you fork the repository since, later, you will be able to push any code you will add to this project straight to your own project repository.

Step 2: Install libraries

Open a terminal window and navigate to the supermodular2 folder. Install the NodeJS dependencies:

$npm install

Step 3: Install plugins and platforms

Install all the required Cordova plugins the app needs with the following command:

$ionic state restore

This command will actually restore all the platforms and plugins are included in the package.json file.

Note: In case you do not work on a Mac OS machine, open the package.json file and replace the iOS platform with the Android platform or leave the cordovaPlatforms array empty if you do not want to add a platform yet.

Step 4: Run the app

In your terminal, make sure you are located in the supermodular2 folder and run the command:

$ionic serve --lab

Also, you can run the app in a simulator. For example, in order to run the app in an iOS emulator execute the command:

$ionic emulate ios

Step 5: Implementing Slack service

In this section, we will implement a Slack service that will be used in order to enable the communication with the Slack API. In this service, we will create a payload that is going to include a message, and we will send an HTTP POST request to a Slack webhook endpoint containing the payload in a JSON structure.

Since, this service could be used by various pages of the app, we will place it in the src/services folder where we keep services sharable with different components throughout the app. Therefore, create a slack.service.ts file in the src/services folder and paste the following code:

Note that, in order to send our HTTP POST request, we need the webhook URL as well as the payload as its body. The webhook URL is taken from the Config object. This is a basically where we keep all the variables one should change in order to configure the app with their own settings. The related file is called config.ts and is located in the src folder. Open it and add this line:

Of course, you will need to replace the webhook URL with the one you configured for your own Slack team. To find more on how to configure an incoming webhook read the “Setup an Incoming Slack WebHook” section at the bottom of this article.

In the payload object we set a color except for the text message itself and finally we convert the JSON structure to a string to send it to the Slack API.

Step 6: Implementing Logger service

The LoggerService is going to include our own implementation of the log(), warn(), info() and error() console methods. As a result, we could assume that this service could be used by various component pages too. Thus, create a logger.service.ts file in the src/services folder and paste the following code:

The only difference between the info(), log(), warn() and error() functions is the label and the color used to distinguish whether a message is some useful information, a simple log message, a warning or an error. Notice that the message is passed as a parameter since it is supposed to be generated at the runtime. Each of the info(), log(), warn() and error() functions makes use of the SlackService that enables the communication with the Slack API.

Step 7: Using LoggerService to track a View lifecycle

It is time to make use of the Slack Logger we have just created to track the lifecycle of the Wordpress view that already exists in the app. Capturing the view lifecycle becomes very handy when you want to perform actions on key points during that. Ionic does provide us with some events for various stages of navigation to track the state of a view from its creation to its destruction.

Since the purpose of this tutorial is not learning about the lifecycle events, you can have a look at Ionic’s official documentation in the “Lifecycle events” section for finding out all the available events and their meaning.

Back to our app, the already existed WordpressListPage of the Supermodular app is a convenient place to add our code to track the lifecycle of the Wordpress view. Open the wordpress.list.page.ts file under the src/pages/wordpress/list/ path and make the necessary imports and dependency injections we are going to need in order to use the SlackService and the LoggerService. Therefore, add the following lines as highlighted:

Finally, we are ready to track the lifecycle events. Once they get fired, we will send the related message to our Slack channel. To do this, open the wordpress.list.page.ts file under the src/pages/wordpress/list/ path and add the code below:

Final Result

By running the app again, we should be able to navigate to the “Wordpress” page and see the messages our app sent to Slack.

By selecting to go to the Home screen from the side menu, we are able to trigger the related events and see the corresponding messages on Slack.

Of course, here we pretend we have an error message on the ionViewWillUnload() event just for variety.

Setup an Incoming Slack WebHook

Before proceeding to the following configuration steps, make sure you have created a team and a channel into Slack. If you have not created yet, then you can do it by visiting https://slack.com/create#email.

Firstly, you should set up an incoming webhook integration in your Slack team. Visit https://my.slack.com/services/new/incoming-webhook/, select the channel into where the app will post the messages and hit “Add Incoming Webhooks integration”.