Principles, Practices & Project Management

Week 01

About my final project and on how to use html

This week, the first thing I had to do was to define my final project and define the main way to set my website, including which language to learn. Regarding my project, I was doubting between a "DIY tortilla maker" and an automatic coffee thermo. Speaking with my factulty and sponsors, I finally went for the coffee option. In terms of the programming language, I looked at the preferred code by Fab Academy and was attentive to the suggestions of my faculty. After a hard time making up my mind, my choice was html.

First of all, I want to make clear that my background is in business and education related to business and strategy. That´s relevant because that means that I started without a clue in terms of programming, drawing or engineering processes.Despite that, I am passionate about learning and keen on always looking for ways to deliver better results.

I made my research in terms of how important is temperature in relation with the experience of drinking coffee. I found some interesting articles, such as:

• Article about variations in coffee´s temperature and their effects
• Paper about the effects of serving temperature on sensory perception and acceptance of brewed coffee

On the other hand, I felt the "healthy" pressure in terms of learning some basic html programming in less than a week. Due to my previously explained personality, I did what any student would do: I consulted "Gepeto" (Chatgpt).

Next, I share some images about my travel, not only with GPT, but also with Bard:

In the meantime, my faculty suggested me to create my website on googlesites, which I did. Once I got my skeleton, I runned an exercise with the takeout command google offers to create backups. I followed the steps and got really frustrated because it didn´t work. Then, I interviewed with a colleague and she taught me how to "inspect" or "view the origin" of most of the websites. With that new information, I thought an easier way to do it was to "just" copy the google code in html format and paste it in git. The results were that the site replicated in the new hostage, but the code was delivered in very few lines. That sounds like good news, until you want to make changes and need to look for a command inside a gigantic line of code.

Analizing the results, I interviewed the CTO of the university in terms of what language to use. He commented me to start with wordpress, but once I told him why I wanted to learn the language, he suggested me to start with html. He supported his reasoning by saying that almost any other programming languages originate from or are compatible with html. After looking how the different webpages of the Fab Academy are written, I saw that they are based on the same language. So, I decided to give a try to learn the basics of html. With my learnings of this week, here are the basics of html, and I guess, any programming language.

1. Always start by defining the language you will use.
2. Divide the webpage in sections, e.g.: head, body, footing.
3. You can subdivide the sections into divisions, e.g.: research, theory 1, theory 2, gallery 1, videos...
4. The previous tip is useful to give format (style) to each division
5. You can always ask AIs for feedback.

I confirmed my learnings by consulting Gemini. I asked it to provide me with the basic syntax rules:

Once I had the basics, what I did next was to start playing with the code, by commiting certain "commands" on Git, then looking at the results, analyzing the desired outcome versus the actual one, then returning to the code to execute the changes.

Next, I share some evidence of how to interact with Git, the platform in which we can create directories (similar to file folders in the computer), edit text, and upload images, videos and files. I know I could upload also certain "drivers" to run projects generates in different programs, but I am not keen on that yet as I am still learning the basics of html. I share also how I uploaded files, how to edit in Git the way I organized the information:

After many interactions, I came up with a great function that Git has:Preview changes, which allows you to double-check the changes in line codes before committing. You might see an example next:

As well, I can tell that this exercise has to do, especially at the beginning, with an empirical approach. This might be counterintuitive, as one of our main instructions is to document what we are doing. However, even when general instructions and tutorials might work, each of us will deliver his own personal way of doing things and achieving the results. That´s why I have commited more than 100 times this only assignment. Hopefully, assignment after assignment I will recquire less and less commits to get better and better results. Next, I share a piece of evidence of that:

About the Project

Next, I share a couple of drawings of my idea, trying to respect the concentric growing circles scheme that was presented to us last week:

Again, I consulted "Gepeto" for some suggestions, and I think the automatic thermo is possible. These were my components suggestions delivered by the AI:

A temperature sensor is employed to continuously monitor the internal temperature of the thermo. This sensor, often a thermistor or digital temperature sensor, provides real-time data to the control system.

A microcontroller, such as Arduino or Raspberry Pi, processes the temperature readings and controls the heating element accordingly. This heating element, typically a resistive heater or Peltier module, is responsible for adjusting the thermo's temperature.

A control algorithm is developed to manage the interaction between the sensor, microcontroller, and heating element. This algorithm, could be based on Proportional Integral Derivative (PID) control.

For user interaction, a user interface is implemented, allowing consumers to set their desired temperature. Depending on the advancement of the project, this interface could range from simple LCD displays with buttons to more advanced touchscreen interfaces or smartphone apps.

I also asked ChatGPT to suggest me a guideline to follow in order to succesfully build the automatic thermo. I think that with the help of nowadays technology, my faculty, and the great network we are developing, it will be possible to help every coffee lover to have a better overall experience without worrying about it being cooled by weather conditions.

Next, I share what the tool suggested me:

How the thermo will work

Being curious, I wanted to convert my drawed sketches to a diagram that could live inside the code. I asked Bard and Chat GPT how to do it. Next, I share the code for the section, and the results:

Diagram illustrating the components and operation of the thermo. The heating element generates heat, which is regulated by the control algorithm based on feedback from the temperature sensor. Users interact with the thermo through the user interface.

Inspiration

Chargeable cup

Thermo with thermometer

How to fusion the concepts?

Benchmarks:

Here, I share a couple of links in temu, where you might find sellers of related products:

• Thermo with thermometer
• Electric stove for coffee cups

Conclusions

After almost 400 code lines and more than 100 commits, I can say that I have learned a lot in many ways. Humbleness, creativity, networking and frustration tolerance are some of the meta-lessons above learning to code in html, documenting, creating branches and files in git.

I can only say that life is meant to be lived, and this is one of the most adventurous experiences I´ve ever had. Thank you for the opportunity, I will give my best!

Student Agreement

I almost forget, here you might find my student agreement: Student Agreement for Rogelio Cordoba.