co-demos/ApiViz

Visualize data coming from an API endpoint

---

PRESENTATION

Visualize data coming from an API in a CMS-like app

---

DEVELOPERS

Please check out our guidelines

---

INSTALLATION WALKTHROUGH

LOCALLY

1. clone or download the repo

2. install MongoDB locally or get the URI of the MongoDB you're using

3. go to your apiviz folder

4. use Python 2

5. install python pip and virtualenv

   sudo apt install python-pip
   sudo apt install virtualenv

6. install a virtual environment

   virtualenv venv
   source venv/bin/activate

7. install the libraries

   sudo pip install -r requirements.txt

8. if any problem occur here try to reinstall pip with

  curl https://bootstrap.pypa.io/get-pip.py | python

1. optional : update the app/config_app/config_secret_vars_example.py file with your mongoDB URI (if you're not using default mongoDB connection

2. Go to your app folder and run :

   python run_apiviz.py

3. optional : you can also use some variables in the command line :

   # get the list of available CLI options
   python run_apiviz.py --help
   
   # for example : run with a custom port number in testing mode
   pythom run_apiviz.py --port=8200 --mode=preprod

4. Install Node.js and npm

5. Build the front-end

   cd app/frontend
   npm install
   
   # build the bundle.js
   npm run build
   
   # you can also build and watch the bundle.js
   npm run watch

6. optional : if you encounter problems while building try this

   rm -rf app/frontend/node_modules
   npm install 
   npm run build

7. check in your browser at localhost:8100

PRODUCTION

1. get a server - check digital ocean, OVH, ...
2. optionnal : get a domain name : check OVH, namecheap, godaddy.... + setup DNS
3. follow (most of) these instructions
4. create a app/config_app/config_secret_vars_prod.py file based on config_secret_vars_example.py structure
5. go to app folder and create a virtual env (for instance called "venv")
6. set up the gunicorn service and NGINX accordingly
7. ... pray for all that to work as expected, and keep calm...

PRODUCTION : update code and deploy

cd /<your_app_folder>/<username>/app_apiviz
git pull origin master
cd app/frontend

# build the frontend
npm install
npm run build

# rerun app
sudo systemctl restart apiviz

---

TECHNICAL POINTS

Tech stack

• Language : Python... because ... uuh ... eeeh ... I like this language too much ?
• Backend : Flask... minimalistic Python framework
• Frontend : Bulma as CSS framework, Vue.js as JS framework, Axios for API queries (to make queries to Solidata or else), Leaflet and Vue2Leaflet for map layout
• Server : Ubuntu 18.04, NGINX, Gunicorn, hosted in Digital Ocean, domain name from OVH

---

CREDITS

ApiViz's team thanks :

• the EIG program by Etalab
• the SocialConnect project, aka "Carrefour des Innovations Sociales"
• the CGET
• the MedNum
• the Mission Société Numérique

Contacts - maintainance :

• Julien Paris (aka JPy on Github)
• Guillaume Lancrenon (aka Guillim on Github)

---

SCREENSHOTS (development)

...TO DO