##Getting started with Ionic Creator
-
Sign-up for Ionic Creator at http://creator.ionic.io
-
Once you've completed the sign-up, skip past the the Company inquery
-
For the purpose of this guide, name the app "Clubs"
##Introduction to Ionic Creator
This guide will show you how to build an app to help you keep track of the clubs you are involved in. Who knows, other people might find your app useful!
-
Let's begin by picking a page template by clicking on the "pages" option at the top left of your page.
-
Select the "Login" page
-
Go back to the pages option and select the "Signup" page
-
Go back to the pages option again and select the "Tabs" page
-
Now you should have 3 pages avaliable to you
-
Navigate to the "Login" page by clicking the "Login" page in your list of pages
You can see that the page already has a template for you. Let's talk about the Login page! This is the first page your users will see when they open your app!
After they enter their credentials, they should be sent to the main page, so let's set that up!
-
Click the "Log in" button on the "Login" page. Link the button to go to "Tabs - /tabs".
-
Let's test to see that it works! Click the "Edit/Test" switch on the top right of your page"
Pressing the "Log in" button should lead you to the main app page! Now let's go exlpore more of Ionic Creator!
###Creating the app! Let's get to work on the main page of our app!
-
Navigate to the "Tabs" page from your list of pages.
-
Click on the first tab and change its Title to "Home" and an icon that represets it.
-
Do the same for the next two tabs naming the second one "Clubs" and the third "Profile"
####First Tab! Now let's work on the first tab, "Home"
-
Click on the first tab and drag a "Card" from the components to the tab
-
Now drag a "Markdown" component directly into the card. You can add any text you want to the markdown!
The "Home" tab will display all of the updates from your clubs and show them in a card format. You may have seen this on apps like Instagram, Facebook, and Google Hangouts.
####Second Tab! Now let's work on the second tab, "Clubs"
-
Click on the second tab and drag a "Card" from the components to the tab
-
Go ahead and drag in a few buttons into the card. You can rename the buttons by click on them and editing their text on the right toolbar. In fact, you can change other attributes of the button to truly make it your own!
Each button should be the name of the clubs you are a part of! They will soon link to information about the club!
####Third Tab! Now let's work on the third tab, "Profile"
-
Click on the third tab and drag an "Image" component to the tab! This tab will display your picture and name! Feel free to add more!
-
Now let's add an image source! Find a picture of yourself on the internet and right click on the image and press "Copy image source".
-
Now that you have the image source copied, paste the URL into the source attribute on the image component!
-
Now you should see your image on your profile!
-
Now let's add our name to our profile! Drag the "Heading" component to the tab below the image. Just like before, click on the component in your tab to change its property using the options on the right of your page!
-
Now let's write a bio to our profile! Drag a "Markdown" component to the tab below your name and edit the text to your liking! ![bio] (http://puu.sh/k8bzT/ab67fb56a1.png)
Now we've completed the basics of our app! Users can see updates from their clubs on their Home page, view their clubs in the Clubs page, and view their profile on the Profile page.
We've done a lot in little time! We've played a lot with Ionic Creator without having to write code but you can actually see the code behind what you just created!
###Exporting your app! The app you created looks great but wouldn't it be cool if everyone could have their own profile and their own clubs?! Well, you need to write code to add that functionality! Don't worry, you only need to learn Javascript to do it all!
-
Let's export the code we've been working on! Head over to the top-left of yoru page and press the export icon!
-
Export your work as a Zip File and save the file to your documents or a flash drive!
We will soon break down the code that powers the app you just created! You can make your app a whole lot more powerful! We hope you enjoyed the tutorial! See you next time!