Step by step how to start the Photo Grid configuration, after acquiring a copy of the source code. Illustrated manual, with all the details for you to start your development using Ionic Framework, along with the backend Parse.com.

1. Photogram
Version 1.3

2. Requirements
• Before you begin, make sure you have the following installed
on your machine frameworks
• Node JS (www.nodejs.org)
• Git (https://git-for-windows.github.io/)
• Ionic Framework (http://ionicframework.com/)
• Bower (http://bower.io/)
• Gulp (http://gulpjs.com/
• $ npm install -g ionic bower cordova gulp

3. Step 1
After Purchase

4. Github

5. Github
• After confirming the purchase of the Photo Grid
Codes sources, you will need a free account on
Github to participate in the development group.
• After creating your account on Github, send an
email stating your username and email to
photogram.ionic@gmail.com to receive the
invitation to access.

6. Step 2
Clone Project

7. Git Clone

8. Clone Project
• After accepting the invitation from Github, you will
have access to the entire history of the development,
and can ask questions and suggest new features.
• To make a copy of the project to your machine, go to
the terminal and type the following command:
• git clone https://github.com/photogram/ionic-app-parse.git Photogram
• After cloning, simply access the folder you created
called Photogram

9. Step 3
Getting Starter

10. $ npm install

11. Dependencies
• The Photogram have some special frameworks that will
help you in agile development, to install all that is
necessary, simply type the following command in the
project folder and run.
• Will automatically install all the NPM and Bower packages.
• $ npm install

12. Step 4
Ionic Analytics

13. Ionic Analytics

14. Ionic Analytics
• The Photogram comes configured with integration with
Ionic Analytics
• For you set, you will need a free account on
https://apps.ionic.io and then type the following command
in the terminal.
• $ ionic io init
• *The first time, you will be asked for your email and
password ionic analytics to integrate

15. Step 5
Getting Starter with Parse

16. Parse.com

17. Crie uma conta gratuita

18. Caso já tenha uma conta
crie um novo projeto

19. Clique em Data

20. Clique em Web

21. Clique em New Project

22. Agora clique em Settings

23. Acesse o painel de Settings
depois, copie suas credenciais para colar na próxima etapa

24. Cole suas credenciais em
www/js/config.parse.js

25. Step 5
Create Data Class

26. Acesse o menu Core
depois clique em Add Class

27. Class User

28. Class User
+ Col

29. Class UserFollow

30. Class UserFollow
+ Col

31. Class Gallery

32. Class Gallery
+ Col

33. Class GalleryComment

34. Class GalleryComment
+ Col

35. Class GalleryLike

36. Class GalleryLike
+ Col

37. Class GalleryActivity

38. Class GalleryActivity
+ Col

39. Class GalleryFeedback

40. Class GalleryFeedback
+ Col

41. Class GallerySetting

42. Class GallerySetting
+ Col

43. Class GallerySetting
+ Row

44. Class Gallery
+ Col

45. Step 6
Test in your Browser

46. Test in your Browser
$ ionic serve

47. Thanks so much
Willian Ribeiro Angelo
www.photogramapp.com
photogram.ionic@gmail.com