CRUD operations with Framework7 & firebase

Questions
1

I just started using framework7 for the first time and I must say, it’s amazing. However, I’d like to fetch data from firebase but I have no idea how to start. most of the examples with vanilla javascript weren’t helpful. any chance anyone here can help with a guide?

2

Which firebase product are you interested in using, firestore, realtime db, cloud functions? F7 provides some request methods or you may use the fetch api.

1 Like
3

I’m using the firebase, too. You can use the framework7-vue, then add vuex support and operate firebase in vuex, so all your components will respond synchronously.

The 3rd template below is officially recommended, though it’s v2, it has all you need, including f7, vue, vuex, webpack, cordova and live reload. Emm, firebase should be added by yourself.
https://github.com/caiobiodere/cordova-template-framework7-vue-webpack

1 Like
4

just needed a simple database to store and read data

5

F7, vue, vuex, webpack, cordova, live reload and firebase all to just be able to retrieve database data from Firestore? … umm, no thanks.

Here is what I know so far thanks to the author of F7. I am able to get query data from firestore into a view list using this method. What I am unsure of is how to refresh this data over time. But for getting the page initialized this works.

In your routes use something like:

{
path: ‘/offers/’,
async(routeTo, routeFrom, resolve, reject) {
loadOffers().then((offers) => {
resolve(
{
componentUrl: ‘./pages/offers.html’
},
// pass context
{
context: {
offers,
},
}
);
});
}
},

In your firestore call do something like:

async function loadOffers() {
const offers = [];

let offersRef = firestore.collection(‘offers’).orderBy(‘createdOn’, ‘desc’).limit(25);
let allOffersSnapShot = await offersRef.get();
allOffersSnapShot.forEach(doc => {
offers.push(doc.data());
});

return offers;
}