How do the websites and mobile apps of Facebook, Gmail, LinkedIn, etc. work together in sync with each other?

Question

Basically, I'm a PHP Developer by profession. I only have an experience of developing websites using PHP. I have no more experience of creating mobile apps.

My organisation wants to build a website(using PHP) as well as mobile apps(in Android and iOS) to create a social network presence for some community that will exactly resemble the functioning of Facebook website and Facebook app.

But I'm not getting Where to start? How to start? What approach I should follow? How to make use of PHP for all this stuff?

I want to know how does the Facebook website and Facebook app work together in sync? I want to know what's the phenomenon, system architecture, principle, design patterns, technology and other things are working behind it?

I use Facebook website on my laptop and Facebook app from my Android Smartphone.

Whenever I receive any notification on Facebook, it get notified almost at the same moment on Facebook website as well as Facebook app.

Also, whenever I update my status or do any activity like reacting or commenting on a post, adding group update, adding event update, etc. from Facebook website it gets reflected immediately into the Facebook app as well and it happens in a vice-a-versa fashion. This happens very smoothly too.

As per my understanding, the Facebook website and Facebook app must be using the same database to store and access data but I'm still not getting how they work together in sync as the code base of Facebook website and Facebook app are entirely different things in nature? Also, the way of execution of Facebook website and Facebook app are two entirely different things.

The Facebook apps have been built using different technologies(like Android, iOS, Windows Phone, Blackberry, etc.) and the Facebook website has been built using PHP and all other stuff but still they work together in sync.

What's the phenomenon behind working of different technologies together in sync with each other?

And I've observed the same thing with various websites and apps like Gmail, LinkedIn, etc. Do they also work on same phenomenon like Facebook works?

Please guide me in proper direction regarding this. What and how should be my approach towards this project as a PHP developer?

Thanks.

Answer 1

Both the Facebook website and Facebook app use the same database. The Facebook App most likely uses a REST web API to communicate with the API part of the Facebook website to retrieve data from the shared database or modify data in the shared database.

I would advise you to write an API next to your website that will handle the database communication for your mobile app.

A good way to get started is by using an existing REST API framework. A list can be found here: http://davss.com/tech/php-rest-api-frameworks/

Answer 2

At the beginning interested in a WebSockets

WebSockets is an advanced technology that makes it possible to open an interactive communication session between the user's browser and a server. With this API, you can send messages to a server and receive event-driven responses without having to poll the server for a reply.

and Ratchet

WebSockets for PHP

Ratchet is a loosely coupled PHP library providing developers with tools to create real time, bi-directional applications between clients and servers over WebSockets. This is not your Grandfather's Internet.

Then you can to do the Creating Real Time Applications with PHP and WebSockets or Real-Time Web applications with PHP and Ratchet.

Answer 3

If you are a PHP Developer by profession you probably understand that there are different layers to an application.

The front end will consist of either your web application written by PHP/ASP/JAVA and every other language you can think of. They can even be in the form of a mac desktop app, a window desktop app, a android app, or iOS app.

Facebook and google works the same way... but the end of the day all these apps are just to retrieve data from a Database and display them.

So regardless of what languages and platform you are writing for... you can simply design a web application in PHP with MySql..

In the future you are able to add iOS application, Android Apps or whatever other platforms you want to write for... all they need to do is to read from the MYSQL Database and display the information to your user.

Notification For the part where you mention updating of Facebook status on your website, and you receive a notification on your phone. It's done by pushing the messages via web sockets to different devices, exactly like how live chat application works.

You can try some thing like pusher.com or pubnub.com. I personally uses pusher.com to push notifications to ios/android devices.

This happens when you update your Facebook status on your internet explorer.

Typical Flow

Update Status -> Facebook Updates Database -> Facebooks send notification to IOS Device -> iOS Device receive notification -> iOS Device retrieve new information from Database

Of course if you were to be writing a app for a iOS device or android device you would probably also design a local database on the device itself so you will not be pulling gigabytes of data from the remote database all the time.

Answer 4

I recommend you check out Parse.com. Unfortunately, they are changing the way their system works, and I can only speak from my past experience. Parse hosts the database for you and they have libraries enabling you to tap into your database from many different platforms and programming languages, including PHP, IOS, and Android. Theoretically, all you would have to do is download the PHP library and have your mobile developers download the mobile library for IOS and Android, although it is a little more complicated than that.

I am not sure this would be more beneficial than setting up your database to handle calls from PHP and mobile, but it might be worth looking into. It is also important to note that Parse is migrating to user hosted databases and I am not sure how that would affect new users or the benefits parse provides. You will have to set up your hosted database, which is why it is a little more complicated than just downloading the libraries.

Hope this is helpful, and good luck!

Answer 5

It's a combination of technologies and techniques you can use for your purpose:

1. about architecture: you would develop API-based architecture which allows you to have a web interface or use any other platforms to access to the facilities in your application. I recommend Yii 2 framework or specially Zend 2 framework and Apigility. most used API methods are SOAP and REST which I recommend REST as it doesn't expose methods and support JSON. there are lots to read about the architecture.

2. about database: of course you need one database but if you worry about performance you can consider to software solutions.
   considering on MySQL performance or use NoSQL databases and also
   there are other solutions like using multi servers and cluster
   databases and load balances. and more important is how to use cache (there are some solutions like Varnish or Memcached)

3. about design pattern: design patterns are some different standards for different situations. if you mean which design pattern for notification you could use. it's observer/inverter design pattern

4. push notification: you would use APNs (apple push notification service) and GCM (Google Cloud Messaging) services which allows you to inform your applications about changes and new notificatins

5. about the application: according to facilities you would give to your client you can use native development approach or hybrid development (like Cordova) to load same forms in mobile and call your API to update, delete, create or whatever actions you have or get notifications. there are lots of solutions here also for hybrid application like using REACT and Mobile Bootstrap or ANGULAR and IONIC framework and ...

also you can use NOD JS and separate your web application from your API server or use PHP for both. or use one server for web interface and web services I mean there are lots of solutions.

Answer 6

Only knowing PHP will work. It will take 5 minute create a community with RESTful API support on a shared server or free tier of OpenShift PaaS for test & development.

WordPress + BBPress + WP RESTful API + Custom App

Demo of frontend community : https://bbpress.orgy Demo of REST API in action : https://bbpress.org/wp-json/

That second URL like thing will do the "sync" work with mobile App.

Install WordPress. Then install :

1. https://wordpress.org/plugins/rest-api/
2. https://wordpress.org/plugins/rest-api-oauth1/
3. https://wordpress.org/plugins/bbpress/

Your API server with community is ready within 5 minutes. 100% RESTful web application. Read --

1. http://v2.wp-api.org/
2. https://github.com/WP-API/OAuth1/blob/master/docs/basics/Signing.md
3. http://wp-api.org/resources.html
4. https://developer.wordpress.org/rest-api/
5. https://bbpress.org/forums/topic-tag/api/

You want an Android App. You will follow this guide : https://deliciousbrains.com/creating-mobile-app-wp-api-react-native/

WordPress does have mobile apps -- https://apps.wordpress.com/mobile/ & source code -- https://github.com/wordpress-mobile/WordPress-Android

How you want to use your App, it is your matter. You can modify them.

How Works

In easy word, the web application have modern "feed" like thing named JSON response. That is one way of mobile App's update. You can actually use feed when mobile app is read only. They fall in the category of REST. Those new JSON way gives granular control to read-write. Rest is written on their docs.

Important

WordPress JetPack provides many free to use features including push. Ask on WordPress official forum when you'll have doubt.

Restrict locations from web server software for rate limit to avoid DDoS, use Fail2Ban, iptables. It is very dangerous not to filter from web server, monitor log, use cache.

Answer 7

Its all about API integration and programming. In sort you need to create a central server (managed and balanced) serving data and processing requests from website and mobile app both.

The emerging technique with PHP (popular and appropriate) step by step 1) Create REST api and create Oauth cerver with Laravel or Lumen framework. These framework are almost same and except performance. You can create good REST api and use passport (Oauth) for REST Authentication. Mobile application and you website both can interact with REST api. 2) Create mobile app using AngularJS and build for android and ios using ionic, cordova or phonegap. You can create native app using their SDK but now Javascript frameworks are also strong enough for mobile apps.

and for real time sync and notification there are lots of technologies that you can use. In mobile app you can run a service to check the notifications in background.

I recently have developed a web application as well as mobile app for android and iphone. And for that i used Laravel 5.3 (PHP), AngularJS and VueJS.

Answer 8

I would like to point out the reasons why you still have not got any good answer on your question even after awarding a bounty.

1. The first problem with your question is that you are making an absolute incorrect assumption that Facebook app and Facebook website sync. I always receive the messages on my phone with a delay. It means both are making separate API calls.
2. Second major problem with your question is that you are asking a question that is already answered several times. look at these examples for basic idea.
3. You are stating that you want this information to built a website from scratch but want to follow an example of website that invested millions of dollars. They have a huge traffic, check this link. Hence they do not use ordinary techniques to maintain this and this was not built in a day. You need to start from scratch and then scale.

Answer 9

It's simple and easy: https://en.wikipedia.org/wiki/Comet_(programming)

Facebook and Gmail (as far as I know) using Comet Technique for every live things in their apps. It works really simple let's create a scenario:

1- We have a file that keep looking for file to change. (notification.php)

2- We have a website (index.php) (That connects to notification.php)

3- We have an android application (That connects to notification.php)

4- We have a file that saves all notifications. (savenotification.php)

So let's create a file named {userid}.txt in our directory. If I will create a notification via app or website these notifications will always be saved at savenotification.php. Another important thing is this (savenotification.php) file will change {userid}.txt file whenever you create a notification.

Meanwhile our app and website will always listen notification.php to give response.

notification.php works like this:

$openingTime = microtime();
$userid = $_SESSION['userId'];
while (true) {
    if (mtime($userid.'.txt') > $openingTime) { // check if file changed while we are in loop 
        echo json_encode('data' => 'New notification created.');
        break;
    }
    usleep(250);
}

So that means if you ever will create a notification at savenotification.php file you should change {userid}.txt file because of our notification.php continuously looking for any change made in that file when loop continuous. If any change made that means a notification created at app or website or any source.