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

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

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](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)
# 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)
# 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)
# 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
---
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\).
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