2018年12月13日 星期四

[Vue] Shopcart example with VueFire and Vuex


 Vue.js    VueFire    Vuex  





Introduction


I created a shopping cart sample code with VueFire and Vuex on my Github: KarateJB/Vue.Firebase.Sample

The sample code is built by the features and concept of Vue.js and Firebase in the tutorial series. You can find them in the below related articles.



Related articles



Environment


Vue.js 2.5.11
Vue CLI 3.2.1
Firebase Javascript SDK 5.5.8
VueFire 1.4.5
Vuex 3.0.01


Features


Firebase Authentication with Google Account

The user can login with google accounts.




State management

Use Vuex to manage the amount and cost when user put the product(s) to the shopping cart.




When click on the Shopping cart icon, the app will shows the items in the shopping cart.





Send Order will save the order into Firebase RTDB.


Product management (Only for Admin in default)

Admin can create/edit/delete the products.
Drag or select a picture of the product to save it to Firebase Cloud Storage.





Messaging by FCM

Supports FCM(Firebase Cloud Messaging) for real-time message from Cloud Functions.




Get started


Firebase

Create a new Firebase project

Go to Firebase Console and create a new project.



Notice that we will use the following features of Firebase.

1. Authentication
2. Real-time database
3. Cloud storage
4. Hosting



Enable Google login



Set RTDB rules

Copy the following default rules to RTDB rules.

{
  "rules": {
    "Demo": {
      "products": {
        ".read": "auth != null",
        ".write": "auth != null  && auth.token.email == '<ur-email@gmail.com>'"
      },
      "orders": {
        ".read": "auth != null",
        ".write": "auth != null"
      }
    }
  }
}






Set Storage rules

Copy the following rules to Storage rules.

service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read: if request.auth!=null;
      allow write: if (request.resource.size < 1 * 1024 * 1024 && request.auth.token.email == 'ur-email@gmail.com');
    }
  }
}



Initialize the application

Install dependencies

After you fork/clone the Github repository, install the dependencies by

$ cd app
$ npm install


Update FirebaseConfig.ts

Back to Firebase, and copy the Firebase api config.





Rename app\src\modules\FirebaseConfig.ts to FirebaseConfig.prod.js and paste the above configuration to it.


Deploy

Build the app (To /dist)

$ npm run build

Notice that I use copy-webpack-plugin to copy the index.html to dist directory in webpack.config.prod.js.


Deploy to Firebase Hosting

Use Firebase CLI to deploy our application. Before deploying, we need to initialize the metadata by…

$ firebase login
$ firebase init

The first command will guide you to login a Google account.
The second command will guide you to initialize your application, you can take a look at my previous article: [Angular] Deploy to Firebase for more details.
(Dont worry, the steps for deploy Angular or Vue app to Firebase are the same)


After initializing, now you can deploy the application to Firebase with this command.

$ firebase deploy --only hosting



Use other firebase project (Optional)

If we are going to manage multiple Firebase project in a single application, use the following command to ADD another Firebase project’s information.
$ firebase use --add

Check all Firebase projects in this application.
$ firebase list

Or switch to the other one.
$ firebase use {alias name}



Have fun and if there are any questions, you can create an issue on Github.



Sample code






沒有留言:

張貼留言