Difference between revisions of "Mobile App"

From Wikifab Developers
Jump to: navigation, search
Line 31: Line 31:
  
 
The created tutorial should respect the Wikifab syntax defined in templates (available here : http://en.wikifab.org/index.php/Form:Tutorial?action=edit )
 
The created tutorial should respect the Wikifab syntax defined in templates (available here : http://en.wikifab.org/index.php/Form:Tutorial?action=edit )
 +
 +
The templates has also html formating, but essentials information are found in tgas {{{....}}} such as :
 +
{{#forminput:form=Tutorial|button text=Create or modify|placeholder=Enter the name of your tutorial}}
 +
{{{field|Type|mandatory|class=form-dropdown}}}
 +
{{{field|Area|mandatory|class=form-checkbox}}
 +
{{{field|Description|input type=textarea|mandatory|rows=3|maxlength=4000|class=form-textarea|placeholder=Describe your tutorial in a few sentences.}}}
 +
{{{field|Difficulty|input type=dropdown|mandatory|class=form-dropdown}}}
 +
{{{field|Cost|mandatory|class=form-duration}}}
 +
{{{field|Currency|mandatory|input type=dropdown|class=form-dropdown-2}}}
 +
{{{field|Duration|mandatory|class=form-duration}}}
 +
{{{field|Duration-type|mandatory|input type=dropdown|class=form-dropdown-2}}}
 +
{{{field|Licences|input type=dropdown|class=form-dropdown-3}}}
 +
{{{field|Main_Picture|default=No-image-yet.jpg|uploadable|size=25|class=form-picture|image preview}}}
 +
 +
{{{for template|Introduction}}}
 +
{{{field|Introduction|input type=textarea|rows=5|maxlength=10000|class=form-textarea|placeholder=Describe your project in detail in this area (context, trials, etc.)}}}
 +
 +
{{{field|Material|input type=textarea|rows=8|placeholder=List the materials required to make your creation/product/object.
 +
{{{field|Tools|input type=textarea|rows=8|placeholder=List the tools required to make your creation/product/object.
 +
{{{field|Step_Picture_00|size=32|class=form-picture|default=|uploadable|image preview}}}
 +
{{{field|Step_Picture_01|size=32|class=form-picture|default=|uploadable}}}
 +
{{{field|Step_Picture_02|size=32|class=form-picture|default=|uploadable}}}
 +
{{{field|Step_Picture_03|size=32|class=form-picture|default=|uploadable}}}
 +
{{{field|Step_Picture_04|size=32|class=form-picture|default=|uploadable}}}
 +
{{{field|Step_Picture_05|size=32|class=form-picture|default=|uploadable}}}
 +
 +
{{{for template|ExternalAttachmentsLinks|multiple|maximum instances=10|add button text=+ Add a link|embed in field=Materials[ExternalAttachmentsLinks]}}}
 +
{{{field|ExternalAttachmentsLinks|input type=text}}}
 +
{{{end template}}}
 +
{{{for template|Tuto_Attachments|multiple|maximum instances=30|add button text=+ Add a file|embed in field=Materials[Tuto_Attachments]}}}
 +
{{{field|Attachment|default=|uploadable}}}
 +
{{{end template}}}
 +
 +
{{{for template|Tuto Step|multiple|minimum instances=1|maximum instances=100|add button text=+ Add a step}}}
 +
{{{field|Step_Title|input type=text|class=form-text|placeholder=Title of the step|size=50}}}
 +
{{{field|Step_Content|input type=textarea|rows=16|class=form-textarea|placeholder=Write here the instructions to be followed to complete this step.}}}
 +
{{{field|Step_Picture_00|size=32|class=form-picture|default=|uploadable|image preview}}}
 +
{{{field|Step_Picture_01|size=32|class=form-picture|default=|uploadable}}}
 +
{{{field|Step_Picture_02|size=32|class=form-picture|default=|uploadable}}}
 +
{{{field|Step_Picture_03|size=32|class=form-picture|default=|uploadable}}}
 +
{{{field|Step_Picture_04|size=32|class=form-picture|default=|uploadable}}}
 +
{{{field|Step_Picture_05|size=32|class=form-picture|default=|uploadable}}}
 +
{{{end template}}}
 +
 +
 +
{{{for template|Notes}}}
 +
{{{field|Notes|input type=textarea|rows=5|maxlength=5000|placeholder=List the notes and references for this tutorial.}}}
 +
{{{end template}}}
  
 
==== Take pictures ====
 
==== Take pictures ====

Revision as of 10:58, 18 November 2016

Context

Today wikifab works on desktop only.

Users have to transfer their pictures from a camera to a laptop. This is very boring and time consuming.

We want to make an app to take pictures and transfer them automatically to tutorials.

State of the art

Mediawiki comes with a bunch of APIs that could be used to send pictures from the app to wikifab, and update turorials.

You can find the API documentation here: https://www.mediawiki.org/wiki/API:Main_page

There is also the M2Wiki Browser project, an app to browse any Mediawiki site on mobile. This app uses the MediaWiki API.


Features

Log in from mobile

To use the app, user needs to log in to wikifab from his mobile phone.

Browse tutorials

User can search for an existing tutorial from his mobile phone.

Create a new tutorial

User can create a new tutorial from his mobile phone.

The created tutorial should respect the Wikifab syntax defined in templates (available here : http://en.wikifab.org/index.php/Form:Tutorial?action=edit )

The templates has also html formating, but essentials information are found in tgas {{{....}}} such as :

{{#forminput:form=Tutorial|button text=Create or modify|placeholder=Enter the name of your tutorial}}
Type
{Template:Field
Description
Difficulty
Cost
Currency
Duration
Duration-type
Licences
Main_Picture

Introduction
Introduction

{{{field|Material|input type=textarea|rows=8|placeholder=List the materials required to make your creation/product/object.
{{{field|Tools|input type=textarea|rows=8|placeholder=List the tools required to make your creation/product/object.
Step_Picture_00
Step_Picture_01
Step_Picture_02
Step_Picture_03
Step_Picture_04
Step_Picture_05

ExternalAttachmentsLinks
ExternalAttachmentsLinks
{{{end template}}}
Tuto_Attachments
Attachment
{{{end template}}}

Tuto Step
Step_Title
Step_Content
Step_Picture_00
Step_Picture_01
Step_Picture_02
Step_Picture_03
Step_Picture_04
Step_Picture_05
{{{end template}}}


Notes
Notes
{{{end template}}}

Take pictures

User can take pictures from his mobile phone.

Send picture to a tutorial

  1. User search for an existing tutorial or create a new one
  2. User selects the tutorial he wants to send picture to
  3. User selects pictures he took with the app (or pictures stored in his phone)
  4. User publish (send) the selected pictures to the tutorial library

Back on his laptop, user find the pictures in the library of pictures of the tutorial. He then can organise the pictures inside the tutorial from its laptop.