สร้างแอป React แกลเลอรีรูปภาพโดยใช้ความสามารถในการจัดเก็บไฟล์ใหม่ของ Amplify Studio

Amplify Studio เป็นอินเทอร์เฟซสำหรับการพัฒนาแอปพลิเคชันโดยไม่ต้องเขียนโค้ด (รวมถึง ส่วนประกอบ UI, ตาราง, GraphQL API, Authentication และการจัดเก็บไฟล์) ซึ่งเหล่านี้เป็นส่วนประกอบที่สำคัญในการสร้างแอปพลิเคชัน

บล็อกนี้จะอธิบายเกี่ยวกับการสร้างแอปพลิเคชันแกลเลอรีรูปภาพ โดยใช้ความสามารถใหม่ของ Amplify Studio มาสร้างคลังเก็บไฟล์ (Amazon S3 Bucket) กำหนดสิทธิ์เปิดไฟล์ และ การจัดการไฟล์ ทำให้นักพัฒนาสามารถสร้างแอปพลิเคชันได้ง่ายขึ้น และมี Content Manager ซึ่งจะช่วยให้จัดการไฟล์ได้ง่ายขึ้นผ่าน UI ของ Amplify Studio

AWS Amplify เป็นชุดเครื่องมือช่วยสร้าง mobile และ web app ซึ่งทำให้นักพัฒนาสามารถแอปพลิเคชันได้อย่างมีประสิทธิภาพ และ AWS Amplify Studio สามารถสร้างแอปพลิเคชัน UI (เฉพาะ React), สร้างเซอร์วิส backend และทำ dashboard ให้คนดูแลมาจัดการแอปพลิเคชัน, ข้อมูล,ไฟล์ และคนใช้

สิ่งที่ต้องเตรียม

แอป Amplify Studio
ติดตั้ง Authentication service

ติดตั้ง file storage ใน Amplify Studio

เริ่มต้นที่หน้า Amplify Studio และไปที่หมวด Storage คุณสามารถเลือกได้ว่าจะสร้าง Amazon S3 bucketใหม่หรือใช้ bucket ที่เคยสร้างไว้แล้ว (Note: ในกรณีที่ต้องการใช้ bucket ที่สร้างไว้แล้ว ต้องทำตามขั้นตอนนี้) ต่อไปก็ต้องตั้งชื่อ bucket (ในรูปตัวอย่างชื่อว่า shibastorage) แล้วถัดไปก็ตั้ง authorization rule ของ bucket ว่าผู้ใช้แบบไหนสามารถเปิดไฟล์, อัปโหลดไฟล์ และลบไฟล์ได้บ้าง ตามตัวอย่างกำหนดไว้ว่าคนที่ล็อกอินแล้วสามารถทำได้ทุกอย่างและคนอื่นๆสามารถเปิดดูไฟล์ได้อย่างเดียว

กดปุ่ม Create Bucket แล้วก็รอให้เซอร์วิสหลังบ้านสร้าง bucket ขึ้นมา เบื้องหลัง Amplify Studio จะใช้ AWS CloudFormation สร้างทรัพยากรทั้งหมด

AWS CloudFormation เป็นเซอร์วิส ที่กำหนดทรัพยากรบนระบบคลาวด์ของคุณโดยใช้ภาษาการเขียนโปรแกรม เป็นลักษณะของ Infrastructure as code และยังสามารถนำไป re-create ที่ AWS account อื่นๆได้

อัปโหลดไฟล์

กดไปที่หมวด File Browser เพื่อที่จะเปิดดูไฟล์ที่อัปโหลดมา หมวด File Browser มีไว้จัดการไฟล์ backend ทั้งหมดของแอปโดยที่ไม่ต้องออกไปจากหน้า Amplify Studio แอดมินเว็บก็สามารถล็อกอินเข้ามาอัปโหลดรูปใหม่แก้ไฟล์หรือแก้สิทธิ์เข้าถึงไฟล์ได้ง่ายๆ

ในหน้านี้ จะเห็นว่ามีโฟลเดอร์ที่สร้างไว้ให้แล้ว 3 โฟลเดอร์

private/ – ไฟล์อยู่ภายใต้โฟลเดอร์ที่เป็นชื่อเจ้าของ คนอื่นไม่สามารถเปิดดูได้
protected/ – ไฟล์อยู่ภายใต้โฟลเดอร์ที่เป็นชื่อเจ้าของ ทุกคนสามารถเปิดดูได้ แต่ว่าเจ้าของแก้ได้คนเดียว
public/ – ทุกคนเห็นหมด

ต่อไปก็อัปโหลดรูปมาใช้ในแอป โดยไปที่โฟลเดอร์ public/ และกดปุ่มอัปโหลด แล้วเลือกไฟล์ที่เราอยากอัปโหลดได้เลย อีกวิธีคือสามารถลากไฟล์ที่เราอยากอัปโหลดลงไปที่หน้าเว็บได้โดยตรง

เพื่อที่จะให้แกลเลอรีรูปภาพสวยงาม ควรอัปโหลดอย่างน้อย 3 รูป

สร้างแอป React

พอมีระบบ backend แล้วก็ต้องสร้างหน้าเว็บ React web app โดยรัน command ด้านล่างใน Terminal

npx create-react-app mygallery

คุณสามารถตั้งชื่อแอปที่ต้องการ โดยแทนที่คำว่า “mygallery”

ต่อไปคือการเชื่อมต่อระบบเข้ากับ backend ที่พึ่งสร้าง สามารถทำได้ง่ายๆผ่านคำสั่ง amplify pull --appId XXX --envName XXX ข้อมูลแอปจะอยู่ทางด้านบนขวาของหน้า Amplify Studio ที่เขียนว่า Local setup instructions

นำคำสั่งนี้ไปรันใน Terminal แล้วเลือก Javascript และ React นอกจากนั้นใช้ค่าพื้นฐานทั้งหมด

เชื่อมต่อเสร็จแล้วก็ต้องสร้าง UI ซึ่ง Amplify UI เป็น ระบบออกแบบโอเพนซอร์สที่มี component ช่วยสร้างเว็บที่สวยงามและรวดเร็วได้ง่ายๆ และ S3Album ก็เป็น component ที่ดึงรูปจาก S3 bucket และทำมาเป็น List เพียงเขียนโค้ดไม่กี่บรรทัด

ก่อนอื่นต้องติดตั้ง library Amplify React UI

yarn add aws-amplify @aws-amplify/ui-react

ในโฟลเดอร์แอปเปิดไฟล์ src/App.js และ copy โค้ดด้านล่าง ไปไว้ด้านบนไฟล์

import Amplify from "aws-amplify";
import {AmplifyS3Album} from "@aws-amplify/ui-react/legacy";
import awsconfig from "./aws-exports";
Amplify.configure(awsconfig);

หลังติดตั้งเสร็จแล้วก็ต้องสร้างแกลเลอรีรูปภาพ

กลับไปที่ src/App.js แล้วก็อัปเดต code ให้เหมือนกับโค้ดด้านล่าง

Amplify from "aws-amplify";
import {AmplifyS3Album} from "@aws-amplify/ui-react/legacy";
import awsconfig from "./aws-exports";

Amplify.configure(awsconfig);

function App() {

return (

  <div>
    <h1 style={{'text-align':'center'}}>My Gallery</h1>        
    <AmplifyS3Album />
  </div>
);

}

export default App;

บันทึกแล้วรันคำสั่ง npm start ก็จะสามารถทดลองหน้าเว็บได้เลยทาง localhost แล้วก็ถ้าอยากเพิ่มรูปก็อัปโหลดผ่าน Amplify Studio ได้เลย

🥳 สำเร็จแล้ว

ตอนนี้แกลเลอรีรูปภาพที่ใช้ความสามารถของ Amplify ต่อกับ Amazon S3 ซึ่งเป็น file storage backend ก็สำเร็จแล้ว สามารถแก้และเพิ่มรูปผ่าน Amplify Studio ได้ และกำหนดสิทธิ์ให้คนในทีมเข้าไปที่ Amplify Studio ได้โดยไม่ต้องเข้าใช้ AWS Console

ขั้นตอนถัดไป

สามารถลองใช้ AWS Amplift Studio ได้แล้ววันนี้ใน 17 AWS Region ทั่วโลก (ใน Region Singapore ก็มีแล้ว)

ถ้าอยากเรียนรู้เพิ่มเติมเกี่ยวกับ File storage ใน Amplify Studio สามารถเข้าไปดูได้ที่นี่
ลองใช้ feature Figma to React Code ที่พึ่งมาใหม่ในงาน re:Invent 2021

ถ้าคุณมีโปรเจคเกี่ยวกับ Amplify ที่น่าสนใจ สามารถ tag @AWSAmplify บน Twitter ได้เลย

AWS Thai Blog

สร้างแอป React แกลเลอรีรูปภาพโดยใช้ความสามารถในการจัดเก็บไฟล์ใหม่ของ Amplify Studio