Create an Android, iOS and Windows Phone using Ionic Framework v2/v3 and Parse Server as the backend. All you need is little know-how of HTML, CSS and JS. Ionic Framework v2 uses Angular 2, and v3 uses Angular 4 which in turn use TypeScript. We will be learning all this while building a complete app from scratch. Since Ionic 3 is very similar to Ionic 2, the app that you build after April 6th, 2017 will be built with Ionic 3 instead of Ionic 2.
Learn to perform CRUD operations on data stored on Parse Server using the Parse Server's RESTful API in Ionic 2/3. We will be building a Friends List app from scratch and perform create, read, update and delete operations on the data stored on Parse Server. You do not need to buy or download anything to take this course, all you need is a computer with any OS installed on it and you are ready to get stared with the course.
You will also learn how to install and deploy a full-fledged Parse Server for free along with the amazing Parse Dashboard that we all have been missing since Parse announced its termination. All you Parse data will be stored on you own server. Don't want to go online? No worries, everything can be tried out on a local machine just the same way.
All the tools we use throughout the course are either free or opensource. We will use Microsoft's latest open-source IDE, Visual Studio Code to write our application code. We will also deploy our Parse Server on C9 which is free for basic usage.
Ionic 2 is amazing, fast and builds applications for Android, iOS and Windows Phone just by using the web technologies that we have been using for a while now. In Ionic 2, we will use Angular 2, which in turn uses TypeScript to build our apps, and we will learn how to use Parse Server as a backend for our apps. So let's get started and build a complete app from start to end.
Wondering what is Ionic Framework? In this lecture, we will get introduced to Ionic Framework and more specifically, Ionic Framework V2 which is far better than Ionic V1.
So now that all the required tools and packages are installed, we can build our first Ionic 2 App. So let's see how we can build an Ionic 2 App.
Running an Ionic App is very easy. Let's see how we can run an Ionic 2 app in the web browser.
In this lecture, we will learn how we can run our Ionic 2 Apps on real mobile devices.
In this video, we are going to get introduced to the files and folder structure of a typical Ionic 2 App.
Time to take a step further and start with Parse Server. Create an account on C9 and start with the process of setting up you own Parse Server.
Since Parse Server is a node module, we need to install its dependencies and MongoDB to make it work on a NodeJS server. So let's install those dependency packages.
So now that we have installed everything that we need to make Parse Server work, we need to setup our NodeJS server file to make everything work together. So in this lecture, we will work on our Server.JS file.
If, in any case, your file does not work, or you get unexpected errors, feel free to download and use the attached server.js file and replace the necessary strings in the file.
So our Parse Server and Parse Dashboard are up and running. Let's try using the Parse Server's REST API. So install the chrome plugin Postman and let's see what the REST API can do for us.
Now that Parse Server is up, we will continue working on our Ionic 2 App and pick it up from where we left it off.
Github Branch: https://github.com/samarthagarwal/friendslist-ionic2/tree/Lec13
In this lecture, we will design the layout of our Login Page using the Ionic Components like Buttons, Inputs and Lists.
Github Branch: https://github.com/samarthagarwal/friendslist-ionic2/tree/Lec14
In this lecture, we will design the layout of our Signup Page using the Ionic Components like Buttons, Inputs and Lists. The design will be very similar to the Login Page with minor differences and lot more input fields.
Github Branch: https://github.com/samarthagarwal/friendslist-ionic2/tree/Lec15
Before proceeding, we need to make some preparations. So in this lecture, we will create a User Model and import other required modules in our app.
Github Branch: https://github.com/samarthagarwal/friendslist-ionic2/tree/Lec16
Time to write code. In this lecture, we will write the code to make our first interaction between our Ionic 2 App and the Parse Server. We will make an HTTP POST request to sign up a new user.
The request is made and it is working. But we still need to make some finishing touches to the app. So let us work on the UX in this video and make the user feel good.
Github Branch: https://github.com/samarthagarwal/friendslist-ionic2/tree/Lec18
In this lecture, we will be Logging in a user. So let's make an HTTP GET request and see if we an login a user like that.
Github Branch: https://github.com/samarthagarwal/friendslist-ionic2/tree/Lec19
In this video, we will be adding Alerts and Message Prompts for the user once the login either succeeds or fails. You will also learn how to show nice alerts with nicer messages to the users.
Github Branch: https://github.com/samarthagarwal/friendslist-ionic2/tree/Lec20
In this video, we will start working on the List Page that we had created earlier. We will create a Floating Action Button on the list page, so our app looks great and follows modern design guidelines.
In this video, we will display a prompt to the user to let them fill in the data for adding a new friend in their friend list.
In this lecture, we will learn how save data from our Ionic 2 app on the Parse Server.
In this lecture, we will complete the data saving operation and will also let the users know of what is happening in the background.
Github Branch: https://github.com/samarthagarwal/friendslist-ionic2/tree/Lec24
Ionic offers amazing UI components. We will use the Ionic Lists with Sliding Ionic Items to build our list. Let's learn how to build that.
Retrieving the saved data from the Parse Server is fun and easy. In this lecture, we will make an HTTP GET request and retrieve the friend information that we had saved earlier on our Parse Server.
In this lecture, we will learn how to store data, particularly user's login information, in the device's local storage. So we will need to import some modules and modify existing code a little bit as well.
In this lecture, we will add automatic refresh feature to our list so that it refreshes the content automatically whenever new data is added to it.
In this lecture, we will add the widely used Pull Down to Refresh feature to our Ionic 2 App. It is very easy and comes in handy when your users need to refresh data manually.
Github Branch: https://github.com/samarthagarwal/friendslist-ionic2/tree/Lec29
In this lecture, we will create the UI to let our users edit the friend information by selecting any one friend from the list.
Once the user has edited the information of a friend in the Prompt, we need to update the information on the Parse Server as well. So in this lecture, we will make an HTTP PUT request to do exactly that.
Editing and Deleting an object is almost same. In this lecture, we will make an HTTP DELETE request to delete an object from Parse Server.
So our user can do all the CRUD operations on their friends. In this lecture, we will build the logout functionality.
Github Branch: https://github.com/samarthagarwal/friendslist-ionic2/tree/Lec33
I have been working as a freelance application and web developer for last 3 years. I am passionate about technology and learning it. I love learning new technologies and teaching them keeps me satisfied. I love to share knowledge. Let me know if you have some knowledge that you want to share. I like to create new tools and applications that ease the tasks of a common man.