Getting Started with Ionic v2/v3 and Parse Server
4.4 (109 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
622 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Getting Started with Ionic v2/v3 and Parse Server to your Wishlist.

Add to Wishlist

Getting Started with Ionic v2/v3 and Parse Server

Learn to build mobile apps for Android, iOS and Windows Phone Apps using Ionic v2/v3 and Parse Server as the backend.
4.4 (109 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
622 students enrolled
Created by Samarth Agarwal
Last updated 11/2016
English
Current price: $10 Original price: $100 Discount: 90% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 2.5 hours on-demand video
  • 2 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Build mobile apps using web skills such as HTML, CSS and JS for Android, iOS and Windows Phone
  • Create amazing mobile apps using Ionic 2 and Angular 2 (TypeScript)
  • Build apps by writing code in JavaScript (TypeScript)
  • Build mobile apps that look amazing and look native to each platform
  • Build and deploy apps on Android and iOS
View Curriculum
Requirements
  • Introductory knowledge of HTML, CSS and JS
  • Basic knowledge of Ionic 1 would be an advantage but not required
  • Basic knowledge of Angular or any other JS framework would be an advantage but not required
  • Just get a computer with an internet connection and get started
Description

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.

Who is the target audience?
  • Eventerpreneurs with an idea but no knowledge of complex app development
  • Students willing to build mobile apps for Android, iOS and Windows with one code base
  • Professionals willing to build apps for multiple platforms in least amount of time
  • Everyone who has web skills and wants to build mobile apps using web technologies
  • Professionals who want to expand their skill set and learn to develop apps.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
34 Lectures
02:40:11
+
Let's Start
3 Lectures 05:13
Important: Read before beginning

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.

Preview 01:51

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.

Preview 01:55

So Parse announced that the Parse Services will be discontinued from Jan 2017. No worries! Learn about Parse Server and see how easy and convenient it is to build apps with self hosted Parse Server.

Preview 01:27
+
Getting Ready
1 Lecture 02:23

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

Preview 02:23
+
Creating and Running Ionic 2 Apps
4 Lectures 14:50

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.

Preview 03:06

Running an Ionic App is very easy. Let's see how we can run an Ionic 2 app in the web browser.

Running Ionic 2 Apps in Web Browser
04:20

In this lecture, we will learn how we can run our Ionic 2 Apps on real mobile devices.

Running Ionic 2 Apps on Mobile Device
02:56

In this video, we are going to get introduced to the files and folder structure of a typical Ionic 2 App.

Ionic 2 App Structure
04:28
+
Setting Up Parse Server
4 Lectures 21:10

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.

Introduction to Parse Server and C9?
02:44

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.

Installing Parse Server and Node Modules
05:40

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.

Configuring Parse Server using Server.JS
05:51

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.

Parse Server and REST API
06:55
+
Building "FriendsList" Ionic 2 App
21 Lectures 01:56:35

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

Preparing Up
06:12

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

Login Page - Layout and UI
06:27

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

Signup Page - Layout and UI
07:19

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

Importing Modules in Ionic 2
04:10

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.

SIgnup Up a New User - HTTP POST
12:27

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

Finishing Up SIgn Up
03:26

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

Logging in the User - HTTP GET
07:57

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

Finishing Up Login
06:07

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.

Creating the List Page - Fab Buttons
03:50

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.

Creating List Page - Showing Prompts and Alerts
04:50

In this lecture, we will learn how save data from our Ionic 2 app on the Parse Server.

Saving Data to Parse Server
05:26

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

Saving Data to Parse Server - 2
02:46

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.

Getting Data from Parse Server - Sliding Lists
04:39

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.

Getting Data from Parse Server - HTTP GET
05:43

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.

Getting Friends List - Using Local Storage
09:01

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.

Getting Friends List - Refreshing Lists
02:10

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

Pull Down to Refresh - Manual Rereshing
05:33

In this lecture, we will create the UI to let our users edit the friend information by selecting any one friend from the list.

Editing Data on Parse - Creating UI
04:47

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 Data on Parse - HTTP PUT
04:48

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.

Deleting Data on Parse
04:06

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

Logging Out the User and Conclusion
04:51
About the Instructor
Samarth Agarwal
4.4 Average rating
607 Reviews
5,489 Students
7 Courses
Application/Web Developer, Instructor, Tech Enthusiast

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.