Nicolas BAPTISTA – Page 2 – Blog of a Parisian software architect

Latest Posts

FR
EN

N I C O L A S    B A P T I S T A

PERSONNAL BLOG

SOFTWARE ARCHITECT • JAVASCRIPT DEVELOPER • DESIGNER


LinkedIn Contact Github Malt More...


LATEST ARTICLES

Les idées de Robert Kiyosaki dans le livre “Père Riche Père Pauvre”

La plupart des idées de Robert Kiyosaki dans son célèbre livre “Père Riche, Père Pauvre” se résume dans plusieurs schéma qui résume les différents engrenages des personnes des différentes classes. Notamment au niveau de leurs “actifs”, leurs entrées d’argents, et leur “passifs”, leurs dépenses.

Résumé Père riche père pauvre : 6 leçons clés

Mind Parachute nous résume également l’idée du livre dans sa vidéo, où il est expliqué la plupart des principes du livre.

Ce que les riches savent sur l'argent : Père riche, père pauvre de Robert  Kiyosaki | Mind Parachutes

On peut qualifier l’auteur comme réaliste ou fataliste, donc ayez un esprit assez ouvert et critique pour comprendre votre situation et l’accepter, pour ensuite pouvoir évoluer vers la situation que vous souhaitez, par exemple l’indépendance financière et ne pas dépendre des systèmes de retraite de l’état.

Egalement, je trouve intéressant la partie présentant les 4 façons de générés des revenus:

  • Salarié
  • Indépendant
  • Business (avoir un système qui génère des revenus)
  • Investisseur

Comparison of price of Big King XXL (Burger King) in the world in EURO

I made this article in a purpose to know the cost of living across the world, this has not been made for commercial purpose and has been made for real analytic results on the cost of living.

FRANCE

Menus - Photo de Burger King, Villars - Tripadvisor

MENU BIG KING XXL : 8.80 EUR

GERMANY

Burger King Germany Price list / Menu - Joy Della Vita

MENU BIG KING XXL : 8.49 EUR (-0.31 EUR, -3.5%)

RUSSIA

MENU BIG KING XXL : 469.99 RUB = 5.63 EUR (-3.17 EUR, -36%)

MOROCCO

Burger King Tanger MENU 2021 | Livraison à Domicile | Les meilleurs  Restaurants à Tanger- EAT.MA

MENU BIG KING XXL : 65 DHS = 6.23 EUR (-2.57 EUR, -29.2%)

TURKEY

İstanbul Havalimanı'nda Burger King | Gökyüzü Haberci

MENU BIG KING XXL : 67 TL = 5.84 EUR (-2.96 EUR, -33.6%)

ITALY

Burger King Menu, Menu for Burger King, Eur, Roma

MENU BIG KING XXL : 7.40 EUR (-1.4EUR, -15.9%)

CZECH REPUBLIC

MENU BURGER KING XXL : 199 CZK = 7.89 EUR (-0.91 EUR, -10.3%)

Import / Export MySQL Workbench tables in Google Cloud SQL database

If you have a database on Google Cloud and you want to import and export some tables to another database, you will need a database explorer to export your .SQL backup.

Export the tables you want in database

Google Cloud interface only allow to export all a database or a specific database, but not tables

As you can see you don’t have the option to select tables.
To do so, you will have to connect the database with a SQL explorer.
In MySQL Workbench you should go in Server > Data Export

Then you should be able to select the tables you want

select Export to Self-Contained File to have a .SQL file

Import the SQL file to Google Cloud

You will need to upload the SQL file to Google Cloud in order to import it. In order to do it, go to Google Cloud > Cloud Storage, create the bucket if it doesn’t exist yet :

create the bucket dedicated for SQL, with random numbers, to have a unique name
Upload the SQL file generated by MySQL Workbench

Then, you can go on Google Cloud > SQL > Import

Select the SQL file from the bucked and select the database you want the tables to be imported

And then you should have imported successfully the tables on the selected database. You should check it in Operations


In case of errors, check the error in Operations, and modify the .SQL file with a text editor, search the error in the SQL file and remove the lines, and repeat the process (upload it again to Google Cloud Storage and import the SQL file again)

Public Images for your React / Angular app on Google Cloud

We often need images in our React or Angular app, but putting them in the project is not clean.
So we can use Google Cloud with Cloud Storage for the images on your app.

There are many advantages of using Cloud Storage to expose public images :
– Real time maintenance (upload, delete, change, …)
– You don’t need any commit on your git (if you commit images on your Github / Gitlab for example)
– Clean project, only code files
– Light project repository to commit, images are heavy quickly

Create a Bucket

First, you need to create a Bucket (it’s like a big folder) if you don’t already have one.

Switch to Uniform access control

Then, to make your Bucket public, go to the Permissions tab, and change the access control to Uniform :

You should click Switch to Uniform, so you don’t have to make public each file one by one
You can see, if you upload your first image, that it’s not public yet

Add public access using by adding a Reader role for allUsers

You can then add the access of Object Reader to allUsers
Then you can see it’s Public to Internet and you are able to copy URL

You can now use you image anywhere, it’s on internet and anyone can see it with the URL, so you can use it to store images for your React / Angular app, all images will work.

Use Crontab for automating recurring tasks on Fedora/CentOS

You can use a tool that is called “Crontab” for recurring tasks automation. It is available for all the Linux systems and still the most used solution.

Edit the crontab configuration file

crontab -e

This will open vi, the default linux editor, that will allow you to edit the recurring tasks for a specific date and time.

# Example of job definition:
# .---------------- minute (0 - 59)
# |  .------------- hour (0 - 23)
# |  |  .---------- day of month (1 - 31)
# |  |  |  .------- month (1 - 12) OR jan,feb,mar,apr ...
# |  |  |  |  .---- day of week (0 - 6) (Sunday=0 or 7) OR sun,mon,tue,wed,thu,fri,sat
# |  |  |  |  |
# *  *  *  *  *  user command to be executed

In vi the main commands used are:
– The escape key (:x! to save OR :q! to quit)
– a to append text
– i to insert text
– dd to remove the line
– x to delete the current selected character

Verify the date and time zone

You can verify the date and the time zone (most of the cloud machines are using the UTC time zone). you can use the following command “date”:

# date
Wed Aug  4 01:10:10 UTC 2021

Sort your result by distance – Node.JS

Supposed that you return in your Node.JS backend a list of items, and you want to sort the results by distance.

For exemple, you do a GET /usersLocation and you have it:

[
   {
      name: "Paul",
      gender: "man",
      distance: 4.1
   },
   {
      name: "Philip",
      gender: "man",
      distance: 4.9
   },
   {
      name: "Elina",
      gender: "woman",
      distance: 2.5
   }
]

In your app you have the result to be listed by distance for exemple, so the user can know who is nearest first, and don’t have to scroll down to see that Elina is nearest. To do so, we can add this portion of code before returning the list of items:

    // items : variable containing all the items

    // SORT
    for(let a=items.length;a>0;a--)
    {
       for(let b=0;b<a-1;b++)
       {
          if(items[b].distance>items[b+1].distance) // we order by distance
          {
             // we swap the items
             tmp = items[b];
             items[b]=items[b+1];
             items[b+1]=tmp;
          }
       }
    }

    // returning the response for AWS Lambda
    const response = {
        statusCode: 200,
        body: JSON.stringify(items),
    };
    return response;
};

New response:

[
   {
      name: "Elina",
      gender: "woman",
      distance: 2.5
   },
   {
      name: "Paul",
      gender: "man",
      distance: 4.1
   },
   {
      name: "Philip",
      gender: "man",
      distance: 4.9
   }
]

Google Cloud Function VS AWS Lamdba (how to import)

There are some differences between Google Cloud and AWS when you want to deploy your function for your API.

My point of view is that Google Cloud function may be a bit more simple to deploy but AWS is in a way the most reliable and complete cloud environnement nowadays.

On both cloud environnement you can upload the code with a ZIP, you can so use the same way to adjust your code for AWS:

We will upgrade the code with a repository that will be in a ZIP

Differences between Google Cloud functions and AWS Lambda (Node.JS)

THE DEPENDENCIES
– In Google Cloud, the dependencies are automatically installed from the package.json file
– In AWS, you need to install the dependencies with npm or yarn, that will build the node_modules folder
If you don’t have the node_modules folder, your Lamdba function will not work with the following error:

{
  "errorType": "Runtime.ImportModuleError",
  "errorMessage": "Error: Cannot find module 'MODULE'\nRequire stack:\n- /var/task/index.js\n- /var/runtime/UserFunction.js\n- /var/runtime/index.js",
  "trace": [
    "Runtime.ImportModuleError: Error: Cannot find module 'MODULE'",
...

THE MAIN FUNCTION

With Google Cloud, the example function looks like this:

exports.helloWorld = (req, res) => {

  res.status(200).send(message);
};
  • You use the res object with the send() method to send the response

With AWS, the example function looks like this:

exports.handler = async (event) => {

    const response = {
        statusCode: 200,
        body: JSON.stringify(jsonObj),
    };
    return response;
};
  • You return a JSON object response that should contains the body and the statusCode

So the same code will looks like this:

Using parameters

Let’s say now we want to use a parameter for our route, that will be number and the value will be 10, so we will call the route helloWorld?number=10

On GOOGLE CLOUD, to get the “number” parameter, we will use the req object :

exports.helloWorld = (req, res) => {
    let number = req.query.number;

On AWS, to get the “number” parameter, we will use the event object :

exports.handler = async (event) => {
    let number = event["params"]["number"];

Create quickly API with AWS – Lambda/API Gateway

Amazon Web Services — Wikipédia

This article is dedicated to new users to AWS – Amazon Web Services – that wants to use this cloud instead for others (Azure, Google Cloud) which seems to be the best choice at the moment. Indeed, AWS is the most complete scalable and dynamic cloud solution.

However, this is not so simple to understand all the concepts, if you look for simplicity you may be interested by Google Cloud that I used before.

In order to use API Gateway and Lamdba, you should add them in favorite in the Services:

Create your API functions in AWS Lambda

We can use AWS Lamdba to create routes that can be used for our applications.

So, you can click Create function, in order to see the form bellow.
Let’s say we want to create a route to list the products of our app, it will be a GET method and we will call it getProducts.
We will use Node.JS because I have to habit to use Javascript and Typescript but you can choose the runtime you are in ease.

Then you can click Create function, we don’t need the others settings.

You should be now able to see the function overview with the default example in the code editor:

You can try the example it will show the string “Hello from Lambda”, the response that is returned in the example.
We can now write our own function from scratch here or alternatively we can upload our code from a ZIP file.

Create our API Gateway route (HTTP)

In the overview of the Lambda function you can see the button Add trigger, you can use it to add the API event that will call our function.

Click “Add trigger”
Select “Create API”, then “HTTP API” (best for cost) and “Open” the endpoint so your app can use it

You can then click Save and so you should see your new trigger, the API Gateway trigger:

Now you can try it by going on the API endpoint link in the details.
You can use it like it in your application or you can change it by adding your own domain, for exemple api.myapp.com/getProducts
You can do that in Custom Domain Names or directly in your domain provider, in the DNS configuration, making a redirection.

Creating an API Gateway (REST API)

You could also, if you need it, use multiple methods such GET, POST, UPDATE, DELETE, … if you created a REST API Gateway :

You can then use your Lambda function for each methods you want to use.

Color picker with React.JS

Example of a color picker made with React.JS

In order to have a color picker on our React.JS application, we can use the SketchPicker library

Full example

Color: <TextField variant="outlined" id="standard-basic" style={{padding: 5, width: '90%', background: color}} value={color?color:''} onChange={(e) => { setColor(e.target.value); }} />
<SketchPicker 
   color={ color?color:'#fff' }
   onChangeComplete={ (colorSelected) => {
         setColor(`${colorSelected.hex}${decimalToHex(colorSelected.rgb.a)}`);
      } 
   }
   presetColors={['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#BD10E0', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF']}
/>

Alerting user with a small messaga bubble – Snackbar – React.JS

In your web app, you will have to notice the user when he is doing some actions in your user interface. We can do it with a small message bubble called Snackbar, here is what it looks like:

How we will do it

setSnackSeverity("error");
setSnackMessage("The last cell cannot be deleted.");
setOpenError(true);

In your code, we will use these 3 lines to:
– Set the severity “error”, there are 4 types of severity

– Set the error message that will be displayed “The last cell cannot be deleted.”
– Show the error message (during few seconds)

Full example

import Snackbar from '@material-ui/core/Snackbar';
import MuiAlert, { AlertProps } from '@material-ui/lab/Alert';
function Alert(props) {
  return <MuiAlert elevation={6} variant="filled" {...props} />;
}
...
const [snackSeverity, setSnackSeverity] = useState('error');
const [openError, setOpenError] = useState(false);
const [snackMessage,setSnackMessage] = useState('Error');
...
setSnackSeverity("error");
setSnackMessage("The last cell cannot be deleted.");
setOpenError(true);
...
<Snackbar
   anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
   open={openError}
   onClose={(e)=>setOpenError(false)}
   autoHideDuration={3000} 
   >
     <Alert onClose={(e)=>setOpenError(false)} severity={snackSeverity}>
       {snackMessage}
     </Alert>
</Snackbar>