live coding(5)
web development(14)
Watch the episode of Experts Zone at Frontend House by Aleksandra and Bartosz - frontend developers will show how they use Strapi on real projects and will share some cool features.
Transcription
- Bartosz
- Hello everyone and welcome to the new Frontend House special episode. My name is Bartosz and I'm here today with Ola.
- Aleksandra
- Hello everybody.
- Bartosz
- We are both frontend developers working together for Liki Mobile Solutions and Frontend House. Our main topic for today and what we're going to talk about during this video is Strapi. We are going to make a quick overview about advantages of using Strapi, focus on some most interesting features, share some thoughts from the user's perspective, and show you some core functionalities from developer's side of view. So what is exactly Strapi? Strapi is a content management system which provides easily building, customizing, adjusting content architecture and delivering modern digital platforms and experiences. It's a 100% JavaScript, open source headless CMS.
- Aleksandra
- I remember when I first heard this term, headless CMS, I was like wondering what happens to this head and why? Just in case someone else is wondering as well, we can just give you an overview.
Headless CMS
- Bartosz
- You are completely right. So headless CMS is opposite a little bit to some kind of CMS like WordPress. You have separated frontend and separated API, which is called REST API, and it is a medium between database and the app itself. Strapi is fully customizable and really developer friendly. With constantly evolving developers community, Strapi became a solution which is being recommended by thousands of users from all around the world and can be exposed to any digital channel, device or product. Because of its user friendly interface, Strapi is easy to use for content managers, administrators and the rest of nontechnical stuff. With just a few clicks you can manage content of the whole page. And what is more, you can integrate it with your favorite tools, extend and connect with other tech stacks, and much more.
What are the most interesting advantages and pros of Strapi?
- Bartosz
- And how about its core features? The most interesting things which make Strapi so unique are its simplicity and flexibility. You don't have to spend much time to build your desired content types because of its easy to use, simple and intuitive interface. The structure of content types enables you to customize and combine plenty of fields available and possibilities to mix them are countless.
What is more, Strapi has multidatabased support, which means that you can pick any of the database. The choice is yours. So you can select from SQL Lite, MySQL, Postgres and MongoDB and or some more. Of course, you can connect your platform to other types of database structures like Redis Cloudinary and whatever you wish regarding relational and non relational databases.
With its customizable API, Strapi lets you consume the API from any type of client using different technologies, like React, Vue or Angular, REST, GraphQL or even mobile apps. You can customize your Strapi API by just jumping to your code editor and fit your needs.
Talking about Strapi, we have to mention also something about its content structure and design system. Its content modeling lets you define, create and organize any content models and APIs. And moreover, while creating components, you make it once, then reuse often so that you can reuse them in any content type. Content types can be related with each other, which means that you can, for example, link articles to categories or create any type of content relations that you need. Everything is provided by Strapi for you.
All of that things make Strapi an excellent choice. Whatever you want to build a mobile apps, websites, editorial sites and even ecommerce platforms. Thousands of huge corporations and companies have already trusted Strapi. Such like Toyota, IBM, NASA, Accenture and much more. - Aleksandra
- Yes, also I would like to add that Strapi is extremely approachable for beginners because I started working with it this year and I had to learn everything from scratch. But it went quite fast because there is good Strapi documentation.
And apart from that, there are a lot of tutorials on their official website. Some of them will help you to start and some of them cover even more advanced topics. And in case you are looking for some tips and you are not able to find them on their website, you can even request a tutorial, which is great, right? There is a very detailed user guide, there are instructions to screenshots, so also people from business or marketing specialists are taken care of.
So before we jump to more practical part, maybe let's ask Olga about her experiences Strapi, because as a marketing specialist she works with this tool on everyday basis and maybe Olga, could you please tell us what Strapi allows you to do and what is your experience?
Working with Strapi as non-developer
- Olga
- Hi, my name is Olga and I work with Strapi almost every day. I'm a marketing specialist and I work on content for the website. We need our website to be as SEO friendly as possible and Strapi gives us an opportunity to adapt it for our needs and change it whatever we need. This is the first thing I want to mention about Strapi.
The next thing, Strapi gives us an opportunity to use different programming languages at the same time while building web pages. For example, we can use markup and HTML for editing text that we provide to CMS.
We can build web pages from the smaller elements modules and this makes the work faster and more effective.
My fourth reason to choose Strapi is security. You can see when and by who content was edited, changed or edit. And Strapi also supports multilingual website, so it's easy to build them. If I have to be fair, Strapi is intuitive, easily manage, and it's easy to use as WordPress, but it is not WordPress. It gives more possibilities to adapt the website and make custom changes.
Strapi closer look
- Aleksandra
- Okay, so let's dive deeper in Strapi.
First we will take a look at the panel in which we can add or update content. Then we will check how we can query for this content and how we can use it in our application. And since our frontendhouse.com and likims.com are both using Strapi today, in this episode we will show you a little bit behind the scenes.
Okay, so I started my application and logged into Strapi Admin panel. There is a lot of content already and it is added in two categories - collection types and single types. Let's take a look at job offers. So here we have a list view because Job offers is a collection type. So here we can see all of the different entries that were created from this collection type. So you can see we have multiple job offers here and you can see that some of them are in draft mode. So there is some content edit but it is not showing anywhere at the moment. So only items that are published will be visible on the website.
Okay, let's take a look at single types now. For example, let's check Contact form. Unlike collection types which have multiple entries, single types are not created for multiple users. In other words, there can be only one pear-tree pair available single type. So it's a perfect choice for contacts form, right? Because we just have one main email address, one main phone number. So single type is a perfect solution here. So now let's take a look at some of the data that we have in Strapi and check how it is shown on the page.
Let's start from Careers page. And here we have What our team says section, and here we have reviews of our team members, like what they think about working at Liki. We have free reviews here and on our website we can see that they are used here in this review slider. We can see Olga, Kasia and Bartek, only famous people here, on the top, right?
Okay, so now let's take a look maybe at top section of this website which is here. Here we have the title, here we have some links and an image. So this is exactly this part. Now let's try to update maybe this section. So instead of Join the crew, let's say Join us - simply shortly, okay? And on our website we also have a Process section which describes the recruitment process at Liki. So we have different steps here. Let's add one more, shall we? So what we can add… Enjoy and Grow? - Bartosz
- Something like this at the end of the process.
- Aleksandra
- Grow and enjoy. Okay. No typos, perfect. Okay, so as soon as I click Save and Commit database,
- Bartosz
- It works pretty fast.
- Aleksandra
- Yeah, it works pretty fast. I will just refresh the page in a moment and I think that it's nice that you can add text or images anytime you need, right? You don't need developer to do it for you. So developers can focus on providing new features, working on new features or fixing bugs.
Okay, so we played around a bit with adding and updating content. But we can ask ourselves, how does Strapi know that here I need some text fields and an image. - Bartosz
- Magic?
- Aleksandra
- Maybe not magic, but Content Types Builder. So here in Content Types Builder, we define a set of fields for each type that we define. So for example, if you want to add a completely new section or completely new type of content, we have to define it here. So for example, let's take a look maybe at the beginning, it's something relatively simple. For example, Reviews. We can see that it consists of couple of text sections and a number. Often these collection types are way more complex. Let's take a look at Services. And here we can see the different type of fields that are available in Strapi.
So what do we have here? We have text, we have media files, here it's an image. We can add some data in JSON format. Going down we have also enumeration, so it will be a drop down with predefined values. I think most of the time here we use it to set the size of the background or the background theme in our application. - Bartosz
- Is it possible to have subcorrections?
- Aleksandra
- Yeah, I will talk about it in a moment because components will help us here a bit. Because as you can see, this structure is kind of nested but it's thanks to components. Okay, what else we have? We have also boolean. And maybe, let's say we would like to add one more field, because here we can see all of the types that are available. So rich text, date, all these things we already saw and components that you already asked about.
So this one might be not so obvious, but it's extremely useful because it can hold multiple types of fields. For example, let's take a look at Process section, right? So we have Process section which is a component then we have a component of text fields, right? And we can also indicate that this is repeatable so we can have a number of different steps and they all will have the same structure, and we can reuse it. So for example, we saw that on Careers page we had Process section which we used to describe our recruitment process, right, but we can also use for example on our Services page to describe the way we work with customers, how we approach the new projects for example so it's very nice that they're reusable.
Bartek also mentioned relations at the beginning so here we can see an example. So here we have a component with team members and here we indicate that team members component has a relation with people. - Bartosz
- As I see you can select whether you want to have one to one or one to many relation.
- Aleksandra
- Yes, exactly, you can select. Okay, so I think that's the most important about Content Types Builder here. Let's take a quick look at the Media library. Very helpful plugin maybe let's show some more. It's a nice way to quickly check what assets we have already uploaded, right? So we can reuse something that we already have. Thanks to the search filter and sort, we are able to find what we need quite quickly.
- Bartosz
- So for now, you can upload images, audio and video to our media library in Strapi.
- Aleksandra
- Yes, exactly. Yes, these types are for sure available. Okay, so maybe let's mention one plugin which we use a lot recently because we are working on making our website available not only in English but also German and Polish. So, as you can see, Strapi has internationalization plugin so it enables you to serve content in different language versions.
So after you install this plugin, you can add different language versions here, right? So for now we have free versions. And then very important step, we have to indicate again in Content Types Builder that we want the certain collection type to enable this localization of content. And then let's maybe take a look at example of our main page which is here, right? So here we have English version. Here we have German version. Different content, everything is translated. Maybe let's scroll a bit down. So everything is in German here and we also already have a Polish version of our website, right. So everything is in Polish. And that's it.
So maybe now let's take a look at some code finally. And we will be looking closer at this component. So here we show reviews of our customers in the slider. And we keep this data here in Strapi reviews, right? So you can see all of these reviews here? - Bartosz
- As a post?
- Aleksandra
- Yeah, but it's like a collection type because there are a lot of different entries. Okay, so these are the reviews in Strapi. And now how we get this data and how we can use it in our application. Here you can see we have declared GraphQL query to get this data from Strapi. And where we use it? It is done here in getStaticProps method where we fetch data from our CMS and then pass it to our components. So here we can see we have review slider query here. And then this props here like this huge object of props. This is here, right? And then it goes to our home page component, exactly here to reviews, right? And then if we switch to reviews we can see that for each review we render review slides. And this one will be responsible for showing all the details right of the review.
So here we see a company author of the review and so on and so on. Okay, one more thing that is very useful and I use it quite often when I have some strange errors or when I want to make sure that the query, that I created is right, is correct. So there is a GraphQL Playground, very helpful for debugging, as I mentioned. So here I can paste my query and here I get the data. So I can check exactly what I get. If this is an object or if this is an array, what are the properties names? Right? Because if you make a typo or you make a mistake, then you will probably get undefined. So it's a very nice way to check. Also, when you write new queries, it's nice to test it here, then get some strange errors and wonder what went wrong. So this is very helpful.
Future Improvements + Planned features
- Bartosz
- At the end of our today's video, we're going to talk about planned improvements of Strapi. Speaking about the future of Strapi, the development team is constantly working on new features and improvements to make user’s and developer’s experience better and better.
At the moment strapi creators are working on responsive administration panel ( adjusting it to mobile and tablets ), database transactions - which will give developers more options regarding maintaining database requests and audit logs - which will let the user to see what was changed, see some king of history of editing an item content and trace unwanted content changes.
Features which are planned for the nearest future are reviews workflow - which will enable user to review the content written by some author before publishing, multi tenancy - which changes the architecture of an application allowing multiple projects in a single application - something similar to Wordpress multisite feature, in which each of the projects can use different databases, configurations, custom plugins and is fully independent. Another thing worth mention regarding future improvements is the new rich text editor, which could swap the default one that strapi provides, and it will come with more options regarding writing text and creating content. - Aleksandra
- So that's all that we prepared for you today.
- Bartosz
- Yeah, seems that's all for today. If you are thinking about Strapi project, let us know, we will be glad to support you. Our Strapi Team reamains at your service.
- Aleksandra
- We hope that you enjoy it and see you next time.
- Bartosz
- See you next time. Bye.
