Fab Academy 1

Website Creation / Project Management

HOW TO CREATE YOUR WEBSITE?

Gitlab + Atom + Mobirise
Tutorial

In this first week, we are going to start creating our website using the Gitlab platform as a hosting server, Mobirise Web Builder to design the web page from a chosen template, and Atom to modify the code if we want to, and to push it or pull it to/from Git Lab.

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.

How To Git?

Create a Gitlab account:

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

Setup Git in your computer through terminal:

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

Copy SSH Key to Git Website:

Youtube Tutorial

Clone your GIT repository:

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

Upload your files through terminal:

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 - 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.

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

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.

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

git-plus
(Integrates Git)

git-checkout
(Allows checking out remote branches within Atom)
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.
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!!!

Project Managment

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

P.O.W.A.R

Plant Observatory of Weather Adaptation for Resiliency

POWAR is a machine that is able to replicate in its interior different climatic characteristics of agriculture to analyze and learn through "Computer Vision" about which are the optimal conditions to grow each plant.

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 its future. culture.

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.

Mobirise web builder - Click for more