Open rivernews opened 4 years ago
The original concept can be viewed here.
Now we want a more concrete user flow, step by step, so that development can be easier.
This app's main goal is to achieve multi-destination search, and trip-planning that supports the search. Overall, it wants to solve the problem that people want to access several services w/ some ambiguity or flexibility where there're many candidate places for each service; second, people want to travel to these places in a reasonable, least-cost way.
For example, I want to travel to an attraction by driving there. But as soon as I navigate and "drive" in front of the site, I found I need to find a place to park first. In this case, you can just search for parking instead as the destination. But also, if we can say hey besides searching for the attraction location, also show me parking lot nearby. This makes it clearer how your actual trip will be like.
Another example. I have several TODOs on my calendar. I want to 1. go to the drug store to get some medecine, 2. I want to print some documents so places like Fedex or UPS would do that, 3. I want to return my Amazon order so must find a Kohl (a chain department store) 4. I want to get some food nearby. Each service is not a fixed location, like for Kohl, any branch store will do. This kind of trip, if using Google Map, you'll find it hard to carry out and plan in advance. You end up searching for perhaps 1-2 items from the list. Soon it turns out the 3rd item on our TODO list is just too far away from what we've ended up with so far. You decided to just do it in other day.
Of course, the above might be a complex example, and you might not have this use case as often. But this should be more common when you're not able to go out very frequently, or your time is precious. Or the destination often takes a lot to get there from where you live. Every time you go out and drive has a large time penalty. Then you may find this app more useful.
Next, let's define a complete user flow, which can be used right away by development.
Allow multiple inputs. Ideally this can be a dynamic form, where a single input field displays; as soon as user start typing in it, a second input field shows up. Then third, etc.
But at the very least, it can be a single input field that is able to parse multiple keyword, by defining some delimiter, like ,
, or |
, if that does not collide with most of the keywords.
Triggering search - this is also easy to solve. Ideally we can have a button, or an icon button. But at the very least, typing a "enter" in the keyboard should start the search.
How would the search result data look like? We imagine it's a list of location objects. Since we have multiple keywords (destination), we will have several collections of locations. Nothing too complicated. But one thing we might need to keep in mind is handling pagination. Seems like even the native google map app on iOS will not do any pagination given a keyword, incomplete or complete. It just show the first 8-10 results. You will have to keep typing your keyword to be more specific, and hopefully the result list will get narrow down. So I guess we'll just not worry about pagination.
Finally, how do we display the result? My first though is we need to distinguish which keyword does a pin belongs to. As a quick idea, each keyword can be assigned a color, then its search result's pins will all use that color. You end up with many pins on the map w/ different color.
There're some extra user experience details we have to handle here. We have to keep our keyword displayed, or at least let user be able to summon them easily - also reminding users which keyword does a color represents. Help them establish that color mapping.
Phases:
How hard is it to implement dynamic form for keyword inputs?
How hard it is to implement the layout (and possibly animation) for dynamic form?
We can also use existing themed component library. Expo has a page introducing several popular ones
React Native official doc also has a list of officially supported components. Not sure how their modal works like since they didn't provide an image for modal.
📣 How hard it is to implement the "delete / cancel" icon at the top right of keyword box?
📢 How hard it is to implement the drag and drop handler at right?
How hard it is to implement the timing & show the "search this area" floating button when users scroll to area out of the existing search result area?
🚀 How hard it is to implement force touch / 3d touch (in order to toggle selection)? Is it possible to do in React Native API?
onLongPress
callback function.📣 How hard it is to show the overlaying badge w/ number on the selected pins?
📣How hard it is to implement the layout of the destination panel, after user selected some destination? Ideally we can draw that dashed line at the left and go through each destination pin's icons. Also great to show the ETA as a tiny text somewhere above the first destination pin icon.
⭐️ Is it possible to generate a query / url, and let user open in Google Map such that everything is pre-filled in the "show direction" state, where user can change different kinds of way like drive/bus/walk/bike, and ready for user to tap the "start" button to start navigate. Is this possible for Google Map API / "open in Google Map"?
Preliminary Research: the technologies, the platforms
Basics
Research on Map related RN components
How to publish app
[x] Running on iOS simulator
[x] Publishing
How to navigate between screens (route)