create account

Develop Mobile Apps Using Ionic Framework Part-1 by exploringworld

View this thread on: hive.blog |  peakd.com |  ecency.com
utopian-io · @exploringworld · (edited)
$3.21
Develop Mobile Apps Using Ionic Framework Part-1
#### Welcome to the first Video Tutorial of Mobile Apps Development using Ionic Framework
<center> <img src= https://imgur.com/Tknygul.jpg/> </center>

#### What Will I Learn?

- You will learn how to develop amazing mobile apps using **Ionic Framework** and **Cordova**
- You will learn how to inject Ionic and Cordova modules into node.js
- You will learn about different templates of Ionic Framework for mobile apps
- Your will learn how to deploy mobile apps into mobile 	 device or **Android** or **IOS emulator**

#### Requirements
##### System Requirements:

- [Node.js](https://nodejs.org/en/) for building apps
- [Visual Studio Code](https://code.visualstudio.com/) for code editing 
- [Git](https://git-scm.com/downloads) **(Optional)** or Command Prompt or Terminal
- An Android or iOS Emulator or mobile device for testing
##### OS Support:

- Windows 7/8/10
- macOS 
- Linux 
#### Difficulty



- Intermediate

#### Required Understanding
- You just need a little bit of knowledge of HTML,CSS and JS
- A fair understanding of Programming 
- A thirst for learning and developing something new


#### Description
-	This particular video tutorial Series is for everyone who would like to build amazing Android and iOS apps. In this tutorial, you will learn about Ionic Framework with AngularJS from the beginning, that allows you to develop amazing mobile apps with just **HTML, CSS** and **JS**.
-	All you need is a little bit of understanding of web design	 . If you are a web developer and want to build mobile apps, Ionic will probably be your piece of cake. You will be able to create amazing apps that will work on both Android and iOS.
#### What is Ionic Framework ?
Ionic is an HTML5 mobile app development framework targeted at building hybrid mobile apps. Hybrid apps are essentially small websites running in a browser shell in an app that have access to the native platform layer. Hybrid apps have many benefits over pure native apps, specifically in terms of platform support, speed of development, and access to 3rd party code.
Think of Ionic as the front-end UI framework that handles all of the look and feel and UI interactions your app needs in order to be compelling. Kind of like **“Bootstrap for Native”** but with support for a broad range of common native mobile components, slick animations, and beautiful design. [Source](https://ionicframework.com/docs/v1/guide/preface.html)
#### Some of the key steps that are used in this tutorial
*_Below I discuss important coding steps that are must required in this video tutorial_*
##### STEP 1:
After installing`Node.js,Visual Studio Code` and `GIt` we have to check the versions of our Node.js and Node Package Manager Using Git commands

<center> <img src= https://imgur.com/WwbZMhX.jpg/> </center>

<center> <img src= https://imgur.com/w6e72rm.jpg/> </center>
##### STEP 2:
Now we install Ionic and Cordova module globally using the same command line 
`npm install ionic cordova -g`

<center> <img src= https://imgur.com/AkqcMy5.jpg/> </center>
##### STEP 3:
Now we have our modules installed using the npm,we are going to type Ionic commands to build our first app
`Ionic start FirstApp blank`
We name our first app as FirstApp.

<center> <img src= https://imgur.com/qGzqbX7.jpg/> </center>
##### STEP 4:
As we have build our first app we used `ionic serve`command to open this app on the web browser

<center> <img src= https://imgur.com/iharELz.jpg/> </center>
As you see the app is just holding a header as **Ionic Blank Starter**. To improve its readability and functionality we use `ionic serve --l` command which opens the app in the lab mode

<center> <img src= https://imgur.com/VFlMArL.jpg/> </center>
##### STEP 5:
At the end we have our first app deployed to android emulator

<center> <img src= https://imgur.com/ZFDk5w2.jpg/> </center>


#### Video Tutorial
https://youtu.be/AAOdohe_r50

#### Curriculum
This video is first video of the Develop Mobile Apps Using Ionic Framework Series. When next parts are uploaded, links to previous parts will be place here.



<br /><hr/><em>Posted on <a href="https://utopian.io/utopian-io/@exploringworld/develop-mobile-apps-using-ionic-framework-part-1">Utopian.io -  Rewarding Open Source Contributors</a></em><hr/>
👍  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , and 155 others
properties (23)
authorexploringworld
permlinkdevelop-mobile-apps-using-ionic-framework-part-1
categoryutopian-io
json_metadata"{"community":"utopian","app":"utopian/1.0.0","format":"markdown","repository":{"id":12256376,"name":"ionic","full_name":"ionic-team/ionic","html_url":"https://github.com/ionic-team/ionic","fork":false,"owner":{"login":"ionic-team"}},"pullRequests":[],"platform":"github","type":"video-tutorials","tags":["utopian-io","utopian-io","mobile","apps","tutorial"],"links":["https://nodejs.org/en/","https://code.visualstudio.com/","https://git-scm.com/downloads","https://ionicframework.com/docs/v1/guide/preface.html"],"moderator":{"account":"buckydurddle","time":"2018-04-26T10:08:42.635Z","pending":false,"reviewed":false,"flagged":true},"questions":{"voters":["zenkly","engr-muneeb"],"answers":[{"question_id":"vtuts-1","answer_id":"vtuts-1-a-2","user":"zenkly","influence":30},{"question_id":"vtuts-2","answer_id":"vtuts-2-a-2","user":"zenkly","influence":30},{"question_id":"vtuts-3","answer_id":"vtuts-3-a-2","user":"zenkly","influence":30},{"question_id":"vtuts-4","answer_id":"vtuts-4-a-4","user":"zenkly","influence":30},{"question_id":"vtuts-5","answer_id":"vtuts-5-a-3","user":"zenkly","influence":30},{"question_id":"vtuts-6","answer_id":"vtuts-6-a-3","user":"zenkly","influence":30},{"question_id":"vtuts-7","answer_id":"vtuts-7-a-2","user":"zenkly","influence":30},{"question_id":"c-1","answer_id":"c-1-a-2","user":"zenkly","influence":30},{"question_id":"c-2","answer_id":"c-2-a-3","user":"zenkly","influence":30},{"question_id":"vtuts-1","answer_id":"vtuts-1-a-1","user":"engr-muneeb","influence":0},{"question_id":"vtuts-2","answer_id":"vtuts-2-a-1","user":"engr-muneeb","influence":0},{"question_id":"vtuts-3","answer_id":"vtuts-3-a-1","user":"engr-muneeb","influence":0},{"question_id":"vtuts-4","answer_id":"vtuts-4-a-3","user":"engr-muneeb","influence":0},{"question_id":"vtuts-5","answer_id":"vtuts-5-a-3","user":"engr-muneeb","influence":0},{"question_id":"vtuts-6","answer_id":"vtuts-6-a-2","user":"engr-muneeb","influence":0},{"question_id":"vtuts-7","answer_id":"vtuts-7-a-1","user":"engr-muneeb","influence":0},{"question_id":"c-1","answer_id":"c-1-a-1","user":"engr-muneeb","influence":0},{"question_id":"c-2","answer_id":"c-2-a-1","user":"engr-muneeb","influence":0}],"total_influence":0,"most_rated":[{"question_id":"vtuts-1","answer_id":"vtuts-1-a-2","influence":30,"voters":["zenkly"]},{"question_id":"vtuts-2","answer_id":"vtuts-2-a-2","influence":30,"voters":["zenkly"]},{"question_id":"vtuts-3","answer_id":"vtuts-3-a-2","influence":30,"voters":["zenkly"]},{"question_id":"vtuts-4","answer_id":"vtuts-4-a-4","influence":30,"voters":["zenkly"]},{"question_id":"vtuts-5","answer_id":"vtuts-5-a-3","influence":30,"voters":["zenkly","engr-muneeb"]},{"question_id":"vtuts-6","answer_id":"vtuts-6-a-3","influence":30,"voters":["zenkly"]},{"question_id":"vtuts-7","answer_id":"vtuts-7-a-2","influence":30,"voters":["zenkly"]},{"question_id":"c-1","answer_id":"c-1-a-2","influence":30,"voters":["zenkly"]},{"question_id":"c-2","answer_id":"c-2-a-3","influence":30,"voters":["zenkly"]}]},"score":70.5,"total_influence":30,"staff_pick":null,"config":{"questions":[{"question":"How many substantial concepts does this tutorial address?","question_id":"vtuts-1","answers":[{"answer":"4-5 substantial concepts covered in the tutorial.","answer_id":"vtuts-1-a-1","value":10},{"answer":"2-3 substantial concepts covered in the tutorial.","answer_id":"vtuts-1-a-2","value":7},{"answer":"1 substantial concept covered in the tutorial.","answer_id":"vtuts-1-a-3","value":2},{"answer":"More than 5 substantial concepts covered in the tutorial.","answer_id":"vtuts-1-a-4","value":0}]},{"question":"How informative is the content included alongside the video?","question_id":"vtuts-2","answers":[{"answer":"Exceptionally good text and, when applicable, images for concepts covered.","answer_id":"vtuts-2-a-1","value":20},{"answer":"Thorough text and, if applicable, images for concepts covered.","answer_id":"vtuts-2-a-2","value":18},{"answer":"Minimal text and images.","answer_id":"vtuts-2-a-3","value":10},{"answer":"No or very little text and images.","answer_id":"vtuts-2-a-4","value":0}]},{"question":"Is the video clearly prepared and structured?","question_id":"vtuts-3","answers":[{"answer":"Both the presenter and the video are exceptionally organized, structured and presented","answer_id":"vtuts-3-a-1","value":20},{"answer":"Presenter is prepared and video concepts are structured.","answer_id":"vtuts-3-a-2","value":16},{"answer":"Presenter has moments when he/she seems unprepared and/or the content seems to be unstructured.","answer_id":"vtuts-3-a-3","value":8},{"answer":"Presenter seems unprepared and/or video is unstructured.","answer_id":"vtuts-3-a-4","value":0}]},{"question":"Does the contributor provide supplementary resources, such as code and sample files in the contribution post or a GitHub repository?","question_id":"vtuts-4","answers":[{"answer":"Contributor provided exceptional supplementary resources.","answer_id":"vtuts-4-a-1","value":5},{"answer":"Contributor provided good supplementary resources.","answer_id":"vtuts-4-a-2","value":4},{"answer":"Contributor provided minimal supplementary resources.","answer_id":"vtuts-4-a-3","value":1.5},{"answer":"No supplementary resources were provided.","answer_id":"vtuts-4-a-4","value":0}]},{"question":"How would you describe the sound quality of the video?","question_id":"vtuts-5","answers":[{"answer":"Sound quality is excellent and sounds professionally produced.","answer_id":"vtuts-5-a-1","value":10},{"answer":"The sound is clear and understandable with complimenting background music / sounds.","answer_id":"vtuts-5-a-2","value":8},{"answer":"Low quality of sound and/or mildly distracting background noise.","answer_id":"vtuts-5-a-3","value":3},{"answer":"Distracting background noise and/or very low quality recording.","answer_id":"vtuts-5-a-4","value":0}]},{"question":"Does the presenter speak clearly and is easy to understand?","question_id":"vtuts-6","answers":[{"answer":"Yes, presenter’s speech is highly engaging and professional.","answer_id":"vtuts-6-a-1","value":10},{"answer":"Yes, the voice-over is easy to understand.","answer_id":"vtuts-6-a-2","value":8},{"answer":"Only some of the voice-over was comprehensible.","answer_id":"vtuts-6-a-3","value":4},{"answer":"The voice-over was impossible to understand / not included at all.","answer_id":"vtuts-6-a-4","value":0}]},{"question":"Are the title of the tutorial and the concepts being covered present on the video in text overlay form?","question_id":"vtuts-7","answers":[{"answer":"Title and concepts covered are present in the video at all times in a non-disruptive way.","answer_id":"vtuts-7-a-1","value":5},{"answer":"Title and concepts covered appear temporarily when they are addressed.","answer_id":"vtuts-7-a-2","value":4.5},{"answer":"Only the title is presented and the concepts shown are not addressed in overlay text.","answer_id":"vtuts-7-a-3","value":2},{"answer":"Neither title nor concepts covered are presented in the video text overlay.","answer_id":"vtuts-7-a-4","value":0}]},{"question":"How would you describe the formatting, language and overall presentation of the post?","question_id":"c-1","answers":[{"answer":"The quality of the post is fantastic.","answer_id":"c-1-a-1","value":10},{"answer":"The post is of very good quality.","answer_id":"c-1-a-2","value":7},{"answer":"The post is poorly written and/or formatted, but readable.","answer_id":"c-1-a-3","value":3},{"answer":"The post is really hard to read and the content is barely understandable.","answer_id":"c-1-a-4","value":0}]},{"question":"How would you rate the overall value of this contribution on the open source community and ecosystem?","question_id":"c-2","answers":[{"answer":"This contribution brings great and impactful value, and can be used for applications outside the specific project.","answer_id":"c-2-a-1","value":20},{"answer":"This contribution adds significant value to the open source community and ecosystem, or is of critical importance to the specific project.","answer_id":"c-2-a-2","value":18},{"answer":"This contribution adds some value to the open source community and ecosystem or is only valuable to the specific project.","answer_id":"c-2-a-3","value":11},{"answer":"This contribution adds no value to the open source community and ecosystem or the specific project.","answer_id":"c-2-a-4","value":0}]}]}}"
created2018-04-25 19:26:24
last_update2018-04-26 10:08:45
depth0
children6
last_payout2018-05-02 19:26:24
cashout_time1969-12-31 23:59:59
total_payout_value2.552 HBD
curator_payout_value0.658 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length4,252
author_reputation120,391,195,325
root_title"Develop Mobile Apps Using Ionic Framework Part-1"
beneficiaries
0.
accountutopian.pay
weight1,500
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id52,121,295
net_rshares575,104,662,653
author_curate_reward""
vote details (219)
@buckydurddle ·
$1.72
@exploringworld the sound quality of your video makes it extremely difficult to understand your speech. From the beginning your volume is too low to be accepted, but then at 5 minutes into the video your sound becomes highly distorted. I was unable to understand most of what you were saying. 

Consider using an external microphone and Audacity for your audio. Keep the microphone very close to your face when recording as to make it louder and to keep the background (cars and street noise) down to a minimum. 

As I could not understand what was being said I cannot comment on the content of your video. 

----------------------------------------------------------------------
Need help? Write a ticket on https://support.utopian.io.
Chat with us on [Discord](https://discord.gg/uTyJkNm).

**[[utopian-moderator]](https://utopian.io/moderators)**
👍  ,
properties (23)
authorbuckydurddle
permlinkre-exploringworld-develop-mobile-apps-using-ionic-framework-part-1-20180426t101227988z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"community":"utopian","app":"utopian/1.0.0"}
created2018-04-26 10:12:30
last_update2018-04-26 10:12:30
depth1
children2
last_payout2018-05-03 10:12:30
cashout_time1969-12-31 23:59:59
total_payout_value1.718 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length849
author_reputation101,965,608,464,038
root_title"Develop Mobile Apps Using Ionic Framework Part-1"
beneficiaries
0.
accountutopian.pay
weight1,500
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id52,232,167
net_rshares423,153,928,642
author_curate_reward""
vote details (2)
@exploringworld · 
Thanks Sir for guide me about this video tutorial  I will change my microphone and improve the voice quality as well in the coming videos.But sir I want to ask you about this post should I record again and upload that same post or else?
Thanking you
properties (22)
authorexploringworld
permlinkre-buckydurddle-re-exploringworld-develop-mobile-apps-using-ionic-framework-part-1-20180426t102948878z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"app":"steemit/0.1"}
created2018-04-26 10:31:36
last_update2018-04-26 10:31:36
depth2
children0
last_payout2018-05-03 10:31:36
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length249
author_reputation120,391,195,325
root_title"Develop Mobile Apps Using Ionic Framework Part-1"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id52,234,772
net_rshares0
@utopian.tip · 
Hey @buckydurddle, I just gave you a tip for your hard work on moderation. Upvote this comment to support the utopian moderators and increase your future rewards!
properties (22)
authorutopian.tip
permlinkre-re-exploringworld-develop-mobile-apps-using-ionic-framework-part-1-20180426t101227988z-20180427t013912
categoryutopian-io
json_metadata""
created2018-04-27 01:39:15
last_update2018-04-27 01:39:15
depth2
children0
last_payout2018-05-04 01:39:15
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length162
author_reputation238,310,597,885
root_title"Develop Mobile Apps Using Ionic Framework Part-1"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id52,361,347
net_rshares0
@steembottrackerr · 
<center>https://steemitimages.com/200x200/https://s-media-cache-ak0.pinimg.com/originals/81/28/3c/81283c6aed7bdb5b9f8ad73b8ce62c2f.jpg</center>
---
<center>Hello @exploringworld , Congratulations ✅ . Your content began to appear in the hot section.
I am the information account of "SteemBotTracker" site.
</center>
---
<center>
Your Informations
Total SBD: 8.988
Total STEEM: 0
</center>
---
<center>
I recommend to increase this;
You can make "Resteem" and advertise to the followers of the whale accounts.
"Resteem Bot" for you;
✅ The most profitable Resteem Whale @hottopic  has 18.500 Followers + 5200 Sp + Upvote with min +45 accounts. 
</center>
---
<center>
You can purchase "upvote" by bid bots.
"Upvote Bot"
✅ The most profitable whale in the last round. @rocky1
</center>
---
<center>
I'm taking this message once. You need to use the #steembottrackerr tag for more information.
Those who "upvote" this interpretation will be awarded a "UpVote" prize of 100 Sbd per week per person.
I am a bot, I can not answer the comment. I hope I could help. Good luck. Sorry if I disturbed you.
</center>
properties (22)
authorsteembottrackerr
permlink20180503t051146094z
categoryutopian-io
json_metadata{"tags":["advice"],"app":"steemjs/test"}
created2018-05-03 05:11:48
last_update2018-05-03 05:11:48
depth1
children0
last_payout2018-05-10 05:11:48
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length1,131
author_reputation-1,493,369,324,060
root_title"Develop Mobile Apps Using Ionic Framework Part-1"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id53,573,477
net_rshares0
@zenkly ·
$0.16
It seems interesting, but the audio quality of your video makes the tutorial difficult to follow. The volume is very low, by the minute 5 some distortion is generated. I recommend you improve the audio of your next videos. Also try to be a bit more direct. Greetings.
👍  ,
properties (23)
authorzenkly
permlinkre-exploringworld-develop-mobile-apps-using-ionic-framework-part-1-20180426t013540101z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"community":"utopian","app":"utopian/1.0.0"}
created2018-04-26 01:35:42
last_update2018-04-26 01:35:42
depth1
children1
last_payout2018-05-03 01:35:42
cashout_time1969-12-31 23:59:59
total_payout_value0.156 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length267
author_reputation18,269,562,015,999
root_title"Develop Mobile Apps Using Ionic Framework Part-1"
beneficiaries
0.
accountutopian.pay
weight1,500
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id52,165,299
net_rshares38,360,813,818
author_curate_reward""
vote details (2)
@exploringworld · 
Thanks Sir for your suggestion in  the next video I will try to resolve this distortion and audio problem.
properties (22)
authorexploringworld
permlinkre-zenkly-re-exploringworld-develop-mobile-apps-using-ionic-framework-part-1-20180426t015610524z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"community":"utopian","app":"utopian/1.0.0"}
created2018-04-26 01:57:57
last_update2018-04-26 01:57:57
depth2
children0
last_payout2018-05-03 01:57:57
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length106
author_reputation120,391,195,325
root_title"Develop Mobile Apps Using Ionic Framework Part-1"
beneficiaries
0.
accountutopian.pay
weight1,500
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id52,168,038
net_rshares0
Help/Feedback