Ionic2 Review

Ionic2 Review

So its been about 2-3 Months of me playing with ionic2 . I want to write some of my thoughts about the framework.

Why I like Ionic framework ?

Tons of UI Components based on commonly used design patterns which are optimized for target platforms.

Vibrant and Active community ( I really like the ionic forums, and Slack channel)

Ionic Resource Generator is simply awesome

 

Where I faced most of the problems ?

So I realized that when we are working with Open source software like Ionic , Angular there are a lot of dependencies , And What might be working right now may not be working in the future after you update something . I was really frustrated while updating ionic CLI or ionic-angular component because there were really weird errors that I encountered . I always feel really scared while updating stuff on an important project .

Thats probably because I am not doing any unit testing , Well I have never done unit testing before , I plan to do it but there isnt any good official doc regarding the same , besides even angular unit testing docs are not updated.

 

Testing on real device is really important and I spend a lot of time with that , Even though I had wild problems with adb , It stopped detecting my phone for some reason , So now I manually build the apk and transfer via USB.

I actually found this to be more convenient than ionic run android .

 

When creating production version of an ionic app, There are like 4-5 steps which are very important , and I often make some stupid mistake in one of the steps .

 

Elearning : Introduction to “Toolkit Concept”

Elearning : Introduction to “Toolkit Concept”

Please note this will be a very long post with many examples and references , and I will keep updating it .

So I want to talk about a new idea, That I discovered after realizing the limitations of books , Lets Start this by first defining what a book is xp

I know you are wondering why do we need a definition of a book? Well I just want to emphasize on few key points and limtations .

Books are Published content that authors write to communicate with their target audience which are based on certain assumptions .

That assumptions word is very important here

  1. Book Doesnt Teach How to “use/read” a book ? Why is this important? Well it might sounds very simple and stupid but every book has certain basic assumptions that they expect from readers/users. Imagine Starting over  with chapter 5 from a algebra book , which has a chapter on quadratic eqations, while most books will mention the dependencies of that chapter some badly designed books wont .

2.   Books assume readers have good memories (especially maths textbooks) , Open up a chapter on Trigonometry or Properties of Triangles and just look at the “Ocean” of formulas they expect us to “remember” , While some brave souls might remember all of them , most of like me dont .

3. Books Dont check if what you have “read” you have actually practiced that when did you practice that, Books Dont provide you powerful analytics .

4. Books dont help you realize patterns and dependencies among different entities.

5. Books dont give you the intuition that is very human friendly (they are very static ) , It can be the case that ever since the book was published or even before it was published there were other intuitive explanations of a particular concept that were way simpler that what book provided but the author never cared to research over those before writing the book.

Even though we have a lot of limitations Books still remain one of the widely used resource to “learn” concepts . They are cheap and widely available.

 

Alrightly , In this post I want to specifically magnify upon the 4th point and why I have realized its so important (atleast from mathematical perspective ) .

Imagine how hard it is to just rote learn all those hard formulae, but thats we are trained to do , I reject this way of learning things because of the following reasons :

  1. Not every student/person has a capacity to store a large number of formulae in his/her LTM (Long Term Memory)
  2. Jumping directly to formulae can eliminate intuition and reasoning
  3. Formulae are limited and most often we need to chain them in order to solve a problem , remembering the exact sequence is also challenging.

So How Can we solve this problem ? I introduce ” The Toolkit ” , It’s a very simple abstract model which you can think of as “virtual memory” .

Toolkit enumerates all the rules (not necessarily formulae ) that a student has learnt . But here is the catch , It also includes “Patterns” that books fail to realize.  Each Rule/ Pattern has a Index number , Title , Description , Date Added Fields

We can either make use of a diary to make our “Toolkit” or just use any text editing software like notepad, Thats what toolkit model really is , Its just text .

Why are patterns so useful , Lets take up an example in properties of triangles unit.

My Book has 3 formulae :

sin(A) = area / 2bc , and similarily quivalent versions for sin(B) and sin(C)

Now , I am sure most of you must have simply “learnt” it and stored it in your LTM ( Thats what we assume ) . Imagine that after 1 year you changed your major and started learning “Cooking” , and around that time I give you a problem that heavily depends on these formulae , will you able to solve it ?

Here is How Our Toolkit Model solves this problem , We first proof this to convince our selves and notice that the proof takes less than 1 minute . We realize a pattern/rule of the following form :

SNo. 1

Description :  For relating Sine < A > to area of triangle => Consider general triangle => Draw perpendicular => Apply law of sines in the subtriangle .

Thats It.  You know whats nice ? The first time you did this on your own , It provided you confidence that It is not that hard and simpler that directly rote learning the formula. Try the same problem after 1 year referring to your “Toolkit” I am sure you will solve it.

Some things related to Patterns/Rules :

The “Toolkit” doesnt enforce any constraints on writing style/form of productions , they depend on the person who is going to “use” his/her “toolkit”

The entries/rules in your toolkit cannot be proved but are based on your “assumptions” , Thats why you should only add entries when you first make sure you are confident deriving them. The whole point of introducing toolkit is to remove burden of memorizing “everything” .

The Toolkit is dynamic in nature and you must expand entries , You can even generalize rules/patterns.

Here is one practical use case of toolkit concept , So I was solving some problems, I noticed that many problems were strikingly similar in nature, and there was a “pattern” in them that seemed recursive, I couldnt find any specific formulae to solve these kinds of problems that were simple .

So Here is What I did I solved the first problem , It gave me the confidence , I continued solving similar problems and identified the pattern , You can watch these in this videos -> https://www.youtube.com/watch?v=DHGgmgAeJ_o

Then I added another entry in my toolkit , which looks something like this :

SNo. 2

Description: Relating Sides of a triangle with tan/cot of half angle -> Law of Sines ->Trig Transformations -> Result 🙂

Just look at the above entry that I added in my toolkit , It is so personal , It is so informal , and It gives me the confidence to solve any problem of similar nature. In fact I solved more problems by applying rule 2 of my toolkit and reached out at a correct solutions.

User have to firmly believe in the entries added in their toolkit .It may rarely occur that you added a slightly misleading / incorrect rule , You must first challenge the toolkit , If you fail , you must modify/remove your entry.

The feature image of this post shows one example of my toolkit entry

Toolkit Model Directly Endorses / Appreciates The wonderful concept of Constructionism because Users must solve the problems on their own , Get the confidence , Identify Patterns and Store that very confidence permanently in form of Toolkit entry .

 

Perfect-Todo just got featured on Ionic Showcase :)

Perfect-Todo just got featured on Ionic Showcase :)

Just got an email few minutes ago that my app perfect-todo got accepted (wow what a perfect birthday gift )

If you dont know about it, Its a simple experiment with ionic2 , What I have learned over a month or two browsing ionic2 docs and forums . It requires min android version 5.1 though

Some of the things I have learned so far :

1. Being a part of the “community” is important . This is something you will realize soon . Take a look at Leading Bloggers who blog about ionic like Josh Morony ,They are actively involved in community (like forums , slack channel etc).

2. Testing is important from the very beginning , Testing should be done on real device because sometimes stuff produces unexpected results.

3. Ionic Forums are really helpful , they have an ocean of knowledge(Also the slack channel)

4. If you learn something , Share your knowledge , Not only you would feel confident , you are indirectly contributing to the community.

5. Never Underestimate simple things , because even simple things can go wrong.

How I Used HCD on the simplest app ?

Okay let me tell you a secret that you probably already know, Its called the Human Centered Design . It says understand the needs of people first and then develop technologies. It started with a long observation that even a simple thing like a notepad could be very “powerful” and “useful” to me. and I didnt have it all the time. So I decided to start with a todo app. Soon When I created the FWP(First Working Prototype) I noticed my early user in their “natural” environment , Noticing their difficulties which led to rapid changing. Yes The app still lacks a lot of features but I now understand that when you create a software you dont just create it in one go , Its a continual process just like designing.

swype

https://play.google.com/store/apps/details?id=com.ionicframework.playground634759&hl=en#details-reviews

I have made a decision , I am going to open source it so other beginners can have a look , take inspiration and provide me inspiration. The Open Source ecosystem is awesome , it just takes a little while to adjust 🙂

Here you go https://github.com/saurabhvyas/Perfect-Todo

My future plans :

Invest in UI
Integrate Push Notifications
Make it more user friendly
Integrate Reminders

Using JSONP Service in angular2

Using JSONP Service in angular2

Hi Guys , It seems this is my first angular2 post, even though I am using it in my ionic2 but I dont think it should matter since everything is the same .

So here is the plan : I want to use github api ( you can also use jsonplaceholder api ) and fetch json object of all jobs using http.

But There is a problem , Since browsers have same origin policy , meaning that http request from a server to a different server are not possible , so we cannot use HTTP , Instead we can use JSONP, I never used JSONP API Before , but its actually pretty simple

So Let’s Get started!

Create a blank new angular2 project

Create a new provider called data ( This will serve as our data service )

So few comments regarding the code below , First we will import required “stuff” In this case JSONP,Response,Headers etc. Also notice we are importing Observables because thats how we are going to handle our async responses.
You can find the basic boilerplate code at angular2 website.

Now notice that I have created a new member variable url of the class and in its original url value I have appended callback=JSON_CALLBACK , well this is because we are dealing with JSONP and when we get our response back our JSONP_CALLBACK will be fired.

We are also making use of rxjs map and catch operator. map will basically map our chunk of data to json . So thats it for the service , nothing very groundbreaking here


import { Http,Jsonp, Response } from '@angular/http';
import { Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

import 'rxjs/add/observable/throw';

import {Injectable} from '@angular/core';

@Injectable()
export class DataService {

private url :any ="https://jobs.github.com/positions.json?description=python&location=new+york&callback=JSONP_CALLBACK";

constructor(private jsonp:Jsonp){

}

getdata() : Observable {

return this.jsonp.get(this.url)
.map(this.extractData)
.catch(this.handleError);

}

private extractData(res: Response) {
let body = res.json();

console.log('extracting data');

return body ;

}

private handleError (error: any) {
// In a real world app, we might use a remote logging infrastructure
// We'd also dig deeper into the error to get a better message
let errMsg = (error.message) ? error.message :
error.status ? `${error.status} - ${error.statusText}` : 'Server error';
console.error('err' + errMsg); // log to console instead
return Observable.throw(errMsg);
}

}

Okay So now lets “consume” our data service , So Either can use your current component, or create a new one and import the Service.

So my homepage.ts file looks something like this :

import {DataService} from '../../providers/data/data';

@Component({
templateUrl: 'build/pages/home/home.html',
providers:[DataService]

})
export class HomePage {

public data:any;
private errorMessage:any;

constructor(private dataService:DataService) {

this.dataService.getdata()
.subscribe(
data => this.data = data,
error => this.errorMessage = error);

}

}

So since we now have the data we can actually use this by interpolation and using the json pipe for clarity .

Data

{{data | json }}

That should be it , You should see the resulting json 🙂
 

Create Custom Icon/Splash Screen in ionic2

Create Custom Icon/Splash Screen in ionic2

Its actually pretty simple to generate custom resources in your Ionic2 App. Just refer to Ionic1 Docs page for the same topic , it seems ionic2 docs dont mention anything about this right now but everything is still the same .

 

Somethings that you should know :

  1. Ionic resources actually uses your internet connection to upload files to their “resizing servers “
  2. Always test on a real device
  3. Always remove yours app’s previous data or you can simple uninstall the previous version
  4. If there is any error in splash screen plugin r

The Design Of Everyday Things Review

IMG_20160711_094509534_HDR

So I have been reading this book The Design of Everyday things by Don Norman , Here are some of my thoughts:

This book is an ocean of ideas and concepts, the author argues that while technology keeps changing people stay the same and therefore design principles remain the same . I really like this because what this means is that what you learn in this book will almost be true for future technologies like A.I and Virtual Reality .

This book has a lot of concepts and supporting examples and engineers really need to buy this book , because they will understand the importance of design and have a strong respect for it . This book is also perfect for people who love creativity and art (like me 🙂 )

Some of the chapters like chapter 2 are really big and involve a lot of concepts , so I followed this approach : I divided this book into modules(chapters) and instead of thinking about the whole book , I focused on one specific module and gave it a day or two , this way I noted down the things I liked about a single module and then once I was done I moved to the next one .

The great reviews about this book are really justified , so overall I am quite happy that I learned a lot of design principles , In future I would love to apply them on various objects and services I design.

 

Design of Educational Technologies

Design of Educational Technologies

 

I love designing and I have a passion for teaching(I am not a teacher but I have great interest in improving the quality of education system ) , In this article I want to discuss how we can use some of the design principles in field of Ed-Tech , I will keep updating this article when I do more research / find more ideas

Simplicity : I introduced one of my teachers to the whole idea of E-learning and How to record video lectures, there was a lot to learn , so she took a long time to understand but she finally did , the idea is very simple we need to design systems that are very simple , Not all teachers are experts in technologies and not just teachers we want to design systems which students find easy and intuitive and not confusing , no one needs a dashboard with tons of functionality but no clear way of navigation etc

HCD: Human Centered Design , is a well known design philosophy which basically says that before starting the actual design process study the people , their requirements and then build systems on top of that, I think this is exactly what we need in education , for instance when we create books for students , we dont know their difficulties, what concepts trouble them, we dont ask them how would they like a particular thing, We just assume that our book will be perfect fit for students of say 8-10 year old age group. This is a bad design idea, If we instead ask from our target audience(teachers or students) , their difficulties , their challenges, their expectations etc our systems/books etc will be much more powerful,delightful and create a deep impact.

Some of you might suggest surveys , Let me ask you do you fill every survey form you see ? I am sure most of you will say no, this is because of many reasons like

  1. People have a general conception that most surveys are just for sake of taking surveys and their participation wont make a difference ( I think this is wrong .
  2. Some books include a letter head at the end indication the address at which user can send the survey letter for valuable feedback , some even include email account or website , but we know users dont like to do each of these .

How can we apply HCD effectively ? Imagine that you are writing a book for algebra students , You know your target audience (students and teachers ) , you can pick any random school and randomly ask students/teachers about their problems with the topic without revealing your identity , you should also secretly observe their behavior and problems , suppose they are assigned an activity that requires problem solving and involves algebra concepts , note their behavior , activities,experiences .

Here is a quote I kinda like

…pay attention to what users do, not what they say

-Jakob Nielsen

So How can we apply other core design principles in Ed-Tech ? Lets see

Conceptual Model : This is a general term in design that refers to highly simplified version of how something works, We humans build conceptual models of everything around us , everything we see , observe .

When Students are introduced to a new concept they try to build conceptual models of that concept , each individual has a different way of constructing conceptual models , they dont have to be the same but what we should aim for is that they should be correct , The instructor or designer of the book has their own conceptual model different from their readers, The designer of the book must not forget this, what they think might be simple might not be simply for students.

So How do we construct conceptual models ? We do so by observation, based on our prior experiences with similar things, reviews etc , We call all of these things combined the System Image

Its very important to provide students with more options to learn things , just the text from the book is not sufficient to create correct conceptual models for all students , We must show students simulations , share with them applications of what they are learning and share our own experiences.

One thing to note is that conceptual models are not static , they evolve as we develop them further with more learning , clues etc. For instance you would have developed a conceptual model about geometry when you were first introduced to it but after you learn calculus , your earlier model got evolved , because now you can view geometry with a new perspective etc .

Constraints : This is another design concept designers incorporate constraints while designing things to avoid errors , misconceptions etc . We can do the same while developing educational systems , We can design an exercise software with interactive components (much like K.A ) and in order to go to a new skill you must have completed all the problems of the skills that are dependent on the skill so we are deliberately introducing a new constraint , We can make sure there are no gaps and they can learn new concepts without trouble

A note regarding questions : Questions should be designed as 2 set of problem sets , one which is fundamental and mandatory in which each problem involves a concept that we have learnt , and it includes a problem that takes all the concepts learnt into account . So fundamental problem set will ensure that a student has mastered a concept and ready for the next one , and then there should be another problem set containing additional problems in case they would like to do even more practice .