Giter Club home page Giter Club logo

mapswipe.github.io's Introduction

MapSwipe

The badges refer to the dev branch

Syntax & Linting Android build iOS build

Welcome to the MapSwipe app. This is the app that is distributed through mapswipe.org as well as through the Google Play and Apple stores. It was initially developed by Doctors without Borders as part of the Missing Maps project.

Main Overview

In a nutshell, here is how MapSwipe works:

  1. Humanitarian organisations set the parameters for projects through a web-based admin interface.
  2. Our backend workers process those projects and place them on Firebase. It imports them into groups that are safe for the user to cache locally on their phone (ideally 200 tiles). This image shows an example of how that grouping algorithm works.
  3. The app fetches the projects from the /projects reference in Firebase through the JavaScript SDK (don't use http requests to Firebase) and displays them to the user.
  4. The user searches those tiles and classifies them. The results are then synced back to Firebase.
  5. When a user chooses to map an area, he or she is distributed groups of the project. On completion, the user then gets badges for the distance they've mapped.

:)

Project Diagram

The following is an outline of how data typically flows and makes it into the mobile application. Most of the action happens in one of the three areas, namely the backend scripts, Firebase database, and clients.

Main overview

This application encompasses only the mobile Android & iOS clients. The role of the clients are to retrieve project information (metadata and tile information) so that volunteers can swipe through and tag them. Then, this tagging information is synchronized back to Firebase. The backend scripts (in a separate repository) are responsible for populating and processing the project information in Firebase.

Developing, Building, and Contributing to MapSwipe

If you'd like to modify and improve MapSwipe, read through the following to get familiar with the project. Please also read CONTRIBUTING.

Technology Used

  1. The app is written entirely in React Native
  2. Firebase provides the backend database. It is protected with security rules so that users and contributors to this open source project can not cause damage.
  3. The workers on the backend are running on Google Cloud and handle pre-processing and post-processing the data.

State of the project

The app was rebuilt at the end of 2018 on a recent version of react-native, and expanded to support multiple types of tasks, as well as a variety of languages.

mapswipe.github.io's People

Contributors

arsea avatar cimm avatar ericboucher avatar hagellach37 avatar jhenshall avatar laurents avatar mathcass avatar matthias-schaub avatar pimdewitte avatar sadokx avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

mapswipe.github.io's Issues

Create "Get involved" page

5 sections:

Swipe

Links to download the app, and a short blurb

For organisations

Any org can request help with mapping a project in mapswipe.
How to request, and links to forms/resources

For developers

links to github.com/mapswipe , the API, and a short blurb on how to help

For translators

Link to https://www.transifex.com/mapswipe/mapswipe-app/ where you can volunteer to translate the app (or this website) in your own language.

For socialising: Events

Link to the events page, where people can choose to join.

Sub ticket of #17

adblockers break the data page

one of the javascript files is called analytics.js, which is a name that most/all adblockers will prevent from loading. This breaks the data page, so that the map is not shown, nor the stats at the top.

Renaming the file to something differents, maybe stats.js should be enough to fix the issue.

Use gulp to build the pages

Instead of manually updating the HTML pages, we should complete the setup initiated by Raphaelle when she rebuilt the site.

In short, it could look like this:

  • edit the "source files" (all the xxxx.shtml) locally
  • run gulp build to generate the actual HTML files under a subfolder ( say docs)
  • push the result to github, which would then deploy the site from this subfolder

The structure for this is already in the source-code branch, but we've diverged a little with the commits from 2019-10-10 in master.

To fix this:

  • setup npm on your laptop (it's installed with node.js, for OSX, get the installer from https://nodejs.org/en/download/ (use the "LTS" version)
  • in a terminal, you should be able to run npm -v and see something like 12.16.2
  • from there, go to the folder where you've cloned this git repo, and run npm install to install all the dependencies required to build the pages (the dependencies are installed in a folder called node_modules)
  • once completed, you should be able to run gulp develop in the same folder. It will start a small local webserver, and show you the url (something like http://localhost:8000) to open to see the local version of the site (if its not working, try node_modules/.bin/gulp develop)
  • change any of the .Shtml files, save, and the local site will rebuild itself automatically
  • when you're happy with the changes, run gulp build, commit your changes to the .shtml and docs/*.html files (do not commit the node_modules folder), and push to github (and open a PR)

Once that workflow is working ok, I would suggest "backporting" the changes made in master to the source-code branch, pushing everything, and create a PR to make that workflow the normal one. We'll need to modify how github deploys the site at this point, but we can figure this out later.

Create "About" page

3 main sections:

  • Jess's updated content "About"
  • People sections (the major contributors)
  • Partners section (the logos of major contributing organisations, that are currently on the main page)

Sub ticket of #17

Add key numbers to show impact

Refined scope of #20

Numbers can be got from the Mapswipe-Backend API. To be added to the homepage or data page?

Example numbers:

  • Area mapped
  • Number of users
  • Projects completed
  • Features found

The Import formular should only be accessibly to autheticated project admins

Right now the way a new project can be created in Mapwipe is by using the import.html page on the mapswipe website. Everbody can create a project there and those information will be send to Firebase. We check then on the backend if the provided submission key is valid. There exists only one valid submission key. So everybody uses the same key.
This is in multiple ways bad practise (We need to give non autheticated write access in the firebase; Their exists only one submission key for multiple project admins)

Before sending data from the import formular to firebase project admins should autheticate to firebase directly using their mapswipe account. If so they can create a project, otherwise not. Submission keys would not be needed anymore. But there needs to be information on the user wether the user is a project admin or not in firebase (firebase authetication).

For how to implement this look at how to "Easily add sign-in to your Web app with FirebaseUI":

Update the main landing page

It should show:

  • the purpose of the app
  • links to download it (play store / apple store)
  • summary of impact (numbers?)
  • the tasks currently active

sub ticket of #17

Things that could be improved

  • Maybe clean up gulp tasks and package.json, I'm pretty sure it's bloated and we really don't need everything.

  • Add JS (active menu tab, for example) and then use header.shtml as component instead of having a static one on every page

  • I think the .idea folder could be deleted now?

tile is not shown completely

on my (elderly) Lenovo Tab 5500h (8 inch) I have problems with the top and bottom border of the tiles. There is always missing some pixels, so there is a offset between two tiles. Its ok from right to left, but not from top to bottom. When I "zoom" the tile, I can see the whole one.

eins
zwei

Update the Footer

The Footer should contain:

  • Links to the App in Google Play Store and App Store
  • Links to Social Networks
  • Link to the GitHub
  • Link to MissingMaps
  • Cookie
  • Copyright

Sub-ticket of: #17

add the app to the F-droid repo

In relation to offering APK downloads ( afcd392 ) it could be good to list the app on the f-droid repo.

As a user I quite like it just as a way of listing/finding open source apps, but also as an easy way to side-load apps on amazon devices, however...

I make this suggestion casually without really knowing what's involved, but I heard from @simonpoole (vespucci developer) that it's quite a hassle actually. In which case feel free to park this as a low priority idea.

Add new project attributes to the import formular (import.html)

  • country
  • purposeMessage/thankYouMessage
  • exampleImage
  • exampleMessage

exampleImage and exampleMessage are to give show the user what to map for. Those could be displayed either at the start of mapping a group and/or when clicking the information button (top right of the screen).

purposeMessage/thankYouMessage should describe the porpuse of a project very briefly (>140 chars) and will be shown to the user from time to time when finishing a group.

Please also see at the related issue of the backend: mapswipe/python-mapswipe-workers#112

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.