Commit 3edec865 authored by gick's avatar gick
Browse files

Merge branch 'master' of

parents eedd6acd 0107038c
# Albiziapp
A gamified mobile web app for mapping trees that integrates with OpenStreetMap.
# Welcome to Albiziapp
## What's ?
Instance for French users [Albiziapp](
A **collaborative**, **gamified**, **tree mapping** web application.
## Why ?
International instance [Albiziapp](
## Screenshots!!!
Project information [Info](
![Mission page \(game\)](.gitbook/assets/image%20%284%29.png)
![Map view \(sattelite\)](.gitbook/assets/image%20%281%29.png)
# Table of contents
* [Welcome to Albiziapp](
* [User guide](user-guide/
* [TODO](user-guide/
* [Botany](user-guide/
## Contributors guide
* [Recommendations](contributors-guide/
* [Getting started](contributors-guide/getting-started/
* [Top level : Navigation components](contributors-guide/getting-started/
* [Pages and component](contributors-guide/getting-started/
* [Adding/changing a page](contributors-guide/
## Administrators guide
* [Untitled](administrators-guide/
# Getting started
### Setup your dev environment
* Install node \([](\)
* 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 \([\#mongodb-community-edition-installation-tutorials](\)
Test if all is OK
{% code title="$ sudo service mongod start" %}
{% endcode %}
$ vue-ui
//triggers a browser tool
### Get the last version of Albiziapp front end
$ git clone
$ cd albiziapp
$ npm install
$ npm run serve
If all goes well you should be directed to a page like this :
### Get the last version of Albiziapp back-end
$ git clone
$ 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
# Top level : Navigation components
### Navigation patterns
Albiziapp follows the pattern of OnsenUI Framework \([](\).
{% 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.
The former describe the state of the root. The later manages the push/pop operations associated with the stack pattern.
#### The tab bar \(simplified\)
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.
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 %}
#### 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.
<v-ons-navigator swipeable swipe-target-width="50px"
:class="{ 'border-radius': borderRadius }"
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
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\).
Supports Markdown
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