Maria: Headless cms, 3 weeks

[MMikhailova]

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

[MMikhailova]

Week 1

I pushed my progress here.

I Need Help With:

CMS installation is cryptic for me. Why don't we use Web version of Strapi?

Often we work in a given environment in HYF and I understand why but I am wondering how could I manage this outside the program?

P.S I would love to take part in a Thursday evening Q&A but I have Parent meeting at my daughter school exactly in this time:(

What went well?

The exercises from /http-calls/exercises/2-complex-queries/ were clear. I have finished all and helped out my classmates.

What went less well?

I feel like I am losing the focus sometimes. Since we work in configured CMS, it is difficult for me to get a big picture of whole process. Ex. Why we are writing query in JS. How to configure CMS? What does it mean "configure CMS" eventually... etc.

Lessons Learned

🥚 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

Sunday Prep Work

Keep doing exercises and go through suggested study

[danielhalasz]

Why don't we use Web version of Strapi?

there is no web version at the moment, and even when there will be, it will not be free.

it is difficult for me to get a big picture of whole process. Ex. Why we are writing query in JS. How to configure CMS? What does it mean "configure CMS"

the point of using a CMS is that you as a front-end developer do not have to think too much about how all of the backend is actually implemented and you do not have to write the routes, the authorization, etc yourself. it is an easier way to interact and to use a database and content for the front-end. in the front-end, we use JS to get the content for our web app from the backend. so a potential user of the web app can filter the webshop items (for example) according to their own desires and the content is dynamically served. to configure a CMS is something we will get into, how to set up the categories, what can be accessed by what users, etc.

[MMikhailova]

Why don't we use Web version of Strapi?

there is no web version at the moment, and even when there will be, it will not be free.

Now you see that I was confused with notions..
By saying web version I meant localhost:1337/admin in the browser.
I must not have written the check-in before I had studied the topic well enough 😊

Anyway now It's clearer for me. Thank you

[MMikhailova]

Week 2

I pushed my progress here.

I Need Help With:

I have implemented Chat app data model in Strapi and managed to retrieve the data via Postman and JavaScript.
I am currently working on displaying/modifying data via HTML&JS. I managed to display Users and Channels, sending messages (via POST to Message table). I suppose to be able to send a message from different users I need first to make sign in form. This step is not clear for me yet. Hope we will go through authentication and "sign in" subjects on Sunday.

What went well?

• Chat app model implementation
• Fetching data from server via complex JS queries using filters, sort, populate and etc.
• Displaying data via HTML&CSS page

I also enjoy playing in fantastic-moxie by @yoshimalaise 👍
The game is super cool. Only thing that would be nice to add is the right hero. When user makes mistake and see the right answer, he/she can figure out where was the mistake.

What went less well?

I got sick and almost lost my voice again and I feel bad when I have to refuse some help requests from classmates:(

Lessons Learned

Work life balance is important.

Sunday Prep Work

Keep working on chat - app.

[danielhalasz]

I suppose to be able to send a message from different users I need first to make sign in form. This step is not clear for me yet. Hope we will go through authentication and "sign in" subjects on Sunday.

yes, that is the plan

I got sick and almost lost my voice again

oooooh, very sad to hear that! will you be able to attend in person on Sunday?

[danielhalasz]

CONGRATULATIONS once again for the hard work you did with the chat app!

[MMikhailova]

Me

What was not clear, where did you get stuck?

First I got stuck with the difference between registration and login in Strapi, but thanks to @danielhalasz explication it became crystal clear:)
The only thing that I couldn't get so far is how to upload an image to avatar field during the registration from JS file.
I tried POST method to http://localhost:1337/api/users?populate=avatar with

{
    data:{
   avatar: {
       url:"/upload/hyf.jpeg"
   }
    }
}

But it doesn't work. I had to upload img from Strapi content manager.

What was clear, what did you master?

This module was one of the most exciting for me.
Yoshi is a great teacher!

• I have learnt data modelling in Strapi
• Managed to implement chat-app data model with HTML/CSS and JavaScript
• Finally configured endpoint permissions (Authentication)

Where can you still use some help?

I can't understand how can I share my chat-app code. Will it work in Git page if I create one for the repo?

I would really like to finish my chat-app and it would be great if somebody could give a feedback on my code.

Where can you help others moving forwards?

I was happy to help all classmates who asked me for this in this module and I plan to keep sharing.

---

The Course

What can there be more of?

Everything was enough.

What can there be less of?

I don't know))

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

As usual, I focused only on suggested studies and it was enough to understand the basics.

What HYF material was least helpful?

Strapi documentation.

Any suggestions for future classes?

THANK YOU!

[danielhalasz]

But it doesn't work. I had to upload img from Strapi content manager.

indeed, as far as I know you can not store media files directly in a SQL database, but instead upload them to a separate service such as Cloudinary or use the content manager.

[danielhalasz]

I can't understand how can I share my chat-app code. Will it work in Git page if I create one for the repo?

Github pages only works for the frontend, the backend has to be hosted on a separate server. In the individual projects module with Yoshi, we will look into how to deploy a full stack application. We are actually currently looking into the options, as the service we used to use at HYF, Heroku, is no longer free.