Go back to Read free chapters

Create a contact list application to manage your friends devices or matches

Create a mobile or web Angular and Ionic app for managing contacts, friends or matches

In this chapter we are focused on connections, especially this connecting pattern is highly popular in many social networking applications and can be used in all kinds of applications and use cases.

Below is the view to the mobile application that you will be creating. To test the application write your name in the first field using @ prefix, like @jack. Write the name you want to connect to to the second input box. Then click on the Right arrow in between the boxes to send a new friend request and create a new connection. Below in the lists click on the name buttons to switch the user's view. This represents that you login as a different test user. Click on the Accept or Decline button or the Trashcan to see what happens.

This application works as an example mobile application to show the features of the Connecting API. The application interface is anonymous, open and unsecured. It is meant to be that way in the beta version 0.1.

Try below by replacing @mary with a username in the @user format and click on the Connect arrow. 

Connect API mobile and web Html5 hybrid client application running with Angular.

This version is a Beta Test version and by logging in and aquiring share points you get to read this whole article on how to create this client application.

The client component has the following lists that are fetched from the Connecting API service endpoints.

How to build a list of accepted connections

My friends lists users that you are connected to. Each user has a trashcan icon that you can use to call the discard interface. The user list is fetched by calling the Connecting API interface with the following parameters.

http://api.weall.com/v0.1/connections?filter=connectionState::APPROVED&ownerName=@john

This returns the users that the ownerName has accepted for a connection.

How to build a list of pending connections

Friends that requested me lists users that have requested the application user as a connection. Each user has an accept and decline button that calls the Connecting API interface. The list is fetched with the following parametrs. 

http://api.weall.com/v0.1/connections?filter=connectionState::PENDING|searchType::RECEIVED&ownerName=@john

This returns the users that have requested the ownerName for a connection.

How to build a list of waiting connections

Friends that I requested lists users that the application user has requested for a connection. The list is fetched with the following parameters. 

http://api.weall.com/v0.1/connections?filter=connectionState::PENDING|searchType::SENT&ownerName=@john

This returns the users that the ownerName has requested for a connection.

How to build a list of discarded connections

Rejected friend requests lists users that have been discarded either by the connection owner or the connection endpoint. The list is fetched with the following parameters.

http://api.weall.com/v0.1/connections?filter=connectionState::DISCARDED&ownerName=@john

This returns the users that have been discarded.

Each user is represented with a button that you can use to switch

How to create a REST request to poll approved (two-ways accepted) connections

Start off in Appery.io to create a new Angular project with Ionic. Then go to the API Express and create new services to query the connections from an API endpoint. The following image shows all services created.

Image in Appery.io create new services to query connections from the Connecting API endpoint.

First create new GET service with the following settings:

Service

Service name: connections

HTTP service method: GET

Service description: Find owners connections

In Request Query parameters add the following parameters

ownerName type String

filter type String

Image in Appery.io API Express IDE, service parameters to fetch connections.

After that drag the REST component to the middle of the service beginning and end marks. The previous image shows the component already added. Then add the following parameters to the REST component service

REST Service

Service URL: http://api.weall.com/v0.1/connections

HTTP service method: GET

In Reqeuest Query parameters add the following parameters

ownerName with setting PARAMS.QUERY.ownerName

filter with setting PARAMS.QUERY.filter

This binds the REST query's parameter to the service parameter. This way API Express enables you to bind service parameters with different type of queries, REST, SOAP or SQL and gives you more freedom how to bind the service parameters.

Image in Appery.io API Express, add the REST query parameters.

After that go to the Response body, click on Generate and add the following Query parameters. After that import the response with the Import response button.

ownerName @john

filter connectionState::APPROVED

How to create a REST request to accept connections

Notice that in this service we add the path parameter endpointName and also query parameter ownerName. Create a new POST service with the following settings:

Service

Service name: connections/{endpointName}

HTTP service method: POST

Service description: Create new connection to endpoint

In Request Path parameters add the following parameters

endpointName type String

In Request Query parameters add the following parameters

ownerName type String

 

Image in Appery.io API Express IDE, service parameters to create connections.

After that drag the REST component to the middle of the service beginning and end marks and add the following parameters to the REST component service

REST Service

Service URL: http://api.weall.com/v0.1/connections/{endpointName}

HTTP service method: POST

In Reqeuest Path parameters add the following parameters

endpointName with setting PARAMS.PATH.endpointName

In Reqeuest Query parameters add the following parameters

ownerName with setting PARAMS.QUERY.ownerName

 

Image in Appery.io API Express, add the REST path parameters to call the add connection REST API.

After that go to the Response body, click on Generate and add the following parameters. After that import the response with the Import response button.

Path parameters

endpointName @mary

Query parameters

ownerName @john

How to create a REST request to discard connections

Notice that in this service we add the path parameter endpointName and also query parameter ownerName. Create a new DELETE service with the following settings:

Service

Service name: connections/{endpointName}

HTTP service method: DELETE

Service description: Discard connection

In Request Path parameters add the following parameters

endpointName type String

In Request Query parameters add the following parameters

ownerName type String

 

Image in Appery.io API Express IDE, service parameters to discard connections.

After that drag the REST component to the middle of the service beginning and end marks and add the following parameters to the REST component service

REST Service

Service URL: http://api.weall.com/v0.1/connections/{endpointName}

HTTP service method: DELETE

In Reqeuest Path parameters add the following parameters

endpointName with setting PARAMS.PATH.endpointName

In Reqeuest Query parameters add the following parameters

ownerName with setting PARAMS.QUERY.ownerName

Image in Appery.io API Express, add the REST path parameters to call the discard connection REST API.

After that go to the Response body, click on Generate and add the following parameters. After that import the response with the Import response button.

Path parameters

endpointName @john

Query parameters

ownerName @mary

How to create an application to manage friends list, connections, devices, matches or links between objects that are connectable

Now we get to the user interface, in Appery.io switch to the application and create a new blank Ionic application

 

Image in Appery.io create new application.

Then create a new API Express service and import the services that you have created in the previous step.

 

Image in Appery.io IDE create API Express Service and import the connecting services.

Then go to the Project / Model page and create the following model to represent the connection list.

 

Image in Appery.io IDE Create a new model to represent the connection list component.

Then it's time to add the user interface elements to the screen. The screen has 5 grids. 1st grid has the input fields to add a new connection and the button to call the add connection. The rest of the grids represents different connection lists.

The following angular attributes are added to the elements.

1st grid, sender input, ng-model = sendername, receiver input, ng-model = receivername,

add connection button, ng-click = acceptConnection(sendername,recievername)

2nd my friends grid, the grid / gridrow has ng-repeat = connectionItem in acceptedConnectionList

2nd my friends grid, connection button, text = {{connectionItem.endpoint.name}} ng-click = switchUser(connectionItem.endpoint.name)

2nd my friends grid, discard connection button, ng-click = discardConnection(loginname,connectionItem.endpoint.name)

3rd received requests grid, the grid / gridrow has ng-repeat = pendingItem in pendingConnectionList

3rd received requests grid, pending button, text = {{pendingItem.owner.name}} ng-click = switchUser(pendingItem.owner.name)

3rd received requests grid, accept connection button, ng-click = acceptConnection(loginname,pendingItem.owner.name)

3rd received requests grid, discard connection button, ng-click = discardConnection(loginname,pendingItem.owner.name)

4th sent requests grid, the grid / gridrow has ng-repeat = waitingItem in waitingConnectionList

4th sent requests grid, waiting button, text = {{waitingItem.endpoint.name}} ng-click = switchUser(waitingItem.endpoint.name)

5th discarded grid, the grid / gridrow has ng-repeat = discardedItem in discardedConnectionList

5th discarded grid, discarded button, text = {{discardedItem.owner.name}} ng-click = switchUser(discardedItem.owner.name)

 

Image in Appery.io IDE Add the components to the screen.

Then go to the Scope tab in the left side of the Screen and add the variables as below.

 

Image in Appery.io IDE Angular scope variables.

And add the following scope functions.

 

Image in Appery.io IDE add scope functions.

Init function sets up the initial test scenario for the users.

Image in Appery.io IDE init function to initialize the application.

Create getAcceptedConnections(ownerName) function and click on the Request Data section button CLICK TO EDIT MAPPING to open the mapping editor.

From the editor draw two lines from the left scope mapping to the right service request mapping as below. Then click on the filter JS icon on the right side to edit the filter default mapping. To edit the default mapping the item must have a parameter attached to it.

 

Image in Appery.io IDE Edit getAcceptedConnections mappings.

Write the filter parameter as a return statement for the function as below.

Image in Appery.io IDE Edit the filter mapping and add a default return statement.

By default when the interface is called the connectionState::APPROVED parameter is added to the filter. Then click on the Success response section button CLICK TO EDIT MAPPING. The mapping editor opens and from there attach the parameters from the left side to the right side as below.

Image in Appery.io IDE edit the mappings for getAcceptedConnections success reponse.

In the end the generated code will look as below.

Image in Appery.io IDE get Accepted connections function call.

Do the same steps as before for all of the function services, below is the summary of the mappings.

getPendingConnections(ownerName)

filter = connectionState::PENDING|searchType::RECEIVED

Map the success reponse parameters to the pendingConnectionList object.

getDiscardedConnections(ownerName)

filter = connectionState::DISCARDED|searchType::RECEIVED

Map the success reponse parameters to the discardedConnectionList object.

getWaitingConnections(ownerName)

filter = connectionState::PENDING

Map the success reponse parameters to the waitingConnectionList object.

To accept new connections create a new function called acceptConnection(ownerName, endpointName). And click on the Request mapping editor button. Attach the parameters as below.

 

Image in Appery.io IDE Accept connections.

To the success response mapping edit the code manually and add a function call

$scope.refreshConnections();

And the following is to be noted. When making a POST request you have to manually set the POST request data to an empty array. Add the following snippet to the requestData object code.

requestData.data = {};
Below is the final function call.

Image in Appery.io IDE send connection accept requests.

To discard connections create a new function called discardConnection(ownerName, endpointName). And click on the Request mapping editor button. Attach the parameters as below.

Image in Appery.io IDE Discard connections.

To the success response mapping edit the code manually and add a function call

$scope.refreshConnections();

Below is the final function call.

 

Image in Appery.io IDE send connection discard requests.

Then let's create a button to switch the users to different ones. This is a test functionality to show the views from different users.

 

Image in Appery.io IDE create function to switch users.

And finally create a function to refresh the connections.

 

Image in Appery.io IDE create function to refresh connections.

Now you are ready to try out the application for your own use cases. Note that this is a test interface and is meant to be used only as beta test usage. In the actual interface the owneName will be replaced by a JWT token and the actual username will not be passed in the REST calls.

DOWNLOAD

Below you can find the links to download the Connecting API Hybrid mobile for Android and iOS source code. 

The links is downloadable only when you have enough share points.

Download Connecting API Appery.io Project backup and Import the project

Connecting API v1.0 Appery.io project backup

Download Connecting API Appery.io API Express project backup and Import it as API Express project

Connecting API v1.1 API Express backup

Download Connecting API Android APK to your mobile phone and install (Safe to install, app requires only Internet access to query the api.weall.com interface)

Connecting API Friend list Android application APK

Download Connecting API web application Source code, you can install this application inside web server or launch it by opening the index.html file in your browser.

Connecting API HTML5 CSS web application

Download Connecting API Android Studio project application to view the source code in Android studio

Connecting API Android Studio project

Download Connecting API xCode project application to view the source code in Mac xCode development studio

Connecting API xCode project

What new ideas or thoughts this chapter gave you?