Safari Mobile
JsQR Code Scanner works in the browser, desktop and mobile including Safari. Based on this and this.
Chrome
Landing page has links to the Tailwind example landing pages, and other layouts, a keyboard handler for site-wide keyboard command captures, example Svelte store configuration and site settings, notification and alerts, JsQRCode code scanner with history output, Firebase Login Google, Github, Anonymous, and dark mode. After login as anonymous, clicking on the profile picture, an internal profile page with examples of child, grandparent, parent data passing, QR Code Address generator and Firebase login information.
The above config may be missing as it is part of .gitignore, the file looks like:
export const exampleConfig = {
projectId: "",
messagingSenderId: "",
appId: "",
apiKey: "",
authDomain: "",
databaseURL: "",
storageBucket: "",
measurementId: ""
};
Additionally, there is an set_env.sh which you may set your hosting, firebase variables to generate .env files, set the Firebase environment variables etc. For those times when Routify misbehaves, there is also a kill_ports.sh which as the name suggests, will provide a menu of applications using ports for you to kill easily.
The Svelte component is located in ./routify/src/pages/_components/JsQRScanner.svelte
.
<script lang="ts">
import Scanner from "./JsQRScanner.svelte";
</script>
<section id="Scanner" class="px-2 py-2 bg-white-200 md:py-24">
<Scanner />
</section>
You may want to expose additional events to capture the scanned text. Currently it outputs to:
<div class="FlexPanel form-field-input-panel">
<textarea
id="scannedTextMemo"
class="textInput form-memo form-field-input textInput-readonly"
rows="3"
readonly
/>
</div>
The Cloud Functions portion of the repo contains code for managing Twilio inbound and outbound voice and SMS, Sendgrid, and Slack of which could be used for a scalable robo-dialer system. This system is discussed in its own repo, however some information can be found here. Please be considerate, this system was used with individuals who had previously consented to being contacted.
This template requires just the hosting file to set up, however, if your application includes other Firestore/Hosting features you may want to update the second configuration helper.
routify/src/firebase/config.ts
./scripts/set_env.sh
After you have your config.ts
sorted out, the following should work.
cd routify && npm i && npm run build && npm run dev
Visit https://localhost:5000
Enjoy!