Forem: hiro9108

What is SPA Application?

hiro9108 — Wed, 01 Sep 2021 03:02:01 +0000

Hi, I am Hiro and a web developer based in Vancouver, Canada.

Have you ever heard of the term SPA(Single Page Application)?
If never, this article will give you a brief explanation and might help you catch the overview.

The article is short about 1-2 minutes. So please read it when you have time.

At first, do you know what different "tightly coupled" and "Loosely coupled" system?

Tightly coupled means that the systems are closely related to each other. For instance, if one system fails, the other will also fail because these are tightly interconnected. It's also called a monolithic system.

On the other hand, loosely coupled means that the systems don't affect each other's functionality. In other words, should keep inter-system coordination to a minimum and give them independence. This means that if one system fails, the other system will not be affected. loosely coupled system also have the higher maintainability than the tightly coupled system.

What do you think about which the systems are better?

If I were to create a new system, I would create a loosely coupled system, because in development, it can be developed for each function of the system, and in operation, it is more easier to maintain than monolithic.

SPA is one of the loosely coupled system construction methods.
It uses JSON data for connections between systems.
The picture below shows a simple diagram of the differences between monolithic and SPA.

Finally, these are the simple ways of building a SPA application. If we want to build a client-side with JavaScript, there is a library called React.js.
Of course, we can also use a framework called Vue.js.
You can get the data from the backend API server and create the HTML Files by using data in client-side.

Conclusion

In this article, I have provided a brief explanation of what kind of system SPA is. In short words, it means that communication between the systems with data like JSON, which enables the construction of loosely coupled systems.

If you interested in this article, please comment to me!

Thank you for taking your time to read this article!

Biography

I am a web developer based in Vancouver, Canada.
I have four years of Job experience as a web developer in Japan. AWS services are my favorite cloud vender and have some certifications.

I am actively looking for a Full-time web developer job,　especially Front End.
If you are curious about me, Please contact me😸

Github

How to build your own API with Django Rest FrameWork? (Part-2)

hiro9108 — Sun, 11 Jul 2021 00:47:03 +0000

Hello, My name is Hiro.
I am a student of web development in Vancouver.

In this time, I tried creating my own API with Django.
This article just shows how to create a simple api. It means that we can just get all data. But, this is useful and we can get knowledge about API by creating it by ourselves.

I will show you how to build your own API with Django Rest Framework. This library helps you create it easily.

Don't worry, it is not important if you know about python or django. I will show it with command line base.

Let's try to create your API!

3. setup PostgreSQL

Install postgreSQL

brew install postgresql

Install check

psql -V

Start PostgreSQL

brew services start postgresql

Check

brew services list

check default database

psql -l

check default database

psql -l

create user

createuser -P postgres

Create database

createdb demo_api -O postgres;

pip install dj_database_url
pip install python-dotenv
pip install psycopg2-binary

In setting.py.

(TOP line)
---
from dotenv import (find_dotenv, load_dotenv)
import dj_database_url
---


(Override database setting line)
--------
load_dotenv(find_dotenv())
DATABASES = {
    'default': dj_database_url.config(conn_max_age=600)
}
--------

Create .env in top directory.

DATABASE_URL=postgres://postgres:postgres@localhost/demo_api

*DATABASE_URL=postgres://{username}:{password}@localhost/{DBName}

Connect from django and check admin site

python manage.py makemigrations
python manage.py migrate

python manage.py createsuperuser
python manage.py runserver

4. setup cors

Install cors library

pip install django-cors-headers

Add corsheaders to setting.py

INSTALLED_APPS = [
    ...
    'corsheaders',
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
     ...
]

--------Last line---

CORS_ORIGIN_ALLOW_ALL = True

--------

https://pypi.org/project/django-cors-headers/

5. Prepare for Deploying to Heroku

Install libraries

pip install whitenoise
pip install gunicorn

Modify setting.py

--------Near Top---
import os

DEBUG = False

ALLOWED_HOSTS = ['*']
--------



MIDDLEWARE = [
    ...
    'whitenoise.middleware.WhiteNoiseMiddleware',
]

--------Near STATIC_URL---

STATIC_URL = '/static/'

STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'

--------

http://whitenoise.evans.io/en/stable/

Create a Procfile file in top directory.

web: gunicorn {project_folder name}.wsgi

Execute the command in top directory.

pip freeze > requirements.txt

6. Deploy to Heroku

Connect github to heroku by using GUI.

Conclusion

In this article, we just created api function of get all data on local environment. I will create the article about deploying this simple api into real world with Heroku.
Of course, if you are curious about other api functions like specific GET, POST, PUT and DELETE, I can write more article.

If you interested in this article, please comment to me!

Thank you for taking your time to read this article!

Biography

I am student of Vancouver, Canada and have job experience for Back-end technology. I also like AWS services and have some certifications.
Nowadays, I am learning Front-end Technology like JavaScript/TypeScript, React, Next.js.

I am looking for part-time job or volunteer work in Canada. If you are curious about me, Please contact me😸

GitHub of this article

What is Static Site Generation of Next.js?

hiro9108 — Sat, 17 Apr 2021 19:13:10 +0000

Hello, I am Hiro.
I am a student of web development in Vancouver.

Do you know what is Next.js?
This has good features for developing front-end.
I would like to show you basic features of this good technology.
But, I would like to show you what is react.js before I explain it.

That is framework of the JavaScript which allows us to create single page application(SPA) easily. SPA has only one page in the application file and connect to backend server via JSON data format. React gets the data and renders it to HTML dom. If you use it, you can create the loose coupling application which is easy to maintain.

But, this framework has the problem about SEO.
The application created by react has only one html file and simple html dom. For example, if you create the application by using Create React App(CRA) which is provided by Facebook, you can see simple html dom like this.

public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

That includes one simple div tag.

 <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
 </body>

Other html doms are created by react components called JSX. It means that our browser create html doms by using JavaScript.
This is good, but when it comes to SEO, this feature causes the problem that Google Crawler does not understand the web page contents.
There is no problem with Business or Administrator application because these web applications are not important about SEO. But, if you want to improve it of your application, you need to think of solutions that how to show our web site contents to google crawler.

But, we have the easy solution. Next.js solves this problem. This is the framework of React.js and has some features which allow us to create SPA application with good SEO more easily.
When you learn about this framework, you see words like SSR or SSG. These functions are big differences between React.js and Next.js.

So, I would like to show you what is Next.js in this article.

Create Next.js Application

First of all, you can execute the command in your terminal to create the inital next.js application after moving your working directory.

npx create-next-app <Your Project Name>

If you want to use npm, you can use below.

npx create-next-app <Your Project Name> --use-npm

Of course, you can check the official document below. This is the useful document to understand it.

Official Tutorial Site

After creating initial application, you can boot your development server.

npm run dev

If you success the command, you can see the initial Next.js application like this.

Routing of Next.js

When it comes to routing, Next.js is more easily than React.js. React need to import some modules like BrowserRouter, Switch, Route and Link from react-router-dom. But you import only Link from next/link and create the new file in the pages folder created by next.js if you want to set routing in the application.
I want to show simple example. Please create the new file called blog.js in the pages folder.

pages/blog.js

import React from "react";
import Link from "next/link";

const Blog = () => {
  return (
    <div>
      <h2>Blog Page</h2>
    </div>
  );
};

export default Blog;

And please edit the index.js file in the pages folder like below. I just add Link to the file for moving to blog page.

pages/index.js

import Head from "next/head";
import Link from "next/link";
import styles from "../styles/Home.module.css";

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          <Link href="/blog">
            <a>Move to Blog</a>
          </Link>
        </h1>
      </main>

      <footer className={styles.footer}>
        <a
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by{" "}
          <img src="/vercel.svg" alt="Vercel Logo" className={styles.logo} />
        </a>
      </footer>
    </div>
  );
}

When you click the link, move to the blog page. That's it. It is very easy and simple😺

Static Site Generation(SSG)

In this application, Next.js execute the html rendering in the server side. Thanks to this feature, it is possible to response data quickly to users and notice web site contents to google crawler. These are better things than react.

React is client side rendering. It means that the web page does not work well if you disable JavaScript on your browser. This is the simple example.

Launch React application

Open the developer tool and turn off Japascript by run command

We cannot see the web page

That is like Client Side Rendering functionality.

How about Static Site Generation?
SSG create the html file when you build the source code.

*When you use the development server(npm run dev), the html file is created per requests because developments should be more easily.

I also show the simple example about SSG functionality.

Execute the following command in your project.

npm run build

After doing, you can see .next folder. This folder is built by the command and you can see the html file which has already created. And then, execute the following command.

npm start

you can see the web page and turn off JavaScript. But, We can see the all contents like below.

Disable JavaScript

We can see whole contents

So, Next.js does not create the html file in client side.
Next, we can check the built folder. Actually, google crawler can see this built folder's html contents.

.next/server/pages/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width" />
    <meta charset="utf-8" />
    <title>Create Next App</title>
    <link rel="icon" href="/favicon.ico" />
    <meta name="next-head-count" content="4" />
    <link
      rel="preload"
      href="/_next/static/css/381f5b9c92d1673af027.css"
      as="style"
    />
    <link
      rel="stylesheet"
      href="/_next/static/css/381f5b9c92d1673af027.css"
      data-n-g=""
    />
    <link
      rel="preload"
      href="/_next/static/css/9c4381274c2a4fd9d205.css"
      as="style"
    />
    <link
      rel="stylesheet"
      href="/_next/static/css/9c4381274c2a4fd9d205.css"
      data-n-p=""
    />
    <noscript data-n-css=""></noscript>
    <link
      rel="preload"
      href="/_next/static/chunks/webpack-50bee04d1dc61f8adf5b.js"
      as="script"
    />
    <link
      rel="preload"
      href="/_next/static/chunks/framework.1cddd991bfe63666dc71.js"
      as="script"
    />
    <link
      rel="preload"
      href="/_next/static/chunks/commons.aab7fb15a9beb752d70d.js"
      as="script"
    />
    <link
      rel="preload"
      href="/_next/static/chunks/main-9a218112b2a04fa38bab.js"
      as="script"
    />
    <link
      rel="preload"
      href="/_next/static/chunks/pages/_app-56fe20dd7df999edbcbd.js"
      as="script"
    />
    <link
      rel="preload"
      href="/_next/static/chunks/pages/index-74d863034f308fe688d0.js"
      as="script"
    />
  </head>
  <body>
    <div id="__next">
      <div class="Home_container__1EcsU">
        <main class="Home_main__1x8gC">
          <h1 class="Home_title__3DjR7"><a href="/blog">Move to Blog</a></h1>
        </main>
        <footer class="Home_footer__1WdhD">
          <a
            href="https://vercel.com?utm_source=create-next-app&amp;utm_medium=default-template&amp;utm_campaign=create-next-app"
            target="_blank"
            rel="noopener noreferrer"
            >Powered by<!-- -->
            <img src="/vercel.svg" alt="Vercel Logo" class="Home_logo__1YbrH"
          /></a>
        </footer>
      </div>
    </div>
    <script id="__NEXT_DATA__" type="application/json">
      {
        "props": { "pageProps": {} },
        "page": "/",
        "query": {},
        "buildId": "vAlb756HaKNXTe9J5pPd6",
        "nextExport": true,
        "autoExport": true,
        "isFallback": false
      }
    </script>
    <script
      nomodule=""
      src="/_next/static/chunks/polyfills-4f14e8c8ea1352d3ef0d.js"
    ></script>
    <script
      src="/_next/static/chunks/webpack-50bee04d1dc61f8adf5b.js"
      async=""
    ></script>
    <script
      src="/_next/static/chunks/framework.1cddd991bfe63666dc71.js"
      async=""
    ></script>
    <script
      src="/_next/static/chunks/commons.aab7fb15a9beb752d70d.js"
      async=""
    ></script>
    <script
      src="/_next/static/chunks/main-9a218112b2a04fa38bab.js"
      async=""
    ></script>
    <script
      src="/_next/static/chunks/pages/_app-56fe20dd7df999edbcbd.js"
      async=""
    ></script>
    <script
      src="/_next/static/chunks/pages/index-74d863034f308fe688d0.js"
      async=""
    ></script>
    <script
      src="/_next/static/vAlb756HaKNXTe9J5pPd6/_buildManifest.js"
      async=""
    ></script>
    <script
      src="/_next/static/vAlb756HaKNXTe9J5pPd6/_ssgManifest.js"
      async=""
    ></script>
  </body>
</html>

Compare with the build folder of initial React application by creating CRA.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="/logo192.png" />
    <link rel="manifest" href="/manifest.json" />
    <title>React App</title>
    <link href="/static/css/main.9d5b29c0.chunk.css" rel="stylesheet" />
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script>
      !(function (e) {
        function r(r) {
          for (
            var n, a, i = r[0], c = r[1], l = r[2], s = 0, p = [];
            s < i.length;
            s++
          )
            (a = i[s]),
              Object.prototype.hasOwnProperty.call(o, a) &&
                o[a] &&
                p.push(o[a][0]),
              (o[a] = 0);
          for (n in c)
            Object.prototype.hasOwnProperty.call(c, n) && (e[n] = c[n]);
          for (f && f(r); p.length; ) p.shift()();
          return u.push.apply(u, l || []), t();
        }
        function t() {
          for (var e, r = 0; r < u.length; r++) {
            for (var t = u[r], n = !0, i = 1; i < t.length; i++) {
              var c = t[i];
              0 !== o[c] && (n = !1);
            }
            n && (u.splice(r--, 1), (e = a((a.s = t[0]))));
          }
          return e;
        }
        var n = {},
          o = { 1: 0 },
          u = [];
        function a(r) {
          if (n[r]) return n[r].exports;
          var t = (n[r] = { i: r, l: !1, exports: {} });
          return e[r].call(t.exports, t, t.exports, a), (t.l = !0), t.exports;
        }
        (a.e = function (e) {
          var r = [],
            t = o[e];
          if (0 !== t)
            if (t) r.push(t[2]);
            else {
              var n = new Promise(function (r, n) {
                t = o[e] = [r, n];
              });
              r.push((t[2] = n));
              var u,
                i = document.createElement("script");
              (i.charset = "utf-8"),
                (i.timeout = 120),
                a.nc && i.setAttribute("nonce", a.nc),
                (i.src = (function (e) {
                  return (
                    a.p +
                    "static/js/" +
                    ({}[e] || e) +
                    "." +
                    { 3: "b7dd6f7e" }[e] +
                    ".chunk.js"
                  );
                })(e));
              var c = new Error();
              u = function (r) {
                (i.onerror = i.onload = null), clearTimeout(l);
                var t = o[e];
                if (0 !== t) {
                  if (t) {
                    var n = r && ("load" === r.type ? "missing" : r.type),
                      u = r && r.target && r.target.src;
                    (c.message =
                      "Loading chunk " +
                      e +
                      " failed.\n(" +
                      n +
                      ": " +
                      u +
                      ")"),
                      (c.name = "ChunkLoadError"),
                      (c.type = n),
                      (c.request = u),
                      t[1](c);
                  }
                  o[e] = void 0;
                }
              };
              var l = setTimeout(function () {
                u({ type: "timeout", target: i });
              }, 12e4);
              (i.onerror = i.onload = u), document.head.appendChild(i);
            }
          return Promise.all(r);
        }),
          (a.m = e),
          (a.c = n),
          (a.d = function (e, r, t) {
            a.o(e, r) ||
              Object.defineProperty(e, r, { enumerable: !0, get: t });
          }),
          (a.r = function (e) {
            "undefined" != typeof Symbol &&
              Symbol.toStringTag &&
              Object.defineProperty(e, Symbol.toStringTag, { value: "Module" }),
              Object.defineProperty(e, "__esModule", { value: !0 });
          }),
          (a.t = function (e, r) {
            if ((1 & r && (e = a(e)), 8 & r)) return e;
            if (4 & r && "object" == typeof e && e && e.__esModule) return e;
            var t = Object.create(null);
            if (
              (a.r(t),
              Object.defineProperty(t, "default", { enumerable: !0, value: e }),
              2 & r && "string" != typeof e)
            )
              for (var n in e)
                a.d(
                  t,
                  n,
                  function (r) {
                    return e[r];
                  }.bind(null, n)
                );
            return t;
          }),
          (a.n = function (e) {
            var r =
              e && e.__esModule
                ? function () {
                    return e.default;
                  }
                : function () {
                    return e;
                  };
            return a.d(r, "a", r), r;
          }),
          (a.o = function (e, r) {
            return Object.prototype.hasOwnProperty.call(e, r);
          }),
          (a.p = "/"),
          (a.oe = function (e) {
            throw (console.error(e), e);
          });
        var i = (this.webpackJsonpreactjs = this.webpackJsonpreactjs || []),
          c = i.push.bind(i);
        (i.push = r), (i = i.slice());
        for (var l = 0; l < i.length; l++) r(i[l]);
        var f = c;
        t();
      })([]);
    </script>
    <script src="/static/js/2.542171dc.chunk.js"></script>
    <script src="/static/js/main.f01f29a2.chunk.js"></script>
  </body>
</html>

I want to pick up inside body tag because of seeing easily.

.next/server/pages/index.html

<body>
    <div id="__next">
      <div class="Home_container__1EcsU">
        <main class="Home_main__1x8gC">
          <h1 class="Home_title__3DjR7"><a href="/blog">Move to Blog</a></h1>
        </main>
        <footer class="Home_footer__1WdhD">
          <a
            href="https://vercel.com?utm_source=create-next-app&amp;utm_medium=default-template&amp;utm_campaign=create-next-app"
            target="_blank"
            rel="noopener noreferrer"
            >Powered by<!-- -->
            <img src="/vercel.svg" alt="Vercel Logo" class="Home_logo__1YbrH"
          /></a>
        </footer>
      </div>
    </div>
 </body>

Build file of React.js

<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
</body>

Alright, We can see differences between both.
React has only simple contents but Next.js has already created the html file. It means that goole crawler can understand the contents created by Next.js. So, if you want to improve SEO on your web application, this framework is good choice.

Conclusion

In this article, I just compared the functionality between Next.js and React.js. Of course, this article show simple SSG's knowledge. I will write articles how to get API data with Next.js like using getStaticProps, getStaticPaths and so on.(getStaticProps and getStaticPaths are functions prepared by Next.js)

If you interested in this article, please comment to me!

Thank you for taking your time to read this article!

Biography

I am looking for part-time job or volunteer work in Canada. If you are curious about me, Please contact me😸

How to build your own API with Django Rest FrameWork? (Part-1)

hiro9108 — Sun, 07 Feb 2021 02:01:46 +0000

Hello, My name is Hiro.
I am a student of web development in Vancouver.

I will show you how to build your own API with Django Rest Framework. This library helps you create it easily.

Don't worry, it is not important if you know about python or django. I will show it with command line base.

Let's try to create your API!

Check python environment

At first, we check whether python is installed or not.
If not, you can install it from here. We should use python with more than 3.0 version.
Download python

python -v  or  python3 -v

pip -v  or  pip3 -v

Note: If the command doesn't work, you can check your PATH environment.

Install virtualenv

We can create a virtual environment for this time because we should separate the python environment each project.

pip install virtualenv

Create virtualenv

After install virtualenv, we can use virtualenv command.
If you do not use it, please check PATH environment.

virtualenv {eivironment_name}

Next, activate virtual environment.

source {eivironment_name}/bin/activate

Create django project

After activating virtual environment, we install django.

pip install django.

Next step, we create django project.

django-admin startproject {Project_name}

Move to project folder

cd {Project_name}

Create django application

We can create django application like this command.

django-admin startapp {App_name}

We finished initial setup! Next, We will check the default django admin app.

1. Check django admin

You can register your username and password after createsuperuser command.

python manage.py migrate

python manage.py createsuperuser

After that, you can run development server.

python manage.py runserver

We can access the development server and admin app!
Login by using your username and password before you register.

http://localhost:8000/admin

2. Display Hello world

Next step, We try to displaying "Hello Django".

At first, we modify views.py in our app folder. Views.py can return HTTP Response, Json and so on. We can define what response we can see here.

Note: app folder means we create the folder with python manage.py startapp command

# {app_folder}/views.py

from django.http import HttpResponse

def Top(request):
  return HttpResponse("<h1>Hello Django</h1>")

Second, we create new urls.py in our app folder.
We can define what url path connect the response in views.py.
In this case, http://localhost:8000/ can connect Top in View.py and get HTTP Response.

# {app_folder}/urls.py

from django.urls import path
from .views import Top

urlpatterns = [
    path('', Top), # http://localhost:8000/
]

Finaly, we edit urls.py in PROJECT folder.
This project urls.py can be connected to our app's urls.py.

Note: project folder means we create the folder with python manage.py startproject command
And, edit the file like this.

# {project_folder}/urls.py

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

urlpatterns = [
    path('admin/', admin.site.urls),   # http://localhost:8000/admin
    path('', include('{your_app_name}.urls')),   # http://localhost:8000/
]

Now, we can see "Hello Django" after running our development server.

http://localhost:8000

3. Modify models.py and Register admin app

After we can see "Hello Django", we modify models.py.
We can update like this.

# {app_folder}/models.py

from django.db import models

class Product(models.Model):
  name = models.CharField(max_length=50)
  description = models.CharField(max_length=100)

  def __str__(self):
      return self.name

Models.py can define our database table and columns. In this case, I define product table and name and description fields but you can define anythings. CharField means Character Fields. We do not have to write SQL syntax.

Next step, we will use this model for creating our database.
We can use this commnad.

python manage.py makemigrations

Automatically generate 0001_initial.py file in migrations folder.
Next, we execute this command.

python manage.py migrate

Finaly, We register the model to admin app. We can edit admin.py in app folder like this.

# {app_folder}/admin.py

from django.contrib import admin
from .models import Product # import our model

@admin.register(Product)
class ProductAdmin(admin.ModelAdmin):
   pass

And then, we can see the model in admin app after we login our admin app!
We can add some data from admin app now.

4. Setup Rest Framework

Next, we will install Django Rest Framework.

pip install djangorestframework

And, add the app to the project settings.py like this.

Documentation

INSTALLED_APPS = [
    ...
    'rest_framework',
]

And then, edit the views.py.

INSTALLED_APPS = [
    ...
    'rest_framework',
]

In this time, we create serializers.py in app folder.
This serializer helps us to communicate data between models and python.
We can write like this.

# {app_folder}/serializers.py

from rest_framework import serializers
from .models import Product

class ProductSerializer(serializers.ModelSerializer):
  class Meta:
    model = Product
    fields = '__all__'

We can also modify the views.py like this.

# {app_folder}/views.py

from django.http import HttpResponse
from rest_framework.decorators import api_view
from rest_framework.response import Response

from .models import Product
from .serializers import ProductSerializer

# Create your views here.
def Top(request):
  return HttpResponse("<h1>Hello Django</h1>")

# ---New---

@api_view(['GET'])
def getAllProducts(request):
  products = Product.objects.all() # Get all data
  serializer = ProductSerializer(products, many=True) # Data Converter
  return Response(serializer.data)

Finaly, we can modify urls.py in app folder like this.

from django.urls import path
from .views import Top, apiOverviews, getAllProducts

urlpatterns = [
    path('', Top),                         # http://localhost:8000
    path('api/products/', getAllProducts), # http://localhost:8000/api/products
]

Path: api/products is up to you. we can write any path.
After you register your own data from admin app, you can check the data from api/products.
http://localhost:8000/api/products

Conclusion

If you interested in this article, please comment to me!

Thank you for taking your time to read this article!

Biography

I am looking for part-time job or volunteer work in Canada. If you are curious about me, Please contact me😸

GitHub of this article

JavaScript vs TypeScript. Why We Should Learn TypeScript?

hiro9108 — Sun, 17 Jan 2021 20:09:53 +0000

What is TypeScript?

Hello, I am a student in Vancouver, Canada and studying web development. In this article, I will show you "How to use basic typescript data type" and "Why we should learn typescript".

JavaScript is one of the most popular programming languages.
Because that is not strict syntax than other languages. In the other words, JavaScript is more free style language but if you meet a lot of codes in your project, that free style might be changed to pains.

Please look at this code.

// Can you guess the return value?
const pikachu = (a, b) => {
  return a + b;
}

Can you guess the return value of this code?
I cannot do it. Because pikachu function can take all types of variables like string, number and so on.

// Arguments is number.
const pikachu = (a, b) => {
  return a + b;
}
const result = pikachu(2021, 9);
console.log(result); // 2030

// Arguments is string.
const pikachu = (a, b) => {
  return a + b;
}
const result = pikachu("2021", "9");
console.log(result); // 20219

JavaScript is the language of dynamic typing. This is useful for writing codes more easily. But, developers have to take more care of what arguments are needed in the function, what value is returned from the function. More and More you read many codes, you realize this is stressful.

On the other hands, Please look at this code.

// Can you guess the return value?
const pikachu = (a: number, b: number): number => {
  return a + b;
}

This is typescript code. TypeScript has static typing. When we look at this, we can probably guess pikachu function return value of number.
This is so useful to understand codes because companies have a lot of codes and that is so complicated.
So, we should use more readable methods because we take much time to read and understand codes which someone wrote in the past.

Basic Typescript

TypeScript has some primitive data types like string, number, boolean, null, undefined and so on.

This is the code of simple data types.

// string, number and boolean.
const caterpie01: number = 2021;    // OK
const caterpie02: number = false;   // NG

const Metapod01: string = "sleepy"; // OK
const Metapod02: string = true;     // NG

const Wartortle01: boolean = true;  // OK
const Wartortle02: boolean = 1111;  // NG

We get compiled errors like this.

typescript.ts:10:7 - error TS2322: Type 'boolean' is not assignable to type 'number'.

10 const caterpie02: number = false;   // NG
         ~~~~~~~~~~

typescript.ts:13:7 - error TS2322: Type 'boolean' is not assignable to type 'string'.

13 const Metapod02: string = true;     // NG
         ~~~~~~~~~

typescript.ts:16:7 - error TS2322: Type 'number' is not assignable to type 'boolean'.

16 const Wartortle02: boolean = 1111;  // NG
         ~~~~~~~~~~~

Next, please think about data type of null and undefined.

// null and undefined.
const Butterfree: null = null;
const ButterfreeNull: string = Butterfree;
console.log(ButterfreeNull) // null

const Kakuna: undefined = undefined;
const KakunaNull: string = Kakuna;
console.log(KakunaNull) //undefined

This codes works in my environment. We can assign null and undefined value to string value.
In this case, I did not set the strict mode. Once I did assign strict mode to true, this code works like this.

typescript.ts:21:7 - error TS2322: Type 'null' is not assignable to type 'string'.

21 const ButterfreeNull: string = Butterfree;
         ~~~~~~~~~~~~~~

typescript.ts:25:7 - error TS2322: Type 'undefined' is not assignable to type 'string'.

25 const KakunaNull: string = Kakuna;

That is good! We can catch type error.

You can set strict mode in tsconfig.json or use tsc command argument like
--strict. If you are not sure how to set up typescript environment, please check this web site.

What is any data type?

TypeScript has any data type. It allows all data types to work without type error. This is like vanilla javascript.
Please look at this sample code.

// any data type
let pidgey: any = 1991;
console.log(typeof pidgey) // number

pidgey = "bird";
console.log(typeof pidgey) // string

pidgey = false;
console.log(typeof pidgey) // boolean

pidgey = null;
console.log(typeof pidgey) // object

pidgey = undefined;
console.log(typeof pidgey) // undefined

pidgey variable can be received all data type!

This is magical data types.🙀
If we use any data type, we do not use TypeScript at all. We just write code by using JavaScript.

TypeScript can guess data types if you do not defined that.
we can replace above sample codes with below codes.

// typescript can guess data types.
const caterpie01: number = 2021;     // number
const caterpie001 = 2021;            // number   - typescript guess


const Metapod01: string = "sleepy";  // string
const Metapod001 = "sleepy";         // string   - typescript guess

const Wartortle01: boolean = true;   // boolean
const Wartortle001 = true;           // boolean  - typescript guess

This is more readable and shorter. Of course, we cannot assign another data type to this variable.

let caterpie001 = 2021;            // number
caterpie001 = "text";              // type error

On the other hands, if we do not defined the data type of arguments in function, typescript judge the data type as any. Please check this code.

const pikachu = (a, b): number => {
  return a + b;
}
pikachu(2021, 9);

I got the error like this.(My environment is that strict mode is true. If you turn off strict mode, you can success compile and do not see type error)

typescript.ts:57:18 - error TS7006: Parameter 'a' implicitly has an 'any' type.

57 const pikachu = (a, b): number => {
                    ~

typescript.ts:57:21 - error TS7006: Parameter 'b' implicitly has an 'any' type.

57 const pikachu = (a, b): number => {

Because typescript cannot guess what values are received.
So, any data type were defined by typescript. When we use function in typescript, we have to defined data types of arguments like this.

const pikachu = (a: number, b: number): number => {
  return a + b;
}

// Do not define the return value's data type.
const pikachu = (a: number, b: number) => {
  return a + b;
}

If you create function with typescript, you absolutely have to define the specific data type. I recommend we do not have to use any data type anytime except specific situation. For one example, migrating codes from JavaScript to TypeScript.

Object data type

TypeScript can define the object data type with interface.
At first, look at this code.

// define object data type with interface.
interface PokemonObj {
  name: string,
  age: number,
  skill: string
}
// assign data type to object.
const pokemon: PokemonObj = {
  name: "pikachu",
  age: 6,
  skill: "Electric Shock!"
}

We can use interface syntax for creating object data type. And then, assign it to object.
If we change data type of object, we get type error like this.

// define object data type with interface.
interface PokemonObj{
  name: string,
  age: number,
  skill: string
}
// assign data type to object.
const pokemon: PokemonObj = {
  name: "pikachu",
  age: "change age",       // change 
  skill: "Electric Shock!"
}

This is type error message.

typescript.ts:75:3 - error TS2322: Type 'string' is not assignable to type 'number'.

75   age: "change age",
     ~~~

  typescript.ts:69:3
    69   age: number,
         ~~~
    The expected type comes from property 'age' which is declared here on type 'PokemonObj'

We get type error. It is useful to define the data type of object with interface. Of course, we can define data type directly like this code.

// assign data type directly to object.
const pokemon: {name: string, age: number, skill: string} = {
  name: "pikachu",
  age: 6,
  skill: "Electric Shock!"
}

Array data type

Array with data type is like this.

// define array data type
const pokemon: string[] = ["pikachu", "Raichu", "Charizard"];

If we change the data type, you get type error.

// change array data type
const pokemon: string[] = ["pikachu", "Raichu", false];

This is type error message.

typescript.ts:80:49 - error TS2322: Type 'boolean' is not assignable to type 'string'.

80 const pokemon: string[] = ["pikachu", "Raichu", false];

This is so useful and powerful because we do not have to take care of data type of each array elements. By the way, I want to show you another way of expression. This is the same as above code. It looks like this.

// defined array with another way.
const pokemon: Array<string> = ["pikachu", "Raichu", "Charizard"];

As next data type, I will show you generics data type. This is general data type. After we define generics data type, we can define it. Sample code is like this.

// defined array with generics data type.
type Pokemon<T> = T[];
// After defined generics type, we can define specific data type.
const pokemon: Pokemon<string> = ["pikachu", "Raichu", "Charizard"];

// Above code is the same as this.
const pokemon: string[] = ["pikachu", "Raichu", "Charizard"];

We can define some data type with generics data type.
This is not good sample but easy to understand how to use generics data type. Sample is like this.

// defined array with generics data type.
type Pokemon<T> = T[];
// After defined generics type, we can define specific data type.
const pokemon01: Pokemon<string> = ["pikachu", "Raichu", "Charizard"];
const pokemon02: Pokemon<number> = [6, 14, 16];
const pokemon03: Pokemon<boolean> = [true, true, false];

What is union?

If you want to use union data type, you can define multiple data type. Please look at this sample code.

let pokemon: (string | number) = "pikachu";  // OK
pokemon = 6;

This code works correctly because pokemon variable can take string or number data types. But this case is wrong.

let pokemon: (string | number) = "pikachu";
pokemon = 6;
pokemon = false;      // NG

Because pokemon variable does not take boolean data type and get complied error. If we want to create an array including multiple data type, of course we can use this union data type. This is the sample code.

// define data type with array and union
let pokemon: (string | number)[] = ["pikachu", "Raichu", 6, 14];

This code is correctly.
But if we add the another data type, we get type error like this.

// define data type with array and union
let pokemon: (string | number)[] = ["pikachu", "Raichu", 6, 14, false];

This is type error message.

typescript.ts:105:65 - error TS2322: Type 'boolean' is not assignable to type 'string | number'.

105 let pokemon: (string | number)[] = ["pikachu", "Raichu", 6, 14, false];

If you want to add multiple data type to the array, you can use this union data type.

What is tupple

Tupple is so strict data type.
Beginning, you can check this code.

let pokemon: [string, number] = ["pikachu", 6];

This code works well. This tupple data type allows only two elements and string and number.
I will show you some wrong case below.


typescript.ts:109:36 - error TS2322: Type 'number' is not assignable to type 'string'.

109 let pokemon02: [string, number] = [6, "pikachu"];      // NG
                                       ~

typescript.ts:109:39 - error TS2322: Type 'string' is not assignable to type 'number'.

109 let pokemon02: [string, number] = [6, "pikachu"];      // NG
                                          ~~~~~~~~~

typescript.ts:110:47 - error TS2322: Type 'string' is not assignable to type 'number'.

110 let pokemon03: [string, number] = ["pikachu", "text"]; // NG
                                                  ~~~~~~

typescript.ts:111:5 - error TS2322: Type '[string, number, number]' is not assignable to type '[string, number]'.
  Source has 3 element(s) but target allows only 2.

111 let pokemon04: [string, number] = ["pikachu", 6, 14];  // NG

Tupple is so strict data type. But it is easy to understand what purpose is this array. It means that the array take only two elements. First, value of string data type. Second, value of number data type.

Conclusion

In this article, I wrote that basic data type of TypeScript.
If you learn typescript, you can check npm packages created by typescript but also write readable and maintained codes.
If you belong to the companies, you know many codes exists there. So, you have to read a lot of codes and understand that. TypeScript helps us understand codes!

This article is just basic knowledge of typescript.
I am planning to write new posts about more typescript data type or React with typescript.
If you are interested in this article, please comment to me!

Thank your for taking your time to read this article.