Forem: Naoya Kumasegawa

[Python]Built Todo App with FastAPI 😃

Naoya Kumasegawa — Tue, 21 Dec 2021 21:49:21 +0000

As the title says, I tried to create a TODO list with FastAPI.

Originally, I heard that FastAPI's automatic document　generation feature is good, and I was interested in it.

[Backend]
https://github.com/momonoki1990/fastapi-todo-list-api

[Frontend]
https://github.com/momonoki1990/fastapi-todo-list-frontend

I didn't really need it because I just wanted to try out FastAPI, but I made a front-end for it as well.
I think it's more exciting to have a front-end as well.

※(2022/01/06)I added user register and login function to the backend, but the frontend did not follow those new functions, so the frontend barely works now 😢

Automatic interactive API documentation

If you start the server and go to /docs, you can access the API documentation.
You can see a list of request and response formats for each resource, and by clicking the "Try it out" button, you can actually execute the request.

The generation of this document itself is done by simply describing the API routing in a formatted manner.

@router.get("", response_model=List[task_schema.TaskResponse])
async def list_tasks(db: AsyncSession = Depends(get_db)):
    return await task_crud.get_tasks(db)

For example, in the above code, the type of the response body is set by setting response_model=List[task_schema.TaskResponse].

from pydantic import BaseModel, Field

class TaskResponse(TaskBase):
    id: int = Field(..., gt=0, example=1)
    done: bool = Field(False, description="done task or not")

    class Config:
        orm_mode = True

task_schema.TaskResponse is a class that inherits from Pydantic's BaseModel and sets python type hints in its member variables.
It also allows you to add validation and parameter descriptions to an instance called Filed, which will be reflected in the documentation.

If you set orm_mode = True, the ORM (SQLAlchemy in this case) model object will be converted to Pydantic response object.
If you do not set it, you will get a validation error.

It was the first time for me to create an API in Python, but I was pleasantly surprised at how intuitive it was to write, how detailed validation could be set by simply passing values as keyword arguments, and how the documentation was automatically generated.

SQLAlchemy

I tried to use SQLAlchemy as an ORM this time, but at first I didn't know what to read in the official documentation...

To begin with, are there two types of SQLAlchemy ORM and SQL Alchemy Core, and does the latter write down SQL directly?

In the tutorial, ORM and Core are written mixed together, and at first I didn't know which one was which. Moreover, the way to write queries in ORM seems to have 2.0 style and 1.x style, and I didn't know which one was which.

However, once I realized that there are ORM and Core, 1.4 style and 2.0 style, and that I can write 2.0 style queries by setting future=True in 1.4, I knew where to look in the documentation. I also understood that engine is a setting passed to the DB, and session is a setting that holds the engine setting.

About driver for async process, it seems that aiomysql has stopped being updated and asyncmy is recommended.

(At the bottom of the top page for each version, there is Dialect Documentation, which describes the settings and drivers for each DB.)

Poetry, black, tox, DB container as test environment

I used the package manager Poery and a formatter called black.

Since the default package manager in tox, a test management tool, is the standard python pip, I set the install_command to install the dependent libraries for each test environment using poetry, as shown below.

[tox]
skipsdist = true
envlist = flake8, py310
install_command = poetry install -D {packages}

[testenv]
deps = pytest
allowlist_externals = poetry
commands =
    poetry install
    poetry run pytest tests/

[testenv:flake8]
deps = flake8
commands =
    poetry run flake8 src/

I like black because it needs no settings.
(max-line-length: 88 is too short?)

Although it is not related to the Python development tools above, I used a Docker container for the test environment DB.

(It's almost the same as the DB container for development, except that it's not persisted in volume.)

db-test:
    image: mysql:8.0
    environment:
      MYSQL_DATABASE: "todo"
      MYSQL_ALLOW_EMPTY_PASSWORD: "yes"
      TZ: "Asia/Tokyo"
    volumes:
      - ./my.conf:/etc/mysql/conf.d/my.cnf
    ports:
      - 33050:3306

By the way, about frontend(Vite, Chakra UI)

I used a setup tool called Vite because I heard it was faster and better than create-react-app. I do think it was faster until the template was created.

Create react app vs Vite

I heard that you can write CSS like Tailwind, and I was curious about it, so I gave it a try.
Like the following gridGap and py(padding-top,bottom), it seems to be possible to write all CSS as React props, and I personally like it because it seems to be intuitive and I don't have to worry about class names like Tailwind CSS.
I also found VStack HStack for creating horizontal and vertical flex containers useful.

<div className="App">
      <Container>
        <VStack gridGap="8" py="16">
          <Heading as="h1" size="4xl">
            My Todo List
          </Heading>
          <InputForm tasks={tasks} setTasks={setTasks} />
          <List tasks={tasks} setTasks={setTasks} />
        </VStack>
      </Container>
    </div>

Built a Shopify store with Next.js 😁

Naoya Kumasegawa — Tue, 17 Aug 2021 22:03:42 +0000

I've built a Shopify storefront with Next.js.
I've been using Shopify for work for a while now, and I was interested in Next.js because it supports various rendering methods such as SSR, SSG and ISR, so I decided to combine the two and build a store.
The design is based on Shopify's default Debut theme (which is now Dawn).

Technology used, etc.

Store: https://nextjs-shopify-store.vercel.app
Repository: https://github.com/naoya-kuma1990/nextjs-shopify-store
Technologies used: React, Next.js, TypeScript, Tailwind CSS, Material UI, Shopify JavaScript Buy SDK, Store Front API (Graph QL)
Implemented pages: Collection (product list), product details, cart, search results

Rate Limit for Next.js and Store Front API

As I mentioned at the beginning of this article, Next.js is a React framework that supports SSR and ISR. I used it this time because I thought that "when it comes to e-commerce sites, it's natural to support SEO, and if you want to achieve that with React, Next.js is the way to go". However, as it turns out, the site I made this time fails SEO because all the major information fetching, such as product information fetching, are performed on the client side lol.
This is because there is a cost limit called "API Rate Limits" on access to Shopify's API, and access is restricted depending on the type of API. You can read more about it in the official website, but basically, each store (strictly speaking, the private app that is the access point) has a set number of points, and if the points are consumed, the request will become an error until the points are recovered.
Therefore, the two Admin APIs (REST and GraphQL) can quickly become too costly to run every time a large number of users access the site, so there is Store Front API . Unlike the Admin API, this one is limited by IP. As a result, the Store Front API does not incur any cost overruns, as long as a certain amount of information is hit from the client side.
For these reasons, SSR is not the first choice for building a store front using Shopify's API, as SSR would mean hitting the API for every user access, which would quickly lead to cost overruns no matter which API you use.
The options are to use an ISR to hit the API at regular intervals and render it as a static page, or to use a CSR to hit the Store Front API each time. This time I chose CSR.

Get information in useEffect in page component
https://github.com/momonoki1990/nextjs-shopify-store/blob/main/pages/collections/%5Bhandle%5D.tsx#L30-L60

Query the Store Front API using a custom client
https://github.com/momonoki1990/nextjs-shopify-store/blob/main/lib/graphql/collection/getCollectionWithProducts.ts#L69-L136

JavaScript SDK and custom clients

The JavaScript Buy SDK is an SDK for hitting the Store Front API. Basically, you can use this SDK for product information and cart operations, so I thought I'd use it entirely, but there were some problems. The SDK is only used for cart operations such as adding and deleting products, while the GraphQL client library (graphql-request) is used for retrieving product information and search functions on the product page, directly hitting the Store Front API. This is because, first of all, JS Buy SDK seems to have an old type definition of TypeScript, and the type information does not match the property that can actually be retrieved, and it is necessary to extend the type definition partially by oneself. This was the first time for me to extend the type definitions, so I learned a lot, but it was troublesome to determine which properties were typed and which were not. Also, the basic properties supported by the SDK are only a part of the information that can be retrieved by the Store Front API as described in the official documentation, and when I tried to extend the SDK, it seemed to be so cumbersome (for example, the collection page does not support sorting of products). (Sorting is achieved with the SDK like this)
Therefore, I decided to use the SDK only for cart operations where the SDK is sufficient, extending the library's typedefs, and to define a custom client to directly access to the Store Front API for the rest.

JS Buy SDK
https://github.com/momonoki1990/nextjs-shopify-store/blob/main/lib/client.ts

Custom Client
https://github.com/momonoki1990/nextjs-shopify-store/blob/main/lib/graphql/customClient.ts

Extending the SDK type definitions
https://github.com/momonoki1990/nextjs-shopify-store/blob/main/types/shopify-buy.d.ts

Custom hooks

I made a custom hook for a operation of a cart.

Custom hooks (useCart)
https://github.com/momonoki1990/nextjs-shopify-store/blob/a91df30dd6fe4f6e6f057294dbbbb71876602ec9/lib/useCart.ts#L17-L130

Tailwind CSS and Material UI

To recreate Shopify's default theme Debut (Dawn is the default theme now), I used Tailwind CSS and Material UI components for animations like drawers and skeletons (dummies displayed during the initial drawing). I personally used Tailwind CSS when I wrote my theme in Liquid and was very impressed with how it solved the problem of CSS being global. However, I still found it very useful to use Tailwind to integrate styling with HTML and reduce the amount of writing.
We also used Tailwind in conjunction with Material UI, but as Tailwind is using class name and Material UI is a component, there were no conflicts. I don't think it's recommended to use different CSS frameworks together, so I don't think I'd personally recommend it for a real project.

Hydrogen and Oxygen.

Hydrogen includes commerce-specific components such as a cart, variant picker and media gallery to take the complexity out of building a custom storefront.
At the same time, "Oxygen" was announced. This is a fast and global way to host Hydrogen directly on Shopify, optimised for eCommerce.
Hydrogen and Oxygen are now available

Others

Can't show the total number of pages in the collection page.
It would be nice if there was a property for the total number of pages, but the Store Front API doesn't allow us to get the total number of products in a collection. So, after retrieving a certain number of products in a collection (up to 250), we can determine if there is a next page from pageInfo.haxNextPage, but can't display the total number of pages, like "1 / 12". The solution I can think of is to use ISR to get information about the collection at regular intervals on the collection page, get the collection information from the Store Front API or GraphQL Admin API, and then get the total number of products.
Products displayed in the store
I'm using an app called Oberlo.
The checkout (after "proceed to checkout") is the same as the theme, which takes you to the payment page provided by Shopify
https://github.com/momonoki1990/nextjs-shopify-store/blob/main/lib/useCart.ts#L110
Sorting products in a collection
https://github.com/momonoki1990/nextjs-shopify-store/blob/main/lib/graphql/collection/getCollectionWithProducts.ts#L87
The arguments of the query are listed in "arguments" of "products" in QueryRoot.
Keyword search for product titles
https://github.com/momonoki1990/nextjs-shopify-store/blob/a91df30dd6fe4f6e6f057294dbbbb71876602ec9/lib/graphql/product/ getProductsByTitle.ts#L52-L90
Partial matching on query
Shopify GraphQL partial matching on query filter
https://stackoverflow.com/questions/51742384/shopify-graphql-partial-matching-on-query-filter

Thank you for reading !