Design A Chat App Uaing Angular

Software and adjacent system setup

We will need to setup some software and third-party services before we can start development.

Slack

If you haven't got a Slack user account, you'll need to create one at: https://api.slack.com/apps and create a new Slack workspace (this will require several steps including email verification but should be pretty straight forward). When creating the workspace, make sure to choose the Free option.

Once your workspace has been created, go back to https://api.slack.com/apps and click 'Create an app'. Type your app name and select your new workspace. Once you've created the app, make sure your web app is selected (this will be indicated by the name shown in the top right corner).

Navigate to the 'Basic Information' page from the left-hand navigation and click 'Add features and functionality'. Click 'Bots' and on the next page click 'Add a bot user'. Enter the details you want for the bot (can leave defaults) and click 'Add Bot User'.

In the left column navigate to the 'OAuth & Permissions' and scroll down to the section 'Scopes'. Click 'Add an OAuth Scope', then search and add the following scopes:

bot
channels:history
channels:read
channels:write
chat:write:bot
chat:write:user
users:read

Scroll back to the top of the page, click 'Install App to Workspace', then 'Allow' permissions requested.

Once you've added the correct permissions for the bot, navigate back to the 'OAuth & Permissions' page, you'll now be able to see two tokens associated with your new app, an 'OAuth Access Token' and 'Bot User OAuth Access Token'.

Before running your GraphQL API each time, make sure the following environment variables exists

Copy the 'OAuth Access Token' and set this as the environment variable SLACK_WEB_ACCESS_TOKEN.

The quickest way would be to export the variable in the terminal window, replacing <Your OAuth Access Token> with your new code:

                          export              SLACK_WEB_ACCESS_TOKEN=<Your OAuth Access Token>

Copy the 'Bot User OAuth Access Token' and set this as the environment variable SLACK_RTM_ACCESS_TOKEN.

Again, you can export the variable in the terminal window, replacing <Bot User OAuth Access Token> with your new code:

                          export              SLACK_RTM_ACCESS_TOKEN=<Bot User OAuth Access Token>

One variable will be needed for HTTP access to certain resources and the other for real-time-messaging communication over Websockets.

In your email inbox that you used to sign up with Slack, you should have been given a URL for your workspace. Make note of this as well as your user name and password. These will be needed to log in to Slack to see messages sent from users of the application we are going to build.

Our app

One of our aims for the project is to separate as many parts of the application as possible to enable us to easily swap and change them as and when we want.

It's worth taking some time to consider what a message actually is, the relationship it has to the person who created it. By accurately defining what a message consists of, we can find an overlapping scope of requirements to easily identify potential compatibility for integration of other third party services such as WhatsApp or Facebook.

We will write our application to allow for this flexibility of integration.

Part 1

App setup

First we will need to create a folder for our project to hold our front end web application and the web api server that will serve data to our application.

After you've created your project folder, open a command-line or terminal window and change directory to your new project folder

(replace <project-folder-path> with a path to your new directory).

Create the Angular app

Angular CLI

The Angular CLI will be the framework we'll use to build out the front end application. To install, run the following command:

            npm install -g @angular/cli

Now you have the Angular CLI installed, run the following Angular CLI command to setup a new workspace:

Call the project web-app, opt for y to add routing and choose SCSS as the CSS preprocessor.

The Angular CLI will create and setup a directory after your project name ready for you to build your Angular application. Inside there are alot files created. The CLI will setup a git repository for version control, initialise an npm package for managing project dependencies, include numerous configuration files, create a directory called 'src' with some essential Angular application files with more configuration files that you can customise, create an assets folder for saving images, fonts and other static media and an environments folder for storing enviornment configurations for deployment.

This will give you everything you need to get started developing with Angular. For more further reading about the artifacts created by the Angular CLI refer to the Angular CLI documentation

Test and confirm you have everything setup correctly by running the application with the following command.

You should get a notification that says Angular has Compiled successfully. You'll now be able see a blank application in your web browser that says something like 'web-app is running' by navigating to http://localhost:4200.

Read A brief overview of Angular to get to grips with some Angular core concepts.

Apollo Client

We will use a framework for managing our application state. Apollo Client for Angular will manage API requests and responses from the server and primarily handle delivery of data to and from the application. Apollo uses GraphQL to describe the shape of application data. Add this by using the Angular CLI command:

This command will install the Apollo Angular client, add a new module file to the src/app directory called graphql.module.ts and will update the app.module.ts file to include this new GraphQL module.

Open the new graphql.module.ts file and change the url constant to the following:

web-app/src/app/graphql.module.ts

                          const              uri =              'http://localhost:4123/graphql';

You may have guessed, this will be the URL location of our GraphQL server. All we need to do is specify one endpoint location to communicate via HTTP with the server for data. Later we will set up a separate websocket connection for real-time instant messaging.

Next we will create the GraphQL API