Merge branch 'master' of https://github.com/gick/albiziapp

README.md

-# Albiziapp
-A gamified mobile web app for mapping trees that integrates with OpenStreetMap.
+# Welcome to Albiziapp
 
+## What's ?
 
-Instance for French users [Albiziapp](https://albiziapp.reveries-project.fr/).
+A **collaborative**, **gamified**, **tree mapping** web application.
 
+## Why ?
 
-International instance [Albiziapp](https://pre-prod.albiziapp.reveries-project.fr/)
+![](.gitbook/assets/image%20%282%29.png)
 
+## Screenshots!!!
 
-Project information [Info](https://info.albiziapp.reveries-project.fr)
+![Mission page \(game\)](.gitbook/assets/image%20%284%29.png)
+
+![Map view \(sattelite\)](.gitbook/assets/image%20%281%29.png)
+
+
+
+![](.gitbook/assets/image%20%286%29.png)
 

SUMMARY.md

+# Table of contents
+
+* [Welcome to Albiziapp](README.md)
+* [User guide](user-guide/README.md)
+  * [TODO](user-guide/untitled.md)
+  * [Botany](user-guide/botany.md)
+
+## Contributors guide
+
+* [Recommendations](contributors-guide/untitled.md)
+* [Getting started](contributors-guide/getting-started/README.md)
+  * [Top level : Navigation components](contributors-guide/getting-started/front-end-structure.md)
+  * [Pages and component](contributors-guide/getting-started/pages-and-component.md)
+* [Adding/changing a page](contributors-guide/adding-changing-a-page.md)
+
+## Administrators guide
+
+* [Untitled](administrators-guide/untitled.md)
+

administrators-guide/untitled.md

+# Untitled
+

contributors-guide/adding-changing-a-page.md

+# Adding/changing a page
+

contributors-guide/getting-started/README.md

+# Getting started
+
+### Setup your dev environment
+
+* Install node \([https://nodejs.org/en/download/](https://nodejs.org/en/download/)\)
+* Install vue/@cli and pm2
+
+```
+$ npm i -g vue/@cli
+$ npm i -g pm2
+```
+
+{% hint style="info" %}
+ You may have to sudo.
+{% endhint %}
+
+* Install mongo \([https://docs.mongodb.com/manual/installation/\#mongodb-community-edition-installation-tutorials](https://docs.mongodb.com/manual/installation/#mongodb-community-edition-installation-tutorials)\)
+
+Test if all is OK
+
+{% code title="$ sudo service mongod start" %}
+```bash
+mongo>
+```
+{% endcode %}
+
+```bash
+$ vue-ui
+//triggers a browser tool
+```
+
+### Get the last version of Albiziapp front end
+
+```bash
+$ git clone https://github.com/gick/albiziapp.git
+$ cd albiziapp
+$ npm install
+$ npm run serve
+```
+
+If all goes well you should be directed to a page like this :
+
+![](../../.gitbook/assets/image%20%289%29.png)
+
+
+
+
+
+### Get the last version of Albiziapp back-end
+
+```bash
+$ git clone https://github.com/REVERIES-project/reveries-osm-data.git
+$ cd reveries-osm-data
+$ npm install
+```
+
+### Get Vue DevTools
+
+Vue DevTools is an extension for Chromium/Chrome. **It is very very very useful**. If you don't like Chromium, code your own browser that accepts Vue DevTools
+
+[https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)
+
+ 
+

contributors-guide/getting-started/front-end-structure.md

+# Top level : Navigation components
+
+### Navigation patterns
+
+Albiziapp follows the pattern of OnsenUI Framework \([https://onsen.io/v2/api/vue/](https://onsen.io/v2/api/vue/)\). 
+
+{% hint style="info" %}
+Pages are either root \(in navbar\), or stacked \(on top of a root page, or a stacked page\)
+{% endhint %}
+
+![A root page \(Map\)](../../.gitbook/assets/image%20%283%29.png)
+
+![A stacked page \(from root page\)](../../.gitbook/assets/image.png)
+
+{% hint style="info" %}
+All stacked page have a back button \(blue arrow\)
+{% endhint %}
+
+### Navigation components
+
+These navigation pattern are based on two top-level components.  
+
+```javascript
+src/AppTabBar.vue
+src/AppNavigator.vue
+```
+
+The former describe the state of the root. The later manages the push/pop operations associated with the stack pattern.
+
+#### The tab bar \(simplified\)
+
+```javascript
+    <v-ons-tabbar
+      position="auto"
+      :tabs="tabs"
+    ></v-ons-tabbar>
+    
+computed: {
+    tabs() {
+      var tab = 
+      [
+        {
+          label: this.$t('map'),
+          icon: "ion-map",
+          active: false,
+          page: Map,
+          theme: red
+        },
+        {
+          label: this.$t('mission'),
+          icon: "ion-home",
+          page: Home,
+          theme: red
+        },       
+        {
+          label: this.$t('records'),
+          icon: "ion-edit",
+          page: Releve,
+          theme: purple,
+        },
+        {
+          label: "Folia",
+          icon: "ion-search",
+          page: Folia,
+
+          theme: purple
+        }
+      ]
+      return tab
+    },
+
+
+```
+
+The v-ons-tabbar component has a **tabs property,** set to **val** below. 
+
+```javascript
+    <v-ons-tabbar
+      position="auto"
+      :tabs="val"
+    ></v-ons-tabbar>
+
+```
+
+
+
+In VueJS, a property starting with a **colon** is **bound reactively** to the local context. Here the **tabs property** take the **tabs** value. This value is the return of the tabs\(\) function.
+
+{% hint style="info" %}
+Change labels or icon in tabs\(\) declaration.
+
+Remove an element of the tabs array, what happens?
+{% endhint %}
+
+Time to use Vue Dev Tools. In your beloved Chrome \(on Albiziapp tab\) Ctrl-Maj-J will launch Chrome dev tools. 
+
+From there access Vue Dev Tools. 
+
+{% hint style="info" %}
+The first tab of Vue Dev Tools is for watching component
+{% endhint %}
+
+ 
+
+{% hint style="info" %}
+Use filter option to quickly access a given component
+{% endhint %}
+
+Here
+
+![](../../.gitbook/assets/image%20%285%29.png)
+
+#### The navigator component
+
+The navigator component is in charge of the stack of sub-pages. Whenever the user enter a subpage \(ex. consult a record\), or a sub-sub-page \(ex. modify a record\) ; the navigator updates the stack pages accordingly.
+
+```javascript
+AppNavigator.vue
+
+<template>
+  <v-ons-navigator swipeable swipe-target-width="50px"
+    :page-stack="$store.state.navigator.stack"
+    :pop-page="storePop"
+    :options="{animation:'slide-ios'}"
+    :class="{ 'border-radius': borderRadius }"
+  ></v-ons-navigator>
+</template>
+
+```
+
+Let's consider this piece of code. We notice 2 main property associated to v-ons-navigator :
+
+* page-stack : **preceded by a comma,** its value is **bound** to the current state of the stack \(an array\)
+* pop-page : **preceded by a comma,** its value is **bound** to a function \(storePop\), this function simply remove the last element of the stack
+
+
+
+
+

contributors-guide/getting-started/pages-and-component.md

+# Pages and component
+

contributors-guide/pages-and-component.md

+# Pages and component
+

contributors-guide/untitled.md

+---
+description: To contribute well
+---
+
+# Recommendations
+
+## Understanding of VueJS
+
+Albiziapp is almost only based on VueJS. Either a basic understanding of Vue or a solid JS background is recommended.
+
+{% hint style="info" %}
+ If you know React/Angular/Polymer, you're good.
+{% endhint %}
+
+### Basic knowledge NoSQL
+
+ All data is stored in NoSQL \(MongoDB\). It's a very convenient format for the data we deal with \(Geographical\). 
+
+
+
+
+

user-guide/README.md

+# User guide
+