Capstone is over. What a wild thing to think or say. If has been a blast researching Angular and everything that comes with it. I will be added a couple more files yet to the documentation page and my github page. For those inheriting or deciding to use Angular I would highly recommend. It seems alot at first but it allows you to focus on the data and the view in a neat Modal View Controller format. There is also great community support with people always willing to help in the online communities. Signing off, Thanks for the ride SNC.

I was instructed to make a data flow and where each component lives while running the application. I will upload a full data flow tomorrow with little snippets to designate the purpose and what happens after each data base update. I have uploaded a slideshow located on my docs page that holds where each of my components lives/gets used in my application. More updates to follow.

I have added code to my docs tab that links all the files I use in this program. The most up to date information can be found on my github account linked here. Also on my Docs page I have uploaded the slideshow I used during my presentation as well as a few flow diagrams.

Above I have many little additions demonstrated. I added forms to allow the user to edit, delete, and add questions. This is done through a variety of RxJs (Reactive state management) and Angular built in Form objects. I have pictures posted of an example piece of code that involves the Form Builder. I have also added lobbies that update in real time when one is being created by one user it shows up in the view of other users in the app. The full code base can be viewed on github through this link.

The function ngOnInit() is initiated every time a component is first called upon to be created. After it has been created for the first time that function will no longer be called. I use it to create default data and create a FormBuilder object. This object allows me to validate data in real time. For example, if a form is "invalid" (the Validators have not been followed) a status is set and I use it in my html to disable a button. This means that for many of the forms input I can make sure I get good data before a user submits a question. Then on the right I get the user's id and the id of the question if it is an edited question. Next a data object is formed with all the necessary variables for a question. Then it asynchronously waits for my database service "db" to update my questions format. Once this is accomplished I dismiss the modal of the question editor/creator and then it presents a toast. 

We had walkthroughs this last week. I did not have much front-end stuff to show but I am confidant on where I am for the presentations in 20 some days. I have my backend hammered out as well as a fairly solid idea of how to update data in my application. Using what Angular (my Javascript framework) calls Observables which allow me to two way binding between my database and my frontend. What this means is that when I make a change to my data on the backend I can instantly see the results on the front end. Basically I can treat it as a giant pipe with notifications that allow for the data to be in sync with each other.

This will hopefully greatly simplify my realtime updates when a user answers a question. I added Google-sign method to my app as well. This will allow all students to sign in with there school email accounts since every student must have one. This was not a necessary feature but I did it once during my tutorial so I figured I might as well move over that code into my existing application. While I was unable to get the two users to answer a question for this blog post that is going to be my focus for the upcoming week.

I realize I have not updated my blog post in quite some time and need to fill in what has been going on lately. I have made some progress to getting my app to function. I have got a logon event working so I can id each user as they open and close the app. This is crucial to how I differentiate between who answers what questions. 

It was a pain to get this set up. I kept thinking that I needed a certain service which is what the angular framework I am using calls a class that handles your external connections to be a dependency for a HTTP callout to happen.

It took me taking a trip for spring break down to Utah and not looking at my code for a couple of days to figure out that what I was doing was not at all how it was supposed to be handled. While my service needs to be included in my component (class) that I am displaying the actual view to move from my login service to my tabs view does not necessarily need it. I was also trying to send data between the two components (classes) in an incorrect manner which was not helping matters.

Speaking of external connections how Angular handles the connections is through what they call an Observable. Official documentation can be found here. In the short an Observable is basically a two way connection that basically alerts who ever is connected/using that particular observable that it has been updated and has the updated info in it. These two parties are called publishers and subscribers. Since I am using Firebase (a json formatted backend) it initial tries to "subscribe" or say that I want updates when this particular data set changes. Once that is confirmed any changes made in Firebase will be reflected in the backend.

I have finally completed the tutorial that I went through. You can view the source code here. It was a good learning experience and allowed me to get native google logins to work. I was able to get my hands dirty in a variety of different use cases that I will need for my app.

I made components, guards, and services. These are the three main pillars of any Angular project. The components are the actual view and controlling logic to the view. While the guards and services are not something seen on the front end but do a fair amount of heavy lifting in the background. 
Guards manage and maintain what components or views a user can see. For example in this app a user has to be logged in to view his or her todo list. If they are not the Guard blocks them from going to it.
Services on the other hand allow you to write a standard way to return data from external sources.  The way the data gets fetched might have to change but should be able to keep existing functions returning data in the same format because of the abstraction presented in services.

This leaves me set to build and maintain a database full of questions, lobbies, and answers. I have found a way to visual pages before actually writing the code for them through an application called Figma. It is basically Photoshop but for developers. It has some very slick ways to view and create mock-ups of your app.

After the bizarre weather we endured last week it felt strange to go back to a normal school week schedule. I was able to get on with a tutorial through Angular Firebase. Which involves using Ionic, Angular, and Firebase to get an app up and running. I am currently in just the getting started section so I just have my environment setup as well as the beginnings of an authentication page with Firebase. I will update with pictures when I complete the tutorial.
My current file structure:

While this looks like a ridiculous number of files many are compressed or taken out upon serving a production grade application. Under src/app is where all html and typescript files are located. the typescript files are what handle actions made by the user for that modular component. while the html only worries about what is going to be on the screen. The services folder is where all api calls are going to come from but functions/modules written in services will be called from other components. Most else is either boilerplate code, testing, or data to be used to render the app (images, etc.).

This week was a strange week. With classes canceled for 2 and an half days it really threw me for a loop. I have some data mockups which I will upload later today as well as some app diagrams that I hopefully will use later. 

I decided to use Ionic and Cypress libraries for my app development. Ionic is used to interface with native phone functions while Cypress is used for end to end testing. My hope is to write testing functions that I will get to use to test the app when new features are added during the development process.

My goal for this week will be to get a test app up and running. The test app will have authentication. 

It is amazing to think that I only have one semester of college left before me. It is strange to think that I will be out of college and hopefully at a full time job after May.

The whole day I was constantly checking my email for what capstone project I was getting assigned. Then I got to the lab after work around 6 o'clock or so to help out with the last of the Virtual Box installs. I managed to forget that we were getting our projects around that time and decided it was a good idea to take a nap. Roughly 10 minutes later I get up feeling refreshed and ready to tackle some homework for my other classes that is when I hear dings from other phones in the lab as they receive emails for their project. I am almost shaking from nervousness and excitement as I opened my email. We spent the next hour or so sharing our projects with others and bouncing ideas on how we are going to accomplish all that we want to do in so short a time.