adding module lessons

Author: pocha

twitter-client-tutorial/_button_click_listener_module.html.md

@@ -0,0 +1,5 @@
+# Implementing Login Button Click Listener
+
+If you have followed our Twitter App tutorial so far, you have built a login screen with some basic Layouts & View elements. You have added a login button but it does nothing. 
+
+We have created this module specifically for introducing **Click Listener** . As an Android developer, this is the first time you will be dealing with a *callback code snippet* which gets executed when a button is clicked. 

twitter-client-tutorial/_hello_world.html.md

@@ -1,6 +1,6 @@
 # Hello World
 
-If you have not setup our Virtual Assistant so far, kindly click the *Go to setup* button on the right. Now in the setup lesson we have the Android Hello World app running, let's understand the Android app control flow a bit. We have created a screencast for you to help you understand the flow faster.
+If you have not setup our Virtual Assistant so far, kindly click the *Go to setup* button on the right. In the setup steps, you would be created a new **CodelearnTwitterApp** which has an Android Hello World app running. The app is similar to the default Android Hello World app that would create from Android ADT. Let's understand the Android app control flow a bit. We have created a screencast for you to help you understand the flow faster.
 
 
 <div class="alert alert-info">To understand the building blocks of Android apps, refer the <b><%= link_to "Android Introduction concept lesson", android_concept_lesson_path("android-introduction"), target: "_blank" %></b></div>
@@ -10,10 +10,8 @@ If you have not setup our Virtual Assistant so far, kindly click the *Go to setu
 
 <iframe width="853" height="480" src="//www.youtube.com/embed/Vl4VQRmo6g4?&vq=hd720&cc_load_policy=1" frameborder="0" allowfullscreen></iframe>
 
-<br>
-<p class="text-error">
-Change the text of string @hello_world in strings.xml and 'Run' the project in Eclipse in order to move to next lesson.
-</p>
-
+## Assignment
 
+If you understand the control flow in the Hello World app, here is an assignment for you. 
 
+Change the text of string @hello_world in strings.xml and 'Run' the project in Eclipse with our Virtual Assistant. If you have done it right, you will see a success popup here in the browser & the lesson will be marked complete.

twitter-client-tutorial/_hello_world_module.html.md

@@ -0,0 +1,18 @@
+# Welcome to Codelearn Android Twitter App Tutorial
+
+In this tutorial, you will build a Twitter App from scratch. Our intent is to show the lifecycle of an app from scratch to production. The unique thing about this tutorial is - you learn by building an app rather reading about the concepts. We tried to keep the flow as close as possible to how real developers develop real apps.   
+
+It could be daunting for a total newbie to get into Android app development from day 1. To keep things simple & progressive, our App Tutorial flow is created such that :-
+
+* Features required easier concepts are built earlier while the features requiring difficult concepts are pushed later. For example, we start with building the UI as it involves basic concepts like Activity & Layout, while pushing features like new tweet notification for later (work in progress).
+
+* If a feature is combination of multiple concepts involving some of the advanced ones, we break down the feature such that we do a sub-optimal build of the feature. For example, while introducing AsyncTask for network calls, we ask users to simulate the network call using a `Thread.sleep(..)` so that users can focus on just AsyncTask. 
+
+* Each module is broken down into lessons such that the lessons has just enough feature for you to focus only on one concept (or part of concept) at a time. This is also done to ensure that we are able to test the feature & pin-point you of the exact error which we would probably not able to do if it is a bigger feature involving multiple concepts. 
+
+* Lastly, you get to build & get your app tested at every lesson through our Eclipse plugin which we also call **Virtual Assistant**. So you dont just learn by doing, **you learn by building a real app**. Our aim is to enhance our Virtual Assistant to the level that it should be able to hint & guide you based on your learning capabilities. As for now, it simply tells you the error message of the test that fails when it evaluates your app. 
+
+
+Lastly, the language of our tutorial is very beginner friendly. A lot of our users have told us the same. Most of the tutorials are created by experts. Our tutorial structure is created by experts but the actual tutorial content is created by newbies who learn from this tutorial & then replace the complex statements with easier to understand lines & also fill in any newbie friendly information which experts have missed.
+
+We understand that you have your own app ideas that you like to work on & probably not like to build *yet another Twitter app*. The only way you can become a decent developer is by creating a lot of apps. That way, you not only understand Android concepts, but also the engineering behind app creation like how to conceptualize an app, how to break a big feature into smaller features etc. Going through complete app development lifecycle is an important learning which you can use in your own Android app.

twitter-client-tutorial/_iteration_1_plan.html.md

@@ -21,12 +21,8 @@ A good way to start is by building the app skeleton (just the user interface).
 <%= image_tag "twitter-client/twitter-details-screenshot.png", alt: "Twitter Detail Screenshot", title: "Twitter Detail Screenshot" %>
 <p class="ac">Twitter Detail Screenshot</p>
 <br/>
-Here are the lessons of this module <br/>
-	<% lessons_of_mod_1 = AppLesson.find_all_by_module_number(1) %>
-	<% count = 1 %>
-	<% lessons_of_mod_1.each do |l| %>
-		<%= count %> .
-		<% count = count + 1 %>
-		<%= link_to l.lesson.title, app_tutorial_lesson_with_token_path(@app_name, l.lesson_module.lesson.token, l.lesson.token) %>
-		<br/>
-	<% end %>
+
+
+In this module, you will be building the very basic User Interface (in short UI) of the login screen.
+
+> You will learn about using RelativeLayout, LinearLayout, EditText, TextView, various attributes of these XML elements & how you can twreak them to reach desired result in the view.

twitter-client-tutorial/_lesson_group_shared_preference.html.md

@@ -6,13 +6,4 @@ We are introducing data handling in this module. The network calls will be intro
 
 <div class="alert alert-warning"><b>Warning</b>: It is never a good idea to store passwords locally, plaintext or otherwise. But for the sake of this module, we overlook best practices to get a better understanding of SharedPreferences</div>
 <div>
-<% count = 1 %>
-<% lessons_of_mod_2 = AppLesson.find_all_by_module_number(2) %> 
 
-<% lessons_of_mod_2.each do |l| %>
-	<%= count %> .
-	<% count = count + 1 %>
-	<%= link_to l.lesson.title, app_tutorial_lesson_with_token_path(@app_name, l.lesson_module.lesson.token, l.lesson.token) %>
-	<br/>
-<% end %>
-</div>

twitter-client-tutorial/_login_page_intent_module.html.md

@@ -0,0 +1,5 @@
+# Loading TweetList Screen from Login Screen through Intent
+
+In the last module, you implemented **Click Listener** on login page button which simply updated the button text. In this module, you will learn how you can load a new Activity on the button click using **Intents**.
+
+Intent is the Android way of launching new Activity & even external apps from inside of an Android app. Usually Intent gets fired from button click, List item click or some other user interaction mechanism. 

twitter-client-tutorial/_tweet_list_dynamic_data_tweet_model.html.md

@@ -1,67 +1,80 @@
-# Using Tweet Model in ListView
+# Creating Tweet Model
 
-In the previous lesson, we created a Tweet Model. In this lesson, we are going to populate it with dummy data & then use its content to show up on TweetListActivity. 
+##Recap from module 1
 
-## Step 1 - Array of tweets initialization 
+In module 1, each tweet item had dummy data and its appearance was based on row_tweet.xml. We also created a TweetListAdapter with a `getView()` method which simply inflated the resource xml
 
-We will be holding a lot of tweets at a given time. So we need an array of Tweet model objects. 
+`TweetAdapter.java`
 
-	List<Tweet> tweets = new ArrayList<Tweet>();
+	public class TweetAdapter extends ArrayAdapter {
+		.
+		.     
+		 @Override
+		 public View getView(int position, View convertView, ViewGroup parent){
+			 return inflater.inflate(R.layout.row_tweet, parent, false);
+		 }
 
-While `List` is a generic array class in java (also called interface), `ArrayList` is simply an array implementation of List interface. Putting a `<Tweet>` typecasts it to an array of our Tweet class.
+	}
 
-## Step 2 - Populating the array 
+Because of the above step, all tweet items looked the same. In real life, each tweet item will hold a different value that comes from the twitter server. Since we are not doing network calls yet, we will populate some dummy but different data. 
 
-Presently, we create random data inside getView() when the user visits the TweetListActivity. Since we've created a new Tweet model, we will iterate over the Tweet objects, get each element's value like header, date, body etc & set the appropriate field in the inflated View. 
+The steps we are going to follow :-
 
-We don't have any tweets yet, so `tweets` will be empty. You can populate it with the code snippet below.
+**1. New Tweet model to hold data ** 
 
-    for ( int i = 0; i < 20; i++ ) {
-		Tweet tweet = new Tweet();
-		tweet.setTitle("A nice header for Tweet # " +i);
-		tweet.setBody("Some random body text for the tweet # " +i);
-		tweets.add(tweet);
-	}
+Good programming practice in Java mandates that any kind of data should be held in a Class. It is also referred as Model of Model View Controller architecture. Consider the Activity classes as Controllers & XML as Views. We will create a new class Tweet.java which will hold the tweet data.
 
-The code above will put 20 Tweet objects in `tweets` array. We are using **setTitle()** and **setBody()** functions that we created in Tweet model in the previous lesson.
+**2. Populating the Tweet model **
 
-## Step 3 - Populating ListView with tweets array
+In a real Twitter app, data would be fetched from the network. Since we are not doing network call here, we are just going to put some dummy data in our Tweet model. 
 
-Now that we have populated the tweets array, we need to show the data it holds on the ListView. 
+**3. Using Tweet model to show data on screen **
 
-A quick recap. Data is passed to the ListView through an Adapter. We had the below code in TweetListActivity.java .
+We are then going to pass the tweet model array to TweetAdapter & change the code to use the model data to show on the screen. 
 
-<pre>tweetItemArrayAdapter = new TweetAdapter(this, new String[10]);</pre>
+## Creating Tweet Model
 
-We were not actually passing any data to the Adapter. Just the size of the String array is used by the Adapter to create 10 tweet entries. Now we will be passing `tweets` array to TweetAdapter which will in-turn be used in getView() method to set the title, body & date in inflated View.
+When we will do network calls to fetch tweets, all the tweets will have uniform structure. Each tweet will have an image, twitter handle, body, date etc. In Java, it is a good practice to create a Java class for this. Such an object is also known as **P**lain **O**ld **J**ava **O**bject (POJO) in Java. We can store multiple tweets as array of the Tweet object.
 
-We also need to modify **getView()** method to use the tweets array. The method `getView()` returns an object of type View. Before returning the View, the content of the inflated View can be modified by accessing elements of the View using `findViewById()` method and setting the text using `setText(..)`. 
 
+### Assignment - create Tweet model
 
-### Assignment
+** 1. Create Tweet.java **
 
-**step 1 ** 
-Implement step 1 to instantiate array of tweets. You should have it as private class member in TweetListActivity as you would be needing the variable across the functions of class TweetListActivity. 
+The file needs to be in src -> org -> codelearn -> twitter -> models directory. You can either manually create it or follow the Eclipse steps below.
 
-Make sure you add the appropriate import statement
+* Create new folder
 
-     import org.codelearn.twitter.models.Tweet 
+<div class="row-fluid">
+	<div class="span6">
+		<%= image_tag "twitter-client/new-folder-src.png" %>
+	</div>
+	<div class="span6">
+		<%= image_tag "twitter-client/create-folder-src.png" %>
+	</div>
+</div>
 
-in TweetListActivity.java. Otherwise, Eclipse will not be able to understand that 'Tweet' actually stands for the Tweet class defined elsewhere.
+* Create Tweet.java inside org.codelearn.twitter.models
 
-**step 2 **
-Initialize tweets array with dummy data as in step 2. Figure out the right place you should be initializing it.
+<div class="row-fluid">
+	<div class="span6">
+		<%= image_tag "twitter-client/new-class-folder-src.png" %>
+	</div>
+	<div class="span6">
+		<%= image_tag "twitter-client/create-class-folder-src.png" %>
+	</div>
+</div>
 
+* This is how the newly created Tweet.java will look
 
-**step 3**
-Make tweets array created from step 2 accessible inside TweetAdapter's getView() function . 
+<%= image_tag "twitter-client/tweet.java.png" %>
 
-Hint 1 - You should pass the array while initializing TweetAdapter in TweetListActivity. The variable becomes available inside constructor of TweetAdapter which you should store locally in TweetAdapter to be used in getView(..)
+**2. Create Tweet.java PoJo **
 
-Hint 2 - TweetAdapter need to extend `ArrayAdapter<Tweet>` to be able to accept array of tweets as argument in the constructor.
+If you do not know what PoJos are, read about it [here](http://stackoverflow.com/questions/11722251/what-is-pojo-dojo-in-java)
 
-Hint 3 - Inside getView(..), you should use `position` variable to get the appropriate Tweet object from the tweeets array
+For now, we are just going to have **id** (String), **title** (String) & **body** (String) fields in the Tweet model. You need to create a PoJo that lets you retrieve & set these fields. 
 
-Once done, the app will look as below
+Create `getTitle()`, `setTitle()`, `getBody()`, `setBody()` & `getId()` functions in the PoJo that will get/set the appropriate fields. 
 
-<%= image_tag "twitter-client/different-tweets.png" %>
+You should run your app & we are going to test if Tweet.java is present at org.codelearn.twitter.models & has appropriate functions & fields. **Make sure you keep the name of the file, location & fields exactly same as specified.**