Make A Mobile Application With Ionic Creator [ Fast & Easy]

<h4>Repository <p dir="auto"><a href="https://github.com/ionic-team/ionic" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Ionic Repository <h4>What Will I Learn? <ul> <li>You will learn How to make a mobile application for Android/Ios Platform with Ionic Creator <li>You will learn How To Create New Project with Ionic Creator <li>You will learn How To Drag & Drop Components and How To Design Components. <li>You will learn How to set up this project to local project & How to test it. <h4>Requirements <ul> <li>NodeJS & npm (This is package manager for Javascript) <a href="https://nodejs.org/en" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Download <li>Ionic CLI (the tool to create a project, build native apps, and handle bundling your app’s resources) [Download Ionic Version 3] <li>Browser (Firefox Mozilla or Chrome or Other) <h4>Difficulty <ul> <li>Basic <h4>Tutorial Contents <p dir="auto">Assalammu'alaikum, hei friends ... today I will show to you how to make a mobile application with Ionic Creator. Ionic Framework using web technologies like HTML, CSS, and JavaScript. To start with Ionic Framework, the only requirement is a Node & npm environment. Why you must know about Ionic ? because with ionic you can build a mobile application to be so fastly and easily, like as ionic creator. Ionic creator running via the browser. You can design basically of application with drag & drop, wow so easy right? After that, you can export that's the project to zip then extract and finally set to a local project on your directory to modification again to complete your mobile application. Oke lets start... <p dir="auto">Step by Step : <ol> <li><p dir="auto">Open Your browser and type on search bar <a href="https://creator.ionic.io/app/login" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Ionic Creator<br /><span> <img src="https://images.hive.blog/768x0/https://i.postimg.cc/NMsvbW3f/1.png" srcset="https://images.hive.blog/768x0/https://i.postimg.cc/NMsvbW3f/1.png 1x, https://images.hive.blog/1536x0/https://i.postimg.cc/NMsvbW3f/1.png 2x" /> <li><p dir="auto">Firstly you must register with your email. I use ionic Creator Basic ($0/mont). After that, you can create a new ionic project. <li><p dir="auto">To start your first project --> click New Project --> Put your project's name. Then choose one of 4 templates there then click create a project. I choose Side Menu template and Ionic Version 3.<br /><span> <img src="https://images.hive.blog/768x0/https://i.postimg.cc/jSRVsVj6/gambar02.jpg" srcset="https://images.hive.blog/768x0/https://i.postimg.cc/jSRVsVj6/gambar02.jpg 1x, https://images.hive.blog/1536x0/https://i.postimg.cc/jSRVsVj6/gambar02.jpg 2x" /> <li><p dir="auto">Now This is our mobile application with side menu template. Now you add components with drag & drop it.<br /><span> <img src="https://images.hive.blog/768x0/https://i.postimg.cc/ydM5tt5Z/4.png" srcset="https://images.hive.blog/768x0/https://i.postimg.cc/ydM5tt5Z/4.png 1x, https://images.hive.blog/1536x0/https://i.postimg.cc/ydM5tt5Z/4.png 2x" /> <li><p dir="auto">Description of ionic creator:<br /> You can see there are you App.<br /><br /> [Red-area] at there you can select and move a - component, delete, duplicate and add a page too.<br /> [yellow-area] there is all component for to drag & drop on your page.<br /> [brown-area] there are to theming your component.<br /> [black-area] To Zoom Your App<br /> [orange-area] To Export your App<br /> [Green-area] To Choose Device (ANDROID OR IOS)<span> <img src="https://images.hive.blog/768x0/https://i.postimg.cc/bN7JLw3y/gambar0333.png" srcset="https://images.hive.blog/768x0/https://i.postimg.cc/bN7JLw3y/gambar0333.png 1x, https://images.hive.blog/1536x0/https://i.postimg.cc/bN7JLw3y/gambar0333.png 2x" /> <li><p dir="auto">Ok first I will design home page, I want to add the heading, image and paragraph component. So select Home then drag&drop heading component to page.<br /><span> <img src="https://images.hive.blog/768x0/https://i.postimg.cc/j21RCtMk/5.png" srcset="https://images.hive.blog/768x0/https://i.postimg.cc/j21RCtMk/5.png 1x, https://images.hive.blog/1536x0/https://i.postimg.cc/j21RCtMk/5.png 2x" /> <li><p dir="auto">Next theming/styling your component, first select your Heading component then change Text, Size, Wight, Color, Align your Heading.<br /><span> <img src="https://images.hive.blog/768x0/https://i.postimg.cc/tT2qQhWb/gambar06.png" srcset="https://images.hive.blog/768x0/https://i.postimg.cc/tT2qQhWb/gambar06.png 1x, https://images.hive.blog/1536x0/https://i.postimg.cc/tT2qQhWb/gambar06.png 2x" /> <li><p dir="auto">After that theming your Image component with upload our image because i use Source Image Type. Then set the size & position of our image. My result now.<br /><span> <img src="https://images.hive.blog/768x0/https://i.postimg.cc/Y2mjFFzn/8.png" srcset="https://images.hive.blog/768x0/https://i.postimg.cc/Y2mjFFzn/8.png 1x, https://images.hive.blog/1536x0/https://i.postimg.cc/Y2mjFFzn/8.png 2x" /> <li><p dir="auto">Next step I will add button component, so drag & drog it to home page and theming it with set a text, size, align, weight & color (styling text of button), change type & size, color theme and radius of button (styling button).<br /><span> <img src="https://images.hive.blog/768x0/https://i.postimg.cc/0N12p5PT/gambar88.png" srcset="https://images.hive.blog/768x0/https://i.postimg.cc/0N12p5PT/gambar88.png 1x, https://images.hive.blog/1536x0/https://i.postimg.cc/0N12p5PT/gambar88.png 2x" /> <li><p dir="auto">Now I will open menu page, I want to change list item of list of side menu ( i want to change chart list). Ok, click chart list. I will set list item with an icon. So choose an icon (left icon), set theme (positive theme) & don't forget put text on your list item.<br /><span> <img src="https://images.hive.blog/768x0/https://i.postimg.cc/VN6kk0NF/gambar12.png" srcset="https://images.hive.blog/768x0/https://i.postimg.cc/VN6kk0NF/gambar12.png 1x, https://images.hive.blog/1536x0/https://i.postimg.cc/VN6kk0NF/gambar12.png 2x" /> <li><p dir="auto">By the way, how add a new page? well, you can add a page just click add page. Like this...<br /><span> <img src="https://images.hive.blog/768x0/https://i.postimg.cc/RhkTMnxs/gambar013.png" srcset="https://images.hive.blog/768x0/https://i.postimg.cc/RhkTMnxs/gambar013.png 1x, https://images.hive.blog/1536x0/https://i.postimg.cc/RhkTMnxs/gambar013.png 2x" /> <li><p dir="auto">After Finish to add some components to your page.<br /><br /><span> <img src="https://images.hive.blog/768x0/https://i.postimg.cc/1zMhfytc/add-page.png" srcset="https://images.hive.blog/768x0/https://i.postimg.cc/1zMhfytc/add-page.png 1x, https://images.hive.blog/1536x0/https://i.postimg.cc/1zMhfytc/add-page.png 2x" /><span> now I will show you how to make navigation of a page. That's so easily friends... You just click that component and choose link ( choose your page you want). An example I want to page Readcomics/page3 when I click button "Read More". Like these friends...<img src="https://images.hive.blog/768x0/https://i.postimg.cc/zD4mLtJM/gambarbrc.png" srcset="https://images.hive.blog/768x0/https://i.postimg.cc/zD4mLtJM/gambarbrc.png 1x, https://images.hive.blog/1536x0/https://i.postimg.cc/zD4mLtJM/gambarbrc.png 2x" /> <li><p dir="auto">Now see the preview of your mobile application with click eyes icon. [Ios Device]<br /><br /> Tips: You can choose android or ios device<span> <img src="https://images.hive.blog/768x0/https://i.postimg.cc/4xZStjj8/preview.png" srcset="https://images.hive.blog/768x0/https://i.postimg.cc/4xZStjj8/preview.png 1x, https://images.hive.blog/1536x0/https://i.postimg.cc/4xZStjj8/preview.png 2x" /> <li><p dir="auto">Ok, export our project to set at our local directory. Click "Export your app" and then click "download zip project"<br /><span> <img src="https://images.hive.blog/768x0/https://i.postimg.cc/rmvhpHSN/gambarexport.png" srcset="https://images.hive.blog/768x0/https://i.postimg.cc/rmvhpHSN/gambarexport.png 1x, https://images.hive.blog/1536x0/https://i.postimg.cc/rmvhpHSN/gambarexport.png 2x" /> <li><p dir="auto">After that extract it. Now we must create a blank project after that copy paste the file "src" (the result of zip project from ionic creator after we extract it). Ok now open your command prompt (CMD), and type this code :<br /> <code>ionic start comics<br /><span> <img src="https://images.hive.blog/768x0/https://i.postimg.cc/wBMFQz2k/install.png" srcset="https://images.hive.blog/768x0/https://i.postimg.cc/wBMFQz2k/install.png 1x, https://images.hive.blog/1536x0/https://i.postimg.cc/wBMFQz2k/install.png 2x" /> <blockquote> <p dir="auto"><span>Why we must do it (create a new ionic project)? because we only have the src file from ionic creator so we must create a new project to run it in our local project directory.<img src="https://images.hive.blog/768x0/https://i.postimg.cc/15KHxXYH/comicsproject.png" srcset="https://images.hive.blog/768x0/https://i.postimg.cc/15KHxXYH/comicsproject.png 1x, https://images.hive.blog/1536x0/https://i.postimg.cc/15KHxXYH/comicsproject.png 2x" /> <p dir="auto">Now copy paste the "src" file to your comics project directory. For test it writes this code :<br /> <code>ionic serve<br /> (to run app via browser).<br /> Tips: On Your browser (Mozilla) Press F12 To See tool Developer Console.<br /><span> <img src="https://images.hive.blog/768x0/https://i.postimg.cc/C1fN94WB/ionicserve.png" srcset="https://images.hive.blog/768x0/https://i.postimg.cc/C1fN94WB/ionicserve.png 1x, https://images.hive.blog/1536x0/https://i.postimg.cc/C1fN94WB/ionicserve.png 2x" /> <p dir="auto"><strong>This is My complete result:<br /><span> <img src="https://images.hive.blog/768x0/https://i.postimg.cc/FzyxHHFh/result.png" srcset="https://images.hive.blog/768x0/https://i.postimg.cc/FzyxHHFh/result.png 1x, https://images.hive.blog/1536x0/https://i.postimg.cc/FzyxHHFh/result.png 2x" /> <p dir="auto">Video My Result :<br /> <p dir="auto">Finally, friends... you can use this project to make another amazing project this's just to start a mobile project. I think you will build an amazing project from this simple project with your creation... <h4>Curriculum <p dir="auto">You can read and follow this tutorial about Ionic Framework <ul> <li><a href="https://steemit.com/utopian-io/@anitatmj/build-a-simple-curriculum-vitae-mobile-application-with-ionic-framework-in-3-days-part-1-of-3" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Build A Simple CV Mobile Application with Ionic Framework (Part 1 of 3) <h4>Proof of Work Done <p dir="auto">You can get this Project on my github : <a href="https://github.com/anitatmj/amobileapp-with-ionic-creator" target="_blank" rel="nofollow noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">amobileapp-with-ionic-creator <p dir="auto">Thank you friends to Following my tutorial about ionic framework if you have a problem about following this tutorial please contact me or comment here.