Stage 5: Exploration of the Back End Options

Go explore - What I have learned

Going through all this material really made me realise that what I really would like is to be able to build complex web applications with databases and APIs that can serve all sorts of clients. For this reason, I have chosen to focus on option three: Full Stack and Back End option.

At the same time, I also realise that user experience is important and that to know how to make a website that is pleasant to look at should also appear on the todo list of a full stack developper.

This this in mind, I decided explain here what I learned about APIs and also use CSS and JavaScript to implement a nightmode for this page.

The power of APIs

Summary of Udacity lesson

APIs enable computers to communicate with each other and exchange data. This is particularly useful if you want to use the services of other platforms to enhance your application or simplify its build. Usually, APIs use XML or JSON to communicate

XML was invented in the 1990's to facilitate computer to computer communication. It is related to html as they have a common ancestor, SGML, invented in the 1980's. Html can actually be expressed as XML, using the type xhtml oin the DOCTYPE.

Some characteristics of xml are:

Python has a built in parser in a library called minidom. It can imported like this: from xml.dom import minidom. This is a lightweight and fast version of the more comprehensive dom (document object model) that can be used to parse gigabits of data.

To parse xml (create an object from code) and store the result in a variable, you can use the following:
p = minidom.parseString("<mytag>contents!<children><item>1</item><item>2</item></children></mytag>") To visualise the structure of the resulting object, including available methods, you can use dir(p), or if you want it in a vertical fashion, import pprint ("pretty print") and write pprint.pprint(dir(p)). To visualise the content in a XML format:
print p.toprettyxml() To get the "1" above we would have to use the following:
p.getElementByTagName("item")[0].childNodes[0].nodeValue
Another tool for computers to communicate is JSON, which stands for JavaScript Object Notation. It consists of nested dictionaries, lists and lists of dictionaries: { "itenaries":[ {"from": "SEO",
"to" : "IAD"},
{"from" : "IAD",
"to" : "SEO"} ]
}
To use json in python you must first import it. To visualise a JSON object stored in a j variable, enter:
json.loads(j). Include 'print' if not run from bash. To have a quick look at the keys progressively available at each level: j.keys() j['data'].keys() j['data']['children'].keys() Be aware that hackers could use JSON to sneak code in your system...
Some websites make their contents available in other formats than html:
www.reddit.com/.json or www.reddit.com/.xml There are other protocols used by servers to communicate:

Overall, make sure to rate-limit yourself to avoid hitting servers too hard and that you write good user-agents so that people building the APIs that use can contact you if something goes wrong.

Additional resources

YouTube Video: This video makes a good job of explaining that one of the main advantages of APIs is that they enable your application to use the services of larger websites and/or applications. While a normal user would have to log into Facebook or Google using their website, an API enables your application to bypass this and talk directly to their backend.

The basics of APIs: This is another course from General Assembly that is available from Udemy. It goes through two APIs. The first one is Stripe which is a solution enabling websites to take credit card payments without having to handle the security aspects of it. It handles both individul payments and subscription. Whilst the demonstration was in PHP, the main ideas remained the same: set up a Stripe account, get some API keys, code in the payment form and handle errors. Then test and go live!
The second API was Twilio, which brings telephony to the cloud and its computing power: "the ability to plug your phone to your website". AirBnB and Uber use it to enable providers and customers to communicate without exchanging contact details. The demo was about recreating a telephone queue. This was done using python in the terminal using Flask and Heroku

Various API libraries: there many of them on the web: publicapis.com, programmableweb.com, mashape.com

API implentation

The Wikipedia API

As far as implementation is concerned, the small form below uses the Wikipedia API to serve the top summary of its article about whichever keyword is entered by the user. It also generates a link to the article if further reading is required.


Summary:

'''Eiffel Tower''' ( ; ) is a wrought-iron lattice tower on the Champ de Mars in Paris, France. It is named after the engineer Gustave Eiffel, whose company designed and built the tower. Constructed from 1887 to 1889 as the entrance to the 1889 World's Fair, it was initially criticised by some of France's leading artists and intellectuals for its design, but it has become a global cultural icon of France and one of the most recognisable structures in the world. The Eiffel Tower is the most-visited paid monument in the world; 6.91 million people ascended it in 2015. The tower is tall, about the same height as an 81- building, and the tallest structure in Paris. Its base is square, measuring on each side. During its construction, the Eiffel Tower surpassed the Washington Monument to become the tallest man-made structure in the world, a title it held for 41 years until the Chrysler Building in New York City was finished in 1930. It was the first structure to reach a height of 300 metres. Due to the addition of a broadcasting aerial at the top of the tower in 1957, it is now taller than the Chrysler Building by . Excluding transmitters, the Eiffel Tower is the second tallest free-standing structure in France after the Millau Viaduct. The tower has three levels for visitors, with restaurants on the first and second levels. The top level's upper platform is above the ground – the highest observation deck accessible to the public in the European Union. Tickets can be purchased to ascend by stairs or lift to the first and second levels. The climb from ground level to the first level is over 300 steps, as is the climb from the first level to the second. Although there is a staircase to the top level, it is usually accessible only by lift.


Find out more...

Making pages look good

Combining CSS and JavaScript can be very useful to design web pages that will render well on any browser and on screens of any size.

I had a lot of pleasure experimenting with the Dash tool created by General Assembly and it really made me realise how flexible web-design can be. Here is the list of links to my practice exercises:

It inspired me to use JQuery to create a "Night mode" button accessible on the left hand side.