Hero
Pattern
Hero

WEB & MOBILE
Application

ออกแบบและพัฒนาระบบ ที่ตอบโจทย์ UX/UI
ผู้ใช้งาน และรองรับเทคโนโลยีใหม่ ๆ

บริการรับออกแบบและพัฒนา

Web-Mobile Applications

คือ UX-UI ที่ทันสมัย ลดกระบวนการขึั้นตอนการใช้งานด้ายเทคนิคที่หลากหลาย พร้อมทีมงานที่มีประสบการณ์ในการพัฒนา และ Technology และ Tools ที่ทันสมัย

Hero

ปัญหาของระบบเดิม

Hero
Hero
ระบบไม่รองรับเทคโนโลยีใหม่ ๆ

ไม่ว่าจะเป็นเรื่องของ Web Browser รุ่นใหม่ และหลากหลาย รวมถึงการทำงานบน Mobile/Tablet

Tech Tools ที่ใช้หยุดหรือเลิกการพัฒนา

ด้วยการเปลี่ยนแปลงของ Tech Tools ใหม่ ๆ ต่าง ๆ หลายระบบโปรแกรม หลายภาษาที่ไม่ได้ถูกพัฒนาต่อ และยังถูกทดแทนด้วย Tech Tools ที่ดีกว่า ใหม่กว่า และปลอดภัยกว่า

UX/UI ใช้งานยาก ไม่ตอบโจทย์ผู้ใช้

เพราะผู้ใช้ไม่ต้องการคิดเยอะ และส่วนใหญ่มีประสบการณ์จากการใช้สื่อ Social Media ต่าง ๆ และไม่ชอบการอ่านคู่มือ

การปรับแต่ง Field Form, Workflow ทำได้ยาก

จะสร้าง Field ใส่ Form ก็ยาก จะปรับเปลี่ยน Flow การทำงานให้เข้ากับหน้างานที่ต้องใช้จริงก็ยาก หรือทำไม่ได้

ทำงานร่วมกับระบบอื่นไม่ได้

เพราะผู้ใช้ไม่ต้องการคิดเยอะ ไม่มี API (Application Protocol Interface) เพราะเป็นการพัฒนาแบบเก่า ทำให้กลายเป็นระบบปิด เชื่อมต่อกับระบบอื่นไม่ได้

SHOWCASE

SAT APP

Hero
Hero
Design Web App
content
content
content
Design Web App
content
content
content
content
content
content
content
content
content

APEC

Hero
Hero
Design Web App
content
content
Design Web App
content
content
content
content
content
content

DESIGN SYSTEM

Branding/CI Guide line/Design System/Big idea

สิ่งที่บริษัทให้ความสำคัญเป้นอันดับต้น ๆ คือ Branding เนื่องจาก Brand = ภาพจำของหน่วยงาน บริษัทจึงมีการออกแบบ Branding/CI Guide line/Design System/Big idea ให้ทางลูกค้าก่อนการเริ่มงาน เพื่อให้ ทุก Design ที่ออกมา ตรงกับองค์กรมากที่สุด และทำให้ผระชาชน หรือผู้ใช้งานเกิดภาพจำ

Flow/User Flow

เส้นทางของผู้ใช้ คือ แผนผังที่แสดงเส้นทางการใช้งานแอพลิเคชัน ตั้งแต่ขั้นตอนแรกในการเริ่มต้นใช้งานไปจนถึงการดำเนินการ ในขั้นตอนสุดท้าย ซึ่งจะบอกรายละเอียดในแต่ละขั้นตอนของการใช้งานส่วนต่าง ๆ ในแอฟพลิเคชันว่ามีการทำงานหรือโต้ตอบ กับผู้ใช้งานอย่างไรบ้างทางบริษัททจะมีการเก็บ requirement จากทางลูกค้า ว่าต้องการให้ผู้ใช้งานจริง( End User) รวมถึง ผู้ดูแลระบบ(Admin)เข้ามาแล้วเจออะไรบ้าง โดยมีการปรับ UX/UI ให้ผู้ใช้งานเข้าใจได้ง่าย

Wireframe

การออกแบบ Wireframe คือ การสร้างโครงกรอบเบื้องต้นของเว็บหรือแอป เพื่อวางแผนโครงสร้างและเนื้อหา ช่วยในการสื่อสารแนวคิดระหว่างทีม และทำให้การทดสอบการใช้งาน มีประสิทธิภาพก่อนการพัฒนาจริง เช่น การออกแบบ หน้าโปรไฟล์, หน้ากิจกรรม, หน้าสถานที่ออกกำลังกาย

Hero
Hero
Hero
Hero

TECH & TOOLS

NodeJS

Programming Language

Kong

API Gateway
(Load Balancer)

Consul

Service registration and Discovery

RabbitMQ

Asynchronous microservices messaging

Logstash

Log collector

Elasticsearch

Log indexer

Kibana

Data visualization

Kubernetes

Automated container deployment, scaling, and management

Weave Scope

Troubleshooting & Monitoring for Docker & Kubernetes

React

JavaScript library for building user interfaces

Bootstrap

Great UI boilerplate for modern web apps

jQuery

HTML document traversal and manipulation

Docker

Containerization platform

Bitbucket

Git solution, Version control

Swagger

API documentation

กระบวนการทำงานในการพัฒนาระบบ

Web-Mobile Applications

กระบวนการบริหารโครงการ
กระบวนการบริหารโครงการ
โครงสร้างกระบวนการพัฒนาเว็บไซต์
โครงสร้างกระบวนการพัฒนาเว็บไซต์
แผนการดำเนินงานโดยสรุปของโครงการ
แผนการดำเนินงานโดยสรุปของโครงการ
การบริหารโครงการและการพัฒนาระบบสารสนเทศ
การบริหารโครงการและการพัฒนาระบบสารสนเทศ
การติดตามความคืบหน้าของโครงการ
การติดตามความคืบหน้าของโครงการ
Software Analysis and Design
Software Analysis and Design

ตัวอย่างหน้าจอระบบต่าง ๆ ที่บริษัทออกแบบ

Personal Web Portal

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy

ระบบสารบรรณอิเล็กทรอนิกส์

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy

ระบบจัดเก็บเอกสารอิเล็กทรอนิกส์และคลังความรู้

สามารถกำหนดสิทธิ์การเข้าถึง ตู้, ลิ้นชัก, แฟ้ม, แฟ้มย่อย และไฟล์เอกสารได้ การบริหารจัดการพื้นที่เก็บข้อมูลแยกตามหน่วยงานได้

ระบบจัดแดชบอร์ดและรายงาน

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy

ตัวอย่างการพัฒนาระบบ E-Learning

ตัวอย่างระบบ Help Desk

Hero
Hero
Image
Image
Microservices

ข้อดีของ Microservices

  • มีความเป็นอิสระในการเลือก Technology ที่ถนัด หรือเหมาะสมกับ Service ของตัวเอง
  • การ Deploy ที่เป็นอิสระจาก Services อื่น ๆ ทำให้สะดวก และไม่จำเป็นต้องรอให้ Deploy พร้อมกัน
  • การ Scale เริ่มเป็นอิสระขึ้นแต่ละ Service สามารถออกแบบการ Scale ได้ง่ายขึ้น เนื่องจาก Focus เพียงการ Scale ใน service ของตนไม่ depen กับ Service อื่น ๆ

ข้อเสียของ Microservices

  • ความยากในการออกแบบและพัฒนาระบบ
เพิ่มประสิทธิภาพและป้องกันภัยคุกคาม จากภายนอกด้วย Cloudflare
Image
  • 1.

    ป้องกันและบรรเทาการโจมดีแบบ DDoS และมีการแจ้งเตือน หากมีการโจมตี

  • 2.

    มีระบบ Web Application Firewall (WAF) ป้องกันการโจมตีเว็บไซต์ เช่น SQL injection, XSS javascript

  • 3.

    มีระบบ Global Content Delivery Network (CDN) ที่จัดเก็บเนื้อหาเว็บไซต์ที่กระจายอยู่ทั่วโลก ทำให้เข้าถึงเนื้อหาได้อย่างรวดเร็ว

  • 4.

    เพิ่มความปลอดภัยในการรับส่งข้อมูลระหว่างผู้ใช้งานกับเครื่องแม่ข่ายด้วย SSL certificate

การทดสอบป้องกันภัยคุกคาม Owasp
  • 1.

    Injection

  • 2.

    Broken Authentication

  • 3.

    Sensitive Data Exposure

  • 4.

    XML External Entities (XXE)

  • 5.

    Broken Access Control

  • 6.

    Security Misconfiguration

  • 7.

    Cross-Site Scripting XSS

  • 8.

    Insecure Deserialization

  • 9.

    Using Components with Known Vulnerabilities

  • 10.

    Insufficient Logging & Monitoring

Image
ตัวอย่างการออกแบบโครงสร้าง Network Diagram
Image
  • Load Balance: สำหรับกระจายโหลดในการใช้งานระบบ
  • Auto Scale by K8S: สำหรับบริหารจัดการ container
  • Elasticsearch: Search Engine ในการค้นหาข้อมูล
  • Local Backup: ใช้สำรองข้อมูล
  • NFS: ใช้เป็น storage กลางในการเก็บไฟล์ข้อมูล
  • Redis: เก็บข้อมูลเช่น cache, session
  • Git: เก็บ source code ของระบบ
  • Zabbix: system log monitoring
  • Sentry: error reporting
  • Graylog: log management and analysis

สอบถามรายละเอียดเพิ่มเติม