project-demo.mp4

About   |    Getting Started   |    Technologies

❓ About

This project automatically adds whatever images you want to your Google Slides presentation in a customizable way!

---

🚀 Getting Started

1. Clone this repo: git clone https://github.com/erickivel/google-slides-images-filler.git
2. Move to the directory: cd google-slides-images-filler
3. Run npm install or yarn to install the dependencies.
4. Create an account on Imgbb: here and get your API key here, Imgbb is a hosting service that will store the images temporarily (60 seconds) and provide the public image URL that will be useful to add the images in the google slides presentation.
5. Create your Google OAuth client credentials (instructions here, in "Authorized redirect URIs" you can put "http://localhost:3333")
6. Rename the file .credentials.example.json to .credentials.json, and put the client_secret and client_id that you get from the last step.
7. Create a folder on the src folder with the name: images, this is where you'll put your images.
8. Rename the file .env.example to .env and change the variables:
   - IMGBB_API_KEY : to the API key that you get from step 3.
   - PRESENTATION_ID: you get it from the presentation URL: https://docs.google.com/presentation/d/PRESENTATION_ID/edit.
   - FIRST_PAGE_OBJECT_ID: this is the id of the first slide you want to add the images, you can select the desired slide, and get it from the presentation URL: "https://docs.google.com/presentation/d/presentationId/edit#slide=id.FIRST_PAGE_OBJECT_ID".
   - IMAGES_PER_SLIDE: this is the number of images per slide you want to add, it must be a multiple of ROWS
   - ROWS: this is the number of the row that the images will be divided in each slide
   - WIDTH_TO_BE_OCCUPIED: This is how much all your images will occupy in each slide in centimeters (width)
   - COLUMN_GAP and ROW_GAP: Column and row gaps (in centimeters)
9. You can also modify some options on the file addImageToPresentation.js.
10. Run npm run start or yarn start to start the project, if it's the first time you're running, you'll need to authenticate: It will appear a link, open it, choose the same google account you used to be the tester of your API (step 5), then you'll be redirected to http://localhost:3333/?code=CODE&scope=... copy the code and paste it in the terminal. After that, a file named token.json will be added to the root of the project so that you don't need to repeat this authentication process, and the images will be added to your presentation!
    

Notes:

• If the code starts with 4/ you'll need to remove the decodeURIComponent() function, but maintain the code param, from the line 58 in the file index.js;
  
• If No refresh token is set error happens jut delete the token.json and run the code again (it'll asks you to authenticate again);

⚙️ Technologies

These are the technologies that I used to develop this application:

⚙️ NodeJS —> A platform for building network applications;
🌐 Axios —> Used to do HTTP requests;
🔧 Dotenv —> Load environmental variables;
📊 Googleapis —> Used to access google slides api methods;
🖼️ form-data —> Used to upload images;