BizyQR allows you to share contact information with colleagues, new business contacts and even friends and family, without having to awkwardly leave missed calls, or even use the myriad of contact passing apps. All you need is a Android (Samsung, Google, etc) or an iPhone and scan a code with the camera app.
Try it now to get my details.
Before getting into the build guide, other major advantages of BizyQR is that it is completely free to use and no private information is stored on a server. All of your info is stored on your local machine.
What are you waiting for try it now: Go to App!
Fundamentals of BizyQR
There are three major components to build this platform and this post will explain the design choices. The three components are Web Development, QR Codes, VCards. This project takes a day to build and is relatively easy due to the high availability of all of the components.
Web Development
There are two options that can be chosen for this project. Mobile development on both Android and iOS or web development. I chose web development because:
- I didn’t want to support multiple platforms and code bases.
- It had to look the same on all platforms with a reasonable screen, phones, PCs, tablets, etc.
- I wanted to hold 0 private data and let the user have complete control of who to share with.
Web development allowed all of this for me. HTML5, CSS and javascript are interpreted similarly across all platforms whether PC, Phones or tablets. I only needed one code base as well, further JS has many modules and quite nicely there is a QR Code generator. This makes generating a QR code quite easy. In fact it is one line which takes a dictionary object which specifies the size and data:
$(".qr_code").qrcode({
text:card,
width: 500,
height:500
});BizyQR Codes
QR Codes are barcodes that are two dimensional. They can store quite a bit of data and are able to even correct errors. I used QR codes because both iPhone and Android have inbuilt QR code readers integrated in their cameras. This means that any data passed via this method can be read by Android or iOS. The aim is to pass info quickly and correctly and this does it unlike OCR which makes heaps of mistakes.
VCards
Vcards are a special format that is designed to pass contact information. It is unfortunately named and it is not overly used by people however it is understood natively by iOS and Android. This means that we have to do no processing for the user to be prompted to add the VCard. The VCard format is also text based so it is insanely to generate in JS.
function createQR(){
card = "BEGIN:VCARD\nVERSION:3.0"
end = "\nEND:VCARD"
name = "\nN:"+$("#lname").val()+";"+$("#fname").val();
fn = "\nFN:"+$("#fname").val()+" "+$("#lname").val();
org = "\nORG:"+$("#company").val();
title = "\nTITLE:"+$("#title").val();
email = "\nEMAIL;WORK;INTERNET:"+$("#email").val();
phone = "\nTEL;CELL:"+$("#phone").val();
website= "\nURL:"+$("#url").val();
street = $("#address").val();
suburb = $("#suburb").val();
postcode = $("#postcode").val();
state = $("#state").val();
country = $("#country").val();
address = "\nADR:;;"+street+";"+suburb+";"+state+";"+postcode+";"+country;
card = card+name+fn+org+title+address+phone+email+website+end;
saveData(card);
loadsavedCard(card);
}
Conclusion
If you would like to see the entire code, check out my github and if you want to use my app check it out here otherwise check out my launch post here. BizyQR was built with privacy and completely free use in mind. If you have any comments or suggestions then please comment below and I will take it onboard.