DMap on Web, iOS and Android

Ứng dụng này bao gồm các chức năng như: Hiển thị các địa điểm hỗ trợ người khuyết tật dưới dạng marker, cho phép người khuyết tật tìm đường đi bằng xe buýt hoặc xe máy đến địa điểm hỗ tr

TRƯỜNG ĐẠI HỌC HOA SEN KHOA KHOA HỌC VÀ CÔNG NGHỆ

DMap on Web, iOS and Android Tên đề tài:

Giảng viên hướng dẫn: Thầy Trang Hồng Sơn

Thầy Lê Thanh Tùng

Nhóm sinh viên thực hiện : Phạm Duy Thức MSSV: 2002134

: Vũ Hoàng Huy MSSV: 2001087 : Nguyễn Thanh Phong MSSV: 2001514

Tháng 6/năm 2015

TRÍCH YẾU

Dmap hay còn gọi là bản đồ tiếp cận là một bản đồ được trung tâm DRD (trung tâm khuyết tật và phát triển) xuất bản nhằm hỗ trợ cho người khuyết tật sống tại Thành Phố Hồ Chí Minh có thể thuận tiện hơn trong việc đi lại Bản đồ tiếp cận này ghi lại thông tin của cái địa điểm đã được nhân viên tình nguyện của trung tâm DRD

đi kiềm chứng Theo tiêu chí hiện tại của trung tâm DRD thì hiện tại có năm loại hỗ trợ dành cho người khuyết tật như: cửa, thang máy, hành lang, nhà vệ sinh và lối vào

Thấy được tầm quan trọng và cần thiết của sản phẩm này nhóm chúng tôi đã quyết định sử dụng các công nghệ kĩ thuật như Google Map, Web Service , nhóm

đã xây dựng hệ thống dưới dạng một ứng dụng trên smart phone chạy bằng nền tảng iOS Ứng dụng này bao gồm các chức năng như: Hiển thị các địa điểm hỗ trợ người khuyết tật dưới dạng marker, cho phép người khuyết tật tìm đường đi bằng xe buýt hoặc xe máy đến địa điểm hỗ trợ, tìm kiếm các địa điểm hỗ trợ, ưa thích địa điểm hỗ trợ , phản hồi về địa điểm hỗ trợ và chia sẽ các địa điểm hỗ trợ mới

Chúng tôi mong muốn rằng, sản phẩm này không chỉ là một công cụ hỗ trợ cho người khuyết tật mà ở khía cạnh nào đó, nó là một sự đấu tranh cho quyền của người khuyết tật tại Việt Nam Trong tương lai, chúng tôi sẽ định hướng phát triển ứng dụng này không chỉ dành cho người khuyết tật tại thành phố Hồ Chí Minh mà sẽ lan rộng ra toàn quốc và quốc tế Bên cạnh đó chúng tôi sẽ nghiên cứu và làm thêm chức năng hỗ trợ bằng giọng nói để dành cho người khiếm thị, với ước muốn là người khuyết tật, những người kém may mắn hơn chúng ta sẽ có một cuộc sống bình thường và hòa đồng hơn với xã hội

TRÍCH YẾU I

LỜI CẢM ƠN 1

NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN 2

NHẬP ĐỀ 3

TỔNG QUAN / LÝ THUYẾT 4

1 DMap 4

2 Xcode 4

3 Google Map 4

4 Core data 5

5 Web service (RestFul Service) 6

6 Base64 6

7 CodeInigter 7

PHÂN TÍCH VẤN ĐỀ/CÁCH GIẢI QUYẾT VẤN ĐỀ 9

1 Phân tích vấn đề 9

1.1 Các chức năng cung cấp 9

1.2 Giao diện người dùng 9

1.3 Tổ chức hệ thống 25

2 Xây dựng các chức năng cho hệ thống 30

2.1 Chức năng hiển thị tất cả các điểm tiếp cận trong bán kính 30

2.2 Chức năng chi tiết thông tin một địa điểm hỗ trợ 31

2.3 Chức năng lựa chọn loại hiển thị 32

2.4 Chức năng tìm kiếm điểm tiếp cận 33

2.5 Chức năng ưa thích điểm tiếp cận 34

2.6 Chức năng tìm đường đi ngắn nhất từ vị trí của mình đến điểm tiếp cận 36

2.6.3 Sequence Model 37

2.7 Chức năng tìm đường đi giữa hai điểm tiếp cận 38

2.8 Cập nhật điểm tiếp cận 39

2.9 Chức năng viết thông tin feedback về điểm tiếp cận 40

2.10 Chức năng thông báo điểm tiếp cận mới 41

2.10.1 Mô tả 41

2.10.2 Phân tích 42

2.10.3 Sequence Model 43

KẾT QUẢ VÀ ĐỀ NGHỊ 44

TÀI LIỆU THAM KHẢO 46

DANH MỤC CÁC BẢNG BIỂU, HÌNH ẢNH

Hình 1: ví dụ về chuỗi mã hóa base64 7

Hình 1.2.1: Giao diện chính (trái: ios , phải: android) 10

Hình 1.2.2: Giao diện thông tin ngắn gọn của địa điểm (trái: ios , phải: android) 10

Hình 1.2.3:Giao diện thông tin chi tiết của một địa điểm(trái: ios , phải: android) 11

Hình 1.2.4: Giao diện tìm đường (trái: ios, phải:android) 12

Hình 1.2.5: Giao diện tìm đường từ vị trí đang đứng đến điểm tiếp cận chi (trái: ios, phải:android) 12

Hình 1.2.6: Giao diện đánh giá một địa điểm(trái: ios, phải:android) 13

Hình 1.2.7: Giao diện post feedback (trái: ios, phải:android) 13

Hình 1.2.8: Giao diện lọc hiển thị (trái: ios, phải:android) 14

Hình 1.2.9: Giao diện tìm điểm tiếp cận(trái: ios, phải:android) 14

Hình 1.2.10: Giao diện danh sách bookmark(trái: ios, phải:android) 15

Hình 1.2.11: Giao diện thông tin chung(trái: ios, phải:android) 15

Hình 1.2.12: Giao diện chọn người post location(trái: ios, phải:android) 15

Hình 1.2.13: Giao diện post location của nhân viên DRD(trái: ios, phải:android) 16

Hình 1.2.14: Giao diện post location của nhân viên không phải của DRD(trái: ios, phải:android) 17

Hình 1.2.15: Giao diện xem hiển thị những địa điểm đã post (trái: ios, phải:android) 17

Hình 1.2.16: Giao diện hướng dẫn điểm hỗ trợ (trái: ios, phải:android) 18

Hình 1.2.17 : Giao diện chính của web client 19

Hình 1.2.18 : Giao diện của thông tin của một điểm tiếp cận 19

Hình 1.2.19 : Giao diện tìm đường tới điểm tiếp cận 19

Hình 1.2.20: Sau khi tìm đường đi hoàn tất 20

Hình 1.2.21: Giao diện feedback của người dùng 20

Hình 1.2.22: cấu hình cho hiển thị dựa trên bán kính và loại tiếp cận 21

Hình 1.2.23 : giao diện dùng để tạo một điểm tiếp cận mới 21

Hình 1.2.24 : giao diện login user 22

Hình 1.2.25: Giao diện các địa điểm tiếp cận 22

Hình 1.2.26 : Giao diện các loại địa điểm 23

Hình 1.2.27: giao diện các loại hỗ trợ 23

Hình 1.2.28 : Bảng location temp, những location nào chưa được approve sẽ ở giao diện này 24

Hình 1.2.29 : Giao diện approve feedback của user 24

Hình 1.2.30: Giao diện để quản lý user 25

Hình 1.3.1 : Use Case Model cho web admin 26

Hình 1.3.2 : Use Case Model 27

Hình 1.3.3 : Entity Model Database trên server 28

Hình 1.3.4 : Cấu trúc database trên core data 28

Hình 1.3.5 : Entity Model Database trên core data 29

Hình 1.3.6: Cấu trúc Client-Server 29

Hình 2.1.3: Sequence Model hiển thị location trong bán kính 31

Hình 2.2.3: Sequence Model của chi tiết địa điểm 32

Hình 2.3.3: Sequence Model của hiển thị theo loại địa điểm 33

Hình 2.4.3: Sequence Model của tìm địa điểm 34

Hình 2.5.3: Sequence Model của ưa thích địa điểm 36

Hình 2.6.3: Sequence Model của tìm đường từ vị trí đứng tới địa điểm 37

Hình 2.4.3: Sequence Model của tìm đường giữa hai điểm tiếp cận 39

Hình 2.8.3: Sequence Model của cập nhật địa điểm 40

Hình 2.2.3.1: Sequence Model của đánh giá địa điểm 41

Hình 2.10.3: Sequence Model của post địa điểm mới 43

LỜI CẢM ƠN

Đầu tiên, chúng tôi xin gửi lời cám ơn chân thành đến thầy Trang Hồng Sơn và thầy Lê Thanh Tùng, thầy Nguyễn Lưu Bảo Đoan, những người đã trực tiếp hướng dẫn và tạo điều kiện cho chúng tôi để chúng tôi có thể hoàn thành khóa luận một cách tốt nhất

Chúng tôi muốn cám ơn đến các anh chị bên trung tâm DRD đã dành thời gian

để cung cấp những yêu cầu và mong muốn của mình, giúp chúng tôi có thêm những ý tưởng trong khóa luận

Cuối cùng, chúng tôi xin gửi lời cảm ơn chân thành tới Khoa Khoa học và Công nghệ, đã tạo điều kiện cũng như hướng dẫn tôi trước, trong và sau khi thực hiện khoá luận

NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN

NHẬP ĐỀ

Ngày nay, tuy xã hội phát triển và văn minh hơn, nhưng những người khuyết tật ở Việt Nam nói chung và tại thành phố Hồ Chí Minh nói riêng vẫn chưa nhận được sự quan tâm chia sẻ của xã hội, và quan trọng hơn hết là họ vẫn chưa được hưởng những chính sách hỗ trợ từ các cấp chính quyền Đi ra đường, đâu đâu chúng ta cũng dể dàng bắt gặp lòng lề đường bị lấn chiếm bởi các quán

xá, các tòa nhà cao tầng thì không có lối đi dành cho người đi xe lăn hay chống nạn

Đứng trước những vấn đề này, nhóm đã quyết định làm một cái gì đó thiết thực, nhằm hỗ trợ cho người khuyết tật có thể dể dàng tìm kiếm địa điểm có hỗ trợ cho họ, để họ có thể đến các địa điểm đó mà không phải lo lắng về những bậc thang cao hay những cánh cửa ra vào nhỏ hẹp

TỔNG QUAN / LÝ THUYẾT

DMap xây dựng dựa trên ý tưởng giúp cho người khuyết tật sử dụng

smartphone có hệ điều hành iOS, Android hoặc trên web có thể sử dụng bản đồ tiếp cận, bản đồ giúp cho người khuyết tật có thể biết được những nơi hỗ trợ người khuyết tật cũng như làm cách nào để đến đó

Bên cạnh đó, ứng dụng giúp cho người khuyết tật có thể hòa nhập với cộng động

dễ dàng hơn

Để thực hiện đề tài này nhóm đã có những nghiên cứu về những công nghệ,

kỹ thuật để xây dựng như: Google Map, Google map direction API, Framework codeigniter, Web service (Restful service), encode/decode image Base 64

3 Google Map

• Google map

Đây là bộ thư viện do google map hỗ trợ, nhóm dùng bộ thư viện này để:

- Hiển thị map lên trên app dựa trên kho dữ liệu của Google Maps data, SDK này tự động xử lý các kết nối đến server Google Maps

và các sự kiện cơ bản như drag, click, zoom, xoay camera

- Hiển thị marker: Google Maps hỗ trợ hiễn thị marker mặc định, đồng thời cũng hỗ trợ cho việc thay đổi các marker

- Hiển thị infowindow: Nơi cho biết thông tin cơ bản của vị trí đó

- Hiển thị Polylines: đường này sẽ được dùng để chỉ đường đi giữa hai địa điểm khi có thông tin tọa độ (latitude, longitude)

• Google map direction API

- Đây là một service dùng để tính toán đường đi giữa hai địa điểm sử dụng HTTP request Có thể tìm đường cho nhiểu chế độ như:

- Phương tiện: gồm bốn loại driving, bicycle, walking, transit như xe bus

- Những địa điểm sẽ là tọa độ hoặc một đoạn string Bạn chỉ truyền qua tọa độ của một vị trí như một điểm đi hoặc điểm đến (không có khoảng trắng) thì service này sẽ tính toán đường đi Nếu truyền cho giá trị là một địa chỉ service sẽ tự động chuyển về tọa độ sau đó tính toán đường đi

4 Core data

Core data framework là một dạng lưu trữ cơ sở dữ liệu trong ứng dụng, dùng để thiết kế cơ sở dữ liệu Xây dựng một cơ sở dữ liệu trong bộ nhớ máy cài đặt ứng dụng

Nhóm sử dụng core data để lưu trữ vào bộ nhớ thiết bị những thông tin địa điểm vào trong ứng dụng Sau khi được lấy về từ Web Service, các thông tin này

sẽ được lưu vào cơ sở dữ liệu, mục đích là sau này người dùng có thể sử dụng ứng dụng offline, không cần phải kết nối đến server

5 Web service (RestFul Service)

RestFul Service là một dạng của web service Nhóm sử dụng RestFul Service vì service này chú trọng đến tài nguyên hệ thống và đường truyền trên HTTP Những ưu điểm của Restful service:

Sử dụng các phương thức HTTP rõ ràng: bao gồm các phương thức

• GET: Để lấy record trên máy chủ

• POST: Để tạo một record trên máy chủ

• PUT: Thay đổi trạng thái hay cập nhật record

• DELETE: Xóa record

• Hiển thị cấu trúc URLs:

Ví dụ:

http://www.accessmap.somee.com/AccessMapServices.svc/GetAccessibilityType?Time=0

Cấu trúc URLs đơn giản gọi hàm GetAccessibilityType với biến truyền vào

ASP.NET: là một môi trường lập trình dùng để lập trình web cung cấp bởi Microsoft Cho phép lập trình viên có thể tạo một trang web hoặc web service LinQ: là một ngôn ngữ dùng để kết nối và truy vấn cơ sở dữ liệu

6 Base64

Base64 là một chuẩn mã hóa những file hình ảnh thành một đoạn chuỗi

Từ đoạn chuỗi đó ta có thể chuyển đổi thành file hình ảnh và ngược lại

Ví dụ:

Phía trên là một file hình còn phí dưới là đoạn mã của file hình đã được

mã hóa theo chuẩn Base64

Đây là trang web nhóm dùng để mã hóa file ảnh thành chuỗi base64

http://www.askapache.com/online-tools/base64-image-converter/

7 CodeInigter

CodeInigter là một PHP Framework theo cấu trúc MVC, là một tập hợp các thư

viện viết sẵn trên PHP nhằm giúp chúng ta phát triển web bằng PHP nhanh hơn, giúp

thực hiện các tác vụ thông thường của một ứng dụng web như:

• Hỗ trợ kết nối và tương tác đa nền tảng cơ sở dữ liệu

• Tương tác với cơ sở dữ liệu thông qua active records

• Session Management (quản lí Session)

• Định dạng và chuẩn hóa form và dữ liệu đầu vào

• Hỗ trợ Caching toàn trang để tăng tốc độ thực thi và giảm tải tối thiểu cho máy chủ

• Hỗ trợ Template Engine hoặc sử dụng chính PHP tags để điều hướng trong Views

• Hỗ trợ Hooks, các lớp ngoại (Class Extensions), và các Plugins

Kết nối cơ sở dữ liệu, upload file, phân trang, cookie,… Đồng thởi giúp ta tổ chức code

tốt hơn CI được viết bởi Rick Ellis, CI ra đời khoảng năm 2007, đặc điểm là:

• Tương thích hoàn toàn với PHP 4 Nếu sử dụng PHP 5 sẽ dùng được các tính năng hữu ích khác như khả năng gọi phương thức dây chuyền (method chaining ability)

• Mô hình code nhẹ cho hệ thống, cải thiện tốc độ thực thi

• Đơn giản trong việc cài đặt, cấu hình và cấu trúc thư mục

• Error Logging

PHÂN TÍCH VẤN ĐỀ/CÁCH GIẢI QUYẾT VẤN ĐỀ

1 Phân tích vấn đề

1.1 Các chức năng cung cấp

DMap được chia làm hai dạng người dùng

Người khuyết tật: chức năng dành cho người khuyết tật bao gồm:

• Hiển thị tất cả điểm tiếp cận trong bán kính

• Hiển thị chi tiết thông tin một địa điểm hỗ trợ

• Lựa chọn loại địa điểm để hiển thị

• Tìm điểm tiếp cận

• Bookmark điểm tiếp cận

• Tìm đường đi ngắn nhất từ vị trí của mình đến điểm tiếp cận

• Tìm đường đi giữa hai điểm tiếp cận

• Viết thông tin đánh giá về điểm tiếp cận

• Thông báo điểm tiếp cận mới

Nhân viên DRD:

• Cập nhật điểm tiếp cận mới

• Quản lý điểm tiếp cận

1.2 Giao diện người dùng

• Mobile

• Web Client

• Web Admin

1.3 Tổ chức hệ thống

1.3.1 Use Case Model

a Admin

b Mobile user

1.3.2 Database

1.3.3 Cấu trúc hệ thống Client-Server

Request Data

Data

JSON

CoreData/ SQLite Server

2 Xây dựng các chức năng cho hệ thống

2.1 Chức năng hiển thị tất cả các điểm tiếp cận trong bán

kính

2.1.1 Mô tả

Người dùng có thể xem thấy những nơi có hỗ trợ tiếp cận trong một phạm

vi bán kính

Bán kính có thể được người dùng chỉnh tùy ý từ 1 đến 5km

Bên cạnh đó người dùng có thể tùy chỉnh điểm tiếp cận theo loại Ví dụ: người dùng muốn hiển thị điểm tiếp cận nhà hàng thì chỉ sẽ hiển thị các nhà hàng trong bán kính đó những nơi khác không hiển thị

Nếu người dùng muốn hiển thị thêm những địa điểm khác ở các khu vực khác, người dùng chọn nút load để hiển thị địa điểm trong khu vực đó

2.1.2 Phân tích

Mã Use Case UC_01

Tên Use Case Xem bản đồ

Tác Nhân Chính Mobile User

Tiền Điều Kiện Kết nối internet

Kích Hoạt Nhấn vào ứng dụng

Đảm Bảo Thành Công Hiển thị được bản đồ với những địa điểm hỗ trợ

Chuỗi Sự Kiện Chính Người dùng tải ứng dụng về máy

Hiển thi bản đồ với các địa điểm

Ngoại lệ Trong lần đầu tải về, nếu không có Internet hoặc tốc độ

Internet không đủ tốt thì ứng dụng không thể lấy API từ server về được

2.1.3 Sequence Model

2.2 Chức năng chi tiết thông tin một địa điểm hỗ trợ

2.2.1 Mô tả

Người dùng chọn vào marker cần xem để xem thông tin chi tiết của nơi

tiếp cận đó gồm tên, địa chỉ, hiển thị nội dung hỗ trợ của điểm tiếp cận (cửa, nhà

vệ sinh, thang máy, hành lang, lối vào)

Những nội dung nào có sẽ hiển thị bởi các hình ảnh liên quan tới nội dung

hỗ trợ của nơi đó

2.2.2 Phân tích

Mã Use Case UC_02

Tên Use Case Xem chi tiết điểm tiếp cận

Tác Nhân Chính Mobile User

Tiền Điều Kiện Có địa điểm trên cơ sở dữ liệu

Kích Hoạt Nhấn vào icon địa điểm

Đảm Bảo Thành Công Hiển thị được thông tin địa điểm với những loại hỗ trợ Nút

chức năng tìm đường xe máy, xe buýt, ưa thích

Chuỗi Sự Kiện Chính Người dùng sẽ nhấn vào icon địa điểm

Hiển thị thông tin chi tiết của điểm tiếp cận đó

Ngoại lệ Không thể kết nối core data

2.2.3 Sequence Model

2.3.1 Mô tả

Người dùng có thể lựa chọn loại địa điểm để hiển thị (chỉ hiển thị nhà

hàng hoặc chỉ hiển thị bệnh viện v.v.v) nếu như không muốn bị rối

2.3.2 Phân tích

Mã Use Case UC_03

Tên Use Case Lựa chọn loại hiển thị

Tác Nhân Chính Mobile User

Tiền Điều Kiện Có địa điểm trên cơ sở dữ liệu