Kaka Travel (Travel visualization)

Project introduction

Mobile webApp for travel record, route planning, data visualization and analysis click here to view the project

Project screenshots

Private travel

Public transport

History list

My information

Technology stack

  • Front end: mobile terminal, Vue family bucket, Mand component library, echarts.js, Scss

  • Back end: Node, Express framework, AMap API

  • Database: Mysql

Function module

Personal travel

If the user is not sure about the journey, destination and other information, select the travel tool and click Start. The system monitors the user’s mobile phone position in real time to obtain WGS84 latitude and longitude coordinates (W3C HTML5 Geolocation standard). At the end of the trip, the travel information is recorded and the latitude and longitude coordinates are converted into GCJ-02 coordinate system. Amap provides three-party API to map travel trajectories.

Public transport

The user determines the starting point, destination and means of transportation, and chooses public transportation. The user enters the location keyword, selects the appropriate starting/destination location, chooses the means of transportation, plans the travel route, selects a route, and then clicks save to upload the travel record

History list

View the history of all trips in chronological order. You can view the detailed information, itinerary and route planning of trips

My Message (unfinished)

View my detailed information, travel trend line chart obtained through travel data analysis, data analysis chart related to travel data, other functions are not written

The project build

The front end

The front end is developed on the basis of VUE-CLI3. On this basis, several modifications are made to the project according to the project requirements. The front end code is in view/ folder

  • Mobile terminal adaptation: Resolution adaptation scheme of Mobile terminal has been used in mobile terminal development before. In this project, webpack is used to configure the resolution of mobile terminal according to “How to Use VW to Achieve Mobile Terminal Adaptation in Vue Project” of Desert.

  • Request interceptor: In view/ SRC/Request /, the Interceptors provided by AXIos add corresponding operations to all Ajax requests and responses, such as request header addition, token addition, and response background error status code recognition and error reporting. Simple encapsulation of the next AXIOS request, mainly get, POST two kinds.

  • Navigation guard: In view/ SRC/Router /, the global navigation guard is implemented. Users who are not logged in can only access the project login page.

  • Utility classes: In View/SRC /utils/, the common enumeration values, global component registration, common class encapsulation and other functions are modular encapsulation.

  • CSS Style: In View/SRC /style/, global public style, initial style.

  • SVG components: In View/SRC/ICONS /, encapsulate the SVG presentation components for displaying small ICONS, and save them in SVG.

  • Modularization: Encapsulate routes and VUEX in a modular manner.

  • Map: All map, geographic information, track and route planning functions are provided by the third-party API of Amap

The back-end

  • useNodetheexpressFrame, connectionMysqlDatabase, do data interface development, data add, delete, change and simple encapsulation.

summary

Jane junction project

  • Difficulty: Easy
  • Development duration: preliminary research, one week of coding
  • Keywords: mobile terminal, travel, visualization, AMAP, Echart chart

Process to summarize

  • Thought output: Due to my internship experience in Didi Chuxing, I plan to make products related to the travel platform and front-end visualization.

  • Demand research: combined with travel visualization keywords to conduct demand analysis, investigated Yuebuhuan, Yuebuhuan, Didi Chuxing, Baidu Map and Autonavi Map to determine several main functions

    1. Real-time positioning and mapping of travel trajectory (Running laps for joy, completed)

    2. Route planning, route planning and route drawing (Baidu Map, completed)

    3. Online car-hailing (Didi Chuxing, unfinished)

    4. Visual analysis, visual analysis of travel data (completed)

  • Technical research:

    1. Select the real-time monitoring function of physical location provided by HTML5 Geolocation to obtain the longitude and latitude coordinates of WGS84

    2. Select the third-party API of Amap to provide map, geographic location, trajectory drawing, route planning and other functions

    3. Select to develop mobile terminal project and use Didi Mand as mobile terminal UI component library

    4. Select Node as the server, Express as the back-end framework, Mysql as the database

The difficulties in summary

The most difficult thing is to start a product from scratch. Although the project is not difficult, it takes a lot of time to do product research, technical research and project construction in the early stage. Compared with the finished product, I have a lot of different experience

Making source https://github.com/wwenj/tripRecord

supplement

The database table has been uploaded. You can modify the connection information of the database in the Server/Router. After connecting to the database, you can run the personal server

Note: Since I will graduate soon, this is just a temporary project for graduation design, I didn’t expect there would be so many stars, time is limited, mainly to achieve core functions, the product is still rough, I will find time to improve, thank you

Update 2019.11.15

Project has been launched, can click demo.wwenj.com/tripRecord experience

Once the project is uploaded to the server, you just clone the project, run the front-end code, and the interface accesses the online server. If you want to access to their local service, in the view/SRC/request/HTTP js change request for their IP front-end, connect table to import their own database, thank you.

Because the browser side positioning itself is limited by many factors, the success rate of positioning is not very high, it is likely to have no permission, positioning failure, you can try to open the permission or change the browser.