Getting Started with Ionic v2/v3 and Parse Server

In this lecture, we will install NodeJS and then Ionic and Cordova on your Windows or Mac.

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