Unverified Commit 80b4f895 authored by Gicquel's avatar Gicquel Committed by gitbook-bot
Browse files

GitBook: [master] 6 pages and 16 assets modified

parent 6bb33e19
.gitbook/assets/image (1).png

345 KB | W: | H:

.gitbook/assets/image (1).png

152 KB | W: | H:

.gitbook/assets/image (1).png
.gitbook/assets/image (1).png
.gitbook/assets/image (1).png
.gitbook/assets/image (1).png
  • 2-up
  • Swipe
  • Onion skin
.gitbook/assets/image (10).png

230 KB | W: | H:

.gitbook/assets/image (10).png

29.9 KB | W: | H:

.gitbook/assets/image (10).png
.gitbook/assets/image (10).png
.gitbook/assets/image (10).png
.gitbook/assets/image (10).png
  • 2-up
  • Swipe
  • Onion skin
.gitbook/assets/image (11).png

13.5 KB | W: | H:

.gitbook/assets/image (11).png

43.7 KB | W: | H:

.gitbook/assets/image (11).png
.gitbook/assets/image (11).png
.gitbook/assets/image (11).png
.gitbook/assets/image (11).png
  • 2-up
  • Swipe
  • Onion skin
.gitbook/assets/image (12).png

24.3 KB | W: | H:

.gitbook/assets/image (12).png

33 KB | W: | H:

.gitbook/assets/image (12).png
.gitbook/assets/image (12).png
.gitbook/assets/image (12).png
.gitbook/assets/image (12).png
  • 2-up
  • Swipe
  • Onion skin
.gitbook/assets/image (2).png

230 KB | W: | H:

.gitbook/assets/image (2).png

345 KB | W: | H:

.gitbook/assets/image (2).png
.gitbook/assets/image (2).png
.gitbook/assets/image (2).png
.gitbook/assets/image (2).png
  • 2-up
  • Swipe
  • Onion skin
.gitbook/assets/image (3).png

331 KB | W: | H:

.gitbook/assets/image (3).png

230 KB | W: | H:

.gitbook/assets/image (3).png
.gitbook/assets/image (3).png
.gitbook/assets/image (3).png
.gitbook/assets/image (3).png
  • 2-up
  • Swipe
  • Onion skin
.gitbook/assets/image (4).png

43.7 KB | W: | H:

.gitbook/assets/image (4).png

331 KB | W: | H:

.gitbook/assets/image (4).png
.gitbook/assets/image (4).png
.gitbook/assets/image (4).png
.gitbook/assets/image (4).png
  • 2-up
  • Swipe
  • Onion skin
.gitbook/assets/image (5).png

35.4 KB | W: | H:

.gitbook/assets/image (5).png

43.7 KB | W: | H:

.gitbook/assets/image (5).png
.gitbook/assets/image (5).png
.gitbook/assets/image (5).png
.gitbook/assets/image (5).png
  • 2-up
  • Swipe
  • Onion skin
.gitbook/assets/image (6).png

46.9 KB | W: | H:

.gitbook/assets/image (6).png

98.9 KB | W: | H:

.gitbook/assets/image (6).png
.gitbook/assets/image (6).png
.gitbook/assets/image (6).png
.gitbook/assets/image (6).png
  • 2-up
  • Swipe
  • Onion skin
.gitbook/assets/image (7).png

29.9 KB | W: | H:

.gitbook/assets/image (7).png

35.4 KB | W: | H:

.gitbook/assets/image (7).png
.gitbook/assets/image (7).png
.gitbook/assets/image (7).png
.gitbook/assets/image (7).png
  • 2-up
  • Swipe
  • Onion skin
.gitbook/assets/image (8).png

43.7 KB | W: | H:

.gitbook/assets/image (8).png

46.9 KB | W: | H:

.gitbook/assets/image (8).png
.gitbook/assets/image (8).png
.gitbook/assets/image (8).png
.gitbook/assets/image (8).png
  • 2-up
  • Swipe
  • Onion skin
.gitbook/assets/image (9).png

33 KB | W: | H:

.gitbook/assets/image (9).png

152 KB | W: | H:

.gitbook/assets/image (9).png
.gitbook/assets/image (9).png
.gitbook/assets/image (9).png
.gitbook/assets/image (9).png
  • 2-up
  • Swipe
  • Onion skin
......@@ -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)
......@@ -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\):
......
......@@ -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
......@@ -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)
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment