GitBook: [master] 6 pages and 16 assets modified

README.md

@@ -6,15 +6,15 @@ A **collaborative**, **gamified**, **tree mapping** web application.
 
 ## Why ?
 
-![](.gitbook/assets/image%20%282%29.png)
+![](.gitbook/assets/image%20%283%29.png)
 
 ## Screenshots!!!
 
-![Mission page \(game\)](.gitbook/assets/image%20%284%29.png)
+![Mission page \(game\)](.gitbook/assets/image%20%285%29.png)
 
-![Map view \(sattelite\)](.gitbook/assets/image%20%281%29.png)
+![Map view \(sattelite\)](.gitbook/assets/image%20%282%29.png)
 
 
 
-![](.gitbook/assets/image%20%287%29.png)
+![](.gitbook/assets/image%20%2810%29.png)
 

administrators-guide/d.md

@@ -18,7 +18,7 @@ $ pm2 list
 
 gives access to the list of process managed by pm2. Here, only one :
 
-![](../.gitbook/assets/image%20%2811%29.png)
+![](../.gitbook/assets/image%20%2814%29.png)
 
 pm2 is very convenient to manage an app in production. Among others, it will restart the node app in case of crash, it keeps  `stdout` and `stderr` \(access through pm2 logs\):
 

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

@@ -8,14 +8,96 @@ To create a new page, accessible from the navbar with a given icon
 
 A new observation from another user should be reflected immediately in the counter. A new observation from the current user should update the counter.
 
-### Steps to follow
-
-1. Start Albiziapp locally, in development mode
-2. Open VS-code in Albiziapp directory \(or vim if you enjoy pain\)
-3. Create a .vue page in the pages directory
-4. Create the counter interaction element in the partials directory
-5. Bind the number of observation to a computed variable
-6. Instantiate a counter element in the page
-7. 
-Once  strong enough, save the world:
+## Steps to follow
+
+### The easy steps
+
+* Start Albiziapp locally 
+
+{% hint style="info" %}
+Use`vue ui`from the albiziapp/ directory then Task->Server->Run task 
+{% endhint %}
+
+![Expected output](../.gitbook/assets/image%20%281%29.png)
+
+{% hint style="info" %}
+From vue-dashboard on top left menu : "open in editor" . It should open VSCode.
+{% endhint %}
+
+* Create a .vue file in the pages directory. **The file should start with a capital case**.
+
+This file is first empty. Let's fill it a bit :
+
+{% hint style="info" %}
+Use Ctrl-Space to trigger the powerful autocomplete. Chose the first option
+{% endhint %}
+
+![](../.gitbook/assets/image%20%286%29.png)
+
+Your Test.vue should now look like below.
+
+```javascript
+<template>
+  
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
+```
+
+Using autocomplete, populate the template. Add the v-ons-page element as direct child of template. Then add something to display for test purposes.
+
+```javascript
+<template>
+  <v-ons-page>
+      <div>Hello page</div>
+  </v-ons-page>
+</template>
+```
+
+### Less easy steps
+
+So far, you added a .vue file but the web app do not "knows" about it. The newly created .vue file must be [imported](https://vuejs.org/v2/guide/single-file-components.html#Introduction). 
+
+Let's import this component where it belongs : in AppTabbar.vue.
+
+* Open AppTabbar.vue like a pro \(using Ctrl-P\)
+
+From the source below \(extracted from AppTabbar\), **figure out the syntax for importing your newly created page.**  
+
+{% code title="AppTabbar.vue" %}
+```javascript
+import Pusher from "pusher-js";
+import Map from "./pages/Map.vue";
+import Home from "./pages/Home.vue";
+import Profile from "./pages/Profile.vue";
+import Arboretum from "./pages/Arboretum.vue";
+import Releve from "./pages/Releves.vue";
+import Folia from "./pages/Folia.vue";
+
+```
+{% endcode %}
+
+Actually type the import line and save. 
+
+{% hint style="info" %}
+**Any file modification** triggers a reload of the application in development mode
+
+This is very convenient : it permits to know exactly when a change breaks the app.
+{% endhint %}
+
+Your new page isn't yet in the tabbar. To make it happen, you need to change the value of the `tabs()` function. This function is 
+
+
+
+### Step 1 to 3
+
+
 

contributors-guide/getting-started/README.md

@@ -51,7 +51,7 @@ $ npm run serve
 
 If all goes well you should be directed to a page like this :
 
-![](../../.gitbook/assets/image%20%2812%29.png)
+![](../../.gitbook/assets/image%20%2815%29.png)