From 91ec66d275f59838239042344d8457dea8f226d7 Mon Sep 17 00:00:00 2001 From: Jan Prudil Date: Sun, 18 Feb 2024 16:56:34 +0100 Subject: [PATCH 1/9] First commit to my Integrating With HubSpot I: Foundations practicum repository. --- README.md | 4 ++++ package.json | 3 ++- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 76d6d581..a3ad0185 100644 --- a/README.md +++ b/README.md @@ -26,3 +26,7 @@ ___ - All work must be your own. During the grading process we will check the revision history. Submissions that do not meet this requirement will not be considered. - You must have at least two new routes in your index.js file and one new pug template for the homepage. - You must create a developer test account and link to it in your README.md file. Submissions that do not meet this requirement will not be considered. + +## Link to custom object list ("dogs") +https://app-eu1.hubspot.com/contacts/144167261/objects/2-123421566/views/all/list + diff --git a/package.json b/package.json index 62db37aa..2e7acbc3 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,8 @@ "author": "HubSpot Academy learner", "license": "ISC", "dependencies": { - "axios": "^1.3.5", + "axios": "^1.6.7", + "dotenv": "^16.4.4", "express": "^4.18.2", "pug": "^3.0.2" } From 213f5741d26bb9508674a113797ae6ebe53c46c2 Mon Sep 17 00:00:00 2001 From: Jan Prudil Date: Sun, 18 Feb 2024 17:00:22 +0100 Subject: [PATCH 2/9] First commit to my Integrating With HubSpot I: Foundations practicum repository. --- README.md | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index a3ad0185..aa937a4c 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ This repository is for the Integrating With HubSpot I: Foundations course. This To read the full directions, please go to the [practicum instructions](https://app.hubspot.com/academy/l/tracks/1092124/1093824/5493?language=en). -**Put your HubSpot developer test account custom objects URL link here:** https://app.hubspot.com/contacts/l/objects/${custom-obj-number}/views/all/list +**Put your HubSpot developer test account custom objects URL link here:** https://app-eu1.hubspot.com/contacts/144167261/objects/2-123421566/views/all/list ___ ## Tips: @@ -25,8 +25,4 @@ ___ ## Requirements - All work must be your own. During the grading process we will check the revision history. Submissions that do not meet this requirement will not be considered. - You must have at least two new routes in your index.js file and one new pug template for the homepage. -- You must create a developer test account and link to it in your README.md file. Submissions that do not meet this requirement will not be considered. - -## Link to custom object list ("dogs") -https://app-eu1.hubspot.com/contacts/144167261/objects/2-123421566/views/all/list - +- You must create a developer test account and link to it in your README.md file. Submissions that do not meet this requirement will not be considered. \ No newline at end of file From 58507828b2cf6683487deca2fe5463de1c7960af Mon Sep 17 00:00:00 2001 From: Jan Prudil Date: Sun, 18 Feb 2024 22:30:38 +0100 Subject: [PATCH 3/9] Index js - routes created --- index.js | 21 +++++++++++++++++---- views/dogs.pug | 8 ++++++++ 2 files changed, 25 insertions(+), 4 deletions(-) create mode 100644 views/dogs.pug diff --git a/index.js b/index.js index f337a32d..e4ceed7a 100644 --- a/index.js +++ b/index.js @@ -1,3 +1,4 @@ +require('dotenv').config(); const express = require('express'); const axios = require('axios'); const app = express(); @@ -8,19 +9,31 @@ app.use(express.urlencoded({ extended: true })); app.use(express.json()); // * Please DO NOT INCLUDE the private app access token in your repo. Don't do this practicum in your normal account. -const PRIVATE_APP_ACCESS = ''; +const PRIVATE_APP_ACCESS = process.env.ACCESS_TOKEN; // TODO: ROUTE 1 - Create a new app.get route for the homepage to call your custom object data. Pass this data along to the front-end and create a new pug template in the views folder. -// * Code for Route 1 goes here +app.get( '/' , async (req, res) => { + + res.render('dogs', {title: 'Dog directory'}); + +}); + + // TODO: ROUTE 2 - Create a new app.get route for the form to create or update new custom object data. Send this data along in the next route. -// * Code for Route 2 goes here +app.get( '/update-cobj' , async (req, res) => { + + +}); // TODO: ROUTE 3 - Create a new app.post route for the custom objects form to create or update your custom object data. Once executed, redirect the user to the homepage. -// * Code for Route 3 goes here +app.post( '/update-cobj' , async (req, res) => { + + +}); /** * * This is sample code to give you a reference for how you should structure your calls. diff --git a/views/dogs.pug b/views/dogs.pug new file mode 100644 index 00000000..cc220cfd --- /dev/null +++ b/views/dogs.pug @@ -0,0 +1,8 @@ +doctype html +html + head + title= `${title}` + meta(name="viewport" content="width=device-width, initial-scale=1") + link(rel="stylesheet", href="/css/style.css") + body + h1= `${title}` \ No newline at end of file From 73ef1b683cbeabe0dc9922db54eeb4643684a2ef Mon Sep 17 00:00:00 2001 From: Jan Prudil Date: Sun, 18 Feb 2024 22:54:44 +0100 Subject: [PATCH 4/9] api call for list of dogs, displaying of the homepage --- index.js | 14 +++++++++++++- public/css/style.css | 10 ++++++++++ views/dogs.pug | 17 ++++++++++++++++- 3 files changed, 39 insertions(+), 2 deletions(-) diff --git a/index.js b/index.js index e4ceed7a..33eb5892 100644 --- a/index.js +++ b/index.js @@ -15,7 +15,19 @@ const PRIVATE_APP_ACCESS = process.env.ACCESS_TOKEN; app.get( '/' , async (req, res) => { - res.render('dogs', {title: 'Dog directory'}); + const requestUrl = 'https://api.hubspot.com/crm/v3/objects/dogs?limit=50&properties=name,breed,birth_date'; + const headers = { + Authorization: `Bearer ${PRIVATE_APP_ACCESS}`, + 'Content-Type': 'application/json' + } + + try { + const resp = await axios.get(requestUrl, { headers }); + const dogs = resp.data.results; + res.render('dogs', { title: 'Dog directory', dogs }); + } catch (error) { + console.error(error); + } }); diff --git a/public/css/style.css b/public/css/style.css index 85587bb4..9af53845 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -55,4 +55,14 @@ input[type="submit"] { border: none; padding: .375rem 1rem; margin-top: 10px; +} + +th, td { + padding: 20px; + text-align: left; + border-bottom: 1px solid #ddd; +} + +ul { + margin: 2rem; } \ No newline at end of file diff --git a/views/dogs.pug b/views/dogs.pug index cc220cfd..d6e523d9 100644 --- a/views/dogs.pug +++ b/views/dogs.pug @@ -5,4 +5,19 @@ html meta(name="viewport" content="width=device-width, initial-scale=1") link(rel="stylesheet", href="/css/style.css") body - h1= `${title}` \ No newline at end of file + h1= `${title}` + ul + li + a(href="/update-cobj") Add/Update this table + table + thead + tr + th Name + th Breed + th Birth Date + tbody + each dog in dogs + tr + td #{dog.properties.name} + td #{dog.properties.breed} + td #{dog.properties.birth_date} From 8f95ffab80efb185930eae06d87fef98f3b94bf1 Mon Sep 17 00:00:00 2001 From: Jan Prudil Date: Sun, 18 Feb 2024 23:11:55 +0100 Subject: [PATCH 5/9] form for adding/updating new dog record --- index.js | 1 + public/css/style.css | 9 ++++++++- views/add-dog.pug | 26 ++++++++++++++++++++++++++ 3 files changed, 35 insertions(+), 1 deletion(-) create mode 100644 views/add-dog.pug diff --git a/index.js b/index.js index 33eb5892..78b7d791 100644 --- a/index.js +++ b/index.js @@ -37,6 +37,7 @@ app.get( '/' , async (req, res) => { app.get( '/update-cobj' , async (req, res) => { + res.render('add-dog', { title: 'Add new dog' }); }); diff --git a/public/css/style.css b/public/css/style.css index 9af53845..4e0be2a7 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -40,7 +40,7 @@ h1 { box-shadow: 3px 2px 6px lightgrey; } -label, input { +label, input, select { margin-top: 5px; display: block; font-size: inherit; @@ -57,6 +57,13 @@ input[type="submit"] { margin-top: 10px; } +input[type="button"] { + background-color: lightgrey; + border: none; + padding: .375rem 1rem; + margin-top: 10px; +} + th, td { padding: 20px; text-align: left; diff --git a/views/add-dog.pug b/views/add-dog.pug new file mode 100644 index 00000000..414ddca9 --- /dev/null +++ b/views/add-dog.pug @@ -0,0 +1,26 @@ +doctype html +html + head + title= `${title}` + meta(name="viewport" content="width=device-width, initial-scale=1") + link(rel="stylesheet", href="/css/style.css") + body + .form-wrapper + h1= `${title}` + form(method="POST") + label(for="dogname") Dog name + input(type="text" name="dogname" required) + label(for="dogbreed") Dog breed + select(name="dogbreed" required) + option(value="Shiba") Shiba + option(value="Akita") Akita + option(value="Pug") Pug + option(value="Corgi") Corgi + option(value="Border Collie") Border Collie + option(value="Bulldog") Bulldog + option(value="Poodle") Poodle + option(value="Chihuahua") Chihuahua + label(for="birthdate") Birth date + input(type="date" name="birthdate") + input(type="submit" value="Submit") + input(type="button" value="Cancel" onclick="window.location.href='/';") \ No newline at end of file From 8fe6afc9175be3d5b98059e0c6fbc63abb23a83d Mon Sep 17 00:00:00 2001 From: Jan Prudil Date: Sun, 18 Feb 2024 23:18:04 +0100 Subject: [PATCH 6/9] post request to create new dog record in HubSpot, redirecting to homepage --- index.js | 40 ++++++++-------------------------------- 1 file changed, 8 insertions(+), 32 deletions(-) diff --git a/index.js b/index.js index 78b7d791..125a70f8 100644 --- a/index.js +++ b/index.js @@ -45,52 +45,28 @@ app.get( '/update-cobj' , async (req, res) => { app.post( '/update-cobj' , async (req, res) => { - -}); - -/** -* * This is sample code to give you a reference for how you should structure your calls. - -* * App.get sample -app.get('/contacts', async (req, res) => { - const contacts = 'https://api.hubspot.com/crm/v3/objects/contacts'; - const headers = { - Authorization: `Bearer ${PRIVATE_APP_ACCESS}`, - 'Content-Type': 'application/json' - } - try { - const resp = await axios.get(contacts, { headers }); - const data = resp.data.results; - res.render('contacts', { title: 'Contacts | HubSpot APIs', data }); - } catch (error) { - console.error(error); - } -}); - -* * App.post sample -app.post('/update', async (req, res) => { - const update = { + const requestBody = { properties: { - "favorite_book": req.body.newVal + "name": req.body.dogname, + "breed": req.body.dogbreed, + "birth_date": req.body.birthdate } - } + }; - const email = req.query.email; - const updateContact = `https://api.hubapi.com/crm/v3/objects/contacts/${email}?idProperty=email`; + const requestUrl = `https://api.hubapi.com/crm/v3/objects/dogs`; const headers = { Authorization: `Bearer ${PRIVATE_APP_ACCESS}`, 'Content-Type': 'application/json' }; try { - await axios.patch(updateContact, update, { headers } ); - res.redirect('back'); + await axios.post(requestUrl, requestBody, { headers } ); + res.redirect('/'); } catch(err) { console.error(err); } }); -*/ // * Localhost From 1b3d7e6ab70eb543714e1764a18db4c53a53be21 Mon Sep 17 00:00:00 2001 From: Jan Prudil Date: Sun, 18 Feb 2024 23:28:56 +0100 Subject: [PATCH 7/9] renaming add-dog view to updates.pug, adding link back to homepage --- index.js | 2 +- public/css/style.css | 7 ------- views/{add-dog.pug => updates.pug} | 5 +++-- 3 files changed, 4 insertions(+), 10 deletions(-) rename views/{add-dog.pug => updates.pug} (87%) diff --git a/index.js b/index.js index 125a70f8..104bfa2d 100644 --- a/index.js +++ b/index.js @@ -37,7 +37,7 @@ app.get( '/' , async (req, res) => { app.get( '/update-cobj' , async (req, res) => { - res.render('add-dog', { title: 'Add new dog' }); + res.render('updates', { title: 'Update Custom Object Form | Integrating With HubSpot I Practicum' }); }); diff --git a/public/css/style.css b/public/css/style.css index 4e0be2a7..35e90ae0 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -57,13 +57,6 @@ input[type="submit"] { margin-top: 10px; } -input[type="button"] { - background-color: lightgrey; - border: none; - padding: .375rem 1rem; - margin-top: 10px; -} - th, td { padding: 20px; text-align: left; diff --git a/views/add-dog.pug b/views/updates.pug similarity index 87% rename from views/add-dog.pug rename to views/updates.pug index 414ddca9..cec74f17 100644 --- a/views/add-dog.pug +++ b/views/updates.pug @@ -7,6 +7,8 @@ html body .form-wrapper h1= `${title}` + p + a(href="/") << Return to the homepage form(method="POST") label(for="dogname") Dog name input(type="text" name="dogname" required) @@ -22,5 +24,4 @@ html option(value="Chihuahua") Chihuahua label(for="birthdate") Birth date input(type="date" name="birthdate") - input(type="submit" value="Submit") - input(type="button" value="Cancel" onclick="window.location.href='/';") \ No newline at end of file + input(type="submit" value="Submit") \ No newline at end of file From ad63384c4a7244c1be6f60b45975bac090553ad2 Mon Sep 17 00:00:00 2001 From: Jan Prudil Date: Sun, 18 Feb 2024 23:34:10 +0100 Subject: [PATCH 8/9] renaming dogs.pug to homepage.pug --- views/{dogs.pug => homepage.pug} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename views/{dogs.pug => homepage.pug} (100%) diff --git a/views/dogs.pug b/views/homepage.pug similarity index 100% rename from views/dogs.pug rename to views/homepage.pug From a77e01d585cc8d87868e16a8a6a9a1fd31325674 Mon Sep 17 00:00:00 2001 From: Jan Prudil Date: Sun, 18 Feb 2024 23:39:10 +0100 Subject: [PATCH 9/9] adjustemt of links add to this table and return to homepage --- index.js | 2 +- views/homepage.pug | 2 +- views/updates.pug | 5 +++-- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/index.js b/index.js index 104bfa2d..51a8fe1b 100644 --- a/index.js +++ b/index.js @@ -24,7 +24,7 @@ app.get( '/' , async (req, res) => { try { const resp = await axios.get(requestUrl, { headers }); const dogs = resp.data.results; - res.render('dogs', { title: 'Dog directory', dogs }); + res.render('homepage', { title: 'Dog directory', dogs }); } catch (error) { console.error(error); } diff --git a/views/homepage.pug b/views/homepage.pug index d6e523d9..22414648 100644 --- a/views/homepage.pug +++ b/views/homepage.pug @@ -8,7 +8,7 @@ html h1= `${title}` ul li - a(href="/update-cobj") Add/Update this table + a(href="/update-cobj") Add to this table table thead tr diff --git a/views/updates.pug b/views/updates.pug index cec74f17..750cd428 100644 --- a/views/updates.pug +++ b/views/updates.pug @@ -7,8 +7,9 @@ html body .form-wrapper h1= `${title}` - p - a(href="/") << Return to the homepage + ul + li + a(href="/") Return to the homepage form(method="POST") label(for="dogname") Dog name input(type="text" name="dogname" required)