takethatdesign.com thumbnail

TakeThatDesign.com is my new home

Click on the screenshot to visit, don't forget to bookmark, and subscribe to my newsletter.
See you there!

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

  1. Keypad
  2. Vibrates (Taptic Engine) if entering the incorrect passcode
  3. Written as a service
  4. 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:

Ionic - iOS Development

Ionic - Android Development

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

My Works

You might like my collection of Ionic products. See more at https://market.ionic.io/user/66136

See more of my works

<StartOfPromotion>

[PROMO] Ionic 4 Bundle: 4 in 1 - Best Seller

My best Ionic 4 products (3 themes + 1 plugin) are now on sale with promotion code BUNDLE4. Please click the button below for more information.

Purchase Externally

</EndOfPromotion>