Using Dependency Injection (DI) and Inversion of Control (IoC)
This article is about learning how to develop a UserScript that watches Freelancer.com projects notifications and sends them to your Slack channel. You can set the skills you are interested in and the script will send you notifications of the projects related to these skills only.
If you are not familiar with the term UserScripts, or don’t know how to set a UserScript to work, you can check my story How to Customize Webpages UI/Behavior Using JavaScript UserScripts.
These are some important notes which you need to keep in mind:
Change EUR to your own preferred currency.
Change [ “C# Programming”, “.NET”, “ASP.NET”, … ] to your array of skills. Please note that you should enter skills as they are defined by Freelancer.com.
Change lk6f7fd0–277z-12ec-8894–41n9e18q3291 to your own freecurrencyapi.net API Key.
Change xoxb-378377152752–2574471671501-pghLJ7MGiZ9KUKI8YzJQdRN2 to your own Slack Bot Key.
Change G8XCG0FK5 to your own Slack channel Id.
Change Freelancer Notifications Catcher to your preferred Slack bot username.
You will need to leave Freelancer.com dashboard page open so that the UserScript could keep running.
Important Note:
Due to a problem with Slack API, you might get a CORS error on your browser console leading to a failure in posting projects to Slack.
To overcome this problem, you will need to turn off the CORS protection on your web browser. To do so for Chrome, you can create a shortcut to Chrome.exe and modify the target by adding the following parameters
— disable-web-security — user-data-dir=”C:\Users\{YourUsername}\AppData\Local\Google\Chrome\User Data\”
Time For Coding
In the next section, we will divide the whole code into smaller parts and explain each part. It is not only about writing code which would finally work, it is also about some best practices and design decisions.
This would help you understand the code and may be learn new skills. Therefore, buckle up and get ready for the ride.
UserScript Implementation
Header
The important things to note here are:
The UserScript is set to be active on http://www.freelancer.com/dashboard page only. This is intended in order not to spam your Slack channel with messages whenever any Freelancer page is opened.
The UserScript needs jquery-3.3.1.min.js library to be loaded.
Freelancer Project
The important things to note here are:
FreelancerProject is the class defining the object containing all info about a Freelancer project.
It also implements isEqual function to be able to compare two instances and decide if they are exactly the same or not.
This is a best practice as now all the logic and knowledge about a FreelancerProject internal properties is encapsulated and isolated inside the FreelancerProject itself.
Therefore, whenever a change related to how to compare two projects comes in, we have only one place to change.
Currency Converter
The important things to note here are:
CurrencyConverter is a service which converts between currencies.
It is built upon the converter API provided by freecurrencyapi.net.
You will need to go there, create a free account and get your API key to use it.
The API takes a currency as an input and then it returns the conversion rate between this specific currency and all other currencies in an array.
CurrencyConverter caches the results coming back from the API for each input currency. Whenever a currency -and its corresponding conversion rates- exists in the cache, CurrencyConverter would return the cached value, otherwise, a new API call would be performed and then the response would be saved to the cache.
The cache would be invalidated by default every 12 hours unless it is overridden by passing another value for the parameter cachingSpanInMilliseconds while calling new CurrencyConverter(apiKey, cachingSpanInMilliseconds).
The cache is saved in page memory which means that if you refresh the Freelancer dashboard page, the cache would be cleared.
Slacker
The important things to note here are:
Slacker is a service which wraps Slack API.
You will need to create your own free Slack account, create your own Channel, define an app and get your API tokens. You can find all the info and steps using Slack online documentation.
Then, you should have a Slack Bot Key and a Channel Id.
Slacker has the slackIt function which takes in a freelancerProject object as a parameter and then it performs the appropriate Slack API call to post the message to your Channel.
Any details on how to use Slack APIs could be found on Slack API page.
Scrapper
The important things to note here are:
Scrapper is the service responsible for scrapping/retrieving the info about a Freelancer project from the HTML notification card.
Scrapper is dependent on the CurrencyConverter as it uses it to convert the project budget into your preferred currency if it is needed.
However, the CurrencyConverter is injected into the Scrapper through its constructor rather than using a global instance.
JavaScript Promise timeout technique is used here to avoid waiting forever for a Promise to get fulfilled. If you are interested into this topic, you can read more about it on my story How to Set JavaScript Promise Timeout.
Queue Manager
The important things to note here are:
When a project info is scrapped and ready to be posted to your Slack Channel, this is not happening directly. First, the project info is queued into a queue and then another service is responsible for dequeuing from the queue and posting to your Slack Channel.
This is a best practice as it decouples between the module scrapping projects information and the other module posting to Slack Channel.
This minimizes the probability of having a single point of failure.
QueueManager is the service responsible for dequeuing from the queue and posting to your Slack Channel.
QueueManager is dependent on the Slacker as it uses it to post the project info to your Slack Channel.
However, the Slacker is injected into the QueueManager through its constructor rather than using a global instance.
Freelancer Project Evaluator
The important things to note here are:
FreelancerProjectEvaluator is the service responsible for evaluating if you are interested into a certain Freelancer project or not.
The evaluation is done based on the array of skills filled by you and passed in to the FreelancerProjectEvaluator constructor.
The skills in the array should be filled exactly as they are defined by Freelancer.com.
Freelancer Notifications Watcher
The important things to note here are:
FreelancerNotificationsWatcher is the service responsible for monitoring the Freelancer dashboard page for any project notifications.
FreelancerNotificationsWatcher is dependent on the Scrapper, FreelancerProjectEvaluator and QueueManager.
The Scrapper is used to scrap the project info from the HTML notification.
The FreelancerProjectEvaluator is used to evaluate if you should be notified about the new project or not.
The QueueManager is used to queue the new project info if needed.
The dependencies are injected into the FreelancerNotificationsWatcher through its constructor rather than using global instances.
Utilities
The important things to note here are:
replaceRecurively is an extension for the native String class to enable replacing a string with another in recursive manner.
trimStart is an extension for the native String class to enable removing a string from the front end in recursive manner.
removeCurrencySymbolsPrefix is an extension for the native String class to enable removing currency symbols from the front end.
getWordsFromString is a function to split a string into words.
wait is a function to wait for a certain amount of time and then resolves a Promise.
Initialization
The important things to note here are:
const preferredCurrency = “EUR”; sets the preferred currency to “EUR”. Change this as per your own preference.
const freelancerSkillsToWatch = […] sets the Freelancer skills you are interested into. Change this as per your own preferences.
const currencyConverter = new CurrencyConverter(“lk6f7fd0–277z-12ec-8894–41n9e18q3291”, 43200000); initializes an instance of the CurrencyConverter and sets the caching interval for 12 hours (432,000,00 milliseconds). You will need to change the API key to the one you got from freecurrencyapi.net.
const slacker = new Slacker(“xoxb-378377152752–2574471671501-pghLJ7MGiZ9KUKI8YzJQdRN2”, “G8XCG0FK5”, “Freelancer Notifications Catcher”, preferredCurrency); initializes an instance of the slacker. You will need to change the Slack Bot Key and the Channel Id to the ones you got from Slack.
const queueManager = new QueueManager(slacker, 5000); initializes an instance of the QueueManager and sets the watch interval to 5 seconds (5000 milliseconds).
const scrapper = new Scrapper(currencyConverter, preferredCurrency); initializes an instance of the Scrapper.
const freelancerProjectEvaluator = new FreelancerProjectEvaluator(freelancerSkillsToWatch); initializes an instance of the FreelancerProjectEvaluator.
const freelancerNotificationsWatcher = new FreelancerNotificationsWatcher(scrapper, freelancerProjectEvaluator, queueManager, 2000); initializes an instance of the FreelancerNotificationsWatcher and sets the watch interval to 2 seconds (2000 milliseconds).
Running the UserScript
This is where we trigger the FreelancerNotificationsWatcher and QueueManager to start their work.
Finally, hope you found reading this article as interesting as I found writing it.