- Follow the tutorial in https://www.w3schools.com/js/default.asp.
- Follow the tutorial in https://www.w3schools.com/react/default.asp.
-
Follow the tutorial Consuming REST Services.
- For now, only attempt to make REST calls using Basic Auth. You can ignore making calls using OAuth2.
-
Repeat the curl commands, but this time, using HTML/JavaScript. There is no need to use Node for this. Create a HTML page and use the JavaScript fetch api to replicate the curl commmands.
-
In order to call Liferay REST services from your HTML page, you will need to enable CORS. You can enable CORS in Liferay by navigating to the Control Panel > System Settings > Security Tools > Portal Cross-Origin Resource Sharing (CORS).
-
Add new configuration entry. Make sure it includes a URL pattern */o/headless-delivery/** since the REST services we are calling are included in this path. Save your configuration.
-
Accessing Liferay REST services will require authentication. You can provide this to your REST call by adding a header with the key Authorization and the value 'Basic ' + btoa('test@liferay.com:test'). Read about btoa for more information.
-
-
Send a pull request to brianchandotcom, replacing the PLACEHOLDER text below with the JavaScript commands.
Show JavaScript commands.
//fetch functions to post, get all posts, get a specific post by id, delete a specific post by id.
//it may be necessary to change the siteId value and the authorization field in headers.
//Intern: Eric Moritsuka
const siteId = "20121";
function POST() {
fetch(
`http://localhost:8080/o/headless-delivery/v1.0/sites/${siteId}/blog-postings`,
{
method: "POST",
headers: {
"Content-Type": "application/json",
Authorization: "Basic " + btoa("test@liferay.com:learn"),
},
body: JSON.stringify({
headline: "Test Blog Entry from REST Services",
articleBody:
"This article was posted via REST services provided by Liferay DXP.",
}),
}
)
.then((response) => response.json())
.then((data) => {
console.log("Success: ", data);
})
.catch((error) => {
console.error("Error: ", error);
});
}
function GET() {
fetch(
`http://localhost:8080/o/headless-delivery/v1.0/sites/${siteId}/blog-postings/`,
{
headers: {
Authorization: "Basic " + btoa("test@liferay.com:learn"),
},
}
)
.then((response) => response.json())
.then((data) => {
console.log("Success: ", data);
})
.catch((error) => {
console.error("Error: ", error);
});
}
function GET_BLOG_BY_ID(blogId) {
fetch(
`http://localhost:8080/o/headless-delivery/v1.0/blog-postings/${blogId}`,
{
headers: {
Authorization: "Basic " + btoa("test@liferay.com:learn"),
},
}
)
.then((response) => response.json())
.then((data) => {
console.log("Success: ", data);
})
.catch((error) => {
console.error("Error: ", error);
});
}
function DELETE_BLOG_BY_ID(blogId) {
fetch(
`http://localhost:8080/o/headless-delivery/v1.0/blog-postings/${blogId}`,
{
method: "DELETE",
headers: {
Authorization: "Basic " + btoa("test@liferay.com:learn"),
},
}
)
.then((response) => response.json())
.then((data) => {
console.log("Success: ", data);
})
.catch((error) => {
console.error("Error: ", error);
});
}
-
Post documents to Documents and Media first using curl and then with JavaScript.
-
Send a pull request to brianchandotcom, replacing the PLACEHOLDER text below with the JavaScript commands.
Show JavaScript commands.
```
//fetch function to post a document to Documents and Media
//it may be necessary to change the siteId value and the authorization field (password) in headers (in documentFetch.js).
//Intern: Eric Moritsuka
//In index.html:
//(I created the file so I could test the api by sending an actual file).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<form id="formDocument">
<input type="file" id="document" name="img" accept="image/*" />
<button id="button">enviar</button>
</form>
<script src="documentFetch.js"></script>
</body>
</html>
//In documentFetch.js
const siteId = "20121";
const button = document.getElementById("button");
const formDocument = document.getElementById("formDocument");
const clickHandler = (event) => {
const myFileHere = document.getElementById("document");
const form = new FormData();
form.append("file", myFileHere.files[0]);
event.preventDefault();
DOCUMENT_POST(form);
};
function DOCUMENT_POST(formData) {
fetch(
`http://localhost:8080/o/headless-delivery/v1.0/sites/${siteId}/documents`,
{
method: "POST",
headers: new Headers({
Authorization: "Basic " + btoa("test@liferay.com:learn"),
}),
body: formData,
}
)
.then((resposta) => resposta.json())
.then((data) => console.log(data));
}
button.addEventListener("click", clickHandler);
```
-
Execute setup_tutorial.sh to ensure Node and NPM is setup correctly.
-
Follow the tutorial in https://github.com/ethib137/liferay-react-example.
-
Do not follow the tutorial blindly. You have already executed some of the steps.
-
Deploy the app to a Liferay docker image using the docker cp command. Read Installing Apps and Other Artifacts to Containers to learn how to use docker cp.
-
- Familiarize yourself with all the components in Clay.
-
Write a new Liferay app to demonstrate CRUD operations of Blogs, Documents and Media, and Knowledge Base using Clay, React, and REST.
-
Send a pull request to your neighbor that contains your new app. Your neighbor should be able to deploy your app to Liferay with a single command (e.g. df && ls). The app should also work when your neighbor adds it to any site in Liferay. That means the app must not contain hard coded IDs or URLs.
-
Review your neighbor's app that was sent to you. Compare and contrast your implementation with your neighbor's implementation.
-
Send a pull request to brianchandotcom that contains your new app.