Unverified Commit 4728e928 authored by Gicquel's avatar Gicquel Committed by gitbook-bot
Browse files

GitBook: [master] 6 pages and 8 assets modified

parent a7fc8b6a
.gitbook/assets/image (10).png

13.5 KB | W: | H:

.gitbook/assets/image (10).png

230 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

24.3 KB | W: | H:

.gitbook/assets/image (11).png

13.5 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 (5).png

46.9 KB | W: | H:

.gitbook/assets/image (5).png

35.4 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

29.9 KB | W: | H:

.gitbook/assets/image (6).png

46.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

43.7 KB | W: | H:

.gitbook/assets/image (7).png

29.9 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

33 KB | W: | H:

.gitbook/assets/image (8).png

43.7 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

230 KB | W: | H:

.gitbook/assets/image (9).png

33 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
......@@ -20,5 +20,5 @@ A **collaborative**, **gamified**, **tree mapping** web application.
![](.gitbook/assets/image%20%286%29.png)
![](.gitbook/assets/image%20%287%29.png)
......@@ -10,8 +10,8 @@
* [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 sub-component](contributors-guide/getting-started/pages-and-component.md)
* [Adding/changing a page](contributors-guide/adding-changing-a-page.md)
* [Pages and interaction components](contributors-guide/getting-started/pages-and-component.md)
* [Creating a new page \(exercise\)](contributors-guide/adding-changing-a-page.md)
## Administrators guide
......
......@@ -18,7 +18,7 @@ $ pm2 list
gives access to the list of process managed by pm2. Here, only one :
![](../.gitbook/assets/image%20%2810%29.png)
![](../.gitbook/assets/image%20%2811%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\):
......
# Adding/changing a page
# Creating a new page \(exercise\)
## Objectives
To create a new page, accessible from the navbar with a given icon
The page will displays in real time the total number of observation.
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:
{% code title="hello.sh" %}
```bash
# Ain't no code for that yet, sorry
echo 'You got to trust me on this, I saved the world'
```
{% endcode %}
......@@ -40,7 +40,7 @@ $ npm run serve
If all goes well you should be directed to a page like this :
![](../../.gitbook/assets/image%20%2811%29.png)
![](../../.gitbook/assets/image%20%2812%29.png)
......
# Pages and sub-component
# Pages and interaction components
## Pages in Albiziapp
......@@ -6,7 +6,7 @@ Since Albiziapp aims to mimic mobile look and feels, it is structured using the
Think of a page as **a specific screen of a mobile app**. Pages are practical for **performing fast, focused interactions**. They usually have only one purpose, and they take all the screen.
![A page for entering record](../../.gitbook/assets/image%20%288%29.png)
![A page for entering record](../../.gitbook/assets/image%20%289%29.png)
{% hint style="info" %}
It's a best practice to keep pages focused on only one task
......@@ -29,9 +29,25 @@ A minimal example of a v-ons-page is :
```
### Sub-components
### Location of pages component in the source hierarchy
Interface components such as [checkbox](https://onsen.io/v2/api/vue/v-ons-checkbox.html), [switch](https://onsen.io/v2/api/vue/v-ons-switch.html)... are **always declared inside a page component.** Three types of subcomponents can be distinguished :
In order to keep the project easy to maintain, all pages component are located in the same folder, which is unsurprisingly named pages.
![The pages folder](../../.gitbook/assets/image%20%285%29.png)
## Interaction components
Pages are **containers** that needs to be populated with **interaction components** to allow any interaction.
Typical example of interaction component are [checkbox](https://onsen.io/v2/api/vue/v-ons-checkbox.html) or [switch](https://onsen.io/v2/api/vue/v-ons-switch.html). These components are **reusable and generic** in contrast with **pages** that are specific to a given task.
### Hierarchical dependencies between pages and interaction components
Pages are in a parent-children relation with interaction components. The page control the states of its interaction component, and manage update when this state change.
Three types of subcomponents can be distinguished :
* Native [OnsenUI components](https://onsen.io/v2/api/vue/)
* Custom components \(specific to Albiziapp\)
......@@ -39,13 +55,13 @@ Interface components such as [checkbox](https://onsen.io/v2/api/vue/v-ons-checkb
#### Native OnsenUI Components
Native OnsenUI components are the set of components provided by OnsenUI for VueJS. **These component are documented and reliable**. **However** the set of component is quite limited some components aren't visually appealing \(ie v-ons-list\). Hence the needs for Custom and External components.
Native OnsenUI components are the set of components provided by OnsenUI for VueJS. **These component are documented and reliable**. **However** the set of component is quite limited some components aren't visually appealing \(ie v-ons-list\). **Hence the needs for Custom and External components.**
#### Custom components
Custom components
Custom components are [VueJs components](https://vuejs.org/v2/guide/components.html) constructed specifically for Albiziapp through a `.vue`file type.
///TODO
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