Hey!
I bet by now you’d know looking at the title what’s this going to be about and yes, it’s yet another implementation of how you could build a URL shortening service but no, I’m not from any company that sells this service
So, let’s begin!
Prerequisite
Here’s all you’d need, to get started -
- A free Firebase account because we’ll use their Dynamic Links services to build our URL shortener
- A domain name of your choice, preferably one that is super small - I recently purchased
jnx.pw
via Namecheap as it costed me less than $2
In case you find it boring already, here’s a view of the full implementation to get you going again -
Demo
I’ve also opened it up for ya’ll to give it a whirl
Setup
Let’s break this down into -
- Setting up Firebase
- The publicly available web app and
- The bulk shortener where you could actually store your API credentials and other details
Firebase setup
- Once you’ve signed up for a Firebase account, navigate to setting up your custom domain via Firebase console.
Note: DNS propagation may take it’s own sweet time - sometimes, it happens in under 15 mins. and other times, it could take as long as 24-48 hours
and so, in case you need a
/
break, this could be a good time!
- Get your “Web API Key”, which can be obtained on the project settings page in your admin console.
dashdash Defaults
- Create 3 views; for ease of convenience, name the first one as ‘Web App’ (or whatever you find catchy)
- Name the 2nd one as ‘Web App Logs’ - this is where we’ll store all the long & short URLs along with the time they were created - and the 3rd one as ‘Bulk URL Shortener’.
Bulk Shortener
Let’s start with this section first as it’ll contain our API credentials that will not have any public viewing access.
- Update the following cells as below -
Col A:
A1: Web API key
A2: Endpoint
A3: Domain
Col B:
B1: < paste your Firebase web API here >
B2: < =CONCATENATE("https://firebasedynamiclinks.googleapis.com/v1/shortLinks?key=",B1) >
B3: < the domain name that you must've configured in Firebase's Dynamic Links >
-
Make cell
D2
a button - for now, name it asShorten it!
and update cellD3
with the following formula -
=IF(D2="Shorten it!",FILL(B6:D6,COUNTA(A6:A)-1,0),"")
-
Next, update the headers of the table in row 5 as below -
A5: LongURL
B5: Body
C5: POST request
D5: ShortURL
It should starting looking something like this post formatting -
- Finally, update the formulas in the following cells as below -
B6: =IF(A6="","",PAIR2JSON("dynamicLinkInfo",PAIR2JSON("domainUriPrefix",$B$3,"link",A6),"suffix",PAIR2JSON("option","SHORT")))
C6: =IF(OR(A6="",B6=""),"",POST($B$2,"{}",B6))
D6: =IF(C6="","",PARSE(C6,"['shortLink']"))
All you’ll need to do now is start adding URLs under Col A i.e. ‘LongURL’ and once you’ve added a handful, hit the ‘Shorten it!’ button
Web App Logs
- Start adding headers in row 3 as below -
A3: LongURL
B3: ShortURL
C3: CreatedDate
It would look something like this post formatting -
Web App
- Update the following cells as below -
B1: URL Shortening Service
A3: Enter Long URL here:
- Make cell
B3
an “Input Field” &C3
a button - for now, name it asShorten it!
.
It’s not much but the view should look something like this post formatting -
- Enter the formulas in the 2 required cells -
B5: =IF(B3="","",IF(C3="Shorten it!",PARSE(POST('Bulk URL Shortener'!$B$2,"{}",PAIR2JSON("dynamicLinkInfo",PAIR2JSON("domainUriPrefix",'Bulk URL Shortener'!$B$3,"link",B3),"suffix",PAIR2JSON("option","SHORT"))),"['shortLink']"),"Press 'Shorten it!'"))
B6: =IF(AND(C3="Shorten it!",B3<>""),INSERT_DATA(PAIR2JSON('Web App Logs'!A3,B3,'Web App Logs'!B3,B5,'Web App Logs'!C3,NOW()),'Web App Logs'!A3:C3),"")
- Finally, under the “Publishing Settings”, change only this sheet to be publicly visible.
et voilà !
You should now be able to use this setup as both a web app and a bulk URL shortener.
Cheers,
Sourabh (@schoraria911)