Author: Hala

Long break

Although I wanted to work on ionic things didn’t come the way I intended, I had too many things on my plate, and I cant juggle all at once, so I’ll be taking a long break  to figure things up, and may come back later with new things to share

Best Regards

Filed under: Learning, TechTagged with:

build a simple ToDo app with ionic 3

To learn some thing you need to practice it, and what better than building a simple project and adding on features while you advance in your studies.

So we will be building a simple ToDo app using Ionic Framework, we will build from a blank template -from scratch- and will go from there, this was based on my understanding of Josh Morony’s Tutorial,  you can follow his blogpost here : Build a Todo App from Scratch with Ionic 2 & 3 so there will be similarities.

first we will generate our project go to your terminal and type

this command will generate an ionic application with a blank template, if you go to your app folder and type

this page will show up on your browser

now lets start, open your project in the text editor you use, now all the components we need to work with are located in the .src folder the structure is clear all the application pages will be located in the .pages folder, in this folder we will find the HomePage component generated for us

Creating The Template

we will modify home.html file to view a list of todos, open src/pages/home/home.html


so basically we are creating a page that have a navigation bar with an add button <ion-buttons end>  notice that end here is to position the button at the right of the navigation bar,

(click)=”addItem()” is a listener for the click event that will call the addItem function ,now in the content area we are creating a list to hold our todo’s

notice this part

here we are embedding a template for each item of our todo list, the *ngFor will loop over the Items of the array and render them inside <ion-item> , so if we have 6 items in the array then the <ion-item> will be rendered 6 times, we will define our Items array later on don’t rush it up, just know that her we are assigning a single element from our array to the item  variable as we loop so we will be able to reference each item properties

Adding the Class Definition,

know to be able to use the function we added in our template we should create them in the HomePage class so lets go to home.ts and modify it

now as you can see we have created an array of Items which will hold our Todo items when we add them, you can see that we have created an addItem function which is doing nothing right now.

so now we will create a component or lets say its page for now to allow us to add a title and a description to our todo

to do so run this command in your terminal

this will create a add-item folder in your pages folder, now before jumping to the new page first we need to import the new created page to app.modules.ts file you should add it in the declaration array and the entryComponants array , the file should look like this

now lets work on the AddItem page template, its so simple we just need 2 input fields and a button, edit your add-item.html to look like this

so as you can see we have set the title of the page to be Add Item, we have a closing button that will close this page when clicked, we have two inputes to where we will add the title and the description for our todo and a save button to save our data, the [(ngModel)] will help us track our data changes, any thing we change in the title field for example will be reflected directly to the this.title which we will create in the add-item.ts page and viseversa

now lets go and edit our add-item.ts

now we will be using the addItem page as a modal ,so whats a modal: A Modal is a content pane that goes over the user’s current page its usually used for adding and editing .to be able to use it we have to import ViewController service to allow us to dismiss the modal

now we only have to functions a save function and a close function, the close function will dismiss the modal (the add page) without holding any entered data

the saveItem function, basically it will pass on the values of title and about to the home page through the dismiss function , we will be setting a listener on the homepage to grab them the if statements are to make sure that the user will add a valid data before saving (if you don’t add the if you will end up creating empty items)

back to our home page modify your home.html

notice we have imported the add-item page plus the modal controller

you cam see that in addItem function here we are firing the addItemPage as a modal and when dismissing it we are grabbing the data (title, about) and inserting them in item which then will be saved in the Items array

run

and enjoy your simple todo app

next post will about saving the data , and adding the edit and delete feature

if you find any problems going through this, or you have any thing you would like to add please  leave a comment

 

Filed under: Learning, ProgrammingTagged with: , ,

Operator Mono Font and VSCode

If you are a user of Operator Mono font and Visual Studio Code I recommend this theme Operator Mono Dark theme.

it’s super easy to install

first you need to buy the Operator Mono font then install on your device,

then you need to set VSCode settings to this

 

then launch VSCode Quick Open and paste this command

and there you go you have a neat theme powered by Operator Mono  🙂

 

here is the difference , this is a random typescript file before applying the theme

Here is the same typescript file after applying the theme

Filed under: Learning, Programming, Resources, ToolsTagged with: , , ,

Tools & Resources

Here is a list of the tools and resources I’m using in this learning journey,

Tools:

1- Visual Studio code

2- Type Script

 

Books and courses

1- Building Mobile Apps with Ionic 2 by Joshua Morony

2- Joshua’s blog it has many useful tutorials

3- Free Code Camp a good resource for learning HTML5 and CSS and much more

4- TypeScript: JavaScript Development Guide By Nicholas Brown

5- JavaScript 30 by Wes Bos

5- TypeScript Master Class on Udemy

Thats it for now i’ll be listing more tools and resources later on

Filed under: Learning, Programming, Resources, ToolsTagged with: , , ,

How to install Ionic without using sudo on macOS

The first step for using any tool or platform is installing it.
As a user who had many problems using sudo, I tried to find a way to install ionic without it, found many over the internet but i’ll only list the two that i have tried

The lazy way

1- Install Node Version Manger ( nvm )  use the install script using curl:

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash

the current version of nvm as of today is v0.33.2 , so make sure to verify that you have installed the latest version by executing the following command

nvm --version

But always refer to github to check what is the latest version

2- Install the latest version of nodejs

nvm install node

Make sure that you are using the installed nodejs version by using the following comand

nvm use node

For more information about using nvm visit this link

3- Now you are ready to install cordova and ionic without sudo

npm install -g cordova ionic

By using nvm you are installing nodejs in your user home directory, I find this way simple and easy .The best thing though is that you can have as many node versions as you need on your user account, and no fear that another user would break your work if he upgraded nodejs installed globally on the system .

you can switch between the installed versions easily read the nvm documentation for more information.

 

The Long way

1- Make a directory for global installations

mkdir ~/.npm-global

2- Create a new file  called .npmrc

touch ~/.npmrc

3- Add the following line to the created file

prefix = ~/.npm-global

4- Depending on the shell you are using add the following line to .bashrc  or  .zshrc

export PATH=~/.npm-global/bin:$PATH

5- Source your   .zshrc  or   .bashrc

source ~/.bashrc  or   source ~/.zshrc

6- Install HomeBrew

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

7- Instal the latest nodejs

brew install node

8- now you can install cordova and ionic without sudo

npm install -g cordova ionic

This way is long and a bit complicated as you can see, especially if you don’t like messing around with your system files, but still worth it.

and here you go choose the one you like, try it and let me know if you face any issues..

 

Filed under: Learning, Programming, TechTagged with: , ,

Welcome

Welcome to my blog

I created this blog to share my learning experience after being away from programming for more than 5 years…  you can read the story here

Coming back to the tech world is hard, especially if you have been away for a long time ,I feel like i am in a new world and need a magic carpet and Aladdin to take me on a ride to discover it …

So lets fasten our belts and start this bumpy adventure …

Enjoy the ride 🙂

 

 

 

Filed under: Learning, Programming, TechTagged with: , , , ,