DEV Community: Ludovic Taffin

Deploy Flask app on Heroku with Github

Ludovic Taffin — Thu, 06 May 2021 14:42:40 +0000

Hello guys,

Heroku is an awesome resource if you want to set up a web app.
I recently needed it for a personal project and here is some simple step i had to follow to set up this correctly.

All starts with an awesome GitHub project

Let's imagine you have develop and awesome flask app in a private GitHub repository:

My code is sooo complicated (run.py) :

And the result is awesome:

Hello, World!

This result is incredible and i have to share the result with the world to let anyone use this!
I'll then deploy it first on a free resource to see my result online.

Deploy on Heroku.

For this i'll use Heroku! After creating an account, i'll create my first app.
I set up a name and a region and then discover my dashboard.
You can see and configure a lot of things but we will focus on deploy tab.
I will first select GitHub for deployment method.
After a connection to GitHub profile, you can select the repository (public or private) to deploy by entering the name.

I can now define an automatic or manual deploy. I'll go for a manual, as I didn't set CI. I just have to select the branch and hit deploy.

Spoiler, as it is, the deployment will fail.
Heroku needs some extra information to make this awesome project work.

Some extra needs

First, a list of requirements for the project. Those are listed in my requirements.txt. For my tiny project i only need:

flask
jinja2
gunicorn

Then, a runtime definition (defined in runtime.txt). Here are supported version of Python in Heroku :
Here

So i defined my runtime simply as follow

python-3.9.4

Finally, Heroku web applications require a Procfile. This file is used to explicitly declare application’s process types and entry points. It is located in the root of the repository.

web: gunicorn wsgi:app

(related to my wsgi.py file)

This Procfile requires Gunicorn, the production web server. That's why I set Gunicorn in my requirements file.

We can now deploy the wonderful app and enjoy it at the dedicated URL provide by Heroku.

My repositroy is available here

Brute force - let's have a look

Ludovic Taffin — Mon, 15 Feb 2021 16:13:35 +0000

Originally posted here

I recently issue the problem of a lost password on one of my own rar file. I so decided to attempt some of my most common password... None works... I was near of a simple deletion of my file and a lot of cry... Then i tried to brute force this...

What is brute force ?

In cryptography, a brute-force attack consists of an attacker submitting many passwords or passphrases with the hope of eventually guessing a combination correctly.

Thank you wikipedia! To be as concrete as possible, you take an amount of strings and you try each one. It's like having a lot of keys on a key-ring and trying one by one to open a door... Boring!

Limits

It's quite a simple try/guess and hope (like i did with common passwords)... So it's not complicated but is time consuming... Let's have a look on how much attempts it could theoretically take...

Theoretically, it can be expressed that way :

A = N^M

where N is the size of the used alphabet and M is the size of the password (number of characters).

So if u use an alphabet of 26 characters (like the lowercase common alphabet) on a password of 10 chars, the maximum number of attemps will be :

A = 26^{10}

So A = 141.167.095.653.376 attemps... This is, of course, the worst case scenario possible...On Average, this will take the half number of attempts to find a lowercase password base on the classical alphabet... Still huge...

Brute force a rar file with python - a tiny example

Attention, i don't encourage you to try this on production environment... Brute forcing is attacking a system which is illegal...

Here is a tiny snippet that let you test a brute force over a rar file:

#!/usr/bin/env python3

alphabet = "abcdefghijklmnopqrstuvwxyz"
path = "path/to/file"
for a in range(1,len(alphabet)+1):
    for b in itertools.product(alphabet,repeat=a):
        pass="".join(b)
        kf=os.popen("unrar t -y -p%s %s | grep 'All OK'"%(pass,path))
        if "All OK" in kf:
            print("Success:" + pass)

The code is easy no? Of course i simplify this as much as possible... We should, of course, verify that the file exist for example... This snippet can easily be improved... But it's not the purpose here....

How to increase security over brute force?

Well this is quite obvious, a brute force attack take time, so you need to increase the max number of attempts to discourage the attacker. This can simply done by increasing the N and the M so, the size of the alphabet and the size of the password. N will increase if u use uppercase,lowercase,number, special characters. M will increase if your password become as long as possible.

Improve performances

As making a password is a human being thing (except if you use generate password only), most of the time used passwords have a union match with common words from languages. You'll then gain time by using words from dictionary in place of generated words.

For example, English vocabulary count more or less 470000 words ( wikipedia you da best! ) which is (if you only use the 26 lowercase letters for alphabet) a big improvement. Better the list of common passwords is certainly a good dictionary to gain time.

Flutter - Layouts understanding

Ludovic Taffin — Fri, 12 Feb 2021 17:03:23 +0000

Hello,

This post was originally post here

Now that we understand how widgets works, it's now time to start building awesome layouts!
As everything is widget(s) in Flutter, the layout model is also a widget. Text, Image,... Everything you see in an app is widgets for Flutter. We are so going to build layouts with widgets into widgets into widgets....

Everything is widget

Here’s a diagram of the widget tree:

We can here find a widget we have already seen : Text. This is the leaf of this tree as it looks like the final touch of this layout. We can simply understand that we'll mainly end our layouts with the text part.

Start from the top, the layout is defined within a Container. That is a widget class that allows you to customize its child widget. Use a Container when you want to add padding, margins, borders, or background color, to name some of its capabilities.

A row is set into the container to add padding to this one. The rest is a three columns structure where we have an Icon widget and a text just under (Set by the container).

Common Widgets

Flutter comes with a lot of predefined widgets. You can found them in the widget catalog. They are well split into different categories to let you find what you need the easy way. Pay attention that you can also retrieve what you want within the API. The widget pages in the API docs often make suggestions about similar widgets that might better suit your needs.

Let's talk about two must have widgets:

Container

This widget can contain other widgets. They are defined as children in the tree structure. Those widgets allow to define several properties such as:

alignment
constraints (for size constraints)
padding (for space padding)
decoration
transform (for geometrical transformation)

Here is the constructor:
Container({Key key, AlignmentGeometry alignment, EdgeInsetsGeometry padding, Color color, Decoration decoration, Decoration foregroundDecoration, double width, double height, BoxConstraints constraints, EdgeInsetsGeometry margin, Matrix4 transform, Widget child, Clip clipBehavior: Clip.none})

Row & Column

I present here both Row and Column as they do quite the same job except for the orientation.

Row organizes its children horizontally and Column do the same but vertically. They both define a mainAxisAlignment and a crossAxisAlignment that define how the children must be displayed on the main axis and on the cross axis of the widget. For a row main axis is horizontal and vertical for the cross axis as previously said. And of course, it's the opposite for the Column widget.

Here is the column constructor :
Column({Key key, MainAxisAlignment mainAxisAlignment: MainAxisAlignment.start, MainAxisSize mainAxisSize: MainAxisSize.max, CrossAxisAlignment crossAxisAlignment: CrossAxisAlignment.center, TextDirection textDirection, VerticalDirection verticalDirection: VerticalDirection.down, TextBaseline textBaseline, List<Widget> children: const <Widget>[]})

and the row constructor:
Row({Key key, MainAxisAlignment mainAxisAlignment: MainAxisAlignment.start, MainAxisSize mainAxisSize: MainAxisSize.max, CrossAxisAlignment crossAxisAlignment: CrossAxisAlignment.center, TextDirection textDirection, VerticalDirection verticalDirection: VerticalDirection.down, TextBaseline textBaseline: TextBaseline.alphabetic, List<Widget> children: const <Widget>[]})

Constraints

To fully understand Flutter’s layout system, you need to learn how Flutter positions and sizes the components in a layout. This is going to be our next article!

Flutter - Widgets

Ludovic Taffin — Fri, 06 Nov 2020 16:23:14 +0000

Post originally posted here : https://drumor.dev/posts/flutter-widgets/

Hello,

Flutter is based on the widget concept. Today we are talking about this.

Basic idea is : Create interface only with widgets.
Widgets so define how the interface looks like. They describe this with their states and their configuration. When a widget's state changes, the widget rebuilds his description. The framework makes a diff from the initial description and the current description to determine the minimal changes to apply.
let's know have a comprehension of the widgets in the hello world project :

Flutter - Hello World!

Let's have a look at this snippet :

    import 'package:flutter/material.dart';

    void main() {
      runApp(
        Center(
          child: Text(
            'Hello, world!',
            textDirection: TextDirection.ltr,
          ),
        ),
      );
    }

This project contains two widgets : Text and Center. We can easily understand that Text is the child of Center. Here is the result :

Except the 'hello world' text, Text widget takes a property textDirection. This property defines the direction of the text. In our case is gonna be from Left To Right (ltr). We could also define it from Right To Left (rtl)... Even if it has less interest for English text (The result would be '!Hello, World').
The runApp() function takes our center widget and makes it the root of the widget tree.

Widgets

Key principle of the Flutter Framework, Widgets are bricks of you app's wall. Most of them comes from the standard library (like Text,Card,Icon,...) but you can also make your own by extending StatelessWidget and StatefulWidget. Widgets are organized as a hierarchic tree.

StatefulWidget versus StatelessWidget

The widgets we define are based on one of the two super classes StatelessWidget and StatefulWidget. Those two classes are abstract class so they have abstract method that need to be implemented by their children.

StatelessWidget

This is the most basic type of widget. This has no integrated state and only have static properties.
This class comes with one abstract method build(context) that returns the widget to the user interface. This method is called by the framework when the widget is inserted in the Widget tree of the inserted context (passed as a parameter of build method).

StatefulWidget

Those are the opposite of StatelessWidget. Those kind of widget have an integrated state. When a state change is detected, the framework rebuild them. Their state is represented by an object of type State<T extends StatefulWidget> and is read by the framework when the widget is build. This may,obviously,change during his lifetime. This abstract class comes with a method createState that creates a State object (another abstract class) and represent the state of the widget. The state class also comes with an abstract method build (like the StatelessWidget).

Flutter - Understand your first app

Ludovic Taffin — Sun, 01 Nov 2020 14:04:30 +0000

The original post is here : https://drumor.dev/posts/flutter-first-app-analyze/

Hello,
So I recently restart my learning of Flutter. After the installation of flutter with Android Studio (see doc), I create my first default project. Let see how does that works.

Most of the Dart code you'll use and edit is in the lib folder. Another important part of a flutter project is pubspec.yaml file.

lib/Main.dart

All the app is here. It starts with this:

void main() {  
 runApp(MyApp());  
}

As you can use the narrow notation , you could also write the main as this :

void main() => runApp(new MyApp());

This looks like a classical main code. It runs the app that is defined after:

class MyApp extends StatelessWidget {  

 // This widget is the root of your application.  
  @override  
  Widget build(BuildContext context) {  
  return MaterialApp(  
          title: 'Flutter Demo',  
          theme: ThemeData(
              // This is the theme of your application.
              //
              // Try running your application with "flutter run".
              // You'll see the application has a blue toolbar.
              // Then, without quitting the app, try
              // changing the primarySwatch below to Colors.green and then invoke
              // "hot reload" (press "r" in the console where you ran "flutter run",
              // or simply save your changes to "hot reload" in a Flutter IDE).
              // Notice that the counter didn't reset back to zero; the application
              // is not restarted.  
              primarySwatch: Colors.blue,  
          ),  
          home: MyHomePage(title: 'Flutter Demo Home Page'),  
          );  
  }  
}

So the app is defined and extend StatelessWidget. In Flutter, almost everything is a Widget. In this case it's a widget without state. So it keeps no data.
A build method is defined which is a sort of constructor of MyApp object. All widget have a build method. The method describes how to display the widget in terms of other, lower level widgets.
This example creates a Material app. Material is a visual design language that is standard on mobile and the web. Flutter offers a rich set of Material widgets.
A title, a theme and a home page are defined.

Let's now have a see on the MyHomePage object:

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  // This widget is the home page of your application. It is stateful, meaning
  // that it has a State object (defined below) that contains fields that affect
  // how it looks.

  // This class is the configuration for the state. It holds the values (in this
  // case the title) provided by the parent (in this case the App widget) and
  // used by the build method of the State. Fields in a Widget subclass are
  // always marked "final".

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

MyHomePage is a stateful widget. This means that, during the lifetime of the widget, a state that might change is maintained. Implementing a stateful widget requires at least two classes:

a StatefulWidget class that creates an instance of
a State class.

The StatefulWidget class is, itself, immutable and can be thrown away and regenerated, but the State class persists over the lifetime of the widget.

Here is the State class _MyHomePageState :

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      // This call to setState tells the Flutter framework that something has
      // changed in this State, which causes it to rerun the build method below
      // so that the display can reflect the updated values. If we changed
      // _counter without calling setState(), then the build method would not be
      // called again, and so nothing would appear to happen.
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    // This method is rerun every time setState is called, for instance as done
    // by the _incrementCounter method above.
    //
    // The Flutter framework has been optimized to make rerunning build methods
    // fast, so that you can just rebuild anything that needs updating rather
    // than having to individually change instances of widgets.
    return new Scaffold(
      appBar: new AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: new Text(widget.title),
      ),
      body: new Center(
        // Center is a layout widget. It takes a single child and positions it
        // in the middle of the parent.
        child: new Column(
          // Column is also layout widget. It takes a list of children and
          // arranges them vertically. By default, it sizes itself to fit its
          // children horizontally, and tries to be as tall as its parent.
          //
          // Invoke "debug paint" (press "p" in the console where you ran
          // "flutter run", or select "Toggle Debug Paint" from the Flutter tool
          // window in IntelliJ) to see the wireframe for each widget.
          //
          // Column has various properties to control how it sizes itself and
          // how it positions its children. Here we use mainAxisAlignment to
          // center the children vertically; the main axis here is the vertical
          // axis because Columns are vertical (the cross axis would be
          // horizontal).
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Text(
              'You have pushed the button this many times:',
            ),
            new Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: new Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

We discover some interesting elements :

First we have a private (the _ indicates this ) variable counter thatwill store the count of hit:

int _counter = 0;
Secondly, we get a private method, called _incrementCounter, that ... increment the counter (Incredible! Right?!) by calling the setState method from Flutter framework. This method call (by default) the build method defined after.
And last but not least, the build method that "simply" return a Scaffold widget. A scaffold widget is a layout where we have a top bar (Blue because the theme defined use the color blue), and a body. Here, the body is defined as a center layout that content a child Column and a floating button. The column widget is also a layout and represents a column (No way!!). It takes a list of children that are display one under the other (like a stack). In our case, there is two elements in the column, a default text and the display of the counter.
The floating button is simply a button floating on the bottom right of the screen. This button has a OnPressed callback that runs _incrementCounter when the button is pressed.

Pubspec.yaml

This is the configuration file of a flutter project. This lets you configure the name and description of the project, the SDK used, the dependencies of the project and others specifications. We will see later that if you wanna use assets (like pictures) in your project, you'll have to define it in this file.

A complete walkthrough to Flutter mastering!

Ludovic Taffin — Fri, 23 Oct 2020 15:53:56 +0000

Hello Dev Community,

First post for me in here (originally post here https://drumor.dev/posts/learn-flutter/)! I'm so excited starting this new adventure on Dev.to!

So I decided that today is THE day! The day I start (or restart) learning Flutter.
For those who don't know what is flutter, here is a quick video from Google.

I previously talk about this on my blog as an introduction on it here.
I sadly had less time to discover this technology but i'm sure this is the future of mobile development.

I'm so now back in this business and i will then start learning Flutter with some resources :

This should give me a good base. I will then have a look to good open source project by checking GitHub :

This will give me a solid learning evolution but there is also a lot of work.
Once i'll have a complete look on this, i'll realize a complete project that i'll explain in here. Stay tune!

Do you have any website for learning flutter that i definitely should see? Let's comment then!