Advertisement
  1. Code
  2. iOS SDK

Tạo ứng dụng Định vị cho iOS với mẫu ứng dụng appyMap

Scroll to top
Read Time: 10 min

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

What You'll Be Creating

Giới thiệu

Kiếm được $5,000 bằng cách làm việc mười giờ một ngày tốt hơn, hay kiếm được $3,000 bằng cách làm việc chỉ một lần sẽ tốt hơn? Thời gian là tiền bạc, và nó là tài sản quan trọng nhất mà chúng ta có.

Sử dụng một ứng dụng mẫu có hai ưu điểm:

  • Nó giúp bạn tiết kiệm thời gian.
  • Bạn học được một cái gì đó mới, một cách nhanh chóng.

Để xây dựng một ứng dụng bằng cách sử dụng một mẫu template, bạn nhập dữ liệu của bạn vào, thay đổi logo, tùy chỉnh phông chữ, màu sắc... và như vậy là xong.

Giả sử bạn muốn tạo ra một hướng dẫn về những điểm đến hấp dẫn (nhà thờ, viện bảo tàng, di tích hay thậm chí cả bãi đậu xe, mua sắm, vv) trong thành phố của bạn. Bạn có thể tạo ứng dụng của bạn từ đầu, và dành nhiều thời gian thiết kế giao diện, viết code, và cài đặt framework. Hoặc bạn có thể sử dụng một mẫu template và tất cả mọi thứ đã sẵn sàng trong một vài giờ—đôi khi vài phút!

Và có lẽ thậm chí quan trọng hơn, bạn tiết kiệm thời gian không chỉ trong việc thực hiện chính ứng dụng, mà còn trong việc học những khái niệm mới: bạn có thể nhìn thấy trong thực tế những thứ mới mẻ làm việc như thế nào, do đó, bạn có thể tìm hiểu và tiếp thu những ý tưởng mới nhanh hơn.

Nhưng chúng ta muốn làm một hướng dẫn về thành phố của chúng ta, đúng không? Hãy xem cách làm điều đó trong 10 phút với appyMap.

Tổng quan

Với appyMap bạn có thể tạo ứng dụng của riêng bạn để giúp người dùng khám phá các điểm tham quan được nhóm lại theo thể loại, chẳng hạn như một ứng dụng tham khảo cho các cửa hàng hay nhà hàng, một hướng dẫn về thành phố hoặc bất kỳ mục đích sử dụng nào khác đòi hỏi phải định vị địa điểm trên bản đồ. Bạn có thể tìm thấy mẫu ứng dụng định vị appyMap cho iOS để tải về trên CodeCanyon.

Cấu trúc của appyMap là rất đơn giản, và bao gồm bốn màn hình: Home, Section, Detail và Direction (được cung cấp bởi Apple Maps).

appyMap screens Home Section Detail and DirectionsappyMap screens Home Section Detail and DirectionsappyMap screens Home Section Detail and Directions

Màn hình Home hiển thị các phần chính của chúng ta, trong đó có những điểm tham quan.

Chọn một điểm tham quan sẽ mở ra màn hình chi tiết với các hình ảnh, mô tả, và một trường phụ (có thể được sử dụng cho địa chỉ, giờ khai mạc, vv) và một nút để nhận hướng dẫn du lịch. Nếu có một số điện thoại, bạn cũng có thể gọi đến điểm tham quan từ bên trong ứng dụng.

Bây giờ chúng ta hãy xem cách làm thế nào để chèn dữ liệu của chúng ta vào trong ứng dụng.

Nhập dữ liệu ứng dụng

Có hai cách để nhập dữ liệu của bạn: thông qua các tập tin Plist cục bộ hoặc bằng cách sử dụng CloudKit, nền tảng đám mây của Apple. Mỗi cách đều có ưu và khuyết điểm riêng của nó.

Tùy chọn 1: Các tập tin Plist cục bộ

Plist là các tập tin mà bạn đưa vào ứng dụng của bạn. Chúng là một tài liệu có cấu trúc dữ liệu—không giống như một tập tin bảng tính.

Editing a Plist in XcodeEditing a Plist in XcodeEditing a Plist in Xcode

Bạn có thể chỉnh sửa tập tin Plist với Xcode. Đây là cách dễ dàng nhất và rất hữu ích khi bạn chỉ cần thay đổi hoặc thêm một lượng nhỏ dữ liệu. Một cách khác để thêm dữ liệu vào một tập tin Plist là bằng cách chuyển đổi một bảng tính và nhập nó vào Xcode. Điều này thật sự thuận tiện khi bạn phải quản lý một lượng lớn dữ liệu.

Sử dụng các tập tin Plist để chuyển liệu vào ứng dụng của bạn cung cấp cho bạn hai ưu điểm:

  1. Ứng dụng của bạn sẽ không cần kết nối Internet để hoạt động.
  2. Ít có độ trễ: dữ liệu Plist của ứng dụng sẽ được nạp ngay lập tức khi khởi động, trong khi dữ liệu được lưu trữ trong đám mây sẽ luôn luôn có một độ trễ nhất định.

Nhược điểm của việc sử dụng dữ liệu cục bộ là, nếu bạn muốn thêm hoặc chỉnh sửa địa điểm tham quan, bạn sẽ phải phát hành một phiên bản mới của ứng dụng.

Cấu hình Menu chính

Bên trong dự án Xcode đi kèm với appyMap, mở tập tin Main.plist—tập tin này định nghĩa Menu chính. Bên trong tập tin này, chúng ta thấy một danh sách các phần tử, xác định các mục ("section") của địa điểm tham quan. Mỗi mục có ba trường:

  • id: id duy nhất của section, đồng thời được dùng để sắp xếp các phần tử.
  • name: tên của section
  • isFree: nếu thiết lập là "yes" thì section sẽ tự do, nếu không nó bị khóa và có thể được mở khóa bằng cách mua nó trong ứng dụng.

Mỗi section có thể có một biểu tượng, nó có tên tập tin giống như tên gọi của section (xem hình dưới đây).

Mainplist specifies sections icons are in separate image filesMainplist specifies sections icons are in separate image filesMainplist specifies sections icons are in separate image files

Bạn có thể thêm bao nhiêu section mà bạn muốn: section mới sẽ được thêm vào cuối danh sách, và danh sách menu chính sẽ cuộn nếu cần thiết.

Các điểm tham quan

Một khi bạn đã đặt cấu hình các section chính, bạn có thể bắt đầu thêm địa điểm tham quan. Đối với mỗi section, appyMap sẽ tìm kiếm một tập tin Plist với tên tập tin giống với tên mà bạn chọn cho section. Do đó ví dụ như: nếu bạn có một section gọi là "Houses", appyMap sẽ tìm kiếm một tập tin gọi là Houses.plist, và nó sẽ đọc địa điểm tham quan cho section Houses từ tập tin đó.

Vị trí của các tập tin có các trường sau đây:

  1. Id
  2. name
  3. description
  4. latitude
  5. latitude
  6. tel (không bắt buộc)
  7. time (không bắt buộc)

Đối với vị trí của hình thu nhỏ, ứng dụng sẽ tìm kiếm một hình ảnh JPEG với một tên tập tin bao gồm tên section theo sau bởi id của địa điểm tham quan. Vì vậy, nếu bạn có ba địa điểm trong section Museum, bạn cần ba hình ảnh được đặt theo tên Museum1.jpg, Museum2.jpg, và Museum3.jpg.

Tuỳ chọn 2: CloudKit

Thay vì lưu trữ thông tin ứng dụng của bạn trong tập tin Plist cục bộ, bạn có thể cung cấp cho nó từ CloudKit của Apple.

Apple CloudKit dashboardApple CloudKit dashboardApple CloudKit dashboard

Nếu bạn quyết định sử dụng CloudKit, thông tin của bạn sẽ không còn lưu ở cục bộ, mà sẽ được đọc từ đám mây. Điều này cho phép bạn chỉnh sửa cơ sở dữ liệu địa điểm tham quan mà không cần phải phát hành các phiên bản mới của ứng dụng. Tuy nhiên, ứng dụng sẽ yêu cầu một kết nối Internet để hiển thị các điểm tham quan.

Sử dụng CloudKit

Sử dụng tài khoản Apple Developer của bạn, bạn có thể sử dụng back-end của CloudKit để quản lý dữ liệu của bạn. Nếu bạn có một tài khoản Apple Developer, bạn có thể quản lý CloudKit với bảng điều khiển CloudKit.

Để kết nối ứng dụng của bạn với CloudKit, bạn phải đi đến trang Developer, và kích hoạt iCloud:

Enable iCloud on the Developer PageEnable iCloud on the Developer PageEnable iCloud on the Developer Page

Sau đó, trở lại để Xcode, chọn mục tiêu của bạn, và kích hoạt iCloud cho ứng dụng của bạn:

Enable iCloud for your appEnable iCloud for your appEnable iCloud for your app

Bây giờ, bạn cần phải thêm hai kiểu mẫu tin để tổ chức dữ liệu của ứng dụng. Bắt đầu với kiểu Main, để nắm giữ dữ liệu của các menu section: đi đến bảng điều khiển CloudKit của bạn, chọn Record Types, nhấp vào nút dấu cộng và đặt tên hồ sơ "Main". Bây giờ chúng ta cần phải tạo lại một cách cơ bản cấu trúc tương tự như chúng ta đã sử dụng trong tập tin Plist. Nhấp vào Add Field... và tạo ra bốn trường:

  1. name (type: String)
  2. pic (type: Asset)
  3. order (type: Int(64))
  4. isFree (type: Int(64))

Điều này hơi khác một chút so với định dạng Plist, bởi vì chúng ta đã tạo ra một trường phụ được gọi là "pic", sẽ nắm giữ các biểu tượng cho mỗi section.

Cuối cùng, bạn sẽ có một bảng như thế này:

appyMaps Main table in CloudKitappyMaps Main table in CloudKitappyMaps Main table in CloudKit

Tiếp theo, bạn phải tạo ra một loại bản ghi cho mỗi phần mà ứng dụng của bạn sẽ hiển thị. Vì vậy, ví dụ, nếu bạn có hai section (chúng ta hãy gọi là "Houses" và "Monuments") cho ứng dụng của bạn, bạn sẽ tạo ra hai bản ghi tương ứng, đặt tên là "Houses" và "Monuments" (như trong ảnh chụp màn hình ở trên).

Để tạo ra một kiểu bản ghi khác, hãy bắt đầu bằng cách nhấp vào các nút dấu +. Đặt cho bản ghi một cái tên giống với section của bạn (trong trường hợp này "Houses"):

Bây giờ hãy nhấp vào Add Field... và tạo ra các trường như bạn đã làm trước đó. Lần này, các trường mà bạn phải tạo ra như sau:

  1. name (type: String)
  2. description (type: String)
  3. pic (type: Asset)
  4. coordinates (type: Location)
  5. tel (type: String)
  6. time (type: String)
  7. order (type: Int64)

Lưu ý rằng tel (số điện thoại) và các trường time là không bắt buộc. Nếu có chúng, thì chúng sẽ hiển thị trong màn hình chi tiết, nếu không thì chúng ẩn.

Gợi ý: Một cách nhanh chóng để có được tọa độ của bản đồ

Nhập vào địa điểm cho appyMap liên quan đến việc tìm kiếm rất nhiều vĩ độ và kinh độ. Để nhanh chóng tìm kiếm vĩ độ và kinh độ của một vị trí nhất định, chỉ cần tìm nó trong Google Maps, nhấp chuột phải vào điểm tham quan và lựa chọn What's here? Việc này sẽ trả về tất cả các dữ liệu về địa điểm, cùng với vĩ độ và kinh độ của nó. Bạn có thể chỉ cần sao chép và dán những giá trị này vào các trường latlon trong CloudKit, hoặc tập tin Plist của bạn.

Getting map coordinates from Google mapsGetting map coordinates from Google mapsGetting map coordinates from Google maps

Kết luận

Trong hướng dẫn này, bạn đã biết cách làm thế nào để bắt đầu với một ứng dụng về định vị mới bằng cách sử dụng mẫu ứng dụng appyMap từ CodeCanyon. Bạn đã học được các cách thức hoạt động của mẫu, và làm thế nào để thêm dữ liệu vị trí của bạn vào mẫu.

Nếu bạn tải mẫu template về, bạn sẽ nhận được rất nhiều thông tin về cách làm thế nào để thiết lập và tùy biến ứng dụng của bạn. appyMap đi kèm với một hướng dẫn chi tiết sẽ hướng dẫn bạn qua tất cả các bước của cấu hình và tùy biến mẫu đúng cách.

Nhưng mà nó rất dễ dàng. Để xây dựng một ứng dụng bằng cách sử dụng một mẫu template, chỉ cần nhập dữ liệu của bạn, tùy chỉnh màu sắc, phông chữ và logo... và biên dịch! Ứng dụng của bạn có thể đã sẵn sàng trong chỉ một vài giờ.

Hiện có hàng trăm mẫu ứng dụng iOS khác trên CodeCanyon. Hãy kiểm tra chúng ngay! Bạn có thể tiết kiệm cho mình rất nhiều giờ làm việc.

Chúc may mắn trong ứng dụng tiếp theo của bạn! Và trong lúc đó, hãy kiểm tra một số hướng dẫn khác về ứng dụng iOS của chúng tôi trên Envato Tuts+.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.