DELAWE is an app that helps restaurants manage their delivery team. It includes a Rails API and a mobile app built using React Native.
Because DELAWE uses React Native, running it in your own computer should be pretty straight forward.
- Follow the instructions here under "Building Projects with Native Code" and "iOS" to install the CLI.
- Open Terminal,
cd
into the repository's root and run the following:
$ cd app/
$ yarn
$ yarn run lib-config
$ react-native run-ios
- That's it! A simulator should open and start running the app.
Since the API is on the cloud, there is no need to run a Rails server locally. If that's what you want to do, you can check its repository for instructions and you should have used the --recurse-submodules
flag when cloning this project. You will also have to edit the links in app/app/lib/actionCable.js:3
and app/app/lib/api.js:29
to point to your host.
To reproduce the screens bellow, it's better to have DELAWE running on two simulators and use this users:
Type | Username | Password |
---|---|---|
Restaurant | er@apple.com | supersecret |
Courier | jb@crosby.com | supersecret |
If you are having trouble with Xcode or a red screen is showing, check the Troubleshooting section.
DELAWE has two types of users: restaurants and couriers. We are going to follow the lifecycle of an order through their cellphones.
First, let's login as a restaurant. This screen should show up.
Here the restaurant can see the locations of its store, currently open orders and couriers. These are all updated in real-time, so if a courier is driving, the store will see his marker moving.
Let's use another simulator to login as a courier. This is his home screen:
He can see his current location and his assigned orders. Once he logs in, DELAWE automatically starts sending his location to the API. Although, since it's using Web Sockets and callbacks for when the user position changes, this won't have too great an impact on the battery.
Now let's create our first order! We can click on the button at the bottom of the screen that says "REQUEST FOR PICKUP" and inform the value and address for the delivery and select a courier. The couriers are shown sorted by their current distance and time since their last pickup. The courier that is shown at a higher position is, therefore, suggested as a better option.
Here is where DELAWE makes some magic. Because it's using Rails' ActionCable to implement Web Sockets, the new order has been automatically pushed to the courier's cellphone! On the courier simulator, we can see a notification show up and, if the address was inputed correctly, the order appear in his map.
Once the courier arrives at the restaurant and collects the items, he can click the order and mark it as picked up. He can then get direction to the client's address, like so:
After arriving at the correct address, the courier can go back to DELAWE and mark the order as completed. That is going to send a notification for the restaurant and transfer to the courier the credits for the delivery.
And here is the notification received by the store:
If you press the menu button on the top left corner, or swipe from left, you can see a lateral menu with a lot more screens. Most of them were made for an earlier version of DELAWE and haven't been updated yet. The user's wallet, for example, doesn't recognize the values of the transactions anymore, and the orders history is just a list with no functionality whatsoever for editing its items. All those screens will be working in the future, but for now only the home, login and settings pages are completed.
Some features to help the courier access his current delivery more easily are also on the road map.
Another thing that is missing is a Web client for managing the deliveries from a computer. That is coming later this year and is going use React to interface with the API.
As the app is running on a simulator, Xcode doesn't usually complain about certificates and signing accounts. If it does, however, you can do this from the project root:
$ open app/ios/app.xcworkspace
That should open the project on Xcode. You can then use the "Project navigator" on the left and click on the first item that appears, a folder with name app
and a blue icon. From there, you can go to the "General" tab and edit the "Signing" section.
If, after logging in, a red screen is appearing, that can be the effect of the discrepancy between the used version of React Native and the one required by some of the project's dependencies. A shell script is included in the project to fix the lines that cause the error. If you ran yarn run lib-config
after cloning the project, that should have run the script. If it hasn't, you will need to make sure the file is executable and then run it. From the project's root, do the following:
$ cd app
$ chmod +x fix_dependencies.sh
$ ./fix_dependencies.sh
Don't worry about running this more than once, it will only replace the lines that match exactly the ones that cause errors.
It's free! See the LICENSE file for details.