Cristobal: Headless CMS, 3 weeks

[alexander-lopez-s]

headless cms

Learning goals

• 🥚 Understanding what a content management system is, and why people use it
• 🥚 Given an existing CMS installation fill in and publish a new piece of content
• 🥚 Perform a simple http call via postman to retrieve a piece of information.
• 🐣 Extend and adapt an existing CMS configuration
• 🐣 Perform a http call with filtering via Postman
• 🐣 Perform a http call with "include" via Postman
• 🐣 Perform a http POST call to create new data
• 🐣 Perform a http PUT call to update existing data
• 🐣 Configuring endpoint permissions (Authentication vs Authorization)
• 🐥 Design a data model from scratch based on user requirements

[alexander-lopez-s]

Week 1

I Need Help With:

• I did not undertand what is the meaning of the numbers in between brackets. http://localhost:1337/api/products?fields[0]=name&fields[1]=price
  If i change [0] for [1234], i get the same data, i don't know why we need those numbers.

• Is Strapi nowadays the most used headless CMS by companies?

• Is it recommendable to use Strapi for designing API? I mean, the whole content of the website will be created dynamically with JS, is this a good practice? Or can we just use Strapi to manage specific elements of our webpage?

What went well?

• Was able to add new items to the DB using Postman, was able to delete a complete category of items.
• I can manage to make basic HTTP requests using Postman.
• I have completed some exercises in the Headless CMS repo.

What went less well?

• When I close my laptop, my local server stops to work and I must type npm ci in the console to make the server run again. I wonder how can I fix this problem.

• The complex queries are very complex.

Sunday Prep Work

• I will complete my exercises and get ready for Sunday.

[danielhalasz]

• If i change [0] for [1234], i get the same data, i don't know why we need those numbers.

well that's the way Strapi is written :) you do need to differentiate between the fields, as it is an array..so they can't have the same number

• Is Strapi nowadays the most used headless CMS by companies?

it is popular, but not sure how you can measure that

• Is it recommendable to use Strapi for designing API? I mean, the whole content of the website will be created dynamically with JS, is this a good practice? Or can we just use Strapi to manage specific elements of our webpage?

yes, that is why we have this module :) only that content will be dynamic that we want, definitely not the entire app. the content that can change constantly or often, or that needs to be generated interactively based on user input..is what can be dynamically generated into HTML

[danielhalasz]

• When I close my laptop, my local server stops to work and I must type npm ci in the console to make the server run again. I wonder how can I fix this problem.

well, that is expected. you are emulating, simulating a server on your local machine. if you close it, it stops. but instead of npm ci, you should be able to just run npm run develop

[danielhalasz]

week2?

[alexander-lopez-s]

Week 2

I Need Help With:

• So, once we have our chat API model designed and created in Strapi, how can we implement functionalities such us loging in, storing passwords, creating unique usernames, etc? Do we need hel from any other programming language?

• I am not sure I understood relations. What is the reference that we take to determine a relation type? Let's say we are designing a restaurant. Price and Products have a relation, but what tells me that the relation is one-to-many or many-to-one? Why is this useful?

What went well?

• Was able to fetch data from the server
• Played a bit with the fetch function and DOM manipulation
• Was able to display my data fetched from the server in HTML file using JS
• Was able to retrieve pictures from the server by using populate=*

What went less well?

This was a very busy week for me but was able to at least understand the basics of Strapi and how to retrieve data from the server.

Lessons Learned

• Strapi helps us design an API for our aplication.
• PostMan helps us retrieve a API and if we give permissions, edit it or delete it.
• Through the JS function fetch, we can retrieve our API and print it in HTML.

Sunday Prep Work

• Will research more about Strapi.

[alexander-lopez-s]

Week 3

What was not clear, where did you get stuck?

1. Unfortunately, the authentication topic was explained too fast, I tried rewinding the video but I did not understand enough to make my own authentication JS function.
2. I guess I need to understand better how the token works for authenticated users to able to log in.
3. I do not know how to finish my chat app, I want to display the messages from the sender in the right side and the receiver in the left side but I cannot figure it out.

What was clear, what did you master?

1. I was able to understand what an API is and how to manipulate data from the server.
2. I was able to GET and POST data to/from my endpoint.
3. I created my very first chat app (completed at least around 40% of the functionalities).
   a) Was able to fetch data from Strapi to show the chat usernames in my index.html.
   b) Was able to create a function that allows me to upload messages to Strapi.
   c) Was able to create a function that allows me to display/print the messages in the DOM.
   d) Was able to nest a SetInterval() function to refresh/download new messages.
   e) Worked a bit on CSS styling to avoid a long message chain to overflow.
4. I tried creating a sign-up form and posting the data in the server.

Screen.Recording.2022-09-22.at.22.06.35.mov

Where can you still use some help?

1. I need a refresher to use DELETE method. I tried but it did not work. I want to make a button that once clicked, it could delete messages from my app. I cannot find any JS function on the internet that could give me an idea.

Where can you help others moving forwards?

1. I am very confident with fetching data and printing it in the DOM.
2. I can create new data elements and post them.

---

The Course

What can there be more of?

1. Maybe a little bit more of attention/time to complex topics such registering/authenticating new users.
2. More projects like the chat app.

What can there be less of?

1. Nothing less, I was wondering if we can start earlier (at least one hour), so that we do not rush and maybe the topics will be clearer.

What material were most helpful (from HYF or elsewhere)?

1. Everything provided by HYF was of a great help.

What HYF material was least helpful?

1. Strapi documentation, really flat and not so clear. I prefer Youtube tutorials, once again.

Any suggestions for future classes?

1. Little retro-quizzes at the beginning of the class to refresh what was studied previous week.
2. Random questions from the coaches to the students to challenge our knowledge/understanding.

Thanks

1. Special thanks to @yoshimalaise for his time and his charisma to teach us in this module, @danielhalasz for reviewing, guiding us and giving us feedback, @MMikhailova for being a very intelligent student who always helps us with what she can.

THANK YOU!

[danielhalasz]

• how can we implement functionalities such us loging in, storing passwords, creating unique usernames, etc? Do we need hel from any other programming language?

we have covered Auth since then, do you still have questions about it? everything is possible with JS ;)

[danielhalasz]

• Price and Products have a relation, but what tells me that the relation is one-to-many or many-to-one? Why is this useful?

well, you have to think about the relation type, in order to be able to create a useable database that can store and fetch information in a sensible way

[danielhalasz]

• PostMan helps us retrieve a API and if we give permissions, edit it or delete it.

Postman is good for testing an API, the various request types of GET, POST, etc.

[danielhalasz]

2. guess I need to understand better how the token works for authenticated users to able to log in.

I have explained it in Slack to Maria, have you seen it?

[danielhalasz]

3. I want to display the messages from the sender in the right side and the receiver in the left side but I cannot figure it out.

take a look at CSS flexbox for positioning

[danielhalasz]

1. I need a refresher to use DELETE method. I tried but it did not work. I want to make a button that once clicked, it could delete messages from my app. I cannot find any JS function on the internet that could give me an idea.

my first assumption is that only authorized users can delete anything from the database.. so probably you have to provide a Bearer JWT token in the header of the request.