diff --git a/document/01-git.en.md b/document/01-git.en.md index d63973437..f96775a66 100644 --- a/document/01-git.en.md +++ b/document/01-git.en.md @@ -30,7 +30,7 @@ In this step, we will learn how to use Git and Github. 2. Set your name and email address using git config. Check if your email address shows up. ```shell $ git config user.email - + ``` ## Use basic commands in Git diff --git a/document/01-git.ja.md b/document/01-git.ja.md index b5a015f81..26ebdc017 100644 --- a/document/01-git.ja.md +++ b/document/01-git.ja.md @@ -28,7 +28,7 @@ 2. git configに自分の名前とemailアドレスを設定します。以下のコマンドを実行してあなたのemailアドレスが表示されればOKです。 ```shell $ git config user.email - + ``` ## Gitの基本コマンドを使う diff --git a/document/03-api.en.md b/document/03-api.en.md index 59cf64a9a..39bf1baf0 100644 --- a/document/03-api.en.md +++ b/document/03-api.en.md @@ -44,7 +44,7 @@ $ curl -X POST \ **:beginner: Points** -* Understand the difference betweeen GET and POST requests. +* Understand the difference between GET and POST requests. * Why do we not see `{"message": "item received: "}` on accessing `http://127.0.0.1:9000/items` from your browser? * What is the **HTTP Status Code** when you receive these responses? * What do different types of status code mean? @@ -60,7 +60,7 @@ Make an endpoint to add a new item * (EN) [RESTful web API design](https://docs.microsoft.com/en-us/azure/architecture/best-practices/api-design) * (EN) [HTTP response status codes](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status) -The endpoint already implemented (`POST /items`) takes `name` as an argument. Modify the API such that it also accepts `category` informaton. +The endpoint already implemented (`POST /items`) takes `name` as an argument. Modify the API such that it also accepts `category` information. * name: Name of the item (string) * category: Category of the item (string) @@ -109,7 +109,7 @@ curl -X POST \ ``` ```json -{"items": [{"name": "jacket", "category": "fashion", "image_filename": "510824dfd4caed183a7a7cc2be80f24a5f5048e15b3b5338556d5bbd3f7bc267.jpg"}, ...]} +{"items": [{"name": "jacket", "category": "fashion", "image_name": "510824dfd4caed183a7a7cc2be80f24a5f5048e15b3b5338556d5bbd3f7bc267.jpg"}, ...]} ``` diff --git a/document/03-api.ja.md b/document/03-api.ja.md index 39d70c424..aa14a1fa5 100644 --- a/document/03-api.ja.md +++ b/document/03-api.ja.md @@ -114,7 +114,7 @@ curl -X POST \ ```json -{"items": [{"name": "jacket", "category": "fashion", "image_filename": "510824dfd4caed183a7a7cc2be80f24a5f5048e15b3b5338556d5bbd3f7bc267.jpg"}, ...]} +{"items": [{"name": "jacket", "category": "fashion", "image_name": "510824dfd4caed183a7a7cc2be80f24a5f5048e15b3b5338556d5bbd3f7bc267.jpg"}, ...]} ``` @@ -129,7 +129,7 @@ curl -X POST \ ```shell $ curl -X GET 'http://127.0.0.1:9000/items/1' -{"name": "jacket", "category": "fashion", "image_filename": "..."} +{"name": "jacket", "category": "fashion", "image_name": "..."} ``` ## 6. (Optional) Loggerについて調べる diff --git a/document/04-database.en.md b/document/04-database.en.md index 88b334b51..7a5f4bc61 100644 --- a/document/04-database.en.md +++ b/document/04-database.en.md @@ -20,7 +20,7 @@ We will use a database called **SQLite**. * category: string (Category of the item) * image_name: string (Filename of the imeage) -Change the endpoints `GET /items` and `POST /items` such that items are saved into the database and can be returned based on GET request. Add `mercari.sqlite3` to your `.gitignore` such that it is not commited. `items.db` shoud be commited. +Change the endpoints `GET /items` and `POST /items` such that items are saved into the database and can be returned based on GET request. Add `mercari.sqlite3` to your `.gitignore` such that it is not committed. `items.db` should be committed. **:beginner: Points** @@ -44,12 +44,12 @@ Since `GET items` should return the category name as before, **join** these two **items table** -| id | name | category_id | image_filename | +| id | name | category_id | image_name | | :--- | :----- | :---------- | :------------------------------------------------------------------- | | 1 | jacket | 1 | 510824dfd4caed183a7a7cc2be80f24a5f5048e15b3b5338556d5bbd3f7bc267.jpg | | 2 | ... | | | -**category table** +**categories table** | id | name | | :--- | :------ | diff --git a/document/04-database.ja.md b/document/04-database.ja.md index be1b6c4a6..51a20e2e7 100644 --- a/document/04-database.ja.md +++ b/document/04-database.ja.md @@ -59,12 +59,12 @@ $ curl -X GET 'http://127.0.0.1:9000/search?keyword=jacket' **items table** -| id | name | category_id | image_filename | +| id | name | category_id | image_name | | :--- | :----- | :---------- | :------------------------------------------------------------------- | | 1 | jacket | 1 | 510824dfd4caed183a7a7cc2be80f24a5f5048e15b3b5338556d5bbd3f7bc267.jpg | | 2 | ... | | | -**category table** +**categories table** | id | name | | :--- | :------ | diff --git a/document/05-docker.en.md b/document/05-docker.en.md index 64c0e4eb6..ecee84a80 100644 --- a/document/05-docker.en.md +++ b/document/05-docker.en.md @@ -25,9 +25,9 @@ In this step, we will learn how to use Docker. $ docker run -v $(pwd)/data/text_en.png:/tmp/img.png wakanapo/tesseract-ocr tesseract /tmp/img.png stdout -l eng ``` -What message was diplayed after running this command? +What message was displayed after running this command? -Running this command downlods the corresponding docker image from [the registry](https://hub.docker.com/repository/docker/wakanapo/tesseract-ocr) to your local machine. +Running this command downloads the corresponding docker image from [the registry](https://hub.docker.com/repository/docker/wakanapo/tesseract-ocr) to your local machine. This docker image has a functionality to read texts from images (OCR). Using a docker allows you to run applications using an environment built within the docker image without altering your local system. @@ -58,7 +58,7 @@ $ docker help Docker will download images automatically if they are not found on your local system. You can also download the image beforehand. -**Look for a commmand to download an image from the registry and download an image called `alpine`** +**Look for a command to download an image from the registry and download an image called `alpine`** Check that you can see `alpine` in the list of images. @@ -111,7 +111,7 @@ Run the image with the modified `Dockerfile`, check if the same message is displ The environment within the docker image should be the same as STEP2-2 after STEP4-5. -**Mofify `dockerfile` to copy necessary files and install dependencies such that you can run the listing API on docker** +**Modify `dockerfile` to copy necessary files and install dependencies such that you can run the listing API on docker** `$ docker run -d -p 9000:9000 build2024/app:latest` diff --git a/document/07-frontend.en.md b/document/07-frontend.en.md index 1a5af3f48..327d2e24c 100644 --- a/document/07-frontend.en.md +++ b/document/07-frontend.en.md @@ -43,7 +43,7 @@ In this screen, item images are all rendered as Build@Mercari logo. Specify the ### (Optional) Task 3. Change the styling with HTML and CSS -These two components are styled by CSS. To see what types of changes can be made, try modifying `ItemList` component CSS. These are specifed in `App.css` and they are applied by `className` attribute (e.g. `
`). +These two components are styled by CSS. To see what types of changes can be made, try modifying `ItemList` component CSS. These are specified in `App.css` and they are applied by `className` attribute (e.g. `
`). ```css .Listing { ... diff --git a/document/08-docker-compose.en.md b/document/08-docker-compose.en.md index 37c4196b2..0529cc754 100644 --- a/document/08-docker-compose.en.md +++ b/document/08-docker-compose.en.md @@ -56,13 +56,13 @@ Make a new file `docker-compose.yml` considering the following points. * Port numbers * API : 9000 * Frontend : 3000 -* Connecting betweeen services +* Connecting between services * Frontend should send requests to an environment variable `REACT_APP_API_URL` * While API will not send requests to frontend, [CORS](https://developer.mozilla.org/ja/docs/Web/HTTP/CORS) needs to be set up such that frontend knows where the requests are coming from * Set an environment variable `FRONT_URL` for frontend URL Run `docker-compose up` and check if the following operates properly -- [http://localhost:3000/](http://localhost:3000/) displayes the frontend page +- [http://localhost:3000/](http://localhost:3000/) displays the frontend page - You can add an new item (Listing) - You can view the list of all items (ItemList) diff --git a/python/main.py b/python/main.py index 0f0f93ea0..cc2e58142 100644 --- a/python/main.py +++ b/python/main.py @@ -9,34 +9,37 @@ logger = logging.getLogger("uvicorn") logger.level = logging.INFO images = pathlib.Path(__file__).parent.resolve() / "images" -origins = [ os.environ.get('FRONT_URL', 'http://localhost:3000') ] +origins = [os.environ.get("FRONT_URL", "http://localhost:3000")] app.add_middleware( CORSMiddleware, allow_origins=origins, allow_credentials=False, - allow_methods=["GET","POST","PUT","DELETE"], + allow_methods=["GET", "POST", "PUT", "DELETE"], allow_headers=["*"], ) + @app.get("/") def root(): return {"message": "Hello, world!"} + @app.post("/items") def add_item(name: str = Form(...)): logger.info(f"Receive item: {name}") return {"message": f"item received: {name}"} -@app.get("/image/{image_filename}") -async def get_image(image_filename): + +@app.get("/image/{image_name}") +async def get_image(image_name): # Create image path - image = images / image_filename + image = images / image_name - if not image_filename.endswith(".jpg"): + if not image_name.endswith(".jpg"): raise HTTPException(status_code=400, detail="Image path does not end with .jpg") if not image.exists(): logger.debug(f"Image not found: {image}") image = images / "default.jpg" - return FileResponse(image) \ No newline at end of file + return FileResponse(image) diff --git a/typescript/simple-mercari-web/src/components/ItemList/ItemList.tsx b/typescript/simple-mercari-web/src/components/ItemList/ItemList.tsx index 419728989..e5f5854de 100644 --- a/typescript/simple-mercari-web/src/components/ItemList/ItemList.tsx +++ b/typescript/simple-mercari-web/src/components/ItemList/ItemList.tsx @@ -4,7 +4,7 @@ interface Item { id: number; name: string; category: string; - image_filename: string; + image_name: string; }; const server = process.env.REACT_APP_API_URL || 'http://127.0.0.1:9000';