Ionic Creator // Code Editor Tutorial

Welcome to a deep dive tutorial of our brand new custom code support feature in Ionic Creator.

In this video, Matt builds a fully dynamic to-do list app backed by Firebase!
If you want to jump to a specific section, here is a list of topics discussed:

-Phase l-
00:59 Theming
03:10 List Item
03:30 Styling/Formatting
04:06 Code Editor
05:30 Add Angular Directive
05:59 Template Tags

-Phase ll-
08:27 Angular Modules
08:45 Add a Service
10:52 Add ng-show Directive
11:35 Route Parameters
13:20 Access the Variable
14:10 Remember to save :)

-Phase lll-
15:05 Set up Firebase
15:50 External JS
16:48 Inject Firebase Module
18:05 Add Firebase to your web app
19:00 Insert Firebase array
20:22 Add/Remove Item
22:49 Customized UI
25:40 Toggle Finished Function
27:12 More Directives
28:49 To-Do List App

See you next time!

**Special thanks to our Audio Engineer Timothy Brandl @Tanbor9

[lfcatchall]

really great work on Creator.

for those interested, here is the exact json script. save in file, then import into firebase.

{
"todos": {
"item 1": {
"finished": false,
"title": "title item 1 FB"
},
"item 2": {
"finished": true,
"title": "title item 2 FB"
},
"item 3": {
"finished": true,
"title": "title item 3 FB"
},
"item 4": {
"finished": false,
"title": "title item 4 FB"
}
}
}

[ENCRYPTaBIT]

You guys are absolutely amazing. So happy I've had you guys in my journey into learning so much about web apps in general.

[GaryRobas]

This is excellent news! Congratulations to all the Ionic and Ionic Creator team :) Will have a 'play' now...

[KevinReadOz]

creator is certainly improving with every release.

would love to see you wire up the firebase user registration/login flow and link to routes etc.

having it as a starter template would be even more awesome :)

[thierrysommer]

Personally, I had difficulties with the part devoted to Firebase but everything is ok.
Problems encountered:

1) No JSON file for the Firebase DB.
-> Solution: Create a JSON file with the following code and then import it into your DB:

{
"todos" : {
"item 1" : {
"finished" : false,
"id" : 1,
"title" : "title item 1 FB"
},
"item 2" : {
"finished" : true,
"id" : 2,
"title" : "title item 2 FB"
},
"item 3" : {
"finished" : true,
"id" : 3,
"title" : "title item 3 FB"
},
"item 4" : {
"finished" : false,
"id" : 4,
"title" : "title item 4 FB"
}
}
}

2) Access to the denied DB.
-> Solution: Modify the security and rules of your Firebase DB by replacing the existing code with this one:
{
"rules": {
".read": true,
".write": true
}
}

[phananz]

Could you show how to create the database? I tried to create a JSON-structured database in firebase but the $firebaseArray returns empty []. Thanks!

[MatheusLambWink]

This To-do feature works only during the development mode? Because I just finished the tutorial tasks but the Firebase database rules only works at Public, so all users end up using the same content. Anyone have a solution for the individual use of the feature?

[nadineable]

Excellent Video, very useful and well planned

[rodlu]

Thank you! I have one quick question. Suppose you had two nodes in your todo app in firebase. One for users and one for todos. And in the todos node you have the user_id attribute.

How to get the user todos by passing a unique user_id? Or even better, how to get the todos of a corresponding user after he/she authenticates?

Is possible to make video for that using Ionic Creator please?

[DanielMuvdi]

To use custom code function you need to go PRO version?

[believelody]

Hi Matt, great video but I see nothing when I try to connect my Todo project in creator with firebase. I follow the way you show in your video and the way to connect to firebase with addons. Still nothing!
Even my tabs disappear. Don't understand what's wrong!

[calledchosen]

It appears that Authentication is missing from this example...I have read that Ionic Auth has been deprecated and have not been able to find a straightforward example of setting up Auth with Firebase as the alternative. All threads seem to disconnect into Ionic 2 or 3. Any assistance on how to complete this tutorial. My review of Simple Chat App appears to share the same voids.

[mercygotnerfed]

Isn't it bad to put the database infos directly like that on a .js file ?
How to protect the infos from users that use my app ?

[JoelPiccoli]

Fantastic video man! Congratulations! o/

[devinvail]

Awesome video! I know it's been asked already, but thoughts on Ionic 2 integration?

[cbolaurent]

Really amazing !! But how to deal with my own database (with simple ajax ? or what ?)

[amanimouldi]

i installed ionic framework 3.9.2, i use ionic creator pro and i created a v1 project, but when i exported it then imported it, it doesn't work. why??

[TomerBenDavid]

What was that link to appsomething in order to study ionic + angular?

[miguelCarrascoQ]

Can you add TypeScript - Angular 2 code in Ionic Creator?

[jsomaniax]

Does anyone know where the code for the ionic modal code is? I can't seem to find it in the docs