DEV Community: bhuma08

SQLAlchemy Core in Python: Getting Started

bhuma08 — Tue, 04 May 2021 13:59:03 +0000

Introduction

SQLAlchemy is the Python SQL toolkit and Object Relational Mapper that gives application developers the full power and flexibility of SQL.

SQLAlchemy is broken down into 2 thing: An object related mapper(ORM) and core. Core focuses on Schema and raw data API whereas ORM is more of APIs that allow you to create a much more robust, domain-centric structure to your code.

Getting Started:

Installation and Setup of the Development Environment :
Download Anaconda

You can then launch Jupyter notebook using Anaconda Navigator.
To open and modify the database by, you can download DB browser for SQLite.

Connecting to the database using Jupyter:

from sqlalchemy import create_engine
engine = create_engine(...)
connection = engine.connect()

To see if the connection is successful:

query = 'SELECT * FROM users'
results = connect.execute.(query)
results.fetchall()

Examples of Querying and Aggregating Data:

from sqlalchemy import *
metadata = MetaData()
heroes_table = Table('heroes', metadata,
                    Column('hero_id', Integer, nullable=False, primary_key=True),
                    Column('name', String(20), nullable=False, unique=True),
)

from sqlalchemy.sql import select
query = select([heroes_table])
results = connection.execute(query)
results.fetchall()

query = select([heroes_table]).limit(5)
query = select([heroes_table]).offset(5)
query = select([heroes_table]).order_by(heroes_table.columns.name)
query = select([heroes_table]).order_by(heroes_table.columns.name.desc())
query = select([heroes_table]).offset(5).limit(5)

Using WHERE:

query = select([heroes_table]).where(heroes_table.columns.hero_id > 5)
query = select([heroes_table]).where((heroes_table.columns.hero_id > 5) & (heroes_table.columns.hero_id < 15))

Using AND

query = select([heroes_table]).where(and_(heroes_table.columns.hero_id > 5, heroes_table.columns.hero_id < 15))
query = select([heroes_table]).where((heroes_table.columns.hero_id < 5) | (heroes_table.columns.hero_id > 15))

Using OR

query = select([heroes_table]).where(or_(heroes_table.columns.hero_id < 5, heroes_table.columns.hero_id > 15))
query = select([heroes_table]).where(heroes_table.columns.name == 'Jade')

query = select([heroes_table.columns.hero_id]).where(heroes_table.columns.name == 'Jade')
query = select([heroes_table.columns.name]).where(heroes_table.columns.name.like('A%'))
query = select([func.sum(battle_events_table.columns.rubies_gained)])
results = connection.execute(query)
results.scalar()
query = select([func.max(battle_events_table.columns.rubies_gained)])
query = select([func.min(battle_events_table.columns.rubies_gained)])

Examples of Joining multiple tables:

metadata.remove(heroes_table)

battle_event_types_table = Table('battle_event_types', metadata,
    Column('battle_event_type_id', Integer, nullable=False),
    Column('name', nullable=False),
)


battle_events_table = Table('battle_events', metadata,
    Column('battle_event_id', Integer, nullable=False, primary_key=True),
    Column('battle_participant_id', Integer, ForeignKey('battle_participants.battle_participant_id'), nullable=False),
    Column('battle_event_type_id', Integer, ForeignKey('battle_events.battle_event_id'), nullable=False),
    Column('rubies_gained', Integer, nullable=False),
    Column('timestamp', Integer, nullable=False)
)

battle_participants_table = Table('battle_participants', metadata,
    Column('battle_participant_id', Integer, nullable=False, primary_key=True),
    Column('user_id', Integer, ForeignKey('users.user_id'), nullable=False),
    Column('battle_id', Integer, ForeignKey('battles.battle_id'), nullable=False),
    Column('hero_id', Integer, ForeignKey('heroes.hero_id'), nullable=False)
)

heroes_table = Table('heroes', metadata,
                    Column('hero_id', Integer, nullable=False, primary_key=True),
                    Column('name', String(20), nullable=False, unique=True),
)

join = battle_participants_table\
    .join(heroes_table, \
         battle_participants_table.columns.hero_id == heroes_table.columns.hero_id)\
    .join(battle_events_table, \
         battle_participants_table.columns.battle_participant_id == battle_events_table.columns.battle_participant_id)\
    .join(battle_event_types_table, \
         battle_events_table.columns.battle_event_type_id == battle_event_types_table.columns.battle_event_type_id)

query = select([
    heroes_table.columns.name,
    func.count(battle_events_table.columns.battle_event_id).label('total_kills')
])\
    .select_from(join)\
    .where(battle_event_types_table.columns.name == 'HERO_KILL')\
    .group_by(heroes_table.columns.name)\
    .order_by(Column('total_kills').desc())

results = connection.execute(query)
results.fetchall()

Advanced SQL - PostgreSQL

bhuma08 — Tue, 30 Mar 2021 10:35:08 +0000

Functions and Operators:

Operators: Logical, Comparison, String, Date Time
Functions: Mathematical, String, Date Time

Logical Operators: AND OR NOT

a	b	a AND b	a OR b
TRUE	TRUE	TRUE	TRUE
TRUE	FALSE	FALSE	TRUE
TRUE	NULL	NULL	TRUE
FALSE	FALSE	FALSE	FALSE
FALSE	NULL	FALSE	NULL
NULL	NULL	NULL	NULL

a	NOT a
TRUE	FALSE
FALSE	TRUE
NULL	NULL

SELECT * from film
WHERE release_year = 2006
AND NOT rental_duration = 6;

SELECT * from film
WHERE release_year in (2006, 2007)
AND NOT in rental_duration (6,5);

Comparison Operators

Operator	Description
<	less than
>	greater than
<=	less than or equal to
>=	greater than or equal to
=	equal
<>	not equal

SELECT * from film
WHERE release_year `BETWEEN` 2002 and 2006;

SELECT * from film
WHERE length = 160
OR release_year `BETWEEN` 2002 and 2006;

Mathematical Operators

SELECT tile, length, round((length/60),2) length_in_hour_round
FROM film;

SELECT title, rental_rate, 
ceiling`(rental_rate) rental_rate_new
FROM film;

ceiling is used to convert decimal numbers to nearest higher integer.

Formulas and Functions
Area of a circle: PI * (radius)^2

SELECT PI() * (500)^2 `AS AreaOfCircle;

TO combine data from two column into a single column:

SELECT firstName, lastName,
firstName || ' ' || lastName
FROM Actor;

SELECT firstName, lastName,
CONCAT(firstName, ' ', lastName) AS Full_name
FROM Actor;

TO get initials of the actor:

SELECT firstName, lastName,
LEFT(firstName, 1) || LEFT(lastName, 1) AS Initials
FROM Actor;

Other function:
LENGTH - Length of a string
UPPER - Uppercase
REPLACE - 3 parameter (firstName, 'a', '@')

Date Time Operators
now()
current_date

Aggregate Functions
count() min() max() sum()

TYPE CONVERSION
When a data stored in one datatype is converted to another datatype, it is known as Type Conversion. There are 2 types: Explicit and Implicit

Implicit Conversion: When a data stored in one datatype is converted to another datatype automatically, it is known as Implicit Conversion

Explicit Conversion: When a data stored in one datatype is converted to another datatype using conversion functions, it is known as Implicit Conversion

	Explicit	Implicit
Readability	Clear and Easy	Ambiguous
Performance	Better	Negative Impact
Portability	High	Low

Explicit conversion is preferred over Implicit

TRANSACTION
Transaction bundles multiple steps into a single, all-or-nothing operation.
Significance of Transaction

Atomic - all or nothing
Guarantee of record
Visibility of updates

BEGIN;
Update Valid_statement;
SAVEPOINT first_savepoint;
Update error_statement;
ROLLBACK TO first_savepont;
Update correct_statement;
COMMIT;

SQL for Beginners

bhuma08 — Thu, 14 Jan 2021 16:37:31 +0000

Understaing SQL Syntax

SELECT - retrieves one or more rows from one or more tables
INSERT - Adds one or more rows into a table
UPDATE - Modifies one or more rows in a table
DELETE - Removes one or more rows from one table

Examples:

SELECT first_name FROM person; 
INSERT INTO contacts (first_name, last_name) VALUES ('Bubble', 'Gum');
UPDATE contacts SET last_name = 'Pop' WHERE id=1;
DELETE FROM contacts WHERE id=2;

(Don't forget the semi colon)

Querying Data with the SELECT Statement

SELECT <column_name> FROM <table_name>;

SELECT * FROM <table_name>;

This gives all the result!
You can also qualify column name with table name. This is helpful with multi-table queries and is a good practice! For example:
SELECT person.first_name FROM person;
To shorten your work, you can alias the table name. For example:
SELECT p.first_name as Name FROM person p;
Using DISTINCT to constrain the result set:
SELECT DISTINCT p.first_name FROM person p;
This will give all the unique set of results with no repetition.

Filtering Results with WHERE

SELECT p.last_name 
FROM person p;
WHERE p.first_name = 'Candy';

You can use Boolean Operators for complex queries. For example:
Using AND operator

SELECT p.first_name 
FROM person p 
WHERE p.first_name = 'Candy'
AND p.age > 25;

Using OR operator

SELECT p.first_name
FROM person p
WHERE p.first_name = 'Candy'
OR p.last_name = 'Pink';

Using BETWEEN operator

SELECT p.first_name 
FROM person p
WHERE p.age
BETWEEN 20 AND 35;

Using LIKE operator: A fuzzy equal sign

SELECT p.first_name
FROM person p
WHERE p.first_name
LIKE 'J%';

So names beginning with J. %a% would give all names that contain a.

Using IN operator: More than 1 equal sign

SELECT p.last_name
FROM person p
WHERE p.first_name
IN ('Bubble', 'Candy');

Using IS operator: Equal operator for values that are null

SELECT p.first_name
FROM person p
WHERE p.last_name 
IS NULL;

Using IS NOT operator:

SELECT p.first_name
FROM person p
WHERE p.last_name
IS NOT NULL;

Shaping Results with ORDER BY and GROUP BY

SELECT p.last_name, p.first_name
FROM person p
ORDER BY p.last_name;

This gives you the results in alphabetical order in the last name.

Set Functions:

Function	Definition
COUNT	Count of the column specified (includes NULL values if * is used
MAX	Maximum value of the column (does not include NULL values)
MIN	Minimum value of the column (does not include NULL values)
AVG	Average of all values of the column (does not include NULL values, only numeric column)
SUM	Sum of all values of the column (does not include NULL values, only numeric column)

SELECT COUNT (p.first_name)
FROM person p
WHERE p.first_name = 'Candy';

This gives you the total number of names that are Cindy

SELECT MAX(p.age)
FROM person p;

This gives you the oldest age in the contact list

SELECT MIN(p.age)
FROM person p;

This gives you the youngest age in the contact list

SELECT AVG(p.age)
FROM person p;

This gives you the average age

SELECT 
SUM (p.age)
FROM person p;

This gives you the total sum of age

You can also add qualifiers in your set function. For example:

SELECT 
COUNT (DISTINCT p.first_name)
FROM person p;

Using GROUP BY

COUNT (p.first_name), p.first_name
FROM person p
GROUP BY p.first_name;

This will give you a table with a column for count and a column for first name.

Using HAVING

SELECT 
COUNT(DISTINCT p.first_name), p.first_name
FROM person p
GROUP BY p.first_name
HAVING p.first_name = 'Candy';

SELECT 
COUNT(DISTINCT p.first_name), p.first_name
FROM person p
GROUP BY p.first_name
HAVING COUNT(p.first_name) > 1;

Merging multiple tables using JOINs

Cross Join: Simple

SELECT p.first_name, e.email
FROM person p, email e;

Inner Join: Doesn't deal with NULL values

SELECT p.first_name, e.email
FROM person p
INNER JOIN email e
ON
p.id = e.email_id;

first_name	email
Candy	candyland@gmail.com
Bubble	bubblegum@gmail.com
Rainbow	rainbow@hotmail.co.uk

Outer Join: Deals with NULL values

Left Outer Join: Deals with NULL values- All rows from left is returned even if right contains NULL

SELECT p.first_name, e.email
FROM person p
LEFT OUTER JOIN email e
ON
p.id = e.email_id;

first_name	email
Candy	candyland@gmail.com
Bubble	bubblegum@gmail.com
Rainbow	rainbow@hotmail.co.uk
Sparkle	NULL

Right Outer Join: Deals with NULL values- All rows from right is returned even if left contains NULL

SELECT p.first_name, e.email
FROM person p
RIGHT OUTER JOIN email e
ON
p.id = e.email_id;

first_name	email
Candy	candyland@gmail.com
Bubble	bubblegum@gmail.com
Rainbow	rainbow@hotmail.co.uk
NULL	moonlight@gmail.com

Full Outer Join: Gives all NULL values on left and right columns.

first_name	email
Candy	candyland@gmail.com
Bubble	bubblegum@gmail.com
Rainbow	rainbow@hotmail.co.uk
Sparkle	NULL
NULL	moonlight@gmail.com

If full outer join doesn't work in your SQL, use left and right outer join together with the addition of UNION DISTINCT, like this:

SELECT p.first_name, e.email
FROM person p
RIGHT OUTER JOIN email e
ON
p.id = e.email_id;
UNION DISTINCT
SELECT p.first_name, e.email
FROM person p
LEFT OUTER JOIN email e
ON
p.id = e.email_id;

Add, Update and Remove Data

To add- Make sure the values match the list on:

INSERT INTO person (id, first_name, last_name)
VALUES(1, 'Fairy', 'Tale');

In this case, person is the table.

For Bulk insert:

INSERT INTO person p
SELECT * FROM old_person op
WHERE op.id > 300;

To update:

UPDATE person (the name of the table is person)
SET person.first_name ='fairy' (new value)
WHERE person.id = 5;

To delete:

DELETE FROM person p 
WHERE p.id = 5;

Create Database Tables

To create a database and a table:

CREATE DATABASE Netflix;

This creates a database. Now, to use the database:

USE DATABASE Netflix;

Next, to create a table:

CREATE TABLE tvshows 
(
id INTEGER,
name VARCHAR(1000),
seasons INTEGER
);

This creates a table called tvshows with id, name and seasons column.

NULL Values: Using NOT NULL means it's required:

CREATE TABLE tvshows 
(
id INTEGER NOT NULL,
name VARCHAR(1000) NOT NULL,
seasons INTEGER
);

Primary Keys: unique value per row, NOT NULL

CREATE TABLE tvshows 
(
id INTEGER PRIMARY KEY,
name VARCHAR(1000) NOT NULL,
seasons INTEGER
);

Drop Table:

DROP TABLE tvshows;

React: User Authentication + Django backend

bhuma08 — Mon, 23 Nov 2020 19:04:32 +0000

So, in the previous blog, we successfully made API using django, where users are able to register and login by generating a token. Now, we need to implement this in our frontend to be used in the browser.

Create a frontend folder and cd into it
Install react in a new terminal: npx create-react-app my-app This creates another folder called my-app and dependencies are installed. This may take a while!

Once it's complete, cd into my-app and see if it works:npm start

Now, make a Reducer folder containing an auth.js file and index.js. You also need an Actions folder containing types.js and another auth.js file. Create a store.js file too.

In Actions/types.js, add:

export const USER_LOADING = 'USER_LOADING';
export const USER_LOADED = 'USER_LOADED';
export const AUTH_ERROR = 'AUTH_ERROR';
export const LOGIN_SUCCESS = 'LOGIN_SUCCESS';
export const LOGIN_FAIL = 'LOGIN_FAIL';
export const LOGOUT_SUCCESS = 'LOGOUT_SUCCESS';
export const REGISTER_SUCCESS = 'REGISTER_SUCCESS';
export const REGISTER_FAIL = 'REGISTER_FAIL';

npm install redux react-redux
npm install axios
npm install react-router-dom
npm install redux-devtools-extension
npm install redux-thunk

In Reducer/auth.js, add:

import {
    USER_LOADED,
    USER_LOADING,
    AUTH_ERROR,
    LOGIN_SUCCESS,
    LOGIN_FAIL,
    LOGOUT_SUCCESS,
    REGISTER_SUCCESS,
    REGISTER_FAIL
} from '../Actions/types';

const initialState = {
    token: localStorage.getItem('token'),
    isAuthenticated: null,
    isLoading: false,
    user: null,
};

function AuthReducer (state = initialState, action) {
    switch (action.type) {
        case USER_LOADING:
            return {...state,isLoading: true};
        case USER_LOADED:
            return {...state, isAuthenticated: true, isLoading: false, user: action.payload,};
        case LOGIN_SUCCESS:
        case REGISTER_SUCCESS:
        localStorage.setItem('token', action.payload.token);
        return {...state, ...action.payload, isAuthenticated: true,isLoading: false,};
        case AUTH_ERROR:
        case LOGIN_FAIL:
        case LOGOUT_SUCCESS:
        case REGISTER_FAIL:
            localStorage.removeItem('token');
            return {...state, token: null, user: null, isAuthenticated: false, isLoading: false,};
        default:
            return state;
    }
}

export default AuthReducer;

In Actions/auth.js, add:

import axios from 'axios';
import {
    USER_LOADED,
    USER_LOADING,
    AUTH_ERROR,
    LOGIN_SUCCESS,
    LOGIN_FAIL,
    LOGOUT_SUCCESS,
    REGISTER_SUCCESS,
    REGISTER_FAIL,
} from './types';

// CHECK TOKEN & LOAD USER
export const loadUser = () => (dispatch, getState) => {
    // User Loading
    dispatch({ type: USER_LOADING });

    const token = getState().AuthReducer.token;

    const config = {
        headers :{
            'Content-Type': 'application/json',
        }
    }

    if(token){
        config.headers['Authorization']=`Token ${token}`
    }

    axios
        .get('http://127.0.0.1:8000/api/user/', config)
        .then((res) => {
            dispatch({
                type: USER_LOADED,
                payload: res.data,
            });
        })
        .catch((err) => {
            dispatch({
                type: AUTH_ERROR,
            });
        });
};

//Login
export const login = (username, password) => dispatch => {

    const config = {
        headers :{
            'Content-Type': 'application/json',
        }
    }

    //Request body
    const body= JSON.stringify({ username, password })

    axios
        .post('http://127.0.0.1:8000/api/login/', body, config)
        .then((res) => {
            dispatch({
                type: LOGIN_SUCCESS,
                payload: res.data,
            });
        })
        .catch((err) => {
            dispatch({
                type: LOGIN_FAIL,
            });
            alert("Invalid username or password")
        });
};

//Logout user
export const logout = () => (dispatch, getState) => {
    axios
        .post('http://127.0.0.1:8000/api/logout/', null, tokenConfig(getState))
        .then((res) => {
            dispatch({ type: 'CLEAR_LEADS' });
            dispatch({
                type: LOGOUT_SUCCESS,
            });
        })
        .catch((err) => {
        dispatch({
            type: AUTH_ERROR,
        });
    });
}

// Setup config with token - helper function
export const tokenConfig = (getState) => {
    // Get token from state
    const token = getState().AuthReducer.token;  
    // Headers
    const config = {
        headers: {
            'Content-Type': 'application/json',
        },
    };
    // If token, add to headers config
    if (token) {
      config.headers['Authorization'] = `Token ${token}`;
    }
    return config;
};

// REGISTER USER
export const register = ({ username, password }) => (dispatch) => {
    // Headers
    const config = {
        headers: {
            'Content-Type': 'application/json',
        },
    };

    // Request Body
    const body = JSON.stringify({ username, password });

    axios
        .post('http://127.0.0.1:8000/api/register/', body, config)
        .then((res) => {
            dispatch({
                type: REGISTER_SUCCESS,
                payload: res.data,
            });
        })
        .catch((err) => {
            dispatch({
                type: REGISTER_FAIL,
            });
        });
};

In Reducer/index.js, add:

import { combineReducers } from 'redux';
import AuthReducer from './auth';

const AllReducers = combineReducers({
  AuthReducer,
});

export default AllReducers;

In store.js, add:

import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import { composeWithDevTools } from "redux-devtools-extension";
import AllReducers from "./Reducers";

const store = createStore(AllReducers, composeWithDevTools(applyMiddleware(thunk)));

export default store;

Make sure your original index.js looks like this:

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { BrowserRouter } from "react-router-dom";
import { Provider } from "react-redux";
import store from "./store";

ReactDOM.render(
  <BrowserRouter>
    <Provider store={store}>
      <App />
    </Provider>
  </BrowserRouter>,

  document.getElementById("root")
);

Your Login page should now work! If you get CORS error, make sure to install pipenv install django-cors-headers in your backend code and add the following in settings.py:

INSTALLED_APPS = [
    ...
    'corsheaders'
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
]

ALLOWED_HOSTS = ['*']

CORS_ORIGIN_ALLOW_ALL = True

Now to allow the user to register on the browser, we need to make Register.js file and add:

import React, { Component } from 'react'
import {connect} from "react-redux";
import PropTypes from 'prop-types';
import { register } from './Actions/auth.js';

class Register extends Component {

    state = {
        username: "",
        email:'',
        password: "",
        password2: '',
    }

    static propTypes ={
        register: PropTypes.func.isRequired,
    }


    onSubmit = e => {
        e.preventDefault();
        const { username, email, password, password2 } = this.state;

        if (password !== password2) {
            alert("Passwords do not match")
        } else if (username == '' || email == '' || password==''){
            alert("Please provide all the details")
        } else {
            const newUser = {
                username,
                password,
            };
            this.props.register(newUser);

            e.target.reset();

            alert("You have successfully registered!")
        }
    }

    render() {
        return (
            <div>
                <form onSubmit={this.onSubmit}>
                    <fieldset>
                        <legend>Register</legend>
                        <div>
                            <label>Username </label>
                            <input type="text" onChange={e => this.setState({username: e.target.value})} />
                        </div>

                        <div>
                            <label>Email </label>
                            <input type="text" onChange={e => this.setState({email: e.target.value})} />
                        </div>

                        <div>
                            <label>Password </label>
                            <input type="password" onChange={e => this.setState({password: e.target.value})} />
                        </div>

                        <div>
                            <label>Confirm Password </label>
                            <input type="password" onChange={e => this.setState({password2: e.target.value})} />
                        </div>
                            <button type="submit">Register</button>  
                    </fieldset>
                </form>    
            </div>
        )
    }
}
export default connect(null, { register })(Register);

After you create a /register route in your App.js, your register page should work.

Next, you need to make a PrivateRoute.js to make use users can only access the /home once they have successfully logged in!

In your PrivateRoute.js file, add:

import React from 'react';
import { Route, Redirect } from 'react-router-dom';
import { connect } from 'react-redux';

const PrivateRoute = ({ component: Component, AuthReducer, ...rest }) => (
    <Route
        {...rest}
        render={(props) => {
            if (AuthReducer.isLoading) {
                return <h2>Loading...</h2>;
            } else if (!AuthReducer.isAuthenticated) {
                return <Redirect to="/login" />;
            } else {
                return <Component {...props} />;
            }
        }}
    />
);

const mapStateToProps = (state) => ({
    AuthReducer: state.AuthReducer,
});

export default connect(mapStateToProps)(PrivateRoute);

Make sure your App.js looks like this:

import Login from './Login.js'
import Home from './Home.js'
import Register from './Register.js';
import PrivateRoute from './PrivateRoute.js'

function App() {
  return (
    <>
     <Switch>
        <PrivateRoute path="/home" component={Home} />
        <Route exact path="/login" component={Login} />
        <Route exact path="/register" component={Register} />
      </Switch>
    </>
  );
}

export default App;

Now, if you try to go to /home page without logging in first, it will redirect you to /login page.

Lastly, we need a log out button!
Create a Logout.js file and add:

import React, { Component } from 'react'
import {connect} from "react-redux";
import PropTypes from 'prop-types';
import { logout } from './Actions/auth.js'

class Logout extends Component {

    static propTypes ={
        AuthReducer: PropTypes.object.isRequired,
        logout: PropTypes.func.isRequired
    }

    render() {

        const { isAuthenticated } = this.props.AuthReducer

        return (
            <div>
                {isAuthenticated ? <button onClick={this.props.logout}>Logout</button> : <h1></h1>}    
            </div>
        )
    }
}

const mSTP = (state) =>({
    AuthReducer: state.AuthReducer
})

export default connect(mSTP, { logout })(Logout)

Bring this Logout button to your Home file, like this:

import React, { Component } from 'react';
import Logout from './Logout.js';

class Home extends Component {
    render() {
        return (
            <div>
                <Logout/>
                Welcome
            </div>
        )
    }
}
export default Home;

Django: User Authentication using knox

bhuma08 — Thu, 19 Nov 2020 19:49:35 +0000

To get started, make sure you have django installed by using the command pipenv install django in your terminal. (Make sure you are in a virtual environment: pipenv shell)

Create a project django-admin startproject <project-name>. For this example, I will be creating a project about tvshows! So, my command will be django-admin startproject tvshows.

Now, cd into your project and make sure manage.py is in your root directory.

The command python manage.py runserver allows your app to be up and running. http://127.0.0.1:8000/ on your browser, should show this:

Next, create a superuser:python manage.py createsuperuser
This asks for a username, password and email address. Now that you have created a superuser, on the browser, add /admin to your initial site like this: http://127.0.0.1:8000/admin and your browser should show:

Use the username and password used to create the superuser to login! you should then see:

Now, you are ready to create user auth using knox where a token is generated for a user to login and access data.
You need to install the following:
pipenv install djangorestframework
pipenv install django-rest-knox

In settings.py, add:



INSTALLED_APPS = [
    ...
    'rest_framework',
    'knox'
]

Now, let's create an app for our project.
Use python manage.py startapp <name> in the terminal. For now, I've used python manage.py startapp backend.

Your files in your code editor should look something like this:

Starting with Registration API:

In the backend folder, create a new file and name it serializers.py and add:



from rest_framework import serializers
from django.contrib.auth.models import User
from django.contrib.auth import authenticate

class CreateUserSerializer(serializers.ModelSerializer):
    class Meta:
        model = User
        fields = ('id', 'username', 'password')
        extra_kwargs = {'password': {'write_only': True}}

    def create(self, validated_data):
        user = User.objects.create_user(validated_data['username'],
                                        None,
                                        validated_data['password'])
        return user

class UserSerializer(serializers.ModelSerializer):
    class Meta:
        model = User
        fields = ('id', 'username')

Then, create an api.py file in the backend folder and add:



from rest_framework import viewsets, permissions, generics
from rest_framework.response import Response
from knox.models import AuthToken
from .serializers import CreateUserSerializer, UserSerializer

class RegistrationAPI(generics.GenericAPIView):
    serializer_class = CreateUserSerializer

    def post(self, request, *args, **kwargs):
        serializer = self.get_serializer(data=request.data)
        serializer.is_valid(raise_exception=True)
        user = serializer.save()
        return Response({
            "user": UserSerializer(user, context=self.get_serializer_context()).data,
            "token": AuthToken.objects.create(user)[1]
        })

Now, to add the endpoints, create a urls.py file in the backend folder and add:



from django.urls import path
from .api import RegistrationAPI
from knox import views as knox_views

urlpatterns = [
    path('register/', RegistrationAPI.as_view()),
]

You also need to add endpoint in urls.py file in the project folder which is tvshows in this case:



from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include('backend.urls')),
    path('api/auth/', include('knox.urls'))
]

Registration API is now complete. Next is creating a Login API.

In the serializers.py in your backend folder, add:



class LoginUserSerializer(serializers.Serializer):
    username = serializers.CharField()
    password = serializers.CharField()

    def validate(self, data):
        user = authenticate(**data)
        if user and user.is_active:
            return user
        raise serializers.ValidationError("Invalid Details.")

Next, in api.py add:



from .serializers import CreateUserSerializer, UserSerializer, LoginUserSerializer

class LoginAPI(generics.GenericAPIView):
    serializer_class = LoginUserSerializer

    def post(self, request, *args, **kwargs):
        serializer = self.get_serializer(data=request.data)
        serializer.is_valid(raise_exception=True)
        user = serializer.validated_data
        return Response({
            "user": UserSerializer(user, context=self.get_serializer_context()).data,
            "token": AuthToken.objects.create(user)[1]
        })

You need to add the endpoints in urls.py in the backend folder:



from .api import RegistrationAPI, LoginAPI

urlpatterns = [
    ...,
    path('login/', LoginAPI.as_view()),
]

Finally, you need an API to shows the user data when the user successfully logs in. To do this, you need to create a class in api.py file in your backend folder:



class UserAPI(generics.RetrieveAPIView):
    permission_classes = [permissions.IsAuthenticated, ]
    serializer_class = UserSerializer

    def get_object(self):
        return self.request.user

This needs an endpoint too. Therefore, in your urls.py in your backend folder, add:



from django.urls import path
from .api import RegistrationAPI, LoginAPI, UserAPI
from knox import views as knox_views

urlpatterns = [
    path('register/', RegistrationAPI.as_view()),
    path('login/', LoginAPI.as_view()),
    path('user/', UserAPI.as_view()),
]

Now, you're all set. Make sure you run those migrations, using python manage.py makemigrations followed by python manage.py migrate.

You can use Postman to check if your endpoint work and you're able to do GET and POST requests.

Let's start with registration. You need to add header and a body to create a new user. So using the url http://127.0.0.1:8000/api/register/, add key Content-Type and value application/json on the header like this:

And add the body to POST to the API, like this:

Your registration has been successful!

You can now log in using http://127.0.0.1:8000/api/login/ and POST method adding the same body used to register. This generates a token:

You cannot access the user details without passing the token that was generated when successfully logging in, as seen below:

You are unable to view the user detail.

Therefore, you need to pass the token like this:

You are now able to view the user detail:

You can also see if the user was successfully created on django admin:

bhuma08 was the superuser I created at the beginning and user1 was created using Postman.

For logout functionality, just add a path in your backend/urls.py:



urlpatterns = [
    ...
    path('logout/', knox_views.LogoutView.as_view(), name='knox_logout')
]

That's the end! :)

Deploy your React app using Netlify

bhuma08 — Sat, 14 Nov 2020 11:49:29 +0000

Now that you have built your very first web application using React, it's time to deploy it. I will be using Netlify as it's just simple and straight forward. This blog is for apps that only contain frontend or client side. So before you follow along, please make sure that your app doesn't have a server side or backend.

First, make sure you have the Netlify command line tool. If not, in your terminal run: npm install netlify-cli -g

You may now login to your netlify account using your terminal: netlify login

Next, create a file: netlify.toml in the root directory of your project in the code editor and insert the following:

[build]
    command = "npm run build" 
    publish = "/dist" 

[[redirects]]
    from = "/*" 
    to = "/index.html" 
    status = 200

If you're unsure about the name of your publish folder, you can check that in your webpack.config.js file.

output: {
    path: path.resolve("dist"), //THIS ONE!!!
    filename: "bundle.js", 
    publicPath: "/",
},

Now, in your terminal use the following commands:
netlify init
You may deploy your app manually or using your git repository. You may name your site (this can be changed later)!
npm run build
netlify deploy
netlify deploy --prod

Your site is now live and ready to go! :)

Fetching Data from API: async/await

bhuma08 — Sat, 07 Nov 2020 13:36:24 +0000

In my previous blog, I wrote about fetching data from a public API using .then method. I'll now be using async/await method to fetch data.

I'll be using a public api, PokeAPI, which gives you access to Pokémon data .

To start off, add this in your .js file:

const url ='https://pokeapi.co/api/v2/pokemon/1'

Next, you need to make an async function:

async function pokemon (){
    const resp = await fetch (url); //Here, you fetch the url
    const data = await resp.json(); //The data is converted to json
    console.log(data)
};

You now need to call the function:

pokemon();

You'll be able to see the data on your browser console, like this:

Now, to display a selected data on the browser, you need to create an id or a class in your .html file.

<h1 id="pokemon"></h1>

You are now able to grab the id and add textContent in the pokemon function in your.js file. In this example, I grabbed the pokemon's name, like this:

async function pokemon (){
    const resp = await fetch (url);
    const data = await resp.json();
    document.getElementById("pokemon").textContent = data.name;
};

info();

Finally, the name of the pokemon is displayed on the browser, like this:

Thank you! I hope this post was helpful :)

Getting Data from API: fetch

bhuma08 — Sun, 01 Nov 2020 11:31:01 +0000

Here, I'll be going over a simple fetch method to get the data from an API using javascript code.

I'll be using a public api called TVmaze, where you can get info on hundreds of tv shows! I love using this api to practice!

Let's start with fetch method. In your .js file, add:

const url ='http://api.tvmaze.com/shows/1' 

fetch (url)
   .then(resp => resp.json())
   .then(data => console.log(data)) //api data will be visible in your browser console. 
   .catch(err => console.warn("ERROR", err));

You will be able to see the data on your browser console, like this:

Now, to display a selected data on the browser, you need to create an id or a class in your .html file.

<h1 id="name"></h1>

You are now able to grab the id and add textContent in your .js file. In this case, I want the name of the tv show to display on the screen. I have created a function that executes this:

function info(data) {
    document.getElementById("name").textContent = data.name;
}

Now, you need to call this function after you fetch the data:

fetch (url)
   .then(resp => resp.json())
   .then(info)
   .catch(err => console.warn("ERROR", err));

Finally, data is displayed on the browser, like this:

And that's it! Thank you for making it till the end :)

Import local images in React

bhuma08 — Sat, 24 Oct 2020 10:03:15 +0000

Usually, when I use images for any web applications, I use google images where I am able to copy the image address. But, I recently ran into a problem trying to upload an image from my laptop. So after spending hours trying to import my local image to in the react component, I cam across many ways to make it work. But some of them didn't work on the deployed version.
But with this particular method that I'm about to write about, my images were still visible after deploying my website.

So let's get started!

First you need to install file-loader: npm install --save-dev file-loader and then, in your webpack.config.js inside rules add this:



rules: [
      { test: /\.(png|jpe?g|gif)$/i, loader: 'file-loader' },
    ],

Then, make sure you have your desired image saved in an image folder.



public
  |____index.html
src
  |____components
  |        |____component1.js
  |  
  |____images
           |____meme.jpeg

Now, in your component, you can import your image:



import React, { Component } from 'react'
import meme from '../Images/meme.jpeg'

class LocalImageInReact extends Component {
    render() {
        return (
            <div>
                <h1>Using a local image in React!</h1>
                <img src={meme} alt="issa meme"/>                
            </div>
        )
    }
}

And that is it! You have successfully imported a local image in your react component which will work in the deployed version too!

Thank you :)

React: Using Modal in Class Components

bhuma08 — Sat, 17 Oct 2020 14:36:28 +0000

In my pervious blog, I explained how modal can be used in functional components. My obsession with modal continues so now, I'll go over one of the ways you can use modal in Class Components!

First start off with basic react class component:

import React, { Component } from 'react'

class ModalInClassComponents extends Component {
    render() {
        return (
            <div>

            </div>
        )
    }
}

export default ModalInClassComponents;

Now, in your terminal, you want to install: npm install react-responsive-modal and import modal and style.css in your component:

import { Modal } from 'react-responsive-modal';
import 'react-responsive-modal/styles.css';

Create a state for the modal to stay closed initially:

state ={
    openModal : false
}

Create a button with onClick attribute. We will call function when the button is clicked which sets the openModal state to true.

<button onClick={this.onClickButton}>Click Me</button>

onClickButton = e =>{
        e.preventDefault()
        this.setState({openModal : true})
}

Now, we need to use the Modal component and add two attributes: open and onClose.
open is set to this.state.openModal, so the modal opens when the state is true.
onClose works the same way as onClick, however, in this case, we want to set the state back to false.

<Modal open={this.state.openModal} onClose={this.onCloseModal}>
//Here you can add anything you want to reveal when the button is clicked!
       <h1>You Did it!</h1> 
</Modal>

onCloseModal = ()=>{
        this.setState({openModal : false})
}

And that's it! You should be able to view your modal now:

I love modal because it adds a bit of oomph to your app and it's very simple and easy to use.

The full code looks like this:

import React, { Component } from 'react'
import { Modal } from 'react-responsive-modal';
import 'react-responsive-modal/styles.css';

class ModalInClassComponents extends Component {

    state={
        openModal : false
    }

    onClickButton = e =>{
        e.preventDefault()
        this.setState({openModal : true})
    }

    onCloseModal = ()=>{
        this.setState({openModal : false})
    }

    render() {
        return (
            <div>
                <button onClick={this.onClickButton}>Click Me</button>
                <Modal open={this.state.openModal} onClose={this.onCloseModal}>
                    <h1>You Did it!</h1>
                </Modal>   
            </div>
        )
    }  
}

export default ModalInClassComponents;

Thank you for making it till the end!

React: Using Modal in Functional Components

bhuma08 — Wed, 07 Oct 2020 13:17:55 +0000

Right now, modal is my new obsession as it adds styling effortlessly!

In this example, a modal is created to show a list of my favourite animes!

First, a simple function component that returns a button is created as shown below:



import React from 'react';

function ModalInFunctionalComponent (){

    return(
        <>
           <button>Click to View My Favourite Animes</button>
        </>
    )
}

export default ModalInFunctionalComponent

useState needs to be imported to set a boolean values for modal to open and close. Initially, modalIsOpen is set to false.

So, an onClick attribute is set to the button to open modal and once pressed, setModalIsOpenToTrue function is called to set modalIsOpen to true.



import React, {useState} from 'react';

function ModalInFunctionalComponent (){

    const [modalIsOpen, setModalIsOpen] = useState(false);

    const setModalIsOpenToTrue =()=>{
        setModalIsOpen(true)
    }

    return(
        <>
           <button onClick={setModalIsOpenToTrue}>Click to View My Favourite Animes</button>
        </>
    )
}

export default ModalInFunctionalComponent

Next, to use modal, install modal: npm install react-modal and then import modal in your component: import Modal from react-modal.
The modal component is returned in the functional component which has isOpen attribute. Also, another button is added inside the modal component that calls on setModalIsOpenToFalse to close the modal.

Finally, I created another component that returns a list of my favourite animes and is imported and returned inside the modal component!



import React from 'react'

function AnimeList () {

        return (
            <>
            <ul>
                 <h1>One Piece</h1>
                 <h1>Fullmetal Alchemist: Brotherhood</h1>
                 <h1>Naruto</h1>
                 <h1>Bleach</h1>
                 <h1>Haikyu!!</h1>
                 <h1>Kuroko no Basketball</h1>
                 <h1>My hero academia</h1>
                 <h1>One punch man</h1>   
            </ul>     
            </>
        )

}

export default AnimeList



import React, {useState} from 'react';
import Modal from 'react-modal';
import AnimeList from './Anime';


function ModalInFunctionalComponent (){

    const [modalIsOpen,setModalIsOpen] = useState(false);

    const setModalIsOpenToTrue =()=>{
        setModalIsOpen(true)
    }

    const setModalIsOpenToFalse =()=>{
        setModalIsOpen(false)
    }

    return(
        <>
            <button onClick={setModalIsOpenToTrue}>Click to Open Modal</button>

            <Modal isOpen={modalIsOpen}>
                <button onClick={setModalIsOpenToFalse}>x</button>
                <AnimeList/>
            </Modal>
        </>
    )
}
export default ModalInFunctionalComponent;

That's it! You modal should be working!

Now, for some styling:



const customStyles = {
    content : {
      top                   : '50%',
      left                  : '50%',
      right                 : 'auto',
      bottom                : 'auto',
      marginRight           : '-50%',
      transform             : 'translate(-50%, -50%)',
      backgroundColor       : '#F0AA89'      
    }
};

Modal component has a style attribute with the value of customStyles. You can also add onRequestClose attribute to set modalIsOpen to false. This will close the modal when the user click anywhere outside modal component, not just the 'x' button.



 <Modal isOpen={modalIsOpen} style={customStyles} onRequestClose={()=> setModalIsOpen(false)}>
       <button onClick={setModalIsOpenToFalse}>x</button>
       <AnimeList/>
 </Modal>

Thank you for making it till the end :)

Writing a ReadMe: StarterPack

bhuma08 — Sat, 26 Sep 2020 13:20:57 +0000

First, create a Readme.md in your code editor!

Headers:
This is usually your title or subtitle in your markdown file.

# for H1 
## for H2
### for H3
#### for H4
##### for H5
###### for H6

That gives you:

Read me

Style:
For a bold font, use double asterisks: **Read me**.
This gives you: Read me

For an italic font, use single asterisks: *Read me*.
This gives you: Read me

For a strike through text, use double curly lines: ~~Read me~~.
This gives you: ~~Read me~~

Lists:

1. Mango
2. Pineapple
3. Berry
   1. Strawberry
   2. Blueberry

* Cherries
* Watermelon
* Citrus
   * Orange
   * Grapefruit

Mango
Pineapple
Berry
1. Strawberry
2. Blueberry

Cherries
Watermelon
Citrus
- Orange
- Grapefruit

The asterisks can be replaced with + and - :

+ Papaya
- Guava

Papaya
Guava

Links:

[Click me I'm google!](https://www.google.com/)

Click me I'm google!

Code:
Use back-ticks to get incline code:

`How to write a simple ReadMe`

This gives you: How to write a simple ReadMe

For a block of code, use 3 back-ticks at the beginning and the end of your code.

console.log('Read me')

print('Read me')

Tables:
You use | to separate the table columns and - for the column header with : to align them!

TV Shows|Seasons|Genre
--------|:-----:|:-----
Money Heist|4|Crime
Schitts Creek|6|Comedy

TV Shows	Seasons	Genre
Money Heist	4	Crime
Schitts Creek	6	Comedy

Images:
You can add images: ![imagename](TargetUrl)

![Pineapple](https://i.pinimg.com/originals/54/fb/a3/54fba3dbd6b4af80cfc4d2bd6cb5c81b.jpg)

To add an image from locally, there are many ways to do this. My favourite is using imgur. This creates a URL for your local image!

Videos:
Youtube links can be added: [![video name](Video URL img)(Video URL embedded)]

[![Anthony Ramos](https://i.ytimg.com/vi/gfIugjRFNXs/maxresdefault.jpg)(https://www.youtube.com/embed/Jc9pka7sE0w)]

Gifs:
One way to add Gifs to your markdown is to:

Convert your video into gif using Imgflip
Once your Gif is generated, you can save it in .gif file.
Bring .gif to your code editor
<a href="yourgif.gif"><img src='yourgif.gif'></a>