Fab Academy 1

Website creation / Version control

INDEX:

Here you will find an Index with links to easily navigate through the section content.

1

Intro:

The process for creating a website.

2

GitLab Version Control:

A little explanation about what is GitLab and version control.

3

How to use Git:

A step by step guide for using GitLab, creating an account and Pulling, Committing and Pushing. 

4

Mobirise Website Builder:

Description of the web tool I used for creating my website and how to connect it to my Git.

5

Atom Code Editor:

How to use Atom to edit the code for your website if needed, and the process of Pulling, Commiting and Pushing through it.

6

Reflections and Considerations:

Some final comments and learnings about this process.

7

Project Description:

A little description about my final project, before going into the project management.

8

Project Management:

Here is how I used the learnings from each weak towards my final project development.

9

Student Agreement

Here is the link to the signed Students Agreement.

1 - HOW TO CREATE
YOUR WEBSITE?

Gitlab + Atom + Mobirise

I first started my website by uploading a template and modifying the HTML and CSS code, looking for different things or blogs that I wanted to add, copying the code, pasting it and modifying it... but that was taking me a lot of precious time in things that are not that important for me. So in the end, I learned the technology and how to hack it for my benefit, and I found an easy to use software to design the web page, Mobirise, and another one in case would need to modify the code and to push it to git, Atom.  And that process is what I´m documenting here.

Mobirise

2 - Gitlab - Version Control:

Gitlab is a famous collaborative software development and version control web service. It has a pretty cool repository manager that also offers wiki hosting and a bug tracking system, all of that under an open-source license. A tool that lets different users work on the same project and track changes between them, going back and forth between different versions of the project if needed.

Version control becomes pretty useful when you have to go back to a previous version of a project because of a change you made, or also if you want to merge your collaborations with someone else. It´s like having all the different versions of the same project, with minor changes, in the same place. 

In the next steps, I'm going to explain to you to create your account and link your git with your computer.

3- How To Git?

Create your account in GitLab.com, and then register a New Username.
In this case, I´m using "NAME.SURNAME" format and my email.

Add Git username:
git config –-global user.name “YOUR_USERNAME"

Configure email for uploading:
git config -–global user.email “username@mail.com”

Check if you have SSH KEY:
cat ~/.ssh/id_rsa.pub
(If you see a long string starting with ssh-rsa, you can skip the ssh-keygen step)

Generate SSH key:
ssh-keygen -t rsa -C "$your_email"

Check keygen:
cat ~/.ssh/id_rsa.pub

Copy your key:
pbcopy < ~/.ssh/id_rsa.pub

On your GitLab main page, on the right side, you will have a blue "CLONE" button.
Click it and select "Clone with SSH", and copy the URL.

It should look something like this:
git@gitlab.com:FOLDER_NAME/REPOSITORY_NAME.git

Create a folder in your computer where you are going to save your webpage.
A good tip is not to put it in a folder to deep into your computer, so the navigation through terminal is easier.

In the terminal, navigate to he folder, and use the next command to clone your repository to it:
git clone git@gitlab.com:GIT_FOLDER_NAME/GIT_REPOSITORY_NAME.git

While being inside of the folder, using the following commands:

ADD the new files you added to git
git add filename.extension (to upload file by file)
git add . (to upload all the files at once)

DOWNLOAD the last copy from the repository
git pull

MERGE to have a working copy of your repository
git merge

NAME the update you are pushing with the changes you did
git commit -m ‘UPDATE_NAME’ (the changes you are committing)

UPLOAD to the Repository
git push

Mobirise

4 - Mobirise - Website Builder:

Mobirise is a freeware web design application that allows users to create and publish websites, in Bootstrap, without knowing how to code. It will let you create and edit your website by only drag and drop blocks of content that you can later modify. 

The free version is available to download for Windows and Mac on their site. It includes some free templates that let you create your website from zero by adjusting some presets, but maybe not as much as some would like since you are only allowed to change some colors, pictures, fonts, sizes, and other basic stuff.

You can also buy more templates, plugins, add-ons, or extensions to add them to the software for around $45 each. But they also have a promotion in which you can buy all of their additional content for $129. I believe it´s a fair price for what you get, having in mind that this includes more than 3500 blocks to personalize your page, 75 themes/extensions for different topics, and all the new stuff they add during the year you pay. Of course, that depends on how much you are going to use it.

One of the things I like most about their paid version is that it includes an HTML editor that will let you create or modify personalized blocks if you know how to code. This tool is pretty useful in case you want to embed an API from another developer, to personalize or change some code, or add an external widget.

Even dough Mobirise might seem a bit too simple for advanced web developers, I believe it is a good tool for people with low coding skills who want to create their first website on a very easy to use, intuitive platform. 

Believe me, you won't need a tutorial for using it.

  1. Download Mobirise from mobire.com
    and install it. 
  2. Create an account
    and a New Web Page in Mobirise.
  3. Add content by clicking the " + " sign in the lower right corner, by just drag and dropping block from the right bar.
  4. You just have to double click on each text to modify it or in the pinwheel to modify the settings of each block.
  5. When you are done creating or modifying, click in the upper right corner button that says "Publish/Publicar" to export it,
  6. In the options select the exact same folder where you cloned your repository in git, and export the file.
  7. Open the file in Atom and do all the Git Pull/Merge/Commit/Push process.
  8. Wait a few minutes (around 30 if it is the first push) and your webpage should be updated.
Mobirise

5 - Atom - Code Editor:

Atom is a desktop code editor for macOS, Linux, and Windows built with HTML, JavaScript, CSS, and Node.js integration. It supports multiple plug-ins and has a built-in Git version control, developed by GitHub. I would say it is in a way similar to visual studio, but maybe with fewer available add-ons, of which the majority are developed and maintained by the user community, and therefore are under free user license. 

If you are going to use Atom as a code editor, one of the add-ons I would suggest you download is a previewing tool that lets you visualize what you are coding so that you can watch the changes in realtime. But beyond using this software for code edition, I use it as an easy way to upload my webpage to GitLab without messing too much with the terminal.

  1. Download and Install Atom to your computer:
    https://atom.io/
  2. Install Atom necessary packages
    through the terminal command line:

    git-plus
    (Integrates Git)

    git-checkout
    (Allows checking out remote branches within Atom)
  3. Open any file of the project in Atom, and it will detect where the whole folder is and any changes on its files since the last push of the repository.
  4. After every change you want to upload, do the same you were doing in the terminal, but from Atom: Pull, Merge, Commit, Push... in a easier way.

    And Voilá!!!

    Your site is updated!!!

6 - Reflections and Considerations:

GIT:
Even dough the Git process is very confusing in the beginning, I believe it is a must to understand it for a collaborative project, but it is also important to learn how to use it well, because if not, it is very probable that you could end up erasing what others have done... it happened to us in a master project.

This principles of collaborative version control/file sharing can also be applied to other systems like NodeRed networking, when you have different people with access to the Nodes, making changes at the same time, it is important that each one uploads their changes after the other one uploaded theirs, but refreshing the webpage first so that it does not affects the others work.

HTML:
I believe that is important to understand how HTML works, but you don't properly need to turn into a WebDesigner to create your Web Page. My process is to first understand and then hack. I understood how the Git process and the HTML code structure works, so that I could then find an easier way to do it, so that I wouldn't have to complicate in this things to be able to concentrate more in the content of my documentation.

I believe that Mobirise, the tool I'm using to create my website, has pretty good options for easily drag and dropping content templates and then modifying it, but the payed version also includes HTML editor which, if you know how to use, will give you a world of new possibilities to design your website.

7 - Project Description:

POWAR: Plant Observatory of Weather Adaptation for Resiliency

Mobirise

I visualize POWAR as a machine that could replicate different climatic characteristics like light, temperature and rain in its interior, and replicate different weathers around the globe, to experiment about how the plants that we grow nowadays will grow with our future predicted weather for 2050.

This will work as a plant observatory, in which 3 different simulations will be compared, changing only one variable at a time to detect which are the optimum conditions for each plants to grow, and generate a database that will in the future feed a machine learning system that could optimice the way we grow plants.

The variables that can be changed inside are:

- Temperature (Cold and Hot) 

- Humidity / Rain

- Sunlight

This will work as a plant observatory, in which 3 different simulations will be compared, changing only one variable at a time, to detect which plant grows better than the other and with this it will generate a database that will help optimize it´s future cultive.

8 - Project Management:

How to merge the building process to the Fab Academy classes.

  1. Jan 29: - Principles and practices, project management.
    How to plan and organize my project related to the classes, separating the tasks in different processes.
  2. Feb 05 - Computer-aided design:
    Design the first visualizations of the prototype, using 2D and 3D software.
  3. Feb 12 - Computer-controlled cutting
    Cut the water filter that goes under the plant in an acrylic plate, adding several holes for the water to go down to the tank. Also the door of the project will be laser cut in acrylic.
  4. Feb 19 - Electronics production:
    Produce the Barduino that I'm going to use in the electronics for the project.
  5. Feb 26 - 3D scanning and printing:
    3D print different parts for the machine like some L angles to hold the base, some straps to hold the wires and the tubes, and small tubes or maybe a case for the electronics.
  6. Mar 04 - Electronics design:
    Design a shield that can withstand the soil moisture, ambient humidity, temperature sensors, LCD screen to be connected to the Barduino.
  7. Mar 11 - Computer-controlled machining:
    CNC the main wood structure for the prototype.
  8. Mar 18 - Embedded programming:
    Program the Barduino board to read the sensors and actuate with the actuators.
  9. Mar 25 - Input devices:
    Test different Humidity sensors to understand how it the micro-controller understands the information from the sensors, and try to create one using an ATtinny.
  10. Apr 01 - Applications and implications:
    Create an overall description of my project and how I see it is going to work in the future.
  11. Apr 08 -  BREAK!!!
    Adjust, learn, improve and rest.
  12. Apr 15 - Output devices:
    Understand and develop how to install different actuators and outputs, and make them react to different sensors. Create an speculative distance sensor with an ATtiny, for Covid social distancing.
  13. Apr 22 - Molding and casting:
    Design, Mold and Cast some rubber supports for my prototype.
  14. Apr 29 - Networking and communications:
    Connect the Barduino to the web using an MQTT protocol to send and receive information from a NodeRed dashboard that is also connected to a Weather API to gather information.
  15. May 06 - Interface and application programming:
    Design the application or interface to control the machine within the Node Red dashboard, to visualize the information gathered from the web, the sensors and actuators.
  16. May 13 - Mechanical design, machine design:
    I'm still not sure of how I'm going to use this oneMaybe is just going to be an additional learning.
  17. May 20 - Wildcard week:
    ?????
  18. May 27 - Invention, intellectual property, and income:
    Define how the intelectual property of my project is going to work, and how I'm going to generate income from it.
  19. Jun 03 - Project Development:
    Define how I'm going to continue developing and scaling my project in the future after FabAcademy ends.
  20. Jun 17 - Project Presentation:
    Present the Project to Neil and hope he likes it and everything goes well :)
Voltio

                 

© Copyright 2019 - 2020 Voltio - All Rights Reserved

The site was started with Mobirise