Xin chào các bạn, hôm nay mình sẽ hướng dẫn các bạn xây dựng một ứng dụng rất "cool" cho iOS và Android mà không cần phải biết bất cứ ngôn ngữ lập trình nào.
Ứng dụng "nhật ký hành trình NCOVID" sẽ giúp các bạn lưu lại thời gian, địa điểm và nội dung của tất cả các cuộc gặp mặt trong ngày và sau đó sẽ hiển thị đầy đủ thông tin ở trang Home, ngoài ra ứng dụng sẽ lưu lại thông tin dưới dạng địa điểm được "marked" trên bản đồ
Mình làm bài hướng dẫn này với tinh thần là các bạn đã xem những video hướng dẫn trước của mình, và đã biết căn bản cách sử dụng Thunkable (các bạn đăng ký tài khoản thunkable hoàn toàn miễn phí ở đây), nếu như các bạn chưa làm quen với Thunkable thì các bạn hãy xem lại những video trước:
Trước tiên các bạn hãy chuẩn bị một database để chúng ta có thể lưu trữ dữ liệu.
Trong trường hợp này mình sẽ xài Airtable, các bạn có thể vào Airtable.com để tạo tài khoản và tạo cho mình một BASE và 1 Table nhé. Sau khi tạo xong các bạn hãy note lại APIKEY, BASEID và Table Name, để chúng ta có thể dùng những thông tin này để cấu hình cho Thunkable:
Airtable hoạt động giống như excel nhưng nó có "lai" với database nên nó rất linh động để các bạn lưu thông tin, kể cả hình ảnh hay bất cứ dạng attachment nào,
và đặc biệt Airtable hỗ trợ rất nhiều kiểu view, nếu các bạn có thời gian thì hãy tìm hiểu kỹ hơn nhé. Và quan trọng hơn hết Airtable miễn phí cho các base dưới 1000 dòng.
Và sau đây là Table mình tạo ra cho bài hướng dẫn này, bao gồm các field sau đây:
Num: số thứ tự hàng
Notes: nội dung ghi chú
Date_time: thời gian thực khi tạo một ghi chú
Long: kinh độ tại địa điểm tạo một ghi chú
Lat: Vĩ độ tại điạ điểm tạo một ghi chú
Khi có toạ độ và kinh độ thì chúng ta sẽ dễ dàng xác định được vị trí trên bản đồ
Chúng ta sẽ bắt đầu với trang New Notes trước, hình bên dưới là phần thiết kế UI:
Ở trang này mình sẽ xài các component sau:
Alert: sẽ popup lên 1 thông báo, khi có 1 sự kiện xảy ra, trong trường hợp này mình dùng Alert để warning cho user là app này cần xài đến GPS. Nếu thiết bị user chưa mở GPS thì nó sẽ thông báo như sau:
Location_sensor: sẽ sử dụng GPS để lấy toạ độ vị trí của bạn (long/lat).
Và sau đây là toàn bộ phần "code" của trang chức năng New Note:
Block 1: Khi trang New Notes được mở lên: ứng dụng sẽ lấy toạ độ hiện tại của điện thoại để gán vào biến "app current_lat" và "app current_long".
Nếu như app không lấy được toạ độ thì sẽ hiển thị thông báo như đã cấu hình ở trên và sau đó sẽ chuyển lại trang home.
Block 2: Khi nút Submit được click vào, thì ứng dụng sẽ gọi đến airtable và tạo ra 1 hàng mới trong bảng Table Name Diary với các nội dung sau:
Date_Time: sẽ lấy ngày và giờ thiện tại ở Date_Input1 và Time_Input1, cách nhau bởi dấu (,)
Notes: sẽ lấy nội dung từ Text_input_note
Lat: sẽ lấy giá trị từ biến app current_lat
Long: lấy giá trị từ biến app current_long
Nếu như việc tạo record mới này không có gì sai sót, ứng dụng sẽ hiện ra thông báo là "Bạn đã ghi chú thành công".
Nếu có bất kỳ lỗi nào xảy ra trong quá trình ghi dữ liệu thì ứng dụng sẽ thông báo "Vui lòng kiểm tra internet của ĐT và thử lại"
Và sau 3 giây, ứng dụng sẽ tự động trở về trang Home.
Vậy là xong phần dễ nhất của ứng dụng này.
Bây giờ chúng ta sẽ bắt tay vào thiết kế trang Home:
Về UI thì mình chỉ thiết kế 1 cột để list tất cả những record có trong Table Diary và thêm 2 nút để chuyển tới trang New Note và trang Map.
Button New được click vào thì ứng dụng sẽ mở ra trang New Note
Button Map được click vào thì ứng dụng sẽ mở ra trang Map
Khi trang Home được khởi tạo (được mở lên) thí ứng dụng sẽ khởi tạo 2 mảng app_list_date_time và app_list_note (list - mình dùng từ mảng để các bạn cảm thấy quen thuộc trong ngôn ngữ lập trình ^^).
Sau đó ứng dụng sẽ gọi tới Airtable và đọc hết tất cả các records có trong Table Diary và lưu giữ trong array app_rows.
Sau đó chúng ta sẽ duyệt mảng này từ trên xuống dưới và chọn ra nội dung ở cột Date_Time trong Table Diary và bỏ vào mảng "app_list_date_time", tương tự chúng ta copy nội dung ở cột Notes và bỏ vào mảng "app_list_note".
Vậy là chúng ta đã có 2 mảng chứa nội dung của Date_Time và Notes.
Sau đó chúng ta duyệt 2 mảng này từ dưới lên trên (vì record cuối cùng là record có nội dung mới nhất và chúng ta muốn hiển thị nội dung mới nhất lên trên cùng)
Chúng ta sẽ hiển thị Date_Time với màu đỏ, và nội dung Notes với màu xanh
Vậy là chúng ta đã cấu hình xong trang Home
Cuối cùng chúng ta sẽ giải quyết trang Map, trang Map sẽ hiển thị tất cả các vị trí mà chúng ta đã đi qua.
Với UI trang Map chúng ta chỉ xài 1 component Map và 1 button mà thôi.
Và sau đây là toàn bộ "code" của trang Map
Khi component Map đã sẵn sàng (nghĩa là bản đồ đã hiển thị trên màn hình điện thoại của các bạn) thì GPS sẽ lấy toạ độ vị trí hiện tại của điện thoại, để cân chỉnh cho vị trí hiện tại sẽ nằm chính giữa bản đồ.
Ứng dụng sẽ gọi Airtable để lấy vị trí của tất cả các record và maximum là 1000 record (vì airtable chỉ miễn phí 1000 record/base, nên mình muốn giới hạn lại quá trình đọc dữ liệu).
Sau đó từ vị trí của từng record ứng dụng sẽ đọc các giá trị: Lat/Long/Date_Time/Notes trong Table Diary và gán cho giá trị của Marker vừa được tạo ra. Bên cạnh Long/ Lat thì Title của marker sẽ ứng với nội dung Date_Time, tương tự với Description của Marker sẽ ứng với nội dung Notes.
Vậy là các bạn đã phát triển được 1 ứng dụng tương đối phức tạp, có sử dụng GPS và bản đồ thời gian thực ^^.
Các bạn có thể download project dưới đây và tha hồ chỉnh sửa nhé.
Nhớ xem video để biết thêm chi tiết về project,
Cảm ơn các bạn và hẹn các bạn ở bài sau.
Kommentare