DEV Community: Thales Bruno

Singleton classes with Typescript

Thales Bruno — Thu, 09 Nov 2023 23:49:58 +0000

In this post, we will learn how to create a singleton class using Typescript.

Singleton pattern

The Singleton design pattern is a very well-known pattern used in software engineering that ensures we only have one instance, or a single instance, of a class in our application and also provides an easy way to get access to that object.

Implementation

In order to implement a Singleton class we basically need to follow these two steps:

Make the class constructor private, preventing from using the new operator to create objects of that class.
Create a static method to instantiate our single instance and make it accessible through the application.

Here's a Lonely class which implements the singleton pattern:

class Lonely {
  private static instance: Lonely;

  private constructor() {}

  static getInstance() {
    if (this.instance) {
      return this.instance;
    }
    this.instance = new Lonely();
    return this.instance;
  }
}

Breaking down the code:

First, we define an instance property:

private static instance: Lonely;

This property holds the single instance of our Lonely class. It's private and static since it shouldn't be accessible from its objects (or from its only object in our singleton case).

Then, we have the constructor:

private constructor() {}

This is one of the key pieces where we make the constructor private, so if we try to instantiate new object of Lonely with const newInstance = new Lonely() we get an error: Constructor of class 'Lonely' is private and only accessible within the class declaration.

And finally, we have the getInstance method.

  static getInstance() {
    if (this.instance) {
      return this.instance;
    }
    this.instance = new Lonely();
    return this.instance;
  }

We don't need to name it getInstance but it's a good practice following the naming convention so it helps our code to be widely understandable.

What we must do is make it static and public, since it will be the point of access to creating the single instance of our class.

The logic is pretty simple: if we already have an instance of our class we just return it; if it's the first instantiation then we create our object calling the private constructor new Lonely() and return it.

We could also use the Lonely class name instead of the this keyword:

  static getInstance() {
    if (Lonely.instance) {
      return Lonely.instance;
    }
    Lonely.instance = new Lonely();
    return Lonely.instance;
  }

Accessing our single instance

To access the only object of our Lonely class we just need to call its getInstance method:

const l1 = Lonely.getInstance();
const l2 = Lonely.getInstance();

console.log(l1 === l2); // return true

Curated list: Math on YouTube

Thales Bruno — Sun, 09 Aug 2020 19:32:49 +0000

Cover image by Isaac Smith on Unsplash

Hello everyone!

This post is just to share with you some incredible playlists I have found on YouTube with priceless content about Statistics, Probability, Linear Algebra, Calculus, Machine Learning, and so on. These videos are helping me a lot to remember and to improve the mathematical concepts behind the Data Science universe.

Statistics Fundamentals - StatQuest with Josh Starmer

Introduction to Probability - Brandon Foltz

Linear Regression and Linear Models - StatQuest with Josh Starmer

Simple Linear Regression - Brandon Foltz

Logistic Regression - StatQuest with Josh Starmer

Machine Learning - StatQuest with Josh Starmer

Essence of Linear Algebra - 3Blue1Brown

Essence of Calculus - 3Blue1Brown

Diferencial Equations - 3Blue1Brown

Neural Networks - 3Blue1Brown

STATS 101 - All playlists of Brandon Foltz

Video Index - Video Index of StatQuest with Josh Starmer

Handling missing values

Thales Bruno — Thu, 06 Aug 2020 11:34:24 +0000

Header photo by Emily Morter on Unsplash

A key part of data science is to clean the data before work with it. For example, it's common finding missing values in a dataset, either because that data was not collected or don't exist though.

Depends on the data we have missing, or even why we don't have it, we handle it in different ways. So, we need to analyze each dataset column carefully and decide whether we will remove all rows with missing values, or remove the column itself, or fill the cells with some data (and which data could be).

Count missing values

Before handle the missing values, we should know exactly how much of them we have. The code below counts all missing values in a pandas DataFrame df and print it all by column.

df.isnull().sum()

Output:

budget                     0
genres                    28
homepage                3091
id                         0
keywords                 412
original_language          0

Check relative data missing

So, we know we have missing values in our dataset, and now we may figure out the proportion of missing values in relation to all data. To do this we sum the missing values, divide by the number of cells, and multiply by 100, as we can in the code below.

def percent_missing(df: pd.DataFrame) -> float:
    # # of rows x # of columns using numpy product function
    total_data_points = np.product(df.shape)
    total_missing = df.isnull().sum().sum()
    return (total_missing/total_data_points)*100

print(f"{percent_missing(df)}"%)

Output:

3.863904504129364%

Drop rows with missing values

An approach to handle missing data is just to drop all rows containing missing values. Again, the decision needs to be made after a careful analysis. But, if we decide to drop the rows, the code is quite simple.

df.dropna()

Drop columns with missing values

If we decide to drop the columns instead, we just say that to the dropna() method with the axis parameter.

df.dropna(axis=1)

Fill in missing values

Even though, if we don't want to drop the rows or columns, we may fill the cells with some data. As always, we need to analyze and decide which data we will fill with. Some approaches are: fill with 0, with blank space, with the most common value observed in that column, with the last or the next valid value observed, with statistics measurements like mean or median, and so on.

Using pandas

Pandas has the fillna() method to deal with it. We specify the value we want to fill and pass it as an argument to the method. In the code below we are filling all missing cells with 0.

df.fillna(0)

Using Scikit-Learn

With scikit-learn, we have more sophisticated ways to deal with the problem. For example, we may fill a categorical column with the most frequent value observed on it, or fill a numerical column with the mean value of the data. The sklearn SimpleImputer class has many strategies for imputing data as you can see in its documentation. The code below uses the most_frequent strategy, that

replace missing using the most frequent value along each column. Can be used with strings or numeric data.

from sklearn.impute import SimpleImputer
imputer = SimpleImputer(strategy='most_frequent')
new_df = imputer.fit_transform(df)

In a future article, I will cover in more detail the use of scikit-learn. See you!

Documentation

Pandas dropna()
Pandas fillna()
Scikit-learn SimpleImputer()

Django + Bootstrap: Basic setup

Thales Bruno — Wed, 15 Jul 2020 13:06:08 +0000

This is the English version of my second article here at dev.to.

The purpose is to create a basic setup of a Django project integrated with Bootstrap and Font Awesome, which can be the base of your projects. If you want to check out the whole code:

thalesbruno / django_bootstrap

A Django setup project with bootstrap and font-awesome integrated

Create the Django project

First of all, we create the project root directory

~: $ mkdir project
~: $ cd project/

So, we set up a Python virtual environment called venv where we will install the dependencies of our project. We activate it and install Django. Code below.

~/project: $ python3 -m venv venv
~/project: $ source venv/bin/activate
(venv) ~/project: $ pip install Django

Django installed, the next step is to create a Django project. We create a src/ directory and run the django-project command inside it. We called the project core and the dot indicates we are building it in the current directory.

(venv) ~/project: $ mkdir src
(venv) ~/project: $ cd src/
(venv) ~/project/src: $ django-admin startproject core .

Now we create two more directories: static, where we will put the Bootstrap and Font Awesome files, and templates, where we will put our HTML template files.

(venv) ~/project/src: $ mkdir static templates

Ready to run the Django service. For that, we first apply the migrations (for the default applications Django comes with, like admin, auth, etc.), and so run the server.

(venv) ~/project/src: $ python manage.py migrate
(venv) ~/project/src: $ python manage.py runserver

If everything went well the service must be accessible at http://127.0.0.1:8000.

Bootstrap and Font-awesome integration

So, with the Django project built, we integrate Bootstrap and Font Awesome sources on it.

Bootstrap

In the Bootstrap Downloads page, we chose Compiled CSS and JS, ready-to-use compiled code. It's the first option on the web page.

We unzip the package and copy its two directories js and css to the directory /project/src/static/ in our project. Almost there, before leaving this step we remove all unnecessary files in the js and css folders. We only keep with bootstrap.min.js and bootstrap.min.js.map in the js, and with bootstrap.min.css and bootstrap.min.css.map in the css.

Font-awesome

With Django and Bootstrap integrated we already have a pretty good setup, but we can also integrate with Font Awesome as the icing on the cake.

In the Font Awesome official website, we download its Free Package on this link.

We create a fa subdirectory on our project /project/src/static/fa/ and so we unzip the Font Awesome package and copy the webfonts and css folders there. We also remove unnecessary files in /project/src/static/fa/css, keeping only the all.min.css.

Integrating everything

The final step is integrating everything.

We edit the /project/src/core/settings.py file, adding a line with a relative reference to the static directory.

STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]

In the same file, we also edit the section about TEMPLATES, specifically its DIR value to the following:

TEMPLATES = [
    {
     # -- some code up there --
        'DIRS': [os.path.join((BASE_DIR), 'templates/')],
     # -- some code down there

Views and URLs

Before creating templates, we do some logic stuff.

In Django, we map all the URLs our application serves in the urls.py file. So, we create an URL on the root that, when accessed, call a view, i.e. a function inside views.py, which is who will be handling the request and rendering the result page to the user.

urls.py file:

from django.contrib import admin
from django.urls import path
from .views import index


urlpatterns = [
    path('admin/', admin.site.urls),
    path('', index),
]

views.py file:

from django.shortcuts import render


def index(request):
    return render(request, 'index.html', {})

At this point, we only need an index.html template file.

Templates

The very final step, I swear, is creating the index.html file. We create it from the scratch at the templates directory, and we use Jinja template language.

At the beginning of the file, we load the static files.

{% load static %}

In the head HTML section we put the references to the CSS and JS files.

<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'fa/css/all.min.css' %}">
<script src="{% static 'js/bootstrap.min.js' %}"></script>

Well done! We are ready to write HTML code using Bootstrap and Font Awesome as a visual pattern! In the GitHub repository of this project, we can see an index.html sample already using some Bootstrap components, which seems like this:

Mean, Median, Mode

Thales Bruno — Tue, 14 Jul 2020 19:03:21 +0000

In this article, we are talking about the common methods to measure the central tendency of the data, that is a way to explain our data in some manner. Although these measurements are quite simple, they are a foundation for a lot of other more complex measurements.

We will use this fake list of grades of a class below to demonstrate the concepts:

Grades
9.2
7.5
8
9
8.5
8
2.5

We create a Python variable to store the grades:

grades = [9.2, 7.5, 8, 9, 8.5, 8, 2.5]

Mean

The first one is the mean, which is the arithmetic average of the data. To calculate the mean of a set of numeric data, we take the sum of all observations divided by the number of observations.

In Python:

from typing import List

def mean(xs: List[float]) -> float:
  return sum(xs)/len(xs)

So, applying in our grades data: mean(grades) gives us ~7.52.

Median

The second one is the median, which gives us something more positional. The median is the exact central value of a data, so to calculate it we need to:

Sort data from smaller to largest, and
If ODD length: pick up the middle value
If EVEN length: calculate the mean of the two middle values

So, in Python could be like this:

def median(xs: List[float]) -> float:
  s = sorted(xs)
  # If odd lenght, just pick up the middle value
  if len(xs) % 2:
    p = len(xs)//2
    return xs[p]
  # If even lenght, take the mean of the left and right middle values
  else:
    l_p = (len(xs) // 2) - 1
    r_p = len(xs) // 2
    mid_values = [l_p, r_p]
    return mean(mid_values)

This way, the grades sorted looks like this: [2.5, 7.5, 8, 8, 8.5, 9, 9.2] and their median, median(grades), is 8.

Mode

Finally, we have the mode, i.e., the observation that occurs the most in a dataset. Thus, a dataset may have one, multiple, or even none mode.

Python mode function:

from collections import Counter
def mode(xs: List[float]) -> List[float]:
  counter = Counter(xs)
  return [x_i for x_i, count in counter.items() if count == max(counter.values())]

The grade that occurs the most in our dataset is [8] as we can see calling mode(grades)

Python mean, median, and mode

In this article, we made some Python code to illustrate our measurements, just as didactic purposes. By the way, we already have functions in Python libraries that make the job. Bellow, some of them:

Don't use Pie Charts

Thales Bruno — Thu, 09 Jul 2020 23:52:18 +0000

Despite the clickbait title, this is not an article to be polemic or say universal truths, but just an invitation to think about it.

A pie chart, sometimes called a pizza chart, is a chart in a format that seems like a - guess what? - pie, i.e., a round shape divided into slices. According to this article:

A pie chart is a circular graph that shows the relative contribution that different categories contribute to an overall total.

So, each piece of the chart has its width defined for its proportional value into an overall total.

Let's take a look at an example.

We see it's not a bad look chart for sure. Actually, it could be a pretty evident option if we have some category variable to analyze and plot. But the point many people say about avoiding them is because pie charts may don't do a good job showing the proportions of the parts vs. the whole or even if a piece is greater or less than the others if they have the same size, etc.

When the number of categories increases the problem seems clear:

A bar chart plotting the same data:

Then, as we see, pie charts are a bit controversial and should be avoided in most cases. Tough with a few categories, maybe only two or three, they may not be a terrible choice at all. What do you think?

References

Pie Charts in Python 🔎
University of Leicester | Pie charts 🔎
Why You Should Avoid Pie Charts 🔎

Numerical variables

Thales Bruno — Wed, 08 Jul 2020 21:01:47 +0000

Numerical Variables

Numerical variables, also known as quantitative variables, are the type of data that represent something measurable or countable like frequency, measurement, etc. Another attribute of numerical variables is that they are always numbers that can be placed in a meaningful order with consistent intervals.

As examples of quantitative variables we may mention:

Weight
Height
Sales
Production units
Movie Ratings

Discrete and continuous

Numerical variables may be either discrete or continuous.

Discrete values are the result of counting, like when we count how many goals a football team has scored in a season. Here, the data take certain numerical values, like 60, 65, 72, and so on.

On the other hand, continuous values are the result of a measurement. For instance, we may measure the weights in kilograms of football team players, and the data will assume continuous values inside a range, like 84.1kg, 74.89483kg.

Buckets and bins

Buckets and bins are the way we may organize the numerical data collected in a meaningful order with consistent intervals to analyze and make insights from them. For example, we might collect the number of movies produced in the 20th Century and put them in buckets of 10 years, and as result, we could see the evolution of the Movie Industry in the last century.

But in this article, we will demonstrate a bit of numerical data using the Kaggle Google Play Store Apps dataset from Lavanya Gupta as we did in the article about Categorical Variables.

Using pandas, we will load the dataset, but only the Rating column, which is a typical numerical variable. The users rated the Apps from 1.0 to 5.0.

import pandas as pd
import plotly.express as px
from collections import Counter

df = pd.read_csv("./data/googleplaystore.csv", usecols=['Rating'])

# Drop missing values
df.dropna(axis=0, inplace=True)

ratings = df.Rating

# Drop a outline rating of 19.0 (from some error)
ratings.drop(10472, inplace=True)

# Plot a histogram
fig = px.histogram(ratings, x='Rating', title='Google Play Store Apps Ratings', template="simple_white")
fig.show()

Histogram

The chart we see above is a Histogram, which seems like the Bar Chart we've plotted in the Categorical Variable post, but actually they have some important differences. In a Histogram there is no space between the bars, and the intervals are equally spaced, as expected to numerical values.

The shape of the histogram already gives us useful information. The histogram above is left-skewed (it has a tail to the left), so we may conclude that most Apps were well evaluated because the highest rectangles are on the right side of the histogram, where we have the highest rates (between 4.0 and 5.0).

Other shapes a histogram can have are right skew, symmetric, bimodal, uniform. Perhaps we will see more examples of histogram shapes in the next posts!

References

courses.lumenlearning.com | 1.2 Data: Quantitative Data & Qualitative Data 🔎

online.stat.psu.edu | 1.1.1 - Categorical & Quantitative Variables 🔎

YouTube | Brandon Foltz | Statistics 101: Descriptive Statistics, Histograms
🔎

Categorical variables

Thales Bruno — Tue, 07 Jul 2020 21:26:05 +0000

A categorical variable (sometimes called a nominal variable) is a variable that can assume one of a limited number of possible values described as categories and there is no intrinsic ordering to the categories. It uses labels, names, or other descriptors (even numbers) to identify exclusive categories or types of things.

As an example of a categorical variable, we may mention Nationality having values like Brazilian, Canadian, French, etc., and we can see that there is no ordering between the values: we cannot say that Brazilian is higher than Canadian. In summary, there is no way to order these categories from highest to lowest or from best to worst.

Other examples of categorical variables could be Regions (North, South, East, West), Blood Type (A, B, AB, O) or Smartphone Brand (Apple, Samsumg, LG, Xiami).

However, if there is a clear order between the categories, so we are dealing with an ordinal variable, that is very similar to a categorical variable and often it's considered a special kind of this and placed on between categorical and quantitative variables. An example of an ordinal variable could be Educational Level (Elementary school education, High school graduate, Some college, College graduate, Graduate degree).

But in this article we are focusing on pure categorical or nominal variables, so let's check out what we can do with some categorical data.

Frequency distribution

Since we have a dataset with some categorical variables, the most common thing we can do is count the occurrences of each category in the whole data. This will give us a frequency distribution.

Let's take a look at some real data to demonstrate a frequency distribution. We will use the Kaggle Google Play Store Apps dataset from Lavanya Gupta. This dataset has more than 10,000 rows, each of them is an app from Google Play Store, and as features (columns) we can see the App name, Category, Rating, and others.

We will use pandas for handling the data. Firstly, we import pandas and read the CSV file downloaded from Kaggle, but only the Category column. Then, we use the unique method to show all values observed in our data. As we can see, there are 34 App Categories in our categorical variable, like Finance, Sports, Weathers and others and we can't see any order between them (Events category is not better or higher than Shopping category, for instance).

import pandas as pd

df = pd.read_csv("./data/googleplaystore.csv", usecols=['Category'])
categories = df['Category'].unique()

print(f"{len(categories)} categories:")
print(categories)

34 categories:
['ART_AND_DESIGN' 'AUTO_AND_VEHICLES' 'BEAUTY' 'BOOKS_AND_REFERENCE'
 'BUSINESS' 'COMICS' 'COMMUNICATION' 'DATING' 'EDUCATION' 'ENTERTAINMENT'
 'EVENTS' 'FINANCE' 'FOOD_AND_DRINK' 'HEALTH_AND_FITNESS' 'HOUSE_AND_HOME'
 'LIBRARIES_AND_DEMO' 'LIFESTYLE' 'GAME' 'FAMILY' 'MEDICAL' 'SOCIAL'
 'SHOPPING' 'PHOTOGRAPHY' 'SPORTS' 'TRAVEL_AND_LOCAL' 'TOOLS'
 'PERSONALIZATION' 'PRODUCTIVITY' 'PARENTING' 'WEATHER' 'VIDEO_PLAYERS'
 'NEWS_AND_MAGAZINES' 'MAPS_AND_NAVIGATION' '1.9']

Now that we know all category values we can have, let's count how many times every category occurs in our data using value_counts method.

frequency = df['Category'].value_counts()

# frequency is a pandas Series, so we'll transform it in a DataFrame just for presentation purposes
frequency_dist = pd.DataFrame(frequency)
frequency_dist.columns = ['Frequency']
frequency_dist.index.name = 'Category'

# Using head(10) to show only the first 10 lines
frequency_dist.head(10)

	Frequency
Category
FAMILY	1972
GAME	1144
TOOLS	843
MEDICAL	463
BUSINESS	460
PRODUCTIVITY	424
PERSONALIZATION	392
COMMUNICATION	387
SPORTS	384
LIFESTYLE	382

So, we can see above that most apps are from the Family category with 1,972 occurrences. Game and Tools are also common categories, on the other hand, there are few apps from the Beauty category.

Relative Frequency

At the moment we already know how many apps we have from each category. But what if we wanted to figure out what is the percentage of Medical apps of all apps? Then we need to calculate the relative frequency of category apps dividing the frequency by the total number of apps (aka the sample data).

Relative frequency of something = Frequency of something / n

Again, we will use the marvelous pandas. The relative frequency must assume a value from 0 to 1, but here we will multiply it by 100 and show the values in percentage form instead. So, as you can see below, Medical apps represent approximately 4.27% of all apps in Google Play Store according to our dataset.

frequency_dist['Relative Frequency (%)'] = (frequency_dist['Frequency']/sum(frequency_dist['Frequency']))*100

# Using head(10) to show only the first 10 lines
frequency_dist.head(10)

	Frequency	Relative Frequency (%)
Category
FAMILY	1972	18.190204
GAME	1144	10.552532
TOOLS	843	7.776035
MEDICAL	463	4.270824
BUSINESS	460	4.243151
PRODUCTIVITY	424	3.911078
PERSONALIZATION	392	3.615903
COMMUNICATION	387	3.569781
SPORTS	384	3.542109
LIFESTYLE	382	3.523660

Frequency Bar Chart

Finally, we will plot the frequency variable in a Bar Chart that is a pretty common way to visualize categorical data.

import plotly.express as px

fig = px.bar(frequency)
fig.update_layout(title='Frequency Distribution of Google Play Store app categories',
                  xaxis_title='Category',
                  yaxis_title='Frequency')
fig.show()

So, in this article we have seen a bit about Categorical Variables or Nominal Variables, which is a pretty usual data type we face in Statistics, Data Analysis, Machine Learning, and so on. It was just an introductory content, but we may cover it a little deeper in upcoming posts.

References

Wikipedia | Categorical variable 🔎
UCLA | WHAT IS THE DIFFERENCE BETWEEN CATEGORICAL, ORDINAL AND NUMERICAL VARIABLES? 🔎
Brandon Foltz | Statistics 101: Describing a Categorical Variable
🔎
web.ma.utexas.edu | Ordinal Variables 🔎

Subplotting with matplotlib and seaborn

Thales Bruno — Sun, 21 Jun 2020 23:02:20 +0000

In this micro tutorial we will learn how to create subplots using matplotlib and seaborn.

Import all Python libraries needed

import pandas as pd
import seaborn as sns
from matplotlib import pyplot as plt
sns.set() # Setting seaborn as default style even if use only matplotlib

Create the DataFrame

We are using the Pokemon with stats dataset from Kaggle.

The cell below import the dataset file and create the pokemon pandas DataFrame. So use show the 4 first rows using pd.DataFrame.head function.

pokemon_filepath = '../datasets/pokemon.csv'
pokemon = pd.read_csv(pokemon_filepath)
pokemon.head()

Plotting (and subplotting) samples

As we can see in the matplotlib documentation (references at the end of file), subplots() without arguments returns a Figure and a single Axes, which we can unpack using the syntax bellow.

fig, ax = plt.subplots()
fig.suptitle('A single ax with no data')

Thus, we can give two arguments to subplots functions: nrows and ncols. If given in that order, we don't need to type the arg names, just its values. In our example we create a plot with 1 row and 2 columns, still no data passed.

fig, axes = plt.subplots(1, 2)
fig.suptitle('1 row x 2 columns axes with no data')

Now axes is an array of AxesSubplot, so we can access each ax separetely and set a different title, for instance.

More arguments:

figsize set the total dimension of our figure
sharex and sharey are used to share one or both axes between the charts (needed data to work)

fig, axes = plt.subplots(1, 2, sharex=True, figsize=(10,5))
fig.suptitle('Bigger 1 row x 2 columns axes with no data')
axes[0].set_title('Title of the first chart')

An so on

fig, axes = plt.subplots(3, 4, sharex=True, figsize=(16,8))
fig.suptitle('3 rows x 4 columns axes with no data')

Using data

We select three Pokemon to use in the next example. The three initial Pokemon of 1st Generation: Bulbasaur, Charmander and Squirtle.

# bulbasaur = pokemon[['Name', 'HP', 'Attack', 'Defense', 'Sp. Atk', 'Sp. Def', 'Speed']][pokemon.loc[:, 'Name'] == 'Bulbasaur']
poke_num = pokemon[['Name', 'HP', 'Attack', 'Defense', 'Sp. Atk', 'Sp. Def', 'Speed']].set_index('Name')

bulbasaur = poke_num.loc['Bulbasaur']
charmander = poke_num.loc['Charmander']
squirtle = poke_num.loc['Squirtle']

Then, we create a plot with 3 subplots in a 1 row x 3 columns figure.

We use sns.barplot where we need to set the a argument with the correspondent element from axes variable.

fig, axes = plt.subplots(1, 3, figsize=(15, 5), sharey=True)
fig.suptitle('Initial Pokemon - 1st Generation')

# Bulbasaur
sns.barplot(ax=axes[0], x=bulbasaur.index, y=bulbasaur.values)
axes[0].set_title(bulbasaur.name)

# Charmander
sns.barplot(ax=axes[1], x=charmander.index, y=charmander.values)
axes[1].set_title(charmander.name)

# Squirtle
sns.barplot(ax=axes[2], x=squirtle.index, y=squirtle.values)
axes[2].set_title(squirtle.name)

Final example

And a final example plottin a 2 rows X 3 columns plot showing Pokemon stats by Generation.

We use sns.boxplot

fig, axes = plt.subplots(2, 3, figsize=(18, 10))

fig.suptitle('Pokemon Stats by Generation')

sns.boxplot(ax=axes[0, 0], data=pokemon, x='Generation', y='Attack')
sns.boxplot(ax=axes[0, 1], data=pokemon, x='Generation', y='Defense')
sns.boxplot(ax=axes[0, 2], data=pokemon, x='Generation', y='Speed')
sns.boxplot(ax=axes[1, 0], data=pokemon, x='Generation', y='Sp. Atk')
sns.boxplot(ax=axes[1, 1], data=pokemon, x='Generation', y='Sp. Def')
sns.boxplot(ax=axes[1, 2], data=pokemon, x='Generation', y='HP')

GitHub repository

thalesbruno / ds-micro-tutorials

Data Science micro tutorials using Python

References

matplotlib | Creating multiple subplots using plt.subplot

matplotlib | matplotlib.pyplot.subplots

seaborn | seaborn.barplot

seaborn | seaborn.boxplot

Django: setup básico com Bootstrap

Thales Bruno — Tue, 15 Oct 2019 00:10:55 +0000

Neste artigo a proposta é criar um setup básico de um projeto Django já integrado com o Bootstrap que vai ser aí a base para tudo o que é projeto. Então, vamos lá:

Criando o projeto Django

Primeiro vamos criar um diretório:

~: $ mkdir projeto
~: $ cd projeto/

E então, preparar nosso ambiente Python:

~/projeto: $ python3 -m venv venv
~/projeto: $ source venv/bin/activate
(venv) ~/projeto: $ pip install Django

Acabamos de criar um ambiente virtual Python chamado venv onde serão instaladas todas as dependências de nosso projeto. Em seguida o ativamos (nosso prompt ganha um prefixo (venv) que indica que o ambiente virtual está ativo) e instalamos o Django.

Com o Django instalado, vamos criar nosso projeto:

(venv) ~/projeto: $ mkdir src
(venv) ~/projeto: $ cd src/
(venv) ~/projeto/src: $ django-admin startproject core .

Explicando a criação do projeto até aqui:

Criamos um diretório para o projeto e dentro dele o ambiente virtual python, que gerou um diretório venv. Depois criamos outro diretório, o src;
Nesse diretório src criamos o projeto Django usando o comando django-admin startproject seguido do nome do projeto, nesse caso core, e de um ponto, que indica o diretório atual como aquele onde será feita a instalação.

Agora, criaremos mais dois diretórios:

(venv) ~/projeto/src: $ mkdir static templates

Em static colocaremos os arquivos do bootstrap e em templates nossos templates HTML.

Uma coisa que gosto de fazer também é já iniciar um repositório Git desde o início:

(venv) ~/projeto/src: $ git init
(venv) ~/projeto/src: $ touch .gitignore

Aqui nesse link temos um .gitignore padrão para projetos Python, que vai nos atender perfeitamente. Assim não vamos enviar pro repositório git arquivos e diretórios desnecessários ou sensíveis.

Vamos também criar um arquivo com as dependências do nosso projeto, o requirements.txt (o "package.json" do Django, pra quem é do universo Javascript). Mas aqui faremos um pouco diferente, criaremos um diretório requirements e nele um arquivo local.txt.

(venv) ~/projeto/src: $ mkdir requirements
(venv) ~/projeto/src: $ touch requirements/local.txt
(venv) ~/projeto/src: $ pip freeze > requirements/local.txt

Já executamos o pip freeze e redirecionamos a saída para o arquivo local.txt recém criado. Sempre que instalarmos novas dependências, devemos executar essa instrução novamente.

Feito tudo isso, a estrutura de nosso projeto está assim:

/projeto/
|-- src/
|   |-- core/
|   |   `-- __init__.py
|   |   `-- settings.py
|   |   `-- urls.py
|   |   `-- wsgi.py
|   |-- requirements/
|   |   `-- local.txt
|   |-- static/
|   |-- templates/
|   `-- manage.py
|-- venv/

Até aqui fizemos o setup inicial do Django, então já podemos subir o serviço. Antes, aplicaremos as migrações (são as migrações das aplicações que já vem por padrão com o Django, como admin, auth, entre outras):

(venv) ~/projeto/src: $ python manage.py migrate
(venv) ~/projeto/src: $ python manage.py runserver

Uma telinha padrão do Django deverá aparecer no seu navegador em http://127.0.0.1:8000, significa que tudo correu bem.

Integrando com Bootstrap e Font Awesome

Agora, vamos inserir o Bootstrap e o Font Awesome no nosso projeto.

Bootstrap

Na página de Downloads no site oficial getbootstrap.com, vamos escolher o "código compilado, pronto para uso", é a primeira opção na página.

Após descompactar o pacote zip veremos os diretórios css e js. Então, vamos movê-los para nosso diretório /projeto/src/static/. Perfeito. Já estamos quase prontos para usar as classes bootstrap em nossos HTMLs, mas vamos primeiro fazer uma limpeza nesses diretórios. O pacote que baixamos traz vários arquivos .css e .js, mas nós precisaremos apenas dos seguintes:

/static/
|-- css/
|   `-- bootstrap.min.css
|   `-- bootstrap.min.css.map
|-- js/
|   `-- bootstrap.min.js
|   `-- bootstrap.min.js.map

Font Awesome

Com o Bootstrap em nosso projeto, já estamos prontos para desenvolver nossas aplicações e deixá-las com um visual decente (principalmente pra quem é mais de backend, como eu). Mas já que estamos aqui, vamos aproveitar e integrar também o Font Awesome, que aí não vai ter mais desculpa pra não fazer uma página bonitinha.

Na página oficial do projeto vamos fazer o download dos arquivos do plano gratuito deles, o que já nos dá uma base enorme e, acredito eu, suficiente de ícones.

Descompactado o pacote, vamos selecionar apenas o diretório webfonts e o css e movê-los para o diretório static, mas para não confundir com os arquivos do Bootstrap, criaremos um subdiretório antes, chamado fa (de font awesome). Ah, também não precisaremos de todos aqueles arquivos dentro de fa/css, basta deixar o all.min.css. Já do webfonts/ não removeremos nada.

O diretório static está assim agora:

/static/
|-- css/
|   `-- bootstrap.min.css
|   `-- bootstrap.min.css.map
|-- js/
|   `-- bootstrap.min.js
|   `-- bootstrap.min.js.map
|-- fa/
|   |-- css/
|   |   `-- all.min.css
|-- |-- webfonts/
|   |   `-- todos_os_arquivos_originais

Lembrando aqui que essa estrutura de diretórios é a que eu gosto de usar, mas vocês podem optar por outra, podem nomear de forma diferente, desde que façam os apontamentos corretos nos arquivos abaixo, tudo funcionará!

Integrando ao Django

Agora que já estamos com todos os arquivos estáticos necessários em seus devidos diretórios, vamos fazer a integração de fato.

Editaremos o arquivo /projeto/src/core/settings.py, adicionando a referência para nosso diretório static.

STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]

Aproveitaremos pra editar outra linha do arquivo settings.py, indicando nosso diretório de templates, que vamos trabalhar em seguida:

# -- código acima --
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join((BASE_DIR), 'templates/')],
# -- código abaixo --

Pronto, com os diretórios referenciados no arquivo settings.py, vamos agora criar nossos templates: arquivos HTML que intercalaremos com código Python, através da linguagem de templates Jinja.

Views e urls

Já estamos na reta final de nosso projeto, onde criaremos um template index.html já utilizando as classes Bootstrap e os ícones Font Awesome. Porém, antes vamos realizar um importante passo que é criar a lógica que fará tudo isso funcionar.

No Django, nós mapeamos todas as URLs que nosso sistema "oferece" no arquivo urls.py. Criaremos então uma URL na raiz que, ao ser acessada, chamará uma view, que é uma função dentro do arquivo views.py, que por sua vez tratará a requisição (ele é que faz a computação de fato: requisições ao banco de dados ou outros serviços, escrita em disco, etc) e renderizará uma resposta ao usuário. No nosso caso, a função index apenas renderizará o template index.html.

Arquivo urls.py:

from django.contrib import admin
from django.urls import path
from .views import index


urlpatterns = [
    path('admin/', admin.site.urls),
    path('', index),
]

Criaremos o arquivo views.py:

from django.shortcuts import render


def index(request):
    return render(request, 'index.html', {})

Pra tudo funcionar, só falta criar o template index.html

Templates

Reta final do projeto, vamos criar o template 'index.html', já utilizando a sintaxe do Jinja pra carregar os arquivos estáticos:

No início do arquivo carregaremos os arquivos estáticos:

{% load static %}

Na seção head do nosso arquivo HTML, referenciaremos os arquivos correspondentes ao código css e js:

<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'fa/css/all.min.css' %}">
<script src="{% static 'js/bootstrap.min.js' %}"></script>

Agora estamos prontos para escrever código HTML usando as classes do Bootstrap e do Font Awesome para criar o visual de nossa aplicação.

No repositório do projeto no GitHub (link no final do artigo) vocês podem pegar o index.html completo já com alguns componentes Bootstrap. A página deverá ficar assim:

A estrutura de diretórios final ficou assim:

/projeto/
|-- src/
|   |-- core/
|   |   `-- __init__.py
|   |   `-- settings.py
|   |   `-- urls.py
|   |   `-- views.py
|   |   `-- wsgi.py
|   |-- requirements/
|   |   `-- local.txt
|   |-- static/
|   |   |-- css/
|   |   |   `-- bootstrap.min.css
|   |   |   `-- bootstrap.min.css.map
|   |   |-- js/
|   |   |   `-- bootstrap.min.js
|   |   |   `-- bootstrap.min.js.map
|   |   |-- fa/
|   |   |   |-- css/
|   |   |   |   `-- all.min.css
|   |   |-- |-- webfonts/
|   |   |   |   `-- todos_os_arquivos_originais
|   |-- templates/
|   |   `-- index.html
|   `-- manage.py
|-- venv/

Repositório do projeto:

thalesbruno / django_bootstrap

A Django setup project with bootstrap and font-awesome integrated

Django project with Bootstrap and font-awesome

Usage

Create a project directory and install a python virtual environment inside it

mkdir project && cd project
python3 -m venv venv
source venv/bin/activate

Create a source dir and clone the repository

mkdir src && cd src
git clone https://github.com/thalesbruno/django_bootstrap .

Install the dependencies

pip install -r requirements/local.txt

Run the migrations and start the server!

python manage.py migrate
python manage.py runserver

Yay! App running in http://127.0.0.1:8000 :)

View on GitHub

É isso! Até a próxima ;)

Criando um Bot do Telegram com Node.js

Thales Bruno — Thu, 29 Aug 2019 00:18:20 +0000

Olá, pessoal. Este é meu primeiro artigo aqui no Dev.to e nele vamos aprender a fazer um Bot do Telegram que monitora serviços web através de requisições HTTP.

thalesbruno / telegram-bot

node.js telegram bot

As tecnologias utilizadas aqui foram o Node.js, o Telegraf, que é um framework para construir Bots do Telegram em Node, o Axios, um cliente HTTP em Javascript, e o Docker para dar um toque mais profissional, rs. Tem também o próprio Telegram, naturalmente, onde vamos iniciar a criação do Bot e vê-lo funcionando.

Acho que um bom ponto de partida é entrar no Telegram e criar nosso Bot. Poucas coisas na vida são mais fáceis que isso: basta procurar pela conta BotFather:

Ao iniciar uma conversa com o Pai dos Bots, são exibidos os comandos disponíveis para interagir com ele. Digitamos ou clicamos em /newbot, definimos um nome e em seguida um username, que deve obrigatoriamente terminar em 'bot'. Feito isso, nosso Bot estará criado e o BotFather disponibilizará um token de acesso que usaremos daqui pra frente para comandar nosso Bot. O BotFather nos aconselha a manter o token em segurança, já que ele pode ser usado por qualquer um para controlar nosso Bot.

Vamos agora ao Node.js. Primeiro, criamos um diretório raiz pro projeto e dentro dele o /src onde ficará o código Javascript:

mkdir -p telegram-bot/src
cd telegram-bot

Então, inicializamos o projeto...

npm init -y

...e instalamos o módulo Telegraf

npm install telegraf

Agora as primeiras linhas de código. Criamos um arquivo index.js em ./telegram-bot/src que será o entrypoint do projeto:

const Telegraf = require('telegraf')

const bot = new Telegraf(process.env.BOT_TOKEN)

bot.start((ctx) => ctx.reply("Hello world"))

bot.launch()

Nele, primeiro importamos o módulo Telegraf, então instanciamos um objeto bot, passando um único argumento, process.env.BOT_TOKEN (falaremos dele no próximo parágrafo). Em seguida, criamos nossa primeira "rota", bot.start(), aqui estabelecemos o que o Bot fará ao receber o comando /start (isso acontece ao iniciarmos pela primeira vez uma conversa com ele ou, após isso, digitarmos /start no chat). Nesta versão inicial de nosso código, ele apenas responderá com um "Hello world". Por fim, na última linha temos bot.launch() que inicializa o Bot.

Sobre o process.env.BOT_TOKEN, process.env retorna um objeto contendo as variáveis de ambiente do usuário, e destas estamos pegando a que nos interessa: a BOT_TOKEN. Mas para que isso funcione, precisamos criar a variável de ambiente BOT_TOKEN e atribuir a ela o token que o BotFather nos passou. Neste momento vamos apenas exportar nossa variável no terminal (Linux/MacOS) e, depois, quando subirmos nosso projeto em uma imagem Docker, vamos usar uma solução mais elegante.

Então, no terminal basta executar:

export BOT_TOKEN=<O_TOKEN_QUE_O_BOTFATHER_NOS_PASSOU>

Nosso Bot já está pronto para ser executado! No diretório raiz, rodamos:

node src/index.js

No Telegram, já podemos interagir com nosso Bot:

O que precisamos implementar agora é uma rota status que chamará um módulo responsável por fazer a requisição ao serviço, retornando seu status que, por sua vez, gerará uma resposta de nosso Bot.

Vamos instalar o axios, que é um módulo cliente HTTP.

npm install axios

Novo arquivosrc/status.js, bem simplezinho, checando o status da página inicial do Google:

const axios = require('axios')

const status = async () => {
    try {
        return await axios.get('https://www.google.com/', { timeout: 30000 })
    } catch(error) {
        return error
    }
}

module.exports = status

No arquivo principal do projeto, src/index.js, vamos importar o módulo status e criar a rota que o chamará:

const status = require('./status')

...

bot.command('status', async (ctx) => {

    try {
        const response = await status()

        if (response.status == 200) {
            await ctx.reply(`Google service: ✅`)
        } else {
            await ctx.reply(`Google service: ❌`)
        }

    } catch(error) {
        console.error(error)
    }
})

Projeto salvo, rodamos novamente o node src/index.js e vamos lá falar com nosso Bot:

Prontinho! Se o serviço Google tiver fora do ar, o que é meio difícil, ele vai responder com o ❌.

Vamos fazer um ajuste no package.json para rodarmos nossa aplicação com npm start:

...

"scripts": {
    "start": "node src/index.js"
  }

...

Agora pra finalizar, vamos subir nosso projeto em Docker (e docker-compose)! Primeiro criamos um Dockerfile pra será o build de nossa imagem e depois um docker-compose.yml que subirá o serviço. São provavelmente os exemplos mais simples de Dockerfile e docker-compose que vocês verão por aí:

Dockerfile

FROM node:12.7.0-alpine

WORKDIR /app
COPY . .
RUN ["npm", "install"]

ENV BOT_TOKEN=<PUT_YOUR_TELEGRAM_TOKEN_BOT_HERE>

ENTRYPOINT ["npm", "start"]

docker-compose.yml

version: '3'
services:
  bot:
    build: .

(Sim, é só isso). Lembrando que os dois arquivos devem estar na raiz do projeto, no Dockerfile colocamos ali em ENV BOT_TOKEN o mesmo token que já vínhamos usando.

Agora vamos colocar nosso Bot no ar novamente, mas dessa vez usando docker-compose:

docker-compose up -d

O -d é pra ele subir em background, liberando o promp do terminal. Pra parar o serviço é docker-compose down. Se fizer alguma modificação no código, é só rodar docker-compose up -d --build que ele subirá construindo uma nova imagem.

Com o Bot no ar em Docker, podemos ir no Telegram novamente e continuar interagindo com nosso Bot!

Essa é uma versão bem simples e genérica, só pra ilustrar a implementação e o funcionamento. Pro artigo não ficar ainda maior, abstraí algumas explicações de códigos e comandos, mas coloquei os links com as referências de cada tecnologia. Qualquer dúvida é só dar um alô!