SimpleImageEcommerce
eCommerce
TypeScript
Simple Image Ecommerce App
Ionic App; Simple image transaction App
Overview
Working with Admin panel and Firebase cloud functions
1. Main Features
- List images for purchase
- Add images to cart
-
Buy image & Download to Photos or phone storage
- Purchase image using Stripe Payment
2. Techniques
Ionic Framework v3.9.2
AngularJS v5.2.11
2.1 UI Implementation
2.1.1 Implement UI pages based on Flexbox layout
2.1.2 UI layout when keyboard appears
In default, the whole view content shrinks when keyboard appears. To solve this problem:
-
Set
min-height
style to prevent shrink
<div #container class="container" [style.min-height]="this.mainHeight + 'px'"> </div>
- Set main height value
ionViewDidEnter() { // Get the height of the element this.mainHeight = this.container.nativeElement.offsetHeight; }
2.1.3 Virtual scroll for lazy loading list items
Using <ion-img>
instead of <img>
to get better user experience and performance
- Gallery page; gallery.html
- Download page; downloads.html
2.2 Function Implementation
2.2.1 Auth module
AuthProvider
in providers/auth/auth.ts
User signup, login, signout, …
- Save user data in Ionic Storage
2.2.2 Api module
ApiProvider
in providers/api/api.ts
Main interfaces for fetching and writing data to database
- Google Firebase for backend
Stripe
2.2.3 Payment with Card Payments
-
Tokenize card information
Stripe API: https://stripe.com/docs/api/tokens
ApiProvider.stripeCreateToken(card)
-
Creating a charge to complete the payment
Stripe API: https://stripe.com/docs/api/charges
ApiProvider.stripeCreateCreateCharge(token, amount)
2.3 Code tricks
- Using alias to import classes with same name
import {User} from '../../models/user'; import {User as FUser} from 'firebase';
2.4 Third-Party Libraries
2.4.1 Firebase JS SDK v5.8.6
Main backend & database for the app
2.4.2 Ionic image viewer v2.9.0
Preview images by showing it full screen
- Preview image of products in Gallery page
2.4.3 Moment.js v2.24.0
- Showing date in download list page
- Showing date in review list page
2.4.4 Cordova plugins
- File v6.0.1
-
File Transfer v1.7.1
Download files -
SaveImage v0.3
Save downloaded image files to Gallery - Stripe v1.5.3
-
Google Plus v7.0.0
Google Signin -
Facebook4 v4.2.1
Facebook Signin
Need to Improve
Image list in Gallery page is not perfect
-
Images are not loading or showing in some cases
It seems thatvirtualScroll
and<ion-img>
have some problems…