Day 23

AJAX, API with Pylot

To give you guys an update; I passed my Red Belt Exam! Today is a retake day as well and I took the exam again just to get really confident in creating a web app with Pylot. I think it's important to write as much code as you can, that's the only way to solidify your skills. Anyways that was after doing AJAX with Pylot.

Today, we are going to use AJAX with databases. Meaning that we're going to employ the .post() function on our HTML. The first couple of assignments were creating a Wall-esque type of web app. Instead this time, when you post a message, the page will not reload and you can see the message show on the browser immediately after submitting the button. This first assignment was pretty straight forward although it took a bit of time to get used to having a partial HTML that will render the messages without loading. 

The structure of AJAX with Pylot is very similar to all Pylot assignment: 

• Routes.py
• Controller,py, Views.html, Models.py

Except that there will be an extra folder in the views folder that has a partial html (almost a blank html file but with pythonic code that goes through all the information being relayed.). Another exception is that most of the logic is going into the index.html jQuery script. The next assignment really challenged having multiple AJAX forms operate all at the same time. In the assignment Notes, we are told to create something similar to messages but when you create a note title, it pops out a new note that has the title and a note description (which was not on the page before and only appears when a new note title is being created). The note description will also have the ability to update via AJAX. So before, we would have a form input that has an update button that will update the database but now, has to update automatically. 

Here are the steps to creating an AJAX loaded webpage.

1. Create the web app the same way you would without AJAX.
2. Start incrementing features in script section (jQuery stuff)
3. Create the partial html that will show AJAX loaded content.
4. Remove update button
5. Add AJAX feature with updates.

Our last assignment for the day was using the Google Maps API and creating a direction list. That was super cool. It was just getting the JSON from the .get() function and traversing through it and relaying the information into the HTML. I remember 10 years ago, I go on Yahoo or whatever site and printing out the directions list. Well, I created it this time!