eka-foundation / jelpi Goto Github PK

There is no way to get back to home page once you click that you need something.

Click on "I need medicine" realize that you miss-clicked and you actually need food, but then there is no way to get back to previous page to make selection

List of TODOs for the hackday

• Tech Spec by Arun
• Review Tech Spec by All
• Facebook - Setup Test App by Miika Hakala
• Integrate current HTML/CSS into AdonisJS by McSneaky
• Facebook - Check how to connect 2 users with each other on Messenger by Miika Hakala/Arun
• UI - Work with Mikko Kotila to figure out Safety and About by Henri (also check Menu changes)
• UI - Split single view into pages + add hamburger nav menu by Vartiainen
• UI - Combine text + img of logo into SVG by Vartiainen
• CI setup by McSneaky
• Server setup by Mikko Kotila
• UI - 'Can Help' page layout design by Henri
• UI - 'Can Help' page layout implementation by Vartiainen
• SQLite DB setup by McSneaky
• REST API Handlers by McSneaky
• Backend - take settings from config file by McSneaky
• UI - 'Need help' page disclaimer + FB Auth design
• UI - 'Need help' page geolocation by Vartiainen
• UI - 'Need help' page FB auth implementation
• UI - 'Need help' page javascript + xhr request
• UI - 'Can help' page FB auth
• UI - 'Can Help' page javascript + xhr request
• UI - Take all language strings from configuration file
• UI - Take all configurable style from configuration file

Currently it seems to be handled like SPA (single page application), but do we want it to be like this?
Perhaps SSR (server side rendered) is better option for us

SPA has some major drawbacks:

• Relies heavily on JS, in case JS fails whole page fails
• Hard to index for search engines
• Higher change of some browser specific thing failing or user has JS disabled altogether
• Slower initial page load

SPA upsides:

• Page is as fast as client computer after first load
• Less load on server
• Easier to make it work offline

slogans

"use protective gear"
"minimize surface contact"
"keep physical distance with people"
"minimize leaving home"
"know your facts"
"quarantine immediately if in doubt"

illustrations

All illustrations are line drawings. In the style this creator.

"use protective gear" is a person where breathing mask, protective goggles and gloves are highlighted. There is a label leading to the mask that says "N95"

"minimize surface contact" is a hand and some kind of surface that highlights that the two should not touch. The hand has the same glove as in the first illustration. There is label pointing to surface that says "virus can stay for several days"

"keep physical distance with people" is two people where they are both smiling and are roughly 2 meter apart, and there is indication that the distance is 2 meters.

"minimize leaving home" is a person who looks like they are enjoying their time in their home. Maybe relaxing on the sofa with a smile on their face.

"know your facts" is a person who has just clearly understood something, maybe with speech bubble and the exclamation mark or similar.

"quarantine immediately if in doubt" (QUESTION: how should this be?)

Frontend

Overview

1. Target: mobile browser
2. Four Pages: Need Help, Can Help, Safety, About
3. Initial landing page is Need Help with reachable subtle link to Can Help (or nav menu to other pgs)
4. Configurable elements:

all language strings (should be internationalizable by just pasting in the different language text)
logo (image)
bgcolor, fontcolor, font face, font sizing of category blocks (may need more settings for other text)
active_time_period to show requests for in the 'Can Help' page e.g. '24h' or '72h' or '168h'
domain on which the frontend will be hosted (required for CORS in backend)

5. Configuration file will be in JSON format and have all settings in 4 above other than the logo image which is a standalone app
6. All frontend pages are stateless, if any requester/helper comes back, they see a fresh page

Need Help

1. Current design is a base reference with 3 categories for help
2. Person needing help enters their name, html5 geolocation gets their lat/lng (no need to show to them at this point), and does 'SEND/CANCEL'
3. At this point we show disclaimer/guidance that their request will be live for limited time period (as configured) and ask them to login to FB so that helpers can connect to them via FB messenger.

Can Help

1. Primary content is a list of requests with

date/time, proximity (html5 geolocation based) in miles/km, category of help needed and 'Action' button

2. All requests within this list were those made in the active_time_period from the current time. e.g. 24 hours -- this parameter is in the configuration (and this is enforced by the backend)
3. The list has a 'Filter' dropdown on top, allowing the helper to view the list with filter by category of help needed
4. When person who can help clicks on action button, they are asked to do a checkbox 'I have seen the safety instructions + legal disclaimer if any' and then they have to login via FB; on which they are connected to the requester by FB messenger
5. When a matchmaking is done (requester is connected to helper) by fb messenger, we remove the original request from the 'Can Help' list

Backend

REST API

1. Submit request (from Need Help page):

Method - POST
Parameters - name, category, lat, lng, facebook_id
Response status code - 201 (success) / 400 (bad request)
Response text - N/A
Action at backend - add the request to the list (unless there is already a request from same fbid within active_time_period from current time

2. Fetch requests (from Can Help page):

Method - GET
Parameters - N/A
Response status code - 200 (success) - no failure can happen within API
Response text - json with list of requests, no older than active_time_period {datetime, lat, lng, category}
Action at backend - none

3. Fulfil requests (from Can Help page):

Method - PUT
Parameters - N/A
Response status code - 201 (success) / 400 (bad request)
Response text - N/A
Action at backend - remove the request from the list

Storage

1. Expected - SQLite file based storage
2. DB Tables - Just one table help_requests
3. Row format - autoid, datetime, lat, lng, category, fbid (numeric id), name

CORS Configuration
Must be configurable

Facebook interconnectivity

1. OAuth is built into AdonisJS. We need to retrieve the profile_id (numeric) of the user
2. FB messenger to connect 2 users -- we redirect to the following link in the helper's browser https://m.me/<USERNEEDSHELPPROFILEID>

Initial stage (week 1)

Givers see a list that is sorted by proximity and make their pick from there

Second stage (week 2)

Givers get recommendations based on settings (e.g. I can get groceries for people), so same like the initial stage, but now the sorted list is filtered down based on presets.

Third stage (later)

A matching algorithm suggests a match in real-time (same like uber drivers compete who is fastest is accepting the ask)