Photogram2 Tutorial

http://market.ionic.io/starters/photogram-ionic-instagram-clone

Once you have purchased your copy of Photogram through the Ionic Market website, we will take the steps for you to start your development with Photogram2.

Photogram2 - 50off - Instagram Clone With Ionic 2 - Rc3 And Parse Server - Ionic Marketplace

How does Parse Server work?

Parse Server is a solution from the Parse.com team, which after announcing the closure of the site earlier this year, 2016, made available much of its source code in Github so people could continue with their projects using Parse technology .

Parse Server is developed in NodeJS and uses MongoDB as database, you can also use Redis as Cache if necessary.

In this link you will find the official project repository and documentation:

ParsePlatform/parse-server

Initial setup of Parse Server

The Parse Server is very simple to configure, the link below has a very practical example that the Parse team left as an example to start an application.

Basically the whole configuration is in the index.js file in which you inform the MongoDB path and change some information so that your application connects to the Parse Server.

ParsePlatform/parse-server-example

Why does Photogram use Parse Server?

I chose Parse Server because it has an excellent documentation of your SDK for Javascript that you can see in the link below:

Parse

In addition, it has an excellent data relationship system that is based on MongoDB and makes it possible to search by geolocation, within arrays and many other incredible features that make it easier to develop and maintain an application.

Parse Cloud

For more complex applications such as Photogram, in which when we enter we have to do the Feed search that is related to if the logged in user has already enjoyed each photo and bring the last 3 comments, this kind of query to have a better perfomance , Needs to be executed on the server side, in which case Parse has the Parse Cloud, which is a documentation of how to construct these more complex queries using Javascript or ES6.

Parse

Photogram Parse Server

Parse Server have some interesting features that are used in Photogram, such as creating a specific endpoint or having some processes run before or after the system is registered.

A great example is when you post a photo in Photogram and during the process of this registration, Parse Server itself generates a thumbnail to be used in some areas of the application, reducing data consumption.

Another example is when you enjoy a photo, and the server processes an afterSave of your like and sends a notification to the person who posted the photo you just took her photo, which also supports sending Push Notification using Parse Cloud.

Here are some examples of Class Gallery queries and endpoints.

Photogram-server / cloud / main.js

Starting with Photogram Parse Server Locally

Now that you have understood the theory a bit, and you already have access to the Photogram in Github, we will create a Parse Server for your application using the Photogram Parse Server repository.

Requirements

Before you begin you need to have installed the following items:

• NodeJS 6.10.1 http://nodejs.org/
• Git ( for Windows )
• Visual Studio Code or WebStorm
• PM2 ( npm install -g pm2 )
• MongoDB ( npm install -g mongodb-runner )

Preparing MongoDB

Before starting, we have to start MongoDB so that Parse Server can connect with it, so go to your Git Bash in Windows, or terminal on Mac or Linux and type:

$ mongodb-runner start

Automatically MongoDB will be installed on your machine and started, as soon as it is ready, we can move on to the next stage

Cloning the Server Codes

First, create a directory for your application we call photogram

$ mkdir class-photogram 
$ cd photogram

Now let’s make the clone of the Photogram Parse Server

$ git clone git@gitlab.com:photogram-ionic/photogram-server.git photogram-server 
$ cd photogram-server

Configuring PM2

PM2 is a NodeJS process manager that helps you monitor the execution of the Parse Server, as well as making custom configurations through your JSON configuration file.

Inside the folder of photogram-server that we cloned in the previous step, there is a file called ecosystem.json, open it in Visual Studio Code or WebStorm to view basic and advanced settings you can do before you start Server.

There are some pre-defined settings to start Photogram Parse Server, but some items you need to edit at the time of setting up for your application.

From line 35, you can see that the Parse Dashboard has also been included, in which you can set the address, login and password to access after the service is started.

Starting the Server with PM2

All configured, or not, let’s start using the command:

$ pm2 start ecosystem.json

After you type this command, you will receive a similar image on your terminal (depending on your OS):

It means that the ecosystem.json file has been successfully validated and the Parsi-server application started with the status online

Whenever you change the ecosystem.json file you need to do this command

$ pm2 reload ecosystem.json

To make sure everything is working let’s type the following command

$ pm2 logs

If you receive a message Parse LiveQuery Server starts running on your terminal, it means that your server is already running!

Parse Dashboard

Parse Dashboard is a standalone panel for managing your Parse applications. You can use it to manage your Parse Server applications and your applications running on Parse.com.

ParsePlatform/parse-dashboard

With Parse Dashboard you can manage your subscriptions in Parse Server, for who knows it would be similar to phpmyadmin.

The Parse Dashboard is already included in the Photogram Parse Server, its address, user, and password settings are in the ecosystem.json file

Ecosystem.json

To access just enter the following address and enter the credentials informed in the file ecosystem.json:

http://localhost:1337/dashboard

Starting with the Photogram2 application with Ionic 2

Now that you already have a local Photogram2 server using Parse Server, let’s now make the Photogram2 application repository clone developed in Ionic 2.

Requirements

Before you begin, try to follow all the instructions here and make sure you have NodeJS with the most current and stable version installed.

Then we will install or update the Ionic Cli to the latest version with the following command:

$ npm install -g ionic@latest

In addition we will install Cordova to ensure emulation later on devices with Android or iOS (only me Macs)

$ npm install -g cordova

Making a copy of the source code of the Photogram2 application

Within the folder of your project, use the command below to make the clone of the latest version of the Photogram2 source code

$ git clone git@gitlab.com:photogram-ionic/photogram2.git photogram-app 
$ cd photogram-app 
$ npm install

In the first command, we made a copy to the photogram-app folder with all the source codes, then we entered the folder and executed the command npm install, to install all the dependencies of the NodeJS necessary to execute develop and build of our application.

A little bit about Ionic 2

Ionic 2 is a completely redesigned version with Angular 2, which was created with the need to gain performance beyond becoming a complete Framework for fast and scalable applications.

Many people end up getting scared of TypeScript, but if you know the basics of Javascript, what are various and how to create functions will fall in love with programming in TypeScript with Ionic 2, all that you will type less to do a lot besides To have a more organized and well organized code.

I recommend making an introduction with the documentation of Ionic 2 in this link:

Ionic Framework

Folders and Files

Here is a key information about the Photogram2 folders

bin /: Folders with some commands to build our application

docs /: Algus docs in Markdown for reference beyond this documentation

resources /: Pasta with Icon and Splash examples, to be then generated with the command:
$ ionic resources

src /: In this folder are the sources of Ionic 2, here is where you go to work

src / i18n: .json Files with translations of application

www /: build Binder Ionic2, you should not move this folder because it is automatically generated whenever a new change or when you start the application build is made

config.xml: This file is responsible for the build settings for your application using the Cordova, both for Android, iOS and Windows Phone.

Application Settings

Now that we are more familiar with the application folders we will configure our application to connect to our local server and start to play a little, for this, open the file src/config.ts

Line 2: This is the name of your configured application in ecosystem.json file that will also serve to indentificar time to connect to Parse Server

Line 3: Uncomment this line for the application to connect to your Local Server Parse and comment out the line 4

Line 4: The Photogram2 is already configured to work with the default server, the next step when we learn to put our production server, we will change this address to our address of your Parse Server Production

Line 7: Google Maps Api Javascript

Line 10: Code string in your Facebook application to authenticate

Line 14: The languages that will be active and available in the application

Running Photogram2

Now that you’ve unpacked line 3 and commented on line 4, now we can go back to the end and enter the command below to start Ionic Server on our machine and we start to change the look of our application, Terminal and enter the command:

$ ionic serve

$ Ionic serves

In order to understand what happens with this command, in summary Ionic 2 will transform all the code in TypeScript for JavaScript and Sass to CSS, pack everything using WebPack, put all this in the www folder and make a live reload using a new system of build called ionic-app-script which are a set of codes to make all this magic with a single command.

After doing all this process, which can take a few seconds, it automatically opens your browser with the application running.

I recommend using the Browser and right click and then Inspect Element (Inspect)

At this point you will enter developer mode in Chrome, where you can see the JavaScript log and even the source code of the application running, and you can make changes in real time.

You can also change the display mode to make a simulation on smartphones, being able to change size and even version of the OS only by clicking on the button marked below:

To learn how to get all the features of Chrome DevTools, visit the link:

Chrome DevTools Overview — Google Chrome

Changing the color of Photogram2

Now that the application is running in real time and we can see on our Chrome, we open the file src/theme/variables.scss and edit the line 17 by another color in RGB.

Src / theme / variables.scss

When you save the color change will be done in real time, without needing you to refresh your browser:

Creating our private repository

Regardless of whether you are going to be working as a team or alone, it is very important that you continue working with Git, taking a history of your codes, a backup whenever you need it and so you can receive updates for free.

Unfortunately for this Github charges for private use, but there is BitBucket that allows us to create unlimited git projects privately, with total security and ease.

First create an account on Bitbucket.com

Bitbucket

Log in and create a new project, go to Teams tab and create a new team:

The Team is your organization, in it you can contain several different projects with several people in each of them.

Tip: You can also add up to 5 participants to your project for free.

With the Team of your organization created, we will create a project to later create our repositories that will be part of this project:

As you can see I create a project called Photogram with the Photogram Team. I can even personalize with the icon and say if this project is private or public, but even being a public project we can edit the privacy of each repository in the next step.

Let’s finally create our private repositories, for this we need to access the page of our project and then click on the link to create a new git repository as shown in the image below:

We will create 2 repositories, one for the source code of our application in Ionic 2, and another for the Server, I suggest you use the following names:

• Photogram-ionic2
• Photogram-server

You can change the photogram name to the name of your application, so it will be easier to identify the types of repositories you have, especially when working as a team.
Do not forget to check if it’s marked that the repository will be private!

Anyway, now that you’re with your private repository created on Bitbucket, the last and most important step is to modify your remote git addresses.

The tip is to use your remote origin, to be the one for bitbucket, as this is the main one and you do not run the risk of sending your private source code to Bitbucket from Photogram.

For this we will rename your remote git path that you used to make the photogram clone to another name:

$ git remote rename origin github

Now, whenever you want to receive Photogram updates, simply type the following command in your terminal and then merge the changes:

$ git pull github master

And now, let’s finally add as your remote and main git address your private repository created on bitbucket.

To do this, follow the step below, where it says that you have an existing repository and now you want to store it on bitbucket.

Repeat the same process with your Photogram Parse Server, and whenever you exit a new update enter the command on your terminal

$ git pull github master

Other tutorials you’ll need

Top questions about Ionic

Ionic FAQ - Ionic Framework

Emulating in Device

Ionic CLI - Ionic Framework

Changing Icon and Splash

Ionic CLI - Ionic Framework

Publishing your app on Google Play or Itunes Store

Publishing your app - Ionic Framework

Look forward to our next tutorial by putting the Photogram Parse Server into production at Digital Ocean.