Building Dumia

In this series of Blog posts, we will attempt to build a trivial e-commerce web site called Dumia (As a play on Jumia). The goal of this series of posts is to take you through the steps involved when building enterprise applications.

Dumia Requirements

  • The User should be able to browse a web application
  • View Items on the Site
  • Add or Remove an item from the Shopping Cart
  • Purchase Items using a Credit Card
  • Kick off a fulfillment process
  • Send Emails of Status to the User through each step in the Process

Prerequisites

  • Git Source Control
  • .Net Framework
  • F#
  • ASP.NET
  • HTML/CSS/JavaScript

If you have a firm grasp of the above then let’s begin.

Table of Contents

 

Advertisements

Web Design Intro

Hello There, I want to apologise for the silence over that past few days. I couldn’t eek out time to write a manuscript. I’ve just been very busy. I’m pretty sure that many of you are wondering “when do we get to see some hardcore material?”. Well, all I can say is stay tuned. :-). Ok with that being said, I personally have decided to take another approach. Instead of pre-typing a post (after careful thought of course), I’ve decided to just type the post straight away. More like freestyle on the M-I-C. Ya Feel me?

I will start to take this broad topic by breaking it into small easy-to-understand bits and then give you links to appropriate materials. This the first in a long series of posts on how to create websites. So… Let’s get started.

What is HTML?

Tim Breners Lee

To fully understand this, let’s go back to the beginning of the web. Once upon a time at an organisation called CERN (which actually stands for European Organization for Nuclear Research. weird huh), They had a challenge where lots of Physicists around the world had articles, data, information on vast numbers of topics all in different formats which required different software to view.

So it occurred to the a man named Tim Berners-Lee to come up with a way to standardize this information so that it can be easily retrieved by any computer that has the client software. So he set out to develop the engine of the world wide web. He designed everything. From transfer protocol (HTTP) to language (HTML), Web browser, Web Editor, Web Server, File Transfer Protocol (FTP).. Pretty much everything it took to get the web up and running. Ok, my geek sense just tingled. Let me break it down in a way that’s even easier to understand.

Let’s say I am in Lagos (At the moment, I am actually.. Laughing) and I wanted to send a message to my friend John in Benin. First of all, I would write a letter right? That letter (web page) would have to be written in English (HTML) in order for John to understand what I am saying right? And then I would take the letter to take the letter to a post office. Which essentially is a “protocol” or standard way to send letters right? Then I would write something on the envelope (HTTP Response Header) like “Gist of the Week” and the give it to the Post man who would send the information to John. In the case of the world-wide-web, I would be a Web-server and John would be a client/browser. Do you now get it?

So in web-design your job is simply to create Letters written in English for John (or any other sane person) to understand. But remember that people have different levels of perception. This means that the same letter may be interpreted differently by different people. However, the basic idea behind the letter will be the same.

Conclusion

So, HTML which stands for Hyper-Text Mark-up Language is simply a language in which web pages are written so that they can be understood by browsers.

Practice: Open any site of your choice, right-click anywhere on the page and click “View Source” (Actual phrase might differ from browser to browser) and then you can see the underlying HTML that generates that page.

What is RSS?

RSS Icon Ever wonder what this cute yellow icon represents? Well, It represents RSS Feeds. RSS actually stands for RDF Site Summary but it’s commonly referred to as Really Simple Syndication. Its an open standard that allows web content to be to be collated and aggregated together using XML (Xtensible Markup Language) Technology. Its not the only standard for serving feeds as there is also ATOM. There’s a lot to RSS and Feeds in general but I’ll try and break it down as much as possible

To easily understand what it is, let’s imagine this scenario: I have 24/7 internet at home and I love browsing on movies, games, tech blogs and so on. Assuming my favourite sites are:

  1. www.youtube.com
  2. www.amazon.com
  3. www.ebay.com
  4. www.cnet.com
  5. www.yahoo.com
  6. www.gametrailers.com
  7. www.gamespot.com
  8. www.imdb.com
  9. www.boxoffice.com
  10. www.techcrunch.com
  11. www.techrepublic.com

So every day to check for new content, I would have to go through the above sites one after another. Isn’t that a hassle? And maybe before I finish checking www.techrepublic.com , a new YouTube video might be uploaded. RSS was invented to tackle this problem. It’s simply a structured way to organise site content in a way that all kinds of software like websites, browsers, mobile applications, widgets (or gadgets) e.t.c can access and notify you of updates. That’s where the yellow icon comes in wherever you see it; you know it links to the feed URL. So in order to solve my problem, I would first need to get a feed aggregator. It’s a software package that can check for RSS feeds from various locations and arrange and collate them together. There are many Feed Aggregators and I would like to classify them into the following categories

  1. Browsers – If you use browsers like Internet Explorer, Mozilla Firefox, Safari or Opera (Chrome doesn’t have by default) then you can use its inbuilt feed aggregator. Just go ahead and click the RSS link (Usually located at the top right corner of your browser)
  2. Web Applications – So far the only web application that allows you to manage your RSS is Google Reader (reader.google.com ) There you can either search for feeds or add your own url
  3. Gadgets – Gadgets or Widgets in some platforms are small pieces of applications that are embedded into other applications e.g Google Sidebar, Opera Widgets e.t.c Most of them also come with RSS Feed Aggregators
  4. Mobile Applications: In my own opinion, this is the best way to consume RSS Feeds. Most smartphones: Android, Symbian, iOS and RIM (Blackberry) all have a form of RSS Feed Aggregator. Even if you dont have a smartphone, you should get Snaptu and install it on your java enabled phone and you can subscribe to your favorite RSS Feeds. It can also get your feeds from Google Reader.

After I have any of the above feed aggregators, I will then visit all my favorite sites and start clicking on the RSS icons of each site. I will add the URL to any of the above aggregators. When Im done, all I have to do is go to my RSS Feeds aggregator and Voila! I can now access all of my favorite websites at once.

Practice

Try Browsing your favorite sites looking out for RSS Feeds or The cute Yellow Icon above. After you find it, click it and click subscribe (if your browser supports RSS) or copy the URL in your browser

Then Goto to your preffered aggregator. If you don’t have, you can goto reader.google.com, Login or Sign and add the feed URL there

I hope you find this tutorial useful. This blog also supports RSS Feeds as well. So please subscribe and get notified about recent posts. If you are having problems, reply this post with your issue and I’ll help you out. Cheers!