diff --git a/source/import_documentation/Solid-introduction.rst b/source/import_documentation/Solid-introduction.rst index b9f223ae5904c166489ddd05864deb9c43ab2930..36a63f5c84fc075654d5f3dcab25de483d535676 100644 --- a/source/import_documentation/Solid-introduction.rst +++ b/source/import_documentation/Solid-introduction.rst @@ -4,17 +4,17 @@ Our SOLID introduction in the 3WC by `Tim Berners Lee <https://fr.wikipedia.org/wiki/Tim_Berners-Lee>`__, the inventor of the web who aims to rethink the way we build application in order to give back the power back to the final user. -For us SOLID project is above all a philosophy, a goal to reach and which inspires us. +For us SOLID project is above all a philosophy, a goal to reach and that inspires us. Solid is built on top of existing Web standards. The core Solid specification relies on LDP and WAC (WAC draft, both being based on HTTP and RDF vocabularies. Solid also uses a subset of SPARQL UPDATE through HTTP PATCH queries. Identification in Solid is based on WebID-TLS and/or OIDC. -To know more on how does Solid relate to other Web standards, how a look to this `SOLID Faq <https://solidproject.org/faqs#how-does-solid-relate-to-other-web-standards>`__. +To know more on how does Solid relate to other Web standards, have a look to this `SOLID Faq <https://solidproject.org/faqs#how-does-solid-relate-to-other-web-standards>`__. Let's have an overview on how we implement `SOLID specifications <https://github.com/solid/solid-spec>`__. What is SOLID ? --------------- -It is a set of standards on which we agree internationally to communicate our applications between them. It is about the standardization of APIs. +It is a set of standards on which we agree internationally to enable our applications to communicate with each other. It is about the standardization of APIs. .. warning:: @@ -96,14 +96,14 @@ Did you notice the presence of a context ? It is a way to go from the Json to `JsonLD <https://fr.wikipedia.org/wiki/JSON-LD>`__ That’s mean that we encode `Linked -Data <https://en.wikipedia.org/wiki/Linked_data>`__ using Json. +Data <https://en.wikipedia.org/wiki/Linked_data>`__ using JSON. JsonLD is an `RDF <https://en.wikipedia.org/wiki/RDF>`__ implementation, -which is its-selft the basic language of `semantic +which is itself the basic language of `semantic web <https://en.wikipedia.org/wiki/Semantic_Web>`__. .. warning:: - We use for our API JsonLD but you can imagine use other implementation like Turtle or XML. + We use for our API JsonLD but you can imagine using other implementations like Turtle or XML. This context allows you to link object properties in a JSON document to concepts in an `ontology <https://en.wikipedia.org/wiki/Web_Ontology_Language>`__. @@ -139,7 +139,7 @@ Here is the context referred : } The type we use is ``foaf``. That means that we use the FOAF ontology -which is done to describe people. +which is designed to describe people. If you go to the `foaf ontology <http://xmlns.com/foaf/0.1/>`__, you’ll see that the properties which we can use are : @@ -157,7 +157,7 @@ status \| surname \| theme \| thumbnail \| tipjar \| title \| topic \| topic_interest \| weblog \| workInfoHomepage \| workplaceHomepage \| yahooChatID \| -Now we can describe a user for every machines in the world using a +Now we can describe a user for every machine in the world using a universal language :) Why JsonLD is awesome ? @@ -182,7 +182,7 @@ JsonLD allow us to us Linked Datas in a very intuitive way. Let's speak about containers ---------------------------- -So how JsonLD manage to tiny the datas ? +So how JsonLD manage to simplify the datas ? Let’s have a look on this part : diff --git a/source/import_documentation/get-started.rst b/source/import_documentation/get-started.rst index 8f76c5a2789af4172a0b85d0a5abcfef9befffdb..3fee9e3e2ed611a41ebbd46bc1b34958622372e0 100644 --- a/source/import_documentation/get-started.rst +++ b/source/import_documentation/get-started.rst @@ -1,11 +1,12 @@ Getting Started **************** -Fisrt of all, you have to keep in mind that your front and your back are decorrelated. -Let's begin by create your data source. +First of all, you have to keep in mind that your frontend and your backend are decoupled. -Make your data sources -====================== +Let's begin by creating your data source. + +Create your data sources +======================== Before deploying any SIB applications you will need SIB servers able to provide all capabilities your application relies on. Our SiB server is called DjangoLDP which is based on Django framework and adapted to be compatible with Linked Datas convention but you can use any servers exposing data as LDP containers. @@ -22,7 +23,7 @@ The SIB server requires: -.. warning:: if you using Windows, you may get some trouble. Please help us to improve reporting your problem on `this issue <https://git.startinblox.com/documentation/doc/issues/11/>`__ +.. warning:: if you are using Windows, you may get some trouble. Please help us to improve reporting your problem on `this issue <https://git.startinblox.com/documentation/doc/issues/11/>`__ 1. Install SIB Manager command -------------------------- @@ -36,8 +37,8 @@ Install ``sib-manager`` that allow you to use the sib command. python3 -m pip install -U sib-manager -2. Initiate the server --------------------- +2. Initialize the server +------------------------ Set up the server with SIB Manager where `sibserver` will be the name of your server. @@ -73,7 +74,7 @@ Let's now create a package. 3. Create a package -------------------- -We are going to make a very simply data source to start which will be composed by questions and its answers. +We are going to make a very simple data source to start which will be composed by questions and its answers. You use the SIB Manager to create a new project : @@ -100,10 +101,10 @@ Go to your `models.py` and set the models of datas you need : authenticated_perms = ['view', 'edit', 'delete', 'add'] serializer_fields=["@id","question", "answer"] -4. Link your package to your developpement server +4. Link your package to your development server ---------------------------------- -At the root of you Sib sever, create a symbolic link to your package : +At the root of you Sib server, create a symbolic link to your package : .. code-block:: bash @@ -115,12 +116,12 @@ For example : ln -s ../../djangoldp_mypack/djangoldp_mypack djangoldp_mypack -You can check if it's well done with the `ll` command : +You can check if it's correctly done with the `ll` command : .. figure:: ../_static/images/import_documentation/ll.png :alt: You've done the symbolic link. -Tell your sever, you've add a new package in the packages.yml: +Tell your server you've add a new package in the packages.yml: .. code-block:: yml @@ -133,7 +134,7 @@ Tell your sever, you've add a new package in the packages.yml: .. warning:: If you want to configure a server with a package that already exist, you will need to make the "sib install sibserver" to update your server with it. -Go at the root of your developpement server at the level where reside your manage.py file. +Go at the root of your development server at the level where your manage.py file resides. Then run this command : @@ -150,7 +151,7 @@ Then run this command : python manage.py runserver -Now access to your Django administration `http://127.0.0.1:8000/admin/ <http://127.0.0.1:8000/admin/>`__. +Now access your Django administration `http://127.0.0.1:8000/admin/ <http://127.0.0.1:8000/admin/>`__. You should see your model in the admin. Fill one question and answer to test. @@ -200,28 +201,28 @@ You should get something like this : "@context": "https://cdn.happy-dev.fr/owl/hdcontext.jsonld" } -Concratulation ! You've made a data source. +Congratulations! You've made a data source. .. note:: To see how our API is structured, have a look to our `SOLID Introduction <https://docs.startinblox.com/import_documentation/Solid-introduction>`__ -Make a font app -=============== +Make a frontend app +=================== If you are familiar with React or VusJS, learning how to use Startin'blox is going to be easy for you. It's even easier. -So why using Startin'blox instead of React or VueJS? -------------------------------------------- -Because it allows you to easily grasp the SOLID standards and web components last standards. It is also lighter to install. +So why use Startin'blox instead of React or VueJS? +---------------------------------------------------- +Because it allows you to easily grasp the SOLID standards and web components latest standards. It is also lighter to install. See more about it in :ref:`our FAQ <faq>`. How to set up the technology ? ---------------------------- -Fisrt set up a server for your front App using : +First set up a server for your frontend App using : * NPM via http-server * Python via `python3 -m http.server 8001` @@ -250,7 +251,7 @@ It enables you to use Startin’blox technology and all the base components from You will find it in almost all Startin'blox components. It is the attribute that defines the data source you want to interact with in the component. You can see what the API looks like at (`https://apiprod.happy-dev.fr/collectives/ <https://apiprod.happy-dev.fr/collectives/>`__ ). -For our example, let's display your data sources by remplacing the data-source below by the one you created : +For our example, let's display your data sources by replacing the data-source below by the one you created : .. code-block:: html @@ -280,9 +281,9 @@ To use them, you have to import them independently. <script type="module" src="https://unpkg.com/@startinblox/router@latest"></script> Create a component -==================== +================== -A component should be independent from your application, so you should create a new project to developpe it. +A component should be independent from your application so you should create a new project to develop it. .. note:: If you want to know when it's relevant to create a component go to the :ref:`"About our Components" <About-our-components>` page. @@ -290,7 +291,7 @@ A component should be independent from your application, so you should create a Requirements ------------- -Be sur you have at least the version 6.14.5 of npm with : +Be sure you have at least the version 6.14.5 of npm with : .. code:: bash @@ -333,7 +334,7 @@ Open a terminal, go to your folder and type the following commands: # Init a npm management npm init -y - # Install a server in a developpement environement + # Install a server in a development environment npm i -D http-server @@ -371,7 +372,7 @@ We have create SolidTemplateElement that is a class that can extend your compone **What are we going to do?** -Let's just displays questions and answers in an accordion and allows the user to submit a new question. +Let's just display questions and answers in an accordion and allow the user to submit a new question. Something like this: @@ -465,7 +466,7 @@ You are going to set your attribute in this method. `recipientEmail` is the para } .. note:: - Note the syntaxe convention => recipientEmail: 'recipient-email' + Note the syntax convention => recipientEmail: 'recipient-email' 5. Let's focus on the template ------------------------------- @@ -501,7 +502,7 @@ We add a conditional rendering: if no email is filled in, the possibility to sub 6. Set your datas ----------------- -You can you here the data source you've created. Or you can just set fake datas, with those static datas in `JSON-LD <https://fr.wikipedia.org/wiki/JSON-LD>`__ by create a file named ``data-faq.jsonld`` at the root of your project. +You can set here the data source you've created. Or you can just set fake datas, with those static datas in `JSON-LD <https://fr.wikipedia.org/wiki/JSON-LD>`__ by create a file named ``data-faq.jsonld`` at the root of your project. .. code:: json @@ -570,7 +571,7 @@ You should be able to display your datas but at the moment it's a bit ugly. .. image:: ./../../_static/images/import_documentation/raw-faq.png :alt: A FAQ component as example -You've almost done ! +You're almost done ! Let's now add some style. @@ -591,7 +592,7 @@ Add the JS you need to make your accordion work, like this: // We use populate event to detect when the component is generated component.addEventListener("populate", (event) => { - // Seclect each question + // Select each question var acc = document.querySelectorAll("solid-display-value[name='question']"); var i; @@ -770,7 +771,7 @@ To translate the static strings of your components, follow these steps: } -As a developer who uses a component, you can also add you own translation files by targeting you translation folder. +As a developer who uses a component, you can also add your own translation files by configuring your translation folder. Like for the component, this folder should contain one file per language: .. code:: html