jay's old blog

this blog will be deleted soon - please visit my new blog - https://thesanguinetechtrainer.com

Project TD - Day 41 update – Core Tech For The First Batch of APIs for the API Engine


[Ongoing series of blog posts to inform potential developers, users and (hopefully investors) about this new app ecosystem I am architecting, designing, developing and deploying. More details at this page]

Earlier, I have written extensively about the design technique that I plan to follow to build the API Engine. The API Engine itself is a collection of APIs. For the last few days, I have been analysing the APIs that will make up the first batch of contribution towards the engine. I noticed that there are some essential tech components that they need to use to make it work.

Going by the design that I put in place, this is the second bubble from the API design titled as ‘Identify all Tech’.

So, here is the full list of tech’s that are identified to make this happen. The blog post image above lists it.

  • Build and Deploy an API
  • POST and GET to the API
  • PUSH and PULL from the API to the Data Service
  • Google Maps API on Android, Web and iOS
  • Facebook Login API on Android, Web and iOS 

I will of course, follow the design plan, and repo the above stuff, tutorial it. After that (these steps will take a few weeks to complete), I will finally have some serious unit testing to work upon.

As they say in the good books (mostly, there are no good books that I refer to. It simply me using them as proxy :P), exciting times lie ahead!

Follow me on twitterfacebook and instagram for more updates. Thanks

Building a web app – Part 2 of X

In my previous post, I talked about building a simple project. So, this is where I actually build it. Each part title is linked to particular commit. Each commit will have the name identical to the blog post that you are reading it.

The actual project is available at this link - https://bitbucket.org/studynildana/demo_asp_dot_net_1

All the work that is done in this particular blog post, will be available in the commit called ‘Part 2 of X’

In this part, the very first thing I did was to go ahead and create a new project. In Visual Studio, I chose the ‘Web’ portion in the very first portion that comes up. Then, I chose the part says ‘web’ again, and here I selected MVC. Further, I check marked the option called ‘individual accounts’ as I will be building some kind of an authentication system into this web app. Further, I unchecked ‘application insights’. I also unchecked ‘deploy to azure’. Both of these unchecked steps are something that are useful but they will be stories for another day.

Once the project was created (depending on your computer speed, this may take 30 seconds to 3 minutes), I built it to make sure that there are no errors. If there are any errors, then you should fix your visual studio installation because, this new project creation should ‘simply work’. If there are no errors, run the app and you should have the website running in a browser. I personally use Firefox but you are free to use any browser of your choice. Visual Studio by default will try to run it in Edge.

Once the web app is running, I want to check if the database is working. You know, the default website SQL server express that is part of this thing. So, I went ahead and registered a dummy account. Once the registration is complete, then I logged out and logged back in. Doing these steps is essential because this tells you that the app has proper access the local database. If you run into database errors, then you should check your SQL server express installation and fix that first.

I did not run into any errors. So, at this point, I have a fully functional but empty web app running.

In the next part, I will make some UI changes to get things kicking.

Issues you might face

While pushing the project to the bit bucket, I ran into this issue where the repo end would hang up on me unexpectedly. This probably happened because I was pushing too many files and of large sizes (my guess) because the error does not come when the files being pushed are small size. I had to go with this command to get the error to go away.

Error - fatal: The remote end hung up unexpectedly

Solution - git config http.postBuffer 524288000

Building a web app – Part 4 of X

In my previous post, I talked about making some essential UI changes. Here let’s look at adding some models.

The actual project is available at this link - https://bitbucket.org/studynildana/demo_asp_dot_net_1

All the work that is done in this particular blog post, will be available in the commit called ‘Part 4 of X’

This is where the main crux of the project starts. The idea behind this mini project is to allow students to store their marks in the database. Here are the elements, that I believe that a standard student should have in our web app.

·         Name (obviously)

·         Age (of course)

·         Email address (this will be the same email address that the student will register/login to see her/his own marks)

·         Marks (I am assuming that we just have one marks and nothing else in this school. It’s not reality but so is the rainbow)

With the above data in mind, I will now add a ‘student’ model into the project.

    public class student

    {

        //this is the unique ID automatically set by EF

        public int ID { get; set; }

 

        //the name of the student

        public string student_name { get; set; }

 

        //the age of the student

        public int student_age { get; set; }

 

        //email of the student

        //note that the student has to use this exact same email address when she/he registers on the web app to see her marks

        //since we cannot process login/registration process without email address, we cannot allow student entries

        //to be made to the database unless

        //so this becomes a mandatory field.

        //that is why I am using the Required attribute

        [Required]

        public string student_email_address { get; set; }

 

        //marks scored by the student

        public string student_marks { get; set; }

    }

For the above data model, I will need to add a database set.

    //now need to get the context that will work with the database

    public class studentDbContext : DbContext

    {

        //connection string to be used

        public studentDbContext() : base("studentDbContext")

        {

 

        }

 

        //DbSets that are the tables

        //table for students

        public DbSet<student> student_sets { get; set; }

 

        //this is more about appearance rather than functionality

        //prevents table names from being pluralized

        protected override void OnModelCreating(DbModelBuilder modelBuilder)

        {

            modelBuilder.Conventions.Remove<PluralizingTableNameConvention>();

        }

Now that I have the data model, and the database set, I can now use the cascading feature of visual studio and build the basic CRUD stuff for students.

Before I can do that, I will have to include a connection string. For that, I use a simple string. Remember back when I ‘checked’ individual accounts. When you did that ran the application, a connection string was already included in the web.config file of the project. So, here is how the automatically generated connection string looks like.

<add name="DefaultConnection" connectionString="Data Source=(LocalDb)\MSSQLLocalDB;AttachDbFilename=|DataDirectory|\aspnet-demo_asp_dot_net_1-20160928033935.mdf;Initial Catalog=aspnet-demo_asp_dot_net_1-20160928033935;Integrated Security=True"      providerName="System.Data.SqlClient" />

In the above data set for students, you will notice that the context is defined as studentDbContext.

<add name="studentDbContext"  connectionString="Data Source=(LocalDb)\MSSQLLocalDB;AttachDbFilename=|DataDirectory|\aspnet-demo_asp_dot_net_1-20160928033935.mdf;Initial Catalog=aspnet-demo_asp_dot_net_1-20160928033936;Integrated Security=True"      providerName="System.Data.SqlClient" />

I made changes in getting the above connection string to store the student tables (just to note, the first connection string relates to the storage of user accounts), the first being change the name. The second was change the Initial Catalog name to something else. Now, I can do the cascading with the controller and get the CRUD views for the student DB.

In the next blog post, I will use the identity management system, and also the Seed method (available from the entity framework system) to build a default set of roles as well as users.

Building a web app – Part 3 of X

In my previous blog post, I discussed creating a brand new project.

The actual project is available at this link - https://bitbucket.org/studynildana/demo_asp_dot_net_1

All the work that is done in this particular blog post, will be available in the commit called ‘Part 3 of X’

In this post, I will write about some UI changes that I did to make the web app look more like the project we are building. At this point, the project shows the standard ASP DOT NET things. For instance, the copyright marking says ‘ © 2016 - My ASP.NET Application’ Like this, there are so many ‘generic things’. I will have to change those things.

My first step is to go to the Views > Shared >_Layout.cshtml. This file is where the entire web app gets its cool menus (like when you reduce the width of the web app, the menu suddenly appears) and this is also where we can edit all the menu titles and other stuff. Best to check the commit details to see all the things I have changed.

At the end of the post, some stuff about the app (mostly visuals) have been fixed. Next post, I will talk about adding some models.

Becoming a (non-dot net) web developer

[Recently, I had a discussion with a friend of mine, and she was thinking of getting back into the developer game, in the web application development arena. Below are some of the thoughts I shared wit her, and this below are the highlights]

[Of course, as a dot net developer myself, I would be inclined to focus all my development using asp dot net, but the below skills are known to me and of course, asp dot net also uses the below stuff extensively]

You have chosen to enter the world of web programming (which is in constant change and upheaval and what not), which is one of those domains where the entry barrier is low and skills can be acquired quickly. 

Here are the five basic skills that you must have

  • HTML5 
  • CSS
  • JavaScript
  • jQuery
  • Bootstrap
Now, these skills are not mutually exclusive, as they have overlapping stuff between them. Now, if you are going to learn them, here are some quick links

If I were you, I would start off with w3schools and move on to my blog. Then, pick up that Exam 70-480 book and then actually take the 70-480 exam. If you can clear that 70-480, you are immediately at par with established folks. 

Your upgrade path should include some of the following skills

  • node.js
  • web services (API) building
  • Ruby
  • Python
Once you have the essential skills, you can put your skills to good use (to build demo web applications) on the following places

  • wit.ai
  • facebook apps
  • wikipedia apps
  • there are several sites that provide web apis, and you can pick any of them.
  • Or you could build your own API services and in turn build your own applications that consume self built API services.

jQuery – Getting and Setting DOM stuff

Getting and setting values in one of the most basic stuff that you can do when it comes to manipulating DOM elements. A simple scenario would be for you to read the contents of an input box. Then, based on the input box contents, you will be able to process it, and then put out the output into an output box or into a p tag.

To that effect, jQuery provides you with simple ‘actions’ that work as both ‘getting stuff’ and ‘putting stuff’ depending on what you do with the parameters.

Getting stuff

Most of the time you want to read the text that a particular DOM element holds. If so, here are two statements that help you do just that.

This one, gets the text that is part of a p tag element.

var collected_text  = $("#get_this_1").text();

This one, gets the text that is part of a input element.

var collected_value = $("#input_name").val();

If you wish to set a value, then you would do something similar, meaning the exact same method, but put the value as a function parameter.

$("#set_this_1").text("hello " + collected_value);

You will see that the same text action, works for both getting and setting the values. You don’t send any parameters, then it would be a ‘get’ action. If you do send a parameter, the same text action becomes ‘set’ and the parameter that was sent would be the value that needs to be set.

This can be taken further, if you wish to implement some sort of a call back function. A call back function allows you to get the ‘index’ of the element in the DOM, and also get a return value. Here is how it would look.

                //here is the call back stuff.

                $("#set_this_2").text(

                    //this is the call back function

                    //i will hold the index of the current element

                    //existing_text will hold the existing text in the DOM that is currently being manipulated

                    function(i,existing_text)

                    {

                        var text_returned = " index is i " + i + "previously it had - " + existing_text;

                        return text_returned;//this return value will be the new text to be set.

                    }

                );                   

As always, check our code repo to see all this in action.

jQuery – adding and removing stuff

Earlier we spoke about getting and setting a few things. However, this only works when you already have existing DOM elements to work with. However, you should also be able to add and remove DOM elements themselves. In other words, before you decide to manipulate DOM elements, you wish to create some DOM elements on the fly.

That is what this post is all about.

Here is how you might want to append stuff.

$("#hello_1").append(" <b>added this. ah!</b>.");

Here is how you might remove stuff.

$("#list_1").empty();

Honestly, I would simply ask you to go ahead and check out code repo because these methods are pretty straight forward, and the code and seeing it in action is the only way to go.

jQuery – Selectors

Earlier we wrote about the basic syntax of jQuery. Further, if we are to do DOM manipulation, then we need to know or ‘select’ the DOM elements we wish to manipulate. That means, we need some way to select the DOM elements and that is where we run into jQuery selectors.

Now, it’s example time to understand what these selectors are. Let’ say you are trying to catch fish. For that, you would use a net. Let’s say you were trying to catch a rat. You would use rat food or bait to do the same. Let’s say you are looking to catch some mosquitoes. Well, you just sit in your room with all windows open in the evening and wait for them to come near you. Of course, I am kidding with the mosquito catching. Don’t do that because mosquito bites are not funny and can be fatal.

Nevertheless, you get the point I am trying to make. Depending on what you wish to catch, you use the corresponding catching mechanism. Similarly, you use different selectors for different DOM element.

element selector

The element selector will help you select elements, using their tags.

id selector

The id selector will help you select element based on id.

class selector

The class selector will help you select elements based on their class.

combine selectors

you can also mix and match and select elements based on the parameters provided.

As always, check our repo to see all this code in action.

jQuery – including it in your webpage

In the previous post, I spoke about how jQuery is a library that works with web pages, allowing them to use JavaScript more efficiently. Of course, the next immediate question is, how do you include this ‘jQuery’ library.

As always, there are options. Both have merits and demerits.

Option 1 – download the jQuery library and include the file manually in your webpage.

jQuery is a JavaScript file that is available for download from jquery.com. Head over to their download section and get the jQuery file and include it into your webpage like you would include any other external JavaScript file.

The good about this method is that you have complete control over which jQuery version your webpage will use. Also, you will be providing a copy of your own jQuery file to your users. To me this option works well, when you are thinking of making some modifications to the jQuery library. Any modifications you did will be limited only to your jQuery file, so it makes sense that you would provide your own jQuery library.

This strategy of providing your own jQuery file will falter if something unexpected should happen. For instance, tomorrow when a better version of jQuery becomes available, your website (and by extension the users) cannot make the most of it. You will have to update your jQuery yourself. If something goes wrong when you are updating your own jQuery file, the entire website will stop working because, a lot of functionality depends on the now faulty jQuery file.

Unless you have a specific reason to do so, it is a good idea to not use your own jQuery file.

Including your own jQuery file would be something like this, which indicates that the jQuery library is available in the current folder of the webpage.

<script src="jquery-3.0.0.min.js">

Option 2 – use a Content Delivery Network

Content Delivery Network or CDN is some entity, usually a company, that provides a publicly accessible jQuery library file that anybody can use with almost zero restrictions. The cool part about this is that CDNs are big name companies like Google and Microsoft. So, you can be certain that the jQuery library you want will always be available. Further, these companies have super cool engineers who make sure that library itself will never get corrupted.

Not only that, the CDNs have file servers that serve this library file all over that world. That way, your users who are accessing the library can get the jQuery related stuff from a nearby server, while only getting the website stuff from your servers.

Overall, this is a pretty neat arrangement. You get the jQuery file that you need in the best possible manner at no cost to you. Someone else maintains it for you. Coolio!

Using a CDN – from Microsoft – would look something like this.

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.0.0.min.js">

As always, find our code at our repository that shows how to do this.

jQuery, JavaScript and libraries in general

I have already written a lot about Javascript earlier. Javascript is what makes awesomeness happen in a web page. But of course, this is the world of computer science. That means, once we have something awesome, we have to build something else which is even more awesome, making the previous awesomeness look mundane.

Part of that evolutionary approach is jQuery. There are many ways to describe jQuery, but for me, it reminds me of those libraries that we include when we build applications in c sharp or c or java or any programming language for that matter.

Here, let me harken back to the good old times when I was programming on c language. Back then, when I wished to use a function, I had to ensure that the necessary library file had to be included. For instance, we had something called ‘getch’ method that would halt the program from disappearing at the end of execution. Coming forward to present times, developing on .net, I use something like ‘console.readline’ to achieve the same effect.

In both cases, I must understand that, I had to include the necessary libraries before I can use them. If the libraries are not included, then the compiler has no idea, what ‘console.readline’ is. If the compiler does not know what they are, there is no way we can get a output build out of it. If we are looking at a more real life examples, I can think of two.

The first example would be reading a book and running into a word that you don’t understand. For instance, ‘you should be on the qui vive for bats’. Now, do you know what that sentence means? In all probability you don’t, not until you do a Bing search or grab a dictionary.

Another example would be watching the 5th movie in a 10 movie series. If some character comes (introduced in the 1st movie) and starts doing things, you won’t fully understand the character actions. You would either have to watch those earlier 4 movies or ask someone who has watched the 4 movies to get yourself up to speed.

jQuery is sort of like the ‘references’ or ‘dictionaries’ or ‘libraries’ that we use to speed our work. Going back to our movie example, let’s say you are already watching the 5th movie and that character comes. You have two choices. Watch all the earlier 4 movies or ask a friend who has already watched everything. Watching all the 4 movies may not be feasible, especially if you are already well into half of the 5th movie. It would be simpler if you simply get the necessary piece of information from your friend and enjoy watching the current movie.

This is in essence, what any library does in any programming language. You wish to do some advanced math? No problem. Obtain a math library and include it in the code. You wish to do animation? Include the animation libraries. You wish to do encryption? Include the necessary encryption libraries and start using them.

Similarly, jQuery allows you to do a lot of the usual Javascript work (which boils down to making web calls, playing with data and DOM manipulation) faster. If jQuery is not there, you can still do most of the things with JavaScript. However, the situation is similar to walking to work or taking the cab to work. In both cases, you will reach your office, but which one is more beneficial from a strictly efficiency perspective?