Novel Application Built with Flutter

read_novel

แอป อ่านนิยาย และเขียนนิยาย

Figma

Figma G1

  • หน้าเปิดแอพ

คำอธิบาย เปิดมาหน้าแรกจะทำการโหลดข้อมูลของแอพโดยจะแสดงหน้านี้ก่อนเป็นอย่างแรกขงการเปิดแอพ

Figma G2

  • เข้าสู่ระบบ

  • สมัครสมาชิก

  • ลืมรหัสผ่าน

  • รูปภาพผู้ใช้งาน

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

Figma G3

  • หน้ารายการหลัก

คำอธิบาย

หน้าแรกจะเป็นหน้าหลัก จะรวมผลงานนิยายทั้งหมดที่แอพมีไว้และนิยายใหม่ที่เพิ่งอัพเดตและจะมีปุ่มด้านล่างสุดแยกออกเป็น 3 ส่วน

Figma G4-1

  • รวมนิยาย(คนเขียน)

คำอธิบาย หน้าแรก ของการเขียนนิยาย จะรวมนิยายที่ได้มีการเขียนไว้ทั้งหมดในหน้านี้

Figma G4-1.1

  • สารบัญ (คนเขียน)

  • เรื่องนิยาย (คนเขียน)

คำอธิบาย หลังจากเลือกที่นิยายเรื่องที่ต้องการแล้วก็จะสามารถเข้ามาแก้ไขนิยายเรื่องนั้นๆได้โดยจะมีปุ่มคำสั่งอยู่ด้านล่างสุด 3 ปุ่ม

Figma G4-1.1.1

  • เพิ่มตอน1 (คนเขียน)

  • เพิ่มตอน2 (คนเขียน)

  • เพิ่มตอน3 (คนเขียน)

  • เพิ่มตอน4 (คนเขียน)

คำอธิบาย ปุ่มแรก จะเป็นการเพิ่มตอนใหม่ให้กับนิยายเรื่องนั้น

Figma G4-1.1.2

  • บันทึกข้อมูล (คนเขียน)

คำอธิบาย ต่อมาจะเป็นการบันทึกนิยายเรื่องที่เพิ่งเขียนเสร็จ

Figma G4-1.2

  • แก้ไขรูปเล่มตอนใหม่ (คนเขียน)

คำอธิบาย ปุ่มที่สองจะเป็นการแก้ไขรูปเล่มหรือตอนใหม่

Figma G4-1.3

  • แก้ไขข้อมูลนิยาย (คนเขียน)

  • แก้ไขชื่อเรื่อง-เรื่องย่อ (คนเขียน)

คำอธิบาย ปุ่มที่สาม จะเป็นการแก้ไขรายละเอียดเชิงลึก ของนิยายที่เลือกอย่างเช่น รูปภาพปก เนื้อเรื่องย่อ ชื่อผู้แต่ง-นามปากกา และช่องทางติดต่อผู้เขียนนิยาย

Figma G4-2

  • เรื่องย่อของตอน (คนอ่าน)

คำอธิบาย หน้าแรก ของนิยายหลังจากเลือกจากหน้าหลักแล้วจะบอกรายละเอียดแบบย่อของนิยายเรื่องนั้น

Figma G4-2.1

  • สารบัญ (คนอ่าน)

คำอธิบาย หน้าต่อมา จะเป็นสาระบัญของนิยายเรื่องนั้น

Figma G4-2.2

  • เนื้อหาของตอน

คำอธิบาย หน้าต่อมา หลังจากเลือกต่อที่ต้องการแล้วจะเป็นเป็นเนื้อหาของตอนนั้นๆ

Figma G4-3

  • บัญชีผู้ใช้

คำอธิบาย หน้าแรกของ Account จะสามารถปรับโหมดกลางวันกลางคืนได้แก้ไข รายละเอียดของผู้ใช้และปุ่ม Logout สำหรับออกจากระบบ

Figma G4-3.1

  • แก้ไขข้อมูลผู้ใช้

คำอธิบาย หน้าต่อมาของ Accountจะใช้ในการแก้ไขข้อมูลของผู้ใช้งาน

ผลลัพธ์การรันแอป

หน้าแรก

  • เป็นหน้าที่เเสดง 3 วินาที เเล้วก็จะไปหน้า login

หน้า Login

  • login โดย google ได้โดยที่ไม่จำเป็นต้องสมัครเพราะจะสมัครเเละยืนยันตัวตนให้อัตโนมัติ

หน้า Register

หน้า อ่านนิยาย

หน้าผลงานของฉัน

หน้า Profile

หน้า แก้ Profile

หน้ารายละเอียดนิยาย

หน้าเนื้อหาตอน

หน้าแก้รายละเอียดนิยาย

หน้าแก้รายละเอียด

หน้ารายละเอียดนิยาย (ผู้เขียน)

หน้าเขียนนิยายเเละเพยแพร์นิยาย

GitHub

View Github