Posts

Showing posts from April, 2022

How to Build a Website Scraper with Puppeteer and Firebase Functions

Image
Let’s create a simple website scraper that download the content of a web page and extract the content of the page. For this example, we will use the New York Times website as the source of the content. The scraper will extract the top 10 news headlines on the page and display them on the web page. The scraping is done using the Puppeteer headless browser and web application is deployed on Firebase functions. 1. Initialize a Firebase Function Assuming that you have already created a Firebase project, you can initialize the Firebase functions in a local environment by running the following command: mkdir scraper cd scraper npx firebase init functions cd functions npm install puppeteer Follow through the prompts to initialize the project. We are also installing the Puppeteer package from NPM to use the Puppeteer headless browser. 2. Create a Node.js Application Create a new pptr.js file in the functions folder that will contain the application code for scraping the co...

How to Build a HTML Form for Uploading Files to Google Cloud Storage

Let’s write a simple web application that will allow users to upload files to Google Cloud Storage without authentication. The client site of the application will have an HTML form with one or more input fields. The server side is a Node.js application that will handle the file upload. The application may be deployed to Google Cloud Run, Firebase Function or as a Google Cloud Function. HTML Form Our HTML form includes a name field and a file input field that accepts only image files. Both the fields are required. When the user submits the form, the form data is sent to the server, encoded as multipart/form-data, using the Fetch API. The server will validate the form data and if the form is valid, it will upload the file to Google Cloud Storage. < form method = " post " enctype = " multipart/form-data " > < input type = " text " name = " name " id = " name " placeholder = " Your name " required /> ...

How to Generate Dynamic QR Codes to Collect Payments through UPI

Image
The BHIM UPI payment system has transformed the way we pay for goods and services in India. You scan a QR Code with your mobile phone, enter the secret PIN and the money gets instantly transferred from your bank account to the merchant’s bank account. There’s no transaction fee, the money is transferred in real-time and no data of the payer is shared with the payee. Our online store initially accepted payments through credit cards only but after we added the UPI QR Code on the checkout page, more that 50% of customers in India are making payments through UPI. Other than instant payouts, the big advantage of UPI is that the merchant need not pay any transaction fee to PayPal or Stripe. Create Dynamic UPI QR Codes When you sign-up for any UPI app, be it PhonePe, Paytm, Google Pay, WhatsApp, Amazon Pay or any other BHIM UPI app , they will all provide you with a downloadable QR Code that you can attach in emails, invoices, embed on your website or print and paste near your billi...

How to Use Google OAuth 2.0 to Access Google APIs with Refresh Token

Image
Let’s build a simple web application that uses Google OAuth 2.0 to access Google APIs. The user can sign-in with their Google account and authorize the application to access their Google Drive or any other Google service. When the user signs in, Google redirects the user to the Google OAuth 2.0 authorization page. The user is asked to grant access to the application. The application then exchanges the authorization code for an access token and a refresh token. The access token will expire after an hour but the refresh token will be valid indefinitely (unless manually revoked by the user). We’ll thus store the refresh token in Cloud Firestore, and use it to generate a new access token whenever the application needs to access Google APIs on behalf of the user. We are not using Google Sign-in with Firebase Authentication since it does not provide the refresh token that is required to run background API tasks unattended. Step 1: Create the Google OAuth 2.0 Client Create a new OAut...