In this guide we will learn how to build a web application that will be used by us to manage and collect the contact Details of our customers in a database and use it later for our needs as business owners, page managers or for any Need. So, what technologies are we going to use?
- Node.js
- Express.js
- Basic HTML, CSS
- Bootstrap
- API
- Heroku
In this guide I assume that you have already installed Node.js, that you have a basic knowledge of HTML, CSS and That you have a basic knowledge of writing code. If so, let's get started.
- Open a new project and choose a name for it.
- Move the files I attached to the folder here into the project.
- Open a terminal inside the project and run the following command - npm init, the terminal will start asking You how you would like to configure everything - just press enter and it will configure the deployment Settings for you - which will work just fine for us, you will know that you have finished configuring if a new Packgae.json folder has been created in the project And in the terminal the option to give new commands Will appear again.
- Run this command in the terminal "npm i express body-parser request" - if it worked properly you will be Able to see the names of the dependencies we downloaded in packgae.json.
- Open a Mailchimp account through the following link - https://mailchimp.com/
- Open a Heroku account through the following link - https://signup.heroku.com/
Take the required keys from mailchimp. If you open the app.js file you will see that there are places where you will need to complete 2 things:
- API key
- Audience id
To obtain the API key after opening the account, click on this link - https://us10.admin.mailchimp.com/account/api/. After that, the site will require you to connect and then you will reach the page of creating an API key, create a key and update the key (the combination of numbers and letters that will appear under the words API key) in the required place in the app.js file. Our next step will be to get the Audience id - to get it you will first need to create a new Audience list, and then if you register in the Audience search and choose the first option, a list of the lists you created will open for you, enter the settings of the list and go down to the end of the page, where the id you are looking for will be waiting for you . It also needs to be updated in app.id where required (there are comments in the file that explain what each thing is). One last thing that is very important to pay attention to, notice that at the end of your API key there is a dash and then "us" followed by a certain number, in the app.js file there is a constant called url, change the part of the number next to us in the url to the same number as they have in the API key.
So the newsletter I made is for a group of German shepherd dogs that I have that I keep my friends/clients up to date with. What content would you like to present to the client? This is where the basic knowledge of HTML comes in, you are welcome to edit the files as you wish and continue with me to the stage of uploading our newsletter to the World Wide Web.
After clicking on the following link - https://devcenter.heroku.com/start a detailed guide will open for you on how to upload your server, choose the "Node.js" guide and do step by step what is required of you in the guide. Please note that the guide instructs you how to upload an example application that Heroku provides, you do not need it - skip it and perform the actions for the application you made following the guide here. In addition, in the last step of the Heroku guide, it will be written to enter the following command in the command line: "git push heroku main", if this command does not work for you, try "git push heroku master" instead, and it will work.
If you did all the steps correctly, you should now have a newsletter that you can use in many different ways and enjoy it. If you encountered any problem in the process, you are welcome to send me an email to the following address: [email protected]. Anyway, enjoy your new newsletter web app!