From 04390b9357d5a7b6ca88f57c81ea3c036dc73f8d Mon Sep 17 00:00:00 2001
From: Fabian Affolter <fabian@affolter-engineering.ch>
Date: Sat, 20 Feb 2016 09:45:42 +0100
Subject: [PATCH 1/2] Add first section of devel tutorial

---
 source/developers/tutorial.markdown           | 117 ++++++++++++++++++
 .../images/screenshots/create-component01.png | Bin 0 -> 11155 bytes
 2 files changed, 117 insertions(+)
 create mode 100644 source/developers/tutorial.markdown
 create mode 100644 source/images/screenshots/create-component01.png

diff --git a/source/developers/tutorial.markdown b/source/developers/tutorial.markdown
new file mode 100644
index 00000000000..fb149a8b8a3
--- /dev/null
+++ b/source/developers/tutorial.markdown
@@ -0,0 +1,117 @@
+---
+layout: page
+title: "Development tuorial"
+description: "Tutorial about the first steps on Home Assistant development"
+date: 2016-02-20 07:00
+sidebar: false
+comments: false
+sharing: true
+footer: true
+---
+
+This is a simple tutorial on how to write a component for [Home Assistant](https://home-assistant.io/). We will work on a component called "information". The purpose of this component is to display a given text in the frontend. 
+
+The setup of a development environment is described in the [Developers section](/developers/#starting-development) of the documentation.
+
+As a start, create a file `information.py` in your Git checkout of Home Assistant in the folder `homeassistant/component/`.
+
+```python
+"""
+homeassistant.components.information
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+The information component allows to show text in the frontend.
+
+For more details about this component, please refer to the documentation at
+https://home-assistant.io/components/information/
+"""
+import logging
+
+_LOGGER = logging.getLogger(__name__)
+
+DOMAIN = 'information'
+DEPENDENCIES = []
+
+def setup(hass, config=None):
+    """ Setup the Information component. """
+
+    _LOGGER.info("The 'information' component is ready!")
+
+    return True
+```
+
+1. In the file header we decided to add some details. Like the path, a short description, and the link to the documentation. 
+2. We want to do some logging. This means that we import the Python logging module and create an alias.
+3. The component name is equal to the domain name.
+4. At the moment this component has no dependencies. For detail check [dependencies](/developers/creating_components/#dependencies) section.
+5. The `setup` function will take care of the initialization of our component.
+   The component will only write a log message. Keep in mind for later that you have several options for the severity:
+
+   - _LOGGER.info(msg)
+   - _LOGGER.warning(msg)
+   - _LOGGER.error(msg)
+   - _LOGGER.critical(msg)
+   - _LOGGER.exception(msg)
+
+7. We return `True` if everything is ok.
+
+Add the component to your `configuration.yaml` file.
+
+```yaml
+information:
+```
+
+If you replace `_LOGGER.info("The 'information' component is ready!")` with or add
+
+```python
+hass.states.set('information.Text', 'Info component')
+```
+
+Then the component will not be different to the sample included in the `config/custom_components` folder or shown as an [example](/cookbook/python_component_basic_state/). After a start or a restart of Home Assistant the component will be visible in the frontend.
+
+<p class='img'>
+<img src='/images/screenshots/create-component01.png' />
+</p>
+
+The next step is the introduction of configuration options. Most configuration details are coming out of the `configuration.yaml` file. To do that we need to update the  `def setup()` method to accept configuration information and access the configuration variable in the `setup` method.
+
+```python
+import logging
+
+_LOGGER = logging.getLogger(__name__)
+
+DOMAIN = 'information'
+DEPENDENCIES = []
+CONF_NAME = 'text'
+
+def setup(hass, config):
+    """ Setup the Information component. """
+
+    test = config[DOMAIN].get(CONF_NAME, DEFAULT_NAME)
+    hass.states.set('information.Text', test)
+
+    return True
+```
+
+To add the latest feature of our component, update the entry in your `configuration.yaml` file.
+
+```yaml
+information:
+  text: 'Sample text'
+```
+
+It's important to check if all mandatory configuration variables are provided. If not, the setup should fail. We will use the `validate_config` as a helper to archive this. The next listing shows the essential parts.
+
+```python
+from homeassistant.helpers import validate_config
+[...]
+    if not validate_config(config, {DOMAIN: ['text']}, _LOGGER):
+        return False
+```
+
+So far our new component is rendered as a default compoment in the frontend. But we want our own view of the component in the frontend. We assume that you have setup the (frontend development)[/developers/frontend/] already
+
+We need two new files in the folder `src/cards/`:
+
+- ha-information-card.html
+- ha-information-card.js
+
diff --git a/source/images/screenshots/create-component01.png b/source/images/screenshots/create-component01.png
new file mode 100644
index 0000000000000000000000000000000000000000..74a4fd0cde65d872fb95a24a664f9fb6182ab8a8
GIT binary patch
literal 11155
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

literal 0
HcmV?d00001


From 3fe9bf754b8e359a626e47d6ada27f4aed672b56 Mon Sep 17 00:00:00 2001
From: Fabian Affolter <fabian@affolter-engineering.ch>
Date: Sat, 20 Feb 2016 10:50:24 +0100
Subject: [PATCH 2/2] Add more content

---
 source/developers/tutorial.markdown | 29 ++++++++++++++++++++++++++---
 1 file changed, 26 insertions(+), 3 deletions(-)

diff --git a/source/developers/tutorial.markdown b/source/developers/tutorial.markdown
index fb149a8b8a3..8dbde843ce5 100644
--- a/source/developers/tutorial.markdown
+++ b/source/developers/tutorial.markdown
@@ -1,6 +1,6 @@
 ---
 layout: page
-title: "Development tuorial"
+title: "Development tutorial"
 description: "Tutorial about the first steps on Home Assistant development"
 date: 2016-02-20 07:00
 sidebar: false
@@ -13,6 +13,9 @@ This is a simple tutorial on how to write a component for [Home Assistant](https
 
 The setup of a development environment is described in the [Developers section](/developers/#starting-development) of the documentation.
 
+## {% linkable_title Component %}
+
+
 As a start, create a file `information.py` in your Git checkout of Home Assistant in the folder `homeassistant/component/`.
 
 ```python
@@ -66,7 +69,7 @@ If you replace `_LOGGER.info("The 'information' component is ready!")` with or a
 hass.states.set('information.Text', 'Info component')
 ```
 
-Then the component will not be different to the sample included in the `config/custom_components` folder or shown as an [example](/cookbook/python_component_basic_state/). After a start or a restart of Home Assistant the component will be visible in the frontend.
+then the component will not be different to the sample included in the `config/custom_components` folder or shown as an [example](/cookbook/python_component_basic_state/). After a start or a restart of Home Assistant the component will be visible in the frontend.
 
 <p class='img'>
 <img src='/images/screenshots/create-component01.png' />
@@ -74,6 +77,8 @@ Then the component will not be different to the sample included in the `config/c
 
 The next step is the introduction of configuration options. Most configuration details are coming out of the `configuration.yaml` file. To do that we need to update the  `def setup()` method to accept configuration information and access the configuration variable in the `setup` method.
 
+More details about this topic can be found in the [User given configuration](/developers/creating_components/#config-user-given-configuration) section.
+
 ```python
 import logging
 
@@ -108,10 +113,28 @@ from homeassistant.helpers import validate_config
         return False
 ```
 
-So far our new component is rendered as a default compoment in the frontend. But we want our own view of the component in the frontend. We assume that you have setup the (frontend development)[/developers/frontend/] already
+## {% linkable_title Frontend %}
+
+So far our new component is rendered as a default compoment in the frontend. But we want our own view of the component in the frontend. We assume that you have setup the (frontend development)[/developers/frontend/] already.
 
 We need two new files in the folder `src/cards/`:
 
 - ha-information-card.html
 - ha-information-card.js
 
+
+TBD
+
+Rebuild the frontend.
+
+```bash
+$ script/build_frontend
+```
+
+Change the [http](/components/http/) component to load the `development` version of the frontend as also mentioned in the [ Setting up the environment](/developers/frontend/#setting-up-the-environment) section of the (frontend development)[/developers/frontend/] page.
+
+```yaml
+http:
+  development: 1
+```
+