Posts

Showing posts from November, 2020

Thinking & coding: Studying on FireBase, ANSWER

Hi Hi. It was a tough week last week. I have invested a lot of time in research. And write very little in code. I have learned a lot. A serious study of error codes, as you can read in my previous post. In this post I will try to answer the problem I had with bulk data upload from the FireStore Database. First and foremost, I have been staring at the FireStore Console. Now I have also looked at the 'Google Cloud Platform' and its console. So I found a lot more information there. What did I learn. You cannot place images directly in the FireStore database, but you can place the link to the images. Which is then back in place, stored in the DataStorage. That is the method that I see everywhere. So we are so far on that. Furthermore, I cannot directly upload a large data file to the firestore without a detour. As I found in the documentation and also on Youtube and other information sources. I found the most explanation on the Youtube channel of 'Retroportal Studio' . Many...

Thinking & coding: I'm so greatful!! THANK YOU

Image
Hey everyone. What an emotional day. This morning I wanted to start a programming session, and then half of my software turned out not to work anymore. Without changing 1 line code. What was the problem. I could no longer read my data from the FireStore backend. I got a huge error. An Exception. Complete panic, unbelievable. I didn't get any head or tail. I have read this message countless times and did not understand it. It almost made me depressed, it controlled my day emotionally. And I have to admit this time it was really over my head. I had no choice but to give in to myself and ask for help from a good friend who has supported me since day 1. Max Weber from Flutter Explained .  I also threw the problem into the Matrix via Twitter. And several of my contacts responded very quickly. And offered possible solutions. Thank you all, and a super thank you to young developer / friend " Da Bot ". I have prepared a document with the error code as you can see above. I then sh...

Thinking & coding: Studying on FireBase.

Image
This session will be something completely different. I am going to look for a way to load my data into the backend in a simple and fast way. Because if you have to enter all data in Firestore via the console, that won't get you anywhere. In my search through the FireBase documentation, I came across the following. With the resulting problems. My data consists of various text elements, but also a image element. Now no images can be added to the database, according to the documentation. If a image is saved in the backend, this will be done in another FireBase service, Firestore. There you have a 'bucket' where you can dump this image data. So I have to store my photo element 'eventImage' in Firestore and all other 'event ......' elements in the Firebase database. Now there is no information on how to link them both, or I have not found it. At times like this, I am glad that we live with the infinite internet in this day and age. In the past, you could search l...

Thinking & coding: Snappy detail related to TweenAnimationBuilder

Today it is Friday. And what a great programming sessions I had this week. I am very happy with what I have achieved. And especially with the things that I have learned. As every Friday, there are no fundamental things planned in the programming. In addition to cleanup the code, which I do every week on Friday, I've also posted my TODOs for next week. I will probably also have time to write code here or there this weekend. But programming in the weekend is always seen by me as extra time. And that is not planned. What did I do today? What did I do today? I incorporated a few simple animations into the app. The animations are not for show, but rather functional. Although they are beautiful, I think, ....... And like every Friday the code is cleaned up and structured where necessary. Because I work without an appBar, I needed another 'BackButton' in my eventDetailScreen to return to the EventScreen with the EventCard's in the EventList. For that I used a simple FloatingAc...

Thinking & coding: a new screen, EventDetailScreen.

Image
In this programming session I am going to write the 'EventDetailScreen'. It will become a page showing all the info of the chosen event. In the 'EventCard' there is an 'InfoButton'. It is this button that will navigate the user to the detail screen. Lets start the journey. First I create a new Dart file in the project tree, the 'event_detail_screen.dart'. The class in this library will be named 'EventDetailScreen'. Then i largely build the UI of this new screen. That is all a bit of piecing and measuring, but in general, straightforward. The finishing touch will come later. Now its about the data handling. Now that I have some screen layout, I will try to link the data to this EventDetailScreen. My big question is, if I press the info button of an event card in the list of events, how do I get the correct details of the correct event in my detail screen. I'm going to fix the navigation first. When I push the info button, that I can go to the ...

Thinking & coding: Implementing the UI EventCard.

Image
Deploying my EventCard. After the last code session I got the StreamProvider of the Riverpod package up and running. And also be able to display the data from the backend using ListTile Widget, in the ListView.builder . And all this to test whether the code works so far. This includes the FirestoreFirebase service , the EventModel and the StreamProvider . Now I am going to replace the ListTile with the EventCard I wrote earlier. Let's see what problems we will encounter with this action. Normally, all of this should go pretty smoothly. Finally I bring the EventCard in the existing widget tree where the provider makes the data in stock. We will see. First and foremost, I modified the EventCard Widget. When we implement the EventCard, we have to create a possibility to access the variables. So we declare the necessary variables and build a named constructor. Code lines 5 - 17 Then I entered my variables in the UI code. Code lines 42, 49, 72 have been changed and later we will als...

INTERLUDIUM: importance of documenting the code while programming

I would like to give an important tip to all newbies like me. Maybe you ask yourself how can Stefaan give a tip while he is still so new to programming. Well, it comes from the little experience I have gained in the last year. And the many years of experience as an analyst in a think tank. I am a sole proprietor. I am alone. I don't have any colleagues where I can talk to while writing code. So I am my colleague and so I have to consult with myself. And believe me I don't often get my right hahahaha. I've found that by documenting my code, in this case my Blogpost articles, I often find the solution to a problem. And this in my own writings. Time and again, my solutions have partly come from my texts. Of course not the full syntax, but certainly a reference to documentation that I could consult. By writing down what I do. And especially writing down my problems sometimes clarifies the mistakes of my own thinking process. Rereading and rewriting my articles sometimes let the...

Thinking & coding: Turning 180° with the code, a good lesson learned.

In this session I wanted to bring the eventcard into the listview. And then also the data of the backend. After all this I want to clean up the code a bit. I will still need a provider Still, I want to somehow separate the FirestoreService from the UI. I wanted to do this by extracting the widgets in the FirestoreService. But then I will still need a provider, a stream provider. Maybe I will switch to a FutureProvider later. I am not yet sure of that. I want to use Riverpod because I need 2 providers of the same type. I learned a good lesson So this session I learned a good lesson. If I want to separate the UI and the logic or backend I always need stat management. So I have to restore my thinking to the original idea. This will certainly not be the last time I have to overthrow my code to achieve my goal. But don't worry, we're flying back in there. A resume of what I have and should do. I have a Firestore service that reads the events from the backend. In the Firestore servic...

Thinking & coding: Building the UI EventCard to display in the Listview.

Image
This session I'm building a UI part. The "EventCard". There are 2 big reasons why I am now working on a UI part. The first reason is because this part is a logical consequence of the previous session, but also for motivation. Why motivation? The big advantage with UI construction is that you see noticeably strong progress with almost every new program line. Especially with the "hot reload" from Flutter. And you don't have that with the underlying logic code. And maybe this is just me, but I need that view of progress. I can understand that maybe for a seasoned SE this is not that important but for a newbie like me it is. Finally, don't forget that I have study work for almost every line of code. Because I don't want to just write a practice app, but a real production app. So I constantly ask myself whether I am using the correct programming method, and whether it can be more efficient. To start, I create a new folder in the project tree 'screen w...

Thinking & coding: Changing my achitectural structure with "KISS".

During the last programming session I started thinking about the architecture of the app. And I have to say that there is something to say about it. In the previous post, I talked about separating the UI and the logic from each other. And make the connection through state management. Now I fear that architecture goes against my first rule of principle, KISS. "Keep It Simple and Stupid" or in other words, "you shouldn't make things hard when its easy". And this not out of laziness but out of conviction of the power of this statement. It is even a way of life. Following the architecture of the previous post, the EventData will be handled by 3 different libraries. I can easily reduce this. Which also results in fewer lines of code, fewer libraries, fewer dependencies and therefore less chance of errors. Which will increase the performance of the app. And yet the intent of separating the UI from the logic will be preserved. Because all the logic will be in the Fires...

Thinking & coding: Building the Firestore service library.

The next step is to write the Firestore Service. In this library I put the function that will retrieve my data collection from the backend. After that, state management will be used, as a separation layer, to link the data to the UI. So there are 3 parts, the UI with its data model, the backend with its service library with the necessary methods to request data collection 'events' and the link between them with the state management. I searched the Firestore documentation to find the correct way, that fits my app, to access the backend. What I need is that when starting the app, the data collection from the backend is read 1 time. And fortunately there is a suitable way for this, which is described on the following web page  https://firebase.flutter.dev/docs/firestore/usage/ .  An other great reference to get some info is a artikel of Atul Sharma.  https://atul-sharma-94062.medium.com/how-to-use-cloud-firestore-with-flutter-e6f9e8821b27 In my app only data will be read fro...

Thinking & coding: Building the event data model in my application.

Image
In today's programming session, I'm building the event page model.  I want to build this app where the business logic is seperated from the UI. So after this model I have to build a library to handle the connection with the backend. This two entities will be connected with a middle layer, in our case a Provider. And all this is again with the horizon to make this app scalable, expandable and easy to maintain. I have build this model inside a seperate dart file. When I look at my app prototype, what information do I need. I have two screens related to the events. The first screen, 'events screen' is a 'list of events'. In this list, each event will be displayed in a 'event card'. And the 'event detail screen' can be called up from in this card. The second screen is therefore the 'event detail screen'. All details of the event will be displayed here. What different data do I need in the screens. The EventsCard (in List):  eventId (not displ...