Build a full app with SiB
***************************
With the core of the framework and some offical components, we'll be able to build a full app in SiB.
1. Import the core of Startin’blox
----------------------------------
To start, simply import the core in your HTML file:
.. code:: html
<!-- ... Import the core ... -->
<script type="module" src="https://unpkg.com/@startinblox/core"></script>
</head>
2. Use core components
-----------------------
You can now freely use all the component included in the core.
For the example we are going to build a directory.
.. code:: html
<!-- ... Add a form ... -->
<sib-form
data-src="https://api.startinblox.com/users/"
fields="first_name, last_name, email"
></sib-form>
<!-- ... Display datas ... -->
<sib-display
data-src="https://api.startinblox.com/users/"
fields="first_name, last_name, email"
></sib-display>
</body>
The form and the display are connected to the same data sources. When you add people by the form, it will be rendered by the display.
=> `More information about Sib-form <How-to-make-components/>`__
=> `More information about Sib-display <How-to-make-components/>`__
=> `See all the core components <How-to-make-components/>`__
3. Use official components
--------------------------
Let's assume we want to add a menu to our app. We're gonna add the router component ``sib-router``
.. code:: html
<!-- ... Import the core ... -->
<script type="module" src="https://unpkg.com/@startinblox/core"></script>
<!-- ... Import SiB Router ... -->
<script type="module" src="https://unpkg.com/@startinblox/router"></script>
</head>
<body>
<sib-router default-route="users-list" use-hash>
<sib-route name="users-list">Show users</sib-route>
<sib-route name="user-form">Add a new user</sib-route>
</sib-router>
<section id="user-form">
<sib-form
data-src="https://api.startinblox.com/users/"
fields="first_name, last_name, email"
></sib-form>
</section>
<section id="users-list">
<sib-display
data-src="https://api.startinblox.com/users/"
fields="first_name, last_name, email"
></sib-display>
</section>
</body>
=> `More information about Sib-Router <How-to-make-components/>`__
=> `See all the official components <How-to-make-components/>`__
=> `Try this example in the demo <https://startinblox.com/fr/technology#demo/>`__
=> `Play with the SiB Builder <https://la-pommeraye.fr/sib-builder//>`__
4. Authentification
---------------------
.. warning::
This part is missing
5. Manage permissions
---------------------
.. warning::
This part is missing
Something is missing ?
`Let's us know <https://mailto:alice@startinblox.com/>`__ !