Introduction
Provide a lockscreen UI that supports TouchID/FaceID, plus a beautiful keypad UI.
What's in the package
- Ionic Project source code: based on the folder structure generated with
Ionic CLI
- No Backend code: this is just the UI, not a fully functional app. Data is mostly static dummy unless mentioned, e.g GIF search uses the real Giphy API
Preview
Watch on Youtube
See how it works on Youtube:
(coming soon)
Happy prototyping!
Changelog
Note: All updates are for Ionic 4
Last updated: Dec 30 2019
v1
- First version.
Screens
- Keypad
- Vibrates (Taptic Engine) if entering the incorrect passcode
- Written as a service
- Support TouchID and FaceID (tested on iOS devices)
Run locally
1.Install Ionic environment
$ npm install -g @ionic/cli@6.12.0
2.After purchasing, download the zip file containing the entire demo app and unzip
3.Go inside the extracted folder
4.Install all dependencies
$ npm install
5.Start local server
$ ionic serve
6.Your default browser should now automatically open the template
Notes
Run the app on a real device or simulator (to see how Touch ID/ Face ID works)
$ ionic cordova emulate ios
Or, just want to see the keypad UI:
$ ionic serve
See README on Github
Build with capacitor
First of all, make sure that you can Run Locally (see the instruction above).
# build web asset (to folder www)
$ ionic build
# add platform (ios or android)
$ ionic capacitor add ios
# prepare app icons and splash images
$ npm run resources
# copy web assets into the native project
$ ionic capacitor copy ios
# open Xcode, then build the native app from there
$ ionic capacitor open ios
# OR run in live-reload mode
$ ionic capacitor run ios -l --external
See more:
Migrating a Web App Using Cordova to Capacitor
Contact
If you need any technical support or have any questions, don't hesitate to send me a message: mr_hie@yahoo.com
Homepage: https://www.takethatdesign.com
More Like This
![](https://cdn.sanity.io/images/o607ve1z/leafdb/fc7a6eb9c8bf3f3a6e9e359c3eb80a4c0ce957b3-828x1792.png?w=600&h=1299&auto=format)
![](https://cdn.sanity.io/images/o607ve1z/leafdb/4467788267f1391cafb0f5f753ee96297bd9a076-828x1792.png?w=600&h=1299&auto=format)
![](https://cdn.sanity.io/images/o607ve1z/leafdb/0ac4e46fdb2b4913714f7732e086f47b2211e7d2-828x1792.png?w=600&h=1299&auto=format)
![](https://cdn.sanity.io/images/o607ve1z/leafdb/a66474b5d37e9dde5cb822ed947ac1934b162ac1-828x1792.png?w=600&h=1299&auto=format)
![](https://cdn.sanity.io/images/o607ve1z/leafdb/41696c01f9a8a5e44ba85d62765899ae703f33e1-828x1792.png?w=600&h=1299&auto=format)
![](https://cdn.sanity.io/images/o607ve1z/leafdb/db003a24027fffde17b56f60dd0735d45c5b11a7-828x1792.png?w=600&h=1299&auto=format)
![](https://cdn.sanity.io/images/o607ve1z/leafdb/db9d533866a29a5a207db5b38831710efc56a457-828x1792.png?w=600&h=1299&auto=format)
![](https://cdn.sanity.io/images/o607ve1z/leafdb/9d279e35138602d232e3bd77f97791960a1a98ed-828x1792.png?w=600&h=1299&auto=format)
![](https://cdn.sanity.io/images/o607ve1z/leafdb/0500e13069b3dea28eba61ca889d3cbacc634cbb-828x1792.png?w=600&h=1299&auto=format)
![](https://cdn.sanity.io/images/o607ve1z/leafdb/5454c01fd85b197cbbe93f5eccef0d4367dc434f-1242x2208.png?w=600&h=1067&auto=format)
![](https://cdn.sanity.io/images/o607ve1z/leafdb/a5161ee07c974ddff2ac190ab574dbd7e818c5a5-1242x2208.png?w=600&h=1067&auto=format)
![](https://cdn.sanity.io/images/o607ve1z/leafdb/f51acbe24c6b76d9909cbcec739b7fe85420f48b-1242x2208.png?w=600&h=1067&auto=format)