Author: Pawan Pal

This author has written 16 articles
Read more about the article Burst Camera Mode in Phimpme Android

Burst Camera Mode in Phimpme Android

Camera is an integral part of core feature in Phimpme Android. Various features were added in the camera part such as resolution, timer, shutter sound, white balance etc. Click burst shot from camera is also an important feature to be added. Burst shot is clicking multiple pictures in one go. Adding a Burst mode in Phimpme Camera Adding burst mode enable entry in options The popup view in Camera is added programmatically in app. Setting up the values from sharedpreferences. It takes the value and set burst mode off, 1x, 2x etc. according to value. final String[] burst_mode_values = getResources().getStringArray(R.array.preference_burst_mode_values);  String[] burst_mode_entries = getResources().getStringArray(R.array.preference_burst_mode_entries); String burst_mode_value = sharedPreferences.getString(PreferenceKeys.getBurstModePreferenceKey(), "1"); Two methods created for setting up the previous and next values. To set up the previous value we need to check the current value to be not equal to -1 and greater that zero. Upgrade or downgrade the value of burst mode, according to the click. public int onClickPrev() {         if( burst_mode_index != -1 && burst_mode_index > 0 ) {            burst_mode_index--;            update(); ... } public int onClickNext() {            if( burst_mode_index != -1 && burst_mode_index < burst_mode_values.length-1 ) {              burst_mode_index++;            update();... } Saving the value in sharedpreferences So on clicking the previous and next, the value of burst mode value will be updated. As shown in the above code snippet, after every increment and decrement the values set on view and called update method to update the value in the sharedpreference as shown below. private void update() {        String new_burst_mode_value = burst_mode_values[burst_mode_index];        SharedPreferences sharedPreferences = PreferenceManager.getDefaultSharedPreferences(main_activity); SharedPreferences.Editor editor = sharedPreferences.edit(); editor.putString(PreferenceKeys.getBurstModePreferenceKey(), new_burst_mode_value); editor.apply();} Taking multiple Images Now in the implementation part, we need to continuously click the image according to the burst value set by the user. So to enable this, first check the value not to be negative and should be greater than zero. Whole iteration work on separate variable named remaining burst photos. The value of the variable decrease after every image click i.e. takePhoto method calls. if( remaining_burst_photos == -1 || remaining_burst_photos > 0 ) {  if( remaining_burst_photos > 0 )     remaining_burst_photos--;  long timer_delay = applicationInterface.getRepeatIntervalPref();  if( timer_delay == 0 ) {     phase = PHASE_TAKING_PHOTO;     takePhoto(true);  }  else {     takePictureOnTimer(timer_delay, true);  } } Resources: SharedPreference guide: https://developer.android.com/reference/android/content/SharedPreferences.html Views in Android: https://developer.android.com/reference/android/view/View.html  

Continue ReadingBurst Camera Mode in Phimpme Android
Read more about the article Uploaded Images History in Phimpme Android

Uploaded Images History in Phimpme Android

In Phimpme Android one core feature is of sharing images to many different platforms. After sharing we usually wants to look in the our past records, where we uploaded what pictures? Which image we uploaded? What time it was? So I added a feature to view the upload history of images. User can go to the Upload history tab, present in the navigation drawer of the app. From there he can browse the repository. How I added history feature in Phimpme Store the data when User initiate an upload To get which data uploading is in progress. I am storing its name, date, time and image path. When user approve to upload image from Sharing Activity. Created a database model public class UploadHistoryRealmModel extends RealmObject{   String name;   String pathname;   String datetime;   public String getName() {       return name;   }   public void setName(String name) {       this.name = name;   }   public String getPathname() {       return pathname;   }   public void setPathname(String pathname) {       this.pathname = pathname;   }   public String getDatetime() {       return datetime;   }   public void setDatetime(String datetime) {       this.datetime = datetime;   } } This is the realm model for storing the name, date, time and image path. Saving in database UploadHistoryRealmModel uploadHistory; uploadHistory = realm.createObject(UploadHistoryRealmModel.class); uploadHistory.setName(sharableAccountsList.get(position).toString()); uploadHistory.setPathname(saveFilePath); uploadHistory.setDatetime(new SimpleDateFormat("dd/MM/yyyy HH:mm:ss").format(new Date())); realm.commitTransaction(); Creating realm object and setting the details in begin and commit Transaction block Added upload history entry in Navigation Drawer <LinearLayout   xmlns:android="http://schemas.android.com/apk/res/android"   android:id="@+id/ll_drawer_uploadhistory"   android:layout_width="match_parent"   android:layout_height="wrap_content"   android:background="@drawable/ripple"   android:clickable="true"   android:orientation="horizontal">   <com.mikepenz.iconics.view.IconicsImageView       android:id="@+id/Drawer_Upload_Icon"       android:layout_width="@dimen/icon_width_height"       android:layout_height="@dimen/icon_width_height"       app:iiv_icon="gmd-file-upload"/>   <TextView       android:id="@+id/Drawer_Upload_Item"       android:layout_width="wrap_content"       android:layout_height="wrap_content"       android:text="@string/upload_history"       android:textColor="@color/md_dark_background"       android:textSize="16sp"/> </LinearLayout> It consist of an ImageView and TextView in a horizontal oriented Linear Layout Showing history in Upload History Activity Added recyclerview in layout. <android.support.v7.widget.RecyclerView   android:id="@+id/upload_history_recycler_view"   android:layout_width="match_parent"   android:layout_height="match_parent"   android:layout_below="@id/toolbar"> </android.support.v7.widget.RecyclerView> Query the database and updated the adapter of Upload History uploadResults = realm.where(UploadHistoryRealmModel.class); RecyclerView.LayoutManager layoutManager = new LinearLayoutManager(this); uploadHistoryRecyclerView.setLayoutManager(layoutManager); uploadHistoryRecyclerView.setAdapter(uploadHistoryAdapter); Added the adapter for recycler view and created an Item using Constraint layout. Resources Realm Docs : https://realm.io/docs/java/latest/?gclid=Cj0KEQjw6-PJBRCO_br1qoOB4LABEiQAEkqcVWPnl36QeBPNq00Y87fuLAeKXAylrsVZML2pwDdluDYaAqKF8P8HAQ#getting-started Recycler View adapter:https://developer.android.com/reference/android/support/v7/widget/RecyclerView.Adapter.html Writing in Realm database: https://realm.io/docs/java/latest/?gclid=Cj0KEQjw6-PJBRCO_br1qoOB4LABEiQAEkqcVWPnl36QeBPNq00Y87fuLAeKXAylrsVZML2pwDdluDYaAqKF8P8HAQ#writes Query in Realm Database: https://realm.io/docs/java/latest/?gclid=Cj0KEQjw6-PJBRCO_br1qoOB4LABEiQAEkqcVWPnl36QeBPNq00Y87fuLAeKXAylrsVZML2pwDdluDYaAqKF8P8HAQ#queries

Continue ReadingUploaded Images History in Phimpme Android
Read more about the article Using Firebase Test Lab for Testing test cases of Phimpme Android

Using Firebase Test Lab for Testing test cases of Phimpme Android

As now we started writing some test cases for Phimpme Android. While running my instrumentation test case, I saw a tab of Cloud Testing in Android Studio. This is for Firebase Test Lab. Firebase Test Lab provides cloud-based infrastructure for testing Android apps. Everyone doesn’t have every devices of all the android versions. But testing on all of them is equally important. How I used test lab in Phimpme Run your first test on Firebase Select Test Lab in your project on the left nav on the Firebase console, and then click Run a Robo test. The Robo test automatically explores your app on wide array of devices to find defects and report any crashes that occur. It doesn’t require you to write test cases. All you need is the app's APK. Nothing else is needed to use Robo test. Upload your Application's APK (app-debug-unaligned.apk) in the next screen and click Continue Configure the device selection, a wide range of devices and all API levels are present there. You can save the template for future use. Click on start test to start testing. It will start the tests and show the real time progress as well. Using Firebase Test Lab from Android Studio It required Android Studio 2.0+. You needs to edit the configuration of Android Instrumentation test. Select the Firebase Test Lab Device Matrix under the Target. You can configure Matrix, matrix is actually on what virtual and physical devices do you want to run your test. See the below screenshot for details. Note: You need to enable the firebase in your project So using test lab on firebase we can easily test the test cases on multiple devices and make our app more scalable. Resources: Firebase Documentation: https://firebase.google.com/docs/test-lab/ Youtube Video: https://youtu.be/4_ZEEX1x17k Run a Robo test: https://firebase.google.com/docs/test-lab/robo-ux-test

Continue ReadingUsing Firebase Test Lab for Testing test cases of Phimpme Android
Read more about the article UI Espresso Test Cases for Phimpme Android

UI Espresso Test Cases for Phimpme Android

Now we are heading toward a release of Phimpme soon, So we are increasing the code coverage by writing test cases for our app. What is a Test Case? Test cases are the script against which we run our code to test the features implementation. It is basically contains the output, flow and features steps of the app. To release app on multiple platform, it is highly recommended to test the app on test cases. For example, Let’s consider if we are developing an app which has one button. So first we write a UI test case which checks whether a button displayed on the screen or not? And in response to that it show the pass and fail of a test case. Steps to add a UI test case using Espresso Espresso testing framework provides APIs to simulate user interactions. It has a concise API. Even, now in new Version of Android Studio, there is a feature to record Espresso Test cases. I’ll show you how to use Recorder to write test cases in below steps. Setup Project Directory Android Instrumentation tests must be placed in androidTest directory. If it is not there create a directory in app/src/androidTest/java… Write Test Case So firstly, I am writing a very simple test case, which checks whether the three Bottom navigation view items are displayed or not? Espresso Testing framework has basically three components: ViewMatchers Which helps to find the correct view on which some actions can be performed E.g. onView(withId(R.id.navigation_accounts). Here I am taking the view of accounts item in Bottom Navigation View. ViewActions It allows to perform actions on the view we get earlier. E.g. Very basic operation used is click() ViewAssertions It allows to assert the current state of the view E.g. isDisplayed() is an assertion on the view we get. So a basic architecture of an Espresso Test case is onView(ViewMatcher)        .perform(ViewAction)        .check(ViewAssertion); We can also Use Hamcrest framework which provide extra features of checking conditions in the code. Setup Espresso in Code Add this in your application level build.gradle // Android Testing Support Library's runner and rules androidTestCompile "com.android.support.test:runner:$rootProject.ext.runnerVersion" androidTestCompile "com.android.support.test:rules:$rootProject.ext.rulesVersion" // Espresso UI Testing dependencies. androidTestCompile "com.android.support.test.espresso:espresso-core:$rootProject.ext.espressoVersion" androidTestCompile "com.android.support.test.espresso:espresso-contrib:$rootProject.ext.espressoVersion" Use recorder to write the Test Case New recorder feature is great, if you want to set up everything quickly. Go to the Run → Record Espresso Test in Android Studio. It dumps the current User Interface hierarchy and provide the feature to assert that. You can edit the assertions by selecting the element and apply the assertion on it. Save and Run the test cases by right click on Name of the class. Run ‘Test Case name’ Console will show the progress of Test case. Like here it is showing passed, it means it get all the view hierarchy which is required by the Test Case. Resources Official documentation: https://developer.android.com/training/testing/ui-testing/espresso-testing.html View Actions: https://developer.android.com/reference/android/support/test/espresso/action/ViewActions.html Testing with Espresso: http://www.vogella.com/tutorials/AndroidTestingEspresso/article.html

Continue ReadingUI Espresso Test Cases for Phimpme Android
Read more about the article Upload Images to OwnCloud and NextCloud in Phimpme Android

Upload Images to OwnCloud and NextCloud in Phimpme Android

As increasing the stack of account manager in Phimpme Android. We have now two new items OwnCloud and NextCloud to add. Both are open source storage services. Provides complete source code of their official apps and libraries on Github. You can check below OwnCloud: https://github.com/owncloud NextCloud: https://github.com/nextcloud This requires a hosting server, where you can deploy it and access it through their web app and Mobile apps. I added a feature in Phimpme to upload images directly to the server right from the app using their android-library. Steps (How I did in Phimpme) Add library in Application gradle file Firstly, to work with, we need to add the android-library they provide. compile "com.github.nextcloud:android-library:$rootProject.nextCloudVersion" Check the new version from here and apply over it: https://github.com/nextcloud/android-library/releases Login from Account Manager As per our Phimpme app flow, User first connect itself from the account manager and then share image from app using these credentials. Added a new Login activity for OwnCloud and NextCloud both.            Saved credentials in Database To use that further in android-library, I store the credentials in Realm database. account.setServerUrl(data.getStringExtra(getString(R.string.server_url))); account.setUsername(data.getStringExtra(getString(R.string.auth_username))); account.setPassword(data.getStringExtra(getString(R.string.auth_password))); Uploading image using library As per the official guide of OwnCloud, used Created an object of OwnCloudClient. Set the username and password. private OwnCloudClient mClient; mClient = OwnCloudClientFactory.createOwnCloudClient(serverUri, this, true); mClient.setCredentials( OwnCloudCredentialsFactory.newBasicCredentials( username, password ) ); Passed the image path which we are getting in the SharingActivity. Modified with adding the separator. File fileToUpload = new File(saveFilePath); String remotePath = FileUtils.PATH_SEPARATOR + fileToUpload.getName(); Used the UploadRemoteOperation Class and just need to pass the path, mimeType and timeStamp. The library have already defined functions to execute the upload operations. UploadRemoteFileOperation uploadOperation = new UploadRemoteFileOperation(fileToUpload.getAbsolutePath(), remotePath, mimeType, timeStamp); uploadOperation.execute(mClient, this, mHandler); Setup Account using Docker and Digital Ocean I have already a previous blog post on how to setup NextCloud or OwnCloud account on server using Digital Ocean and Docker. Link: https://blog.fossasia.org/how-to-use-digital-ocean-and-docker-to-setup-test-cms-for-phimpme/ Resource: NextCloud Developer Mannual: https://docs.nextcloud.com/server/9/developer_manual/index.html OwnCloud Library installation: https://doc.owncloud.org/server/9.0/developer_manual/android_library/library_installation.html Examples: https://doc.owncloud.org/server/9.0/developer_manual/android_library/examples.html

Continue ReadingUpload Images to OwnCloud and NextCloud in Phimpme Android
Read more about the article Common Utility classes Progress Bar and Snack Bar in Phimpme Android

Common Utility classes Progress Bar and Snack Bar in Phimpme Android

As the Phimpme Android is scaling very fast on its features, code gets redundant sometimes. Some of the widely used design widgets in Android are Progress Bar and Snack Bar. Progress Bar is shown to user when some process is happening in the background. Snackbar is a feedback operation to user of its recent process. In other words we can say Snackbar is the new toast in Android with a cool feature of setting action on them. So that User can interact with the feedback received on the process. As In Phimpme lots of account Login and Logout progress happens. Uploading success and failure required Snackbar to show to the Users. So to remove the redundancy of the boilerplate of these codes, I added two Utilities class one is Phimpme ProgressbarHandler and other is SnackbarHandler in the app. Below is one by one code and explanation of both. Progress Bar Handler In the constructor I passed Context as parameter. Created a ViewGroup object and set view of android. Setting the progress bar style and length using Android core attributes such as progressBarStyleLarge and duration to setIndeterminate true. private ProgressBar mProgressBar; public PhimpmeProgressBarHandler(Context context) {   ViewGroup layout = (ViewGroup) ((Activity) context).findViewById(android.R.id.content)           .getRootView();   mProgressBar = new ProgressBar(context, null, android.R.attr.progressBarStyleLarge);   mProgressBar.setIndeterminate(true);   RelativeLayout.LayoutParams params = new           RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT,           RelativeLayout.LayoutParams.MATCH_PARENT);   RelativeLayout rl = new RelativeLayout(context);   rl.setGravity(Gravity.CENTER);   rl.addView(mProgressBar);   layout.addView(rl, params);   hide(); } Next is used dynamically created Relative Layout object and setup the parameters for width and height as MATCH_PARENT. Setting gravity of the layout to center and added the progress bar view on it using the addView method. So basically we have a progress bar ready and we dynamically created a relative layout and added the view over it. The function used in setting up the views and progress bar are from AOSP only. After that a Progressbar is set, we now need functions to show and hide the progress bar in the code. Created two functions show() and hide(). public void show() {   mProgressBar.setVisibility(View.VISIBLE); } public void hide() {   mProgressBar.setVisibility(View.INVISIBLE); } These functions set the visibility of the the progress bar. Usage: Now in any class we can create object of our Progressbar handler class pass the context on it and use the show() and hide() methods wherever we want to show this and hide. Below is the code snippet to show the illustration. phimpmeProgressBarHandler = new PhimpmeProgressBarHandler(this); phimpmeProgressBarHandler.show(); phimpmeProgressBarHandler.hide(); Snackbar Handler To do this, I created a separate class as Snackbar Handler. What we can do is to create a static function show() and inside the declaration, we can create an object of Snackbar and apply the styles to that. As you can see in the code snippet below, I Created a static function with parameters such as View (to take the view instance), String (to show the message) and duration  of the Snackbar. Set Up the text, textsize and action on the snackbar. An “OK” action is predefined in the function only. public static void show(View view, String text, int duration) {   final…

Continue ReadingCommon Utility classes Progress Bar and Snack Bar in Phimpme Android
Read more about the article Selecting Best persistent storage for Phimpme Android and how to use it

Selecting Best persistent storage for Phimpme Android and how to use it

As we are progressing in our Phimpme Android app. I added account manager part which deals with connecting all other accounts to phimpme. Showing a list of connected accounts. We need a persistent storage to store all the details such as username, full name, profile image url, access token (to access API). I researched on various Object Relation mapping (ORMs) such as: DBFlow: https://github.com/Raizlabs/DBFlow GreenDAO: https://github.com/greenrobot/greenDAO SugarORM: http://satyan.github.io/sugar/ Requery: https://github.com/requery/requery and other NoSQL databases such as Realm Database : https://github.com/realm/realm-java. After reading a lot from some blogs on the benchmarking of these ORMs and database, I came to know that Realm database is quite better in terms of Speed of writing data and ease of use. Steps to integrate Realm Database: Installation of Realm database in android Following these steps https://realm.io/docs/java/latest/#installation quickly setup realm in android. Add classpath "io.realm:realm-gradle-plugin:3.3.2" in Project level build.gradle file and Add apply plugin: 'realm-android' in app level build.gradle, That’s it for using Realm Generating required Realm models Firstly, make sure what you need to store in your database. In case of phimpme, I first go through the account section and noted down what needs to be there.  Profile image URL, username, full name, account indicator image name. Below image illustrate this better. This is the Realm Model class I made in Kotlin to store name, username and access token for accessing API. open class AccountDatabase(       @PrimaryKey var name: String = "",       var username: String = "",       var token: String = "" ) : RealmObject() Writing data in database In Account manager, I create a add account option from where a dialog appear with a list of accounts. Currently, Twitter is working, when onSuccess function invoke in AccountPickerFragment I start a twitter session and store values in database. Writing data in database: // Begin realm transaction realm.beginTransaction(); // Creating Realm object for AccountDatabase Class account = realm.createObject(AccountDatabase.class,       accountsList[0]); account.setUsername(session.getUserName()); account.setToken(String.valueOf(session.getAuthToken())); realm.commitTransaction(); Begin and commit block in necessary. There is one more way of doing this is using execute function in Realm Use Separate Database Helper class for Database operations It’s good to use a separate class for all the Database operations needed in the project. I created a DatabaseHelper Class and added a function to query the result needed. Query the database public RealmResults<AccountDatabase> fetchAccountDetails(){   return realm.where(AccountDatabase.class).findAll(); } It give all of the results, stored in the database like below Problems I faced with annotation processor while using Kotlin and Realm together The Kotlin annotation processor not running due to the plugins wrong order. This issue https://github.com/realm/realm-java/pull/2568 helped me in solving that. I addded apply plugin: 'kotlin-kapt'. In app gradle file and shift apply plugin: 'realm-android' In below the order. Resources: Realm for Android (official): https://news.realm.io/news/realm-for-android/ Write in Realm Database: https://realm.io/docs/java/latest/#writes Queries in Realm Database: https://realm.io/docs/java/latest/#queries A detailed Blog post on Realm Database: https://medium.com/@Zhuinden/how-to-use-realm-for-android-like-a-champ-and-how-to-tell-if-youre-doing-it-wrong-ac4f66b7f149  

Continue ReadingSelecting Best persistent storage for Phimpme Android and how to use it
Read more about the article Porting Phimpme Android to Kotlin

Porting Phimpme Android to Kotlin

As we are going ahead in Phimpme Project we are now on verge to start our account manager which deals with sharing images to many platforms right from the app. The account manager will take care of logging In the user. Saving it's important credentials such access token, username etc as required by the API. Google IO ‘17 just passed, and we seen tons of new features, APIs and development tools. One of the them is official support for Kotlin in Android Studio. As stated by the developers at the conference that one best way to work on Kotlin is add today in your project. Because it is compatible with Java, we can work together on both languages in the same project. It is not mandatory for you to shift your entire code to Kotlin to build a project. So starting with the account manager we decided to bring this to our code. It helps in reducing the boilerplate code for example in Phimpme, I created a model for Realm database. open class AccountDatabase(       @PrimaryKey var name: String = "",       var username: String = "",       var token: String = "" ) : RealmObject() That’s all I need to create a model class, no need to create getter and setter property This helps me to get details from getter methods and show on Account Manager Recycler View like below. Step 1 : Upgrade to Android Studio Preview 3.0 Android Studio Preview 3.0 comes up with all new features and Kotlin support. We all upgraded to that. It has a great Android Profiler with advance features for debugging and logcat is now moved separately. This step is not mandatory, you can work on older version of Android Studio as well. Step 2 : Configure Kotlin It’s easy in Android Studio Preview 3.0 to configure Kotlin. Go to Tools → Kotlin → Configure Kotlin in project. What in the configuration It added a classpath dependency in project level build.gradle file classpath"org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version" Added Kotlin plugin apply plugin: 'kotlin-android' Added kotlin std lib in app level build.gradle compile "org.jetbrains.kotlin:kotlin-stdlib-jre7:$kotlin_version" Step 3: How to add Kotlin files Now your project is ready for Kotlin. In Android Studio Preview 3.0 you can create new Kotlin files from the file menu. Also by using Activity template you can select the source language as Java or Kotlin as per your preference. Step 4 : Work with Kotlin There are a lot new features in Kotlin to explore. Some of them are Null Safety : In Kotlin, the type system distinguishes between references that can hold null (nullable references) and those that can not (non-null references). For example, a regular variable of type String cannot hold null. var a: String = "abc" a = null // compilation error To allow nulls, we can declare a variable as nullable string, written String?: var b: String? = "abc" b = null // ok Val and Var are two keywords in Kotlin to declare variables. Val gives you read only variable which is same…

Continue ReadingPorting Phimpme Android to Kotlin
Read more about the article How to use Digital Ocean and Docker to setup Test CMS for Phimpme

How to use Digital Ocean and Docker to setup Test CMS for Phimpme

One of the core feature of Phimpme app is sharing images to other different accounts, including various open source CMS such as Wordpress, Drupal etc and other open source data storage account such as OwnCloud, NextCloud etc. One can not have everything at place, but for development and testing purpose it is required in our end. So problem I was facing to get things done in most optimize way. I thought setting things on hosted server would be good, because it saves lots of time in setting locally in our system, adding all the dependencies. And also we cannot share the account as it is limited to our local environment. Digital Ocean caught my attention in providing hosting service. It is very easy to use with their droplet creation. Select as per your system requirement and service requirement, the droplet will be ready in few moments and we can use it anywhere. Note: DigitalOcean is a paid service. Student can use Github Education Pack for free credits on Digital Ocean. I used the same. I currently worked on Nextcloud integration so here in this blog I will tell how to quickly create nextcloud server using Digital Ocean and Docker. Step 1: Creating Droplet DigitalOcean completely work on droplets and one can anytime create and destroy different droplets associated with their account. Choose an Image So there are three options of choosing the image of Droplet. Distributions : Which is other operating systems you want to use One Click app: It is a very good feature as it creates everything for use in just one click. But again, it doesn’t provide everything, like there is no NextCloud. That’s why I used docker to take its image. Snapshots: This is if you saved your droplet already, so it will pick it and creates similar to the saved image. Here I selected Docker from one-click apps section. Selecting the size This is for selecting the size of the server we are creating, For small development purpose $5 plan is good. There is a good thing in DigitalOcean as it didn’t charge on the monthly basis to the use. It works on hourly basis and charge according to that. Also providing the SSD Disk for fast IO operations. Choose a datacenter Region Add SSH This is very important to add a ssh key. Otherwise you have to setup root password or used the shell they provide. To work on your computer terminal, its good that you setup an ssh key already and it to the account. How to get ssh key in your system: https://help.github.com/ Rename the number of droplet and name of the droplet and create. Now it will show there in your droplet section Step 2: Access the Server As we have already added the ssh key to our droplet. Now we can access it from our terminal. Open the terminal and type this ➜  ~ ssh root@<your IP> It will logged in to you root@docker-512mb-blr1-01:~# Our objective is setting a NextCloud Account.…

Continue ReadingHow to use Digital Ocean and Docker to setup Test CMS for Phimpme
Read more about the article Landing Page for Phimpme Android

Landing Page for Phimpme Android

Landing page for any app is very important for its distribution. Its provide all the relevant informations for the app, its download/ source link and screenshot of the app for preview of its view and features. As our Phimpme app is now reached to a milestone, so we decided to bring out a landing for it. Landing page is a simple static website which gives relevant informations and their links on a page. To develop a landing page, we can use multiple frameworks available for it. For example using Bootstrap, basic pages using html and css. As GitHub provides a free hosting service such as Github pages. I decided to work on jekyll which is easy to customize and hosted with GitHub pages. How I did in Phimpme Search for Open Source theme There are various open source themes present for jekyll, mainly you will get for blogs. I got this awesome app landing page. It fulfils our requirements of showing a screenshot, brief description and links. Create separate branch for Landing page The GitHub pages works from a separate branch. So I firstly created a orphan branch in main Phimpme Repository. And Clear the working directory. Orphan branches are those branch which do not have any commit history. It is highly required that branch should not have any commit history, because that will irrelevant for gh-pages branch. git checkout --orphan gh-pages git rm --cached -r . Test on Fork repo Now rebase your branch with the gh-pages branch created on the main repository. Add the complete jekyll code here. To reflect changes on github.io page. You need to enable that in settings. Enable gh-pages from settings Go to the Settings of your repo Scroll down to gh-pages section Here things are clear, as we need to select the source branch from where the gh-pages is hosted. We can directly choose some open source themes built over jekyll. Also there is a option to add custom domain, such phimp.me in our case. This all I’m writing as per the Developer perspective, where the developer have limited access to the repository and can’t access the settings of main repo. In that case push your code to by selecting the gh-pages base branch. Problems I faced The usual problem any Developer here faces is creating a orphan branch in main repo. This required removing all the files as well. Also to face less problem I recommend using some other editor such as Sublime Text, Atom etc. Or any other IDE other than Android Studio. Because in Android Studio after changing branch, it sync and rebuild again which actually takes lots of time. Resources GitHub Pages: https://pages.github.com/ GitHub Pages guide: https://guides.github.com/features/pages/ Create project pages using command line (Official): https://help.github.com/articles/creating-project-pages-using-the-command-line/ Adding a custom domain: https://help.github.com/articles/adding-or-removing-a-custom-domain-for-your-github-pages-site/  

Continue ReadingLanding Page for Phimpme Android